<template>
  <div>
    <el-form
      :model="tempInfo"
      ref="planForm"
      label-width="237px"
      class="grid-form-class"
    >
      <div class="common-card">
        <!-- <h3>计划参数</h3> -->

        <div class="form-body">
          <div class="flex-css">
            <el-form-item
              label="模板名称"
              prop="tmplName"
              :rules="rules.required"
            >
              <el-input
                v-model="tempInfo.tmplName"
                placeholder="请输入模板名称"
              />
            </el-form-item>
          </div>
        </div>
      </div>

      <!--列表-->
      <div class="common-card">
        <h3>药品明细</h3>
        <div class="right-type">
          <el-button
            class="lake-Blue"
            type="primary"
            icon="el-icon-plus"
            @click="handleAdd()"
            >添加药品
          </el-button>
        </div>
        <el-table
          v-loading="listLoading"
          element-loading-text="加载中"
          :data="tempInfo.detlList"
          fit
          stripe
          border
        >
          <template slot="empty">
            <img src="@/assets/nopage.png" alt />
            <p>暂无数据</p>
          </template>
          <el-table-column
            fixed
            type="index"
            label="序号"
            width="60"
          ></el-table-column>
          <el-table-column label="药品编码" prop="drugListId" width="150" />
          <el-table-column label="药品名称" min-width="300">
            <template slot-scope="scope">
              <div class="drug-name">
                <el-tag v-if="scope.row.drugName">
                  {{ scope.row.drugName }}
                </el-tag>
                {{ "【" + scope.row.dosformName + "】" }}
                <el-tag v-if="scope.row.essdrugType">
                  {{
                    scope.row.essdrugType === "0"
                      ? "非基药"
                      : scope.row.essdrugType === "1"
                      ? "基药"
                      : scope.row.essdrugType
                  }}
                </el-tag>
                <br />
                {{ "生产厂家 【" + scope.row.prodentpName + "】" }}
                <br />
                {{
                  "药品规格 【" +
                  scope.row.specName +
                  "*" +
                  scope.row.convrat +
                  scope.row.prepunt +
                  "/" +
                  scope.row.pacUnt +
                  "】"
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订货数量" width="150">
            <template #header>
              <span style="color: red; margin-right: 4px">*</span>
              <span>订货数量</span>
            </template>
            <template slot-scope="scope">
              <el-form-item
                label-width="0"
                :prop="'detlList.' + scope.$index + '.ordCnt'"
                :rules="rules.InterNum"
              >
                <el-input
                  v-model="scope.row.ordCnt"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="当前库存" prop="invCnt" width="150" />
          <el-table-column label="最低库存" prop="lowInv" width="150" />
          <el-table-column label="最高库存" prop="highInv" width="150" />
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                class="red"
                type="text"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="foot-button">
        <el-button type="info" @click="goback">返回</el-button>
        <el-button type="success" @click="save()" :loading="saveLoading"
          >保存
        </el-button>
      </div>
    </el-form>

    <!--添加药品-->
    <el-dialog
      title="选择药品"
      :visible.sync="dialogDrugFormVisible"
      width="1000px"
    >
      <!--条件-->
      <el-form :model="drugListQuery" ref="queryForm" :inline="true">
        <el-form-item label="药品信息">
          <el-input
            v-model="drugListQuery.drugInfo"
            placeholder="请输入药品名称/编码/生产企业"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDrugData('search')"
            >查询
          </el-button>
          <el-button @click="drugReset()">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="drugTable"
        v-loading="drugListLoading"
        row-key="drugListId"
        element-loading-text="加载中"
        :data="drugList"
        fit
        stripe
        border
        @selection-change="handleSelectionChange"
      >
        <template slot="empty">
          <img src="@/assets/nopage.png" alt />
          <p>暂无数据</p>
        </template>
        <el-table-column
          type="selection"
          :selectable="selected"
          :reserve-selection="true"
          width="55"
        >
        </el-table-column>
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="60"
        ></el-table-column>
        <el-table-column label="药品编码" prop="drugListId" width="200" />
        <el-table-column label="药品名称" prop="drugName" min-width="300">
          <template slot-scope="scope">
            <div class="drug-name">
              <el-tag v-if="scope.row.drugName">
                {{ scope.row.drugName }}
              </el-tag>
              {{ "【" + scope.row.dosformName + "】" }}
              <el-tag v-if="scope.row.essdrugType">
                {{
                  scope.row.essdrugType === "0"
                    ? "非基药"
                    : scope.row.essdrugType === "1"
                    ? "基药"
                    : scope.row.essdrugType
                }}
              </el-tag>
              <br />
              {{ "生产厂家 【" + scope.row.prodentpName + "】" }}
              <br />
              {{
                "药品规格 【" +
                scope.row.specName +
                "*" +
                scope.row.convrat +
                scope.row.prepunt +
                "/" +
                scope.row.pacUnt +
                "】"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="当前库存" width="150" prop="invCnt" />
        <!-- <el-table-column label="采购价" width="150" prop="purcPric" /> -->
      </el-table>

      <!--分页-->
      <yl-pagination
        v-show="drugTotal > 0"
        :total="drugTotal"
        :page.sync="drugListQuery.current"
        :limit.sync="drugListQuery.size"
        @pagination="getDrugData"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDrugFormVisible = false">取消</el-button>
        <el-button type="primary" @click="commitData()"> 确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import rules from "@/utils/rules";
import { getGrpDrugListPassed } from "@/api/drugCataManage/index";
import {
  getTempDetlList,
  saveTmpl
} from "@/api/purchasing-management/plan-template-maintenance";
export default {
  components: { ylPagination },
  data() {
    return {
      saveLoading: false,
      amount: {
        num: 0,
        price: 0
      },
      // 药品多选
      selectData: [],
      rules,
      listLoading: false,
      // 添加药品
      drugListLoading: false,
      drugListQuery: {
        //条件查询
        current: 1,
        size: 10,
        drugInfo: ""
      },
      drugTotal: 0, //分页
      drugList: [],
      dialogDrugFormVisible: false,
      tempInfo: {
        tmplName: "",
        detlList: []
      }
    };
  },

  created() {
    if (this.$route.query.id) {
      this.tempInfo.id = this.$route.query.id;
      this.tempInfo.tmplName = this.$route.query.tmplName;
      this.getData();
    }
  },

  methods: {
    goback() {
      this.$router.go(-1);
    },

    // 复选框禁用
    selected(row) {
      if (
        this.tempInfo.detlList.some((item) => {
          return item.drugListId === row.drugListId;
        })
      ) {
        return false;
      } else {
        return true;
      }
    },

    // 新增目录 多选
    handleSelectionChange(val) {
      this.selectData = val;
    },
    // 计划类型发生改变时
    handleChange(val) {
      this.tempInfo.planPrd = "";
    },

    //获取列表数据
    getData() {
      this.listLoading = true;
      getTempDetlList({ tmplId: this.$route.query.id, size: 9999999 })
        .then((response) => {
          this.tempInfo.detlList = response.data.records;
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
    },

    // 删除
    handleDelete(row) {
      const index = this.tempInfo.detlList.indexOf(row);
      this.tempInfo.detlList.splice(index, 1);
      this.$refs.planForm.clearValidate("detlList." + index + ".ordCnt");
    },

    // 添加药品
    handleAdd() {
      this.dialogDrugFormVisible = true;
      this.$nextTick(() => {
        if (this.$refs.drugTable) {
          this.$refs.drugTable.clearSelection();
          this.selectData = [];
        }
      });
      this.getDrugData();
    },

    //新增药品列表
    getDrugData(type) {
      if (type == "search") {
        this.drugListQuery.current = 1;
      }
      // this.drugListQuery.tmplId = this.tempInfo.id;
      this.drugListLoading = true;
      getGrpDrugListPassed(this.drugListQuery)
        .then((response) => {
          this.drugList = response.data.records;
          this.drugTotal = response.data.total;
          this.drugListLoading = false;
        })
        .catch((err) => {
          this.drugListLoading = false;
        });
    },

    // 重置药品列表
    drugReset() {
      this.drugListQuery.drugInfo = "";
      this.getDrugData();
    },

    // 添加药品确认
    commitData() {
      this.dialogDrugFormVisible = false;
      this.tempInfo.detlList.push(...this.selectData);
    },

    // 处理保存提交数据
    handleTempInfo() {
      let zanInfo = {
        id: this.tempInfo.id,
        tmplName: this.tempInfo.tmplName,
        detlList: []
      };
      this.tempInfo.detlList.forEach((item) => {
        zanInfo.detlList.push({
          id: item.id,
          drugListId: item.drugListId,
          ordCnt: item.ordCnt
        });
      });
      return zanInfo;
    },

    // 保存
    save() {
      this.$refs["planForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确认保存", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.saveLoading = true;
              let zanInfo = this.handleTempInfo();
              saveTmpl(zanInfo)
                .then((response) => {
                  this.$message({
                    message: "保存成功",
                    type: "success"
                  });
                  this.saveLoading = false;
                  this.$router.push({
                    path: "/purchasing-management/plan-template-maintenance"
                  });
                })
                .catch((err) => {
                  this.saveLoading = false;
                });
            })
            .catch(() => {
              this.saveLoading = false;
            });
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
</style>