<template>
  <div>
    <el-form :inline="true" :model="query" class="query-form" size="mini">
      <el-form-item class="query-form-item">
        <el-input
          v-model="filterQuery.coName"
          placeholder="产品通用名"
        ></el-input>
      </el-form-item>
      <el-form-item class="query-form-item">
        <el-input v-model="filterQuery.unit" placeholder="生产企业"></el-input>
      </el-form-item>
      <el-form-item class="query-form-item">
        <el-input
          v-model="filterQuery.nameCode"
          placeholder="产品编码"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onReset"
          ></el-button>
          <el-button type="primary" icon="search" @click="getList"
            >查询</el-button
          >
          <el-button type="primary" icon="search" @click="intentDetail"
            >选入药品信息</el-button
          >
          <!-- <el-button type="primary" icon="search" @click="getList"
            >导出</el-button
          > -->
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-form :inline="true" :model="query" size="mini">
      <el-form-item class="query-form-item">
        <el-input
          style="width: 250px"
          v-model="addQuery.code"
          placeholder="请输入药监码或扫描药监码"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onResetAdd"
          ></el-button>
          <el-button type="primary" icon="search" @click="addAuthcode"
            >添加药品信息</el-button
          >
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list" style="width: 100%">
      <el-table-column label="产品类型" prop="type" fixed></el-table-column>
      <el-table-column label="生产企业" prop="unit" fixed></el-table-column>
      <el-table-column label="产品通用名" prop="coName" fixed></el-table-column>
      <el-table-column label="剂型" prop="form" fixed></el-table-column>
      <el-table-column label="制剂规格" prop="formSpec" fixed></el-table-column>
      <el-table-column label="包装规格" prop="packSpec" fixed></el-table-column>
      <el-table-column label="批准文号" prop="authCode" fixed></el-table-column>
      <el-table-column label="商品名" prop="name" fixed></el-table-column>
      <el-table-column label="产品编码" prop="nameCode" fixed></el-table-column>
      <el-table-column
        label="包装比例"
        prop="packRatio"
        fixed
      ></el-table-column>
      <el-table-column
        label="包装层级"
        prop="packLevel"
        fixed
      ></el-table-column>

      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.stop="handleModifyClick(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click.native.stop="deleteDialog(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="产品信息编辑"
      :visible.sync="editDialogVisible"
      width="70%"
      v-if="editDialogVisible"
    >
      <el-form
        :model="editQuery"
        :rules="rules"
        ref="editQuery"
        label-width="100px"
      >
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>产品编码:&nbsp;</span>
              </div>
              <el-form-item prop="nameCode">
                <el-input
                  style="width: 200px"
                  :disabled="true"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="editQuery.nameCode"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>包含最小销售包装数量:&nbsp;</span>
              </div>
              <el-form-item prop="bhzxxsbzsl">
                <el-input
                  style="width: 200px"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="editQuery.bhzxxsbzsl"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>包装比例:&nbsp;</span>
              </div>

              <el-form-item prop="packRatio">
                <el-input
                  style="width: 200px"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="editQuery.packRatio"
                  @input="change()"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>包装级别:&nbsp;</span>
              </div>
              <el-form-item prop="packLevel">
                <el-input
                  style="width: 200px"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="editQuery.packLevel"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>计量单位/包装层级:&nbsp;</span>
              </div>

              <el-form-item prop="bzcj">
                <el-input
                  style="width: 200px"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="editQuery.bzcj"
                  @input="change()"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>包含下级包装数量:&nbsp;</span>
              </div>
              <el-form-item prop="bhxjsl">
                <el-input
                  style="width: 200px"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="editQuery.bhxjsl"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>包含下级产品编码:&nbsp;</span>
              </div>

              <el-form-item prop="bhxjcpbm">
                <el-input
                  style="width: 200px"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="editQuery.bhxjcpbm"
                  @input="change()"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>

          <el-col :span="10" class="el-col">
            <div class="text item">
              <div class="itemTag">
                <span>最小包装单元内包含使用单元数量:&nbsp;</span>
              </div>
              <el-form-item prop="zxxsbzbhsydysl">
                <el-input
                  style="width: 200px"
                  :disabled="!checked"
                  size="small"
                  splaceholder="请输入内容"
                  v-model="editQuery.zxxsbzbhsydysl"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="10" class="el-col">
            <el-form-item prop="name">
              <el-checkbox v-model="checked" class="text item itemTag"
                >以使用单元数量入库</el-checkbox
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div style="text-align: center">
        <el-button
          type="primary"
          size="small"
          icon="search"
          @click="onAddSubmit"
          >提交</el-button
        >
        <el-button
          type="primary"
          size="small"
          icon="search"
          @click="cancelDialog"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="选入药品信息"
      :visible.sync="selectDrugDialogVisible"
      width="85%"
      v-if="selectDrugDialogVisible"
    >
      <selectDrug v-on:closeMain="closeMain"></selectDrug>
    </el-dialog>

    <el-pagination
      :page-size="query.limit"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import {
  getProductInfos,
  deleteProductInfos,
  updateProductInfos,
  addByCode,
} from "../../api/receipts/productInfo";
import selectDrug from "./drugRelevance";
export default {
  data() {
    return {
      query: {
        page: 1,
        limit: 20,
      },
      addQuery: {
        code: "",
      },
      filterQuery: {
        unit: "",
        coName: "",
        nameCode: "",
        page: 1,
        limit: 20,
        addType: 2,
      },
      editQuery: null,
      checked: false,
      editDialogVisible: false,
      selectDrugDialogVisible: false,
      list: [],
      total: 0,
      multipleSelection: [],
    };
  },

  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        unit: "",
        coName: "",
        nameCode: "",
        page: 1,
        limit: 20,
        addType: 2,
      };
      this.getList();
    },

    onResetAdd() {
      this.addQuery = {
        code: "",
      };
    },

    getList() {
      this.loading = true;
      getProductInfos(this.filterQuery)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },

    addAuthcode() {
      this.loading = true;
      addByCode(this.addQuery)
        .then((response) => {
          if (response.code == 20000) {
            this.loading = false;
            this.$message.success("添加成功");
            this.getList();
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    deleteOrders(data) {
      this.loading = true;
      let tquery = {
        id: data.id + "",
      };

      deleteProductInfos(tquery)
        .then((response) => {
          this.getList();
          this.$message({
            type: "success",
            message: "删除成功！",
          });
        })
        .catch(() => {});
    },

    cancelDialog() {
      this.editDialogVisible = false;
    },

    handleModifyClick(row) {
      this.editDialogVisible = true;
      this.editQuery = row;
    },

    onAddSubmit() {
      updateProductInfos(this.editQuery)
        .then((response) => {
          this.loading = false;
          this.getList();
          this.cancelDialog();
        })
        .catch(() => {
          this.loading = false;
          this.cancelDialog();
        });
    },

    deleteDialog(rowId) {
      this.$confirm("此操作将永久删除该产品信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteOrders(rowId);
        })
        .catch(() => {});
    },

    closeMain(val) {
      this.selectDrugDialogVisible = false;
      if (val) {
        this.$message.success("添加成功！");
        this.getList();
      } else {
        this.$message.error("添加失败！");
      }
    },
    exportTxt() {},

    intentDetail() {
      // this.$router.push({ path: "../product/drugrevance" });
      this.selectDrugDialogVisible = true;
      //  this.$router.push({name:'home',query: {id:'1'}})
    },

    handleSelectionChange(val) {
      console.log("----" + val);
      this.multipleSelection = val;
    },

    handleCurrentChange(val) {
      this.filterQuery.page = val;
      this.getList();
    },
  },
  mounted() {},
  components: {
    selectDrug,
  },

  created() {
    this.getList();
  },
};
</script>