<template>
  <div>
    <el-card class="el-card">
      <el-form
        :inline="true"
        :model="filterQuery"
        style="display: flex"
        size="mini"
      >
        <el-form-item class="query-form-item">
          <el-input
            v-model="filterQuery.productName"
            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.native="handleForm(null)"
              >新增产品</el-button
            >
          </el-button-group>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        :data="list"
        highlight-current-row
        style="width: 100%"
        :row-style="{ height: 5 + 'px' }"
        :cell-style="{ padding: 2 + 'px' }"
        @row-click="intentDetail"
      >
        <el-table-column
          label="序号"
          type="index"
          width="120"
        ></el-table-column>

        <el-table-column
          label="器械通用名称"
          prop="productName"
        ></el-table-column>
        <el-table-column label="备注" prop="Text1"></el-table-column>

        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native="handleForm(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="formMap[formName]"
        :visible.sync="formVisible"
        width="35%"
        top="5vh"
      >
        <el-form :model="editQuery" ref="dataForm">
          <el-row :gutter="20" class="el-row" type="flex">
            <el-col :span="4">
              <div class="edit-text">
                <span>器械通用名称:</span>
              </div>
            </el-col>
            <el-col :span="16">
              <el-form-item prop="productName">
                <el-autocomplete
                  class="inline-input"
                  v-model="editQuery.productName"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入内容"
                  @select="handleSelect"
                ></el-autocomplete>

                <!-- <el-input
                  v-model="editQuery.productName"
                  size="small"
                  style="width: 80%"
                ></el-input> -->
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20" class="el-row" type="flex">
            <el-col :span="4">
              <div class="edit-text">
                <span>备注:</span>
              </div>
            </el-col>
            <el-col :span="16">
              <el-form-item prop="Text1">
                <el-input
                  type="textarea"
                  v-model="editQuery.Text1"
                  style="width: 80%"
                  size="small"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click.native="onAddSubmit()"
            >保存</el-button
          >
          <el-button @click.native="cancelAdd" size="small">取消</el-button>
        </div>
      </el-dialog>
      <el-pagination
        :page-size="filterQuery.limit"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
    </el-card>

    <el-card class="el-card">
      <el-form
        :inline="true"
        :model="subFilterQuery"
        style="display: flex"
        size="mini"
      >
        <el-form-item class="query-form-item">
          <el-input
            v-model="subFilterQuery.specification"
            placeholder="规格型号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="onSubReset"
            ></el-button>
            <el-button type="primary" icon="search" @click="getSubList"
              >查询</el-button
            >
            <el-button
              type="primary"
              icon="search"
              @click.native="handleAddClick(null)"
              >新增规格型号</el-button
            >
          </el-button-group>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="subList" border style="width: 100%">
         <el-table-column label="序号" type="index" ></el-table-column>
        <!-- <el-table-column prop="status" label="状态 " width="100">
          <template slot-scope="scope">
            <span>{{ postStatus[scope.row.status] }}</span>
          </template>
        </el-table-column> -->

        <el-table-column
          prop="mainProductName"
          :show-overflow-tooltip="true"
          label="器械通用名称"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="specification"
          label="规格型号"
          :show-overflow-tooltip="true"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="deviceDescription"
          :show-overflow-tooltip="true"
          label="产品描述"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="deviceType" label="器械类别" width="100">
        </el-table-column>
        <el-table-column prop="productCode" label="分类编码" width="100">
        </el-table-column>

        <el-table-column prop="productType" label="产品类别" width="100">
        </el-table-column>
        <el-table-column
          prop="regcardCodes"
          label="注册证号/备案凭证号"
          width="140"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="注册/备案凭人名称"
          width="140"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column prop="deviceEndDate" label="退市日期" width="120">
        </el-table-column>
        <el-table-column prop="SPTM" label="商品条码" width="140">
        </el-table-column>
        <el-table-column prop="YBBM" label="医保编码" width="120">
        </el-table-column>
        <el-table-column
          prop="brandName"
          label="商品名称"
          width="120"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="catalogNumber"
          label="产品货号或编号"
          width="120"
        >
        </el-table-column>

        <el-table-column
          prop="businessLicense"
          label="统一社会信用代码"
          width="170"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
          <template slot-scope="scope">
            <el-button @click="copyClick(scope.row)" type="text" size="small"
              >复制</el-button
            >
            <el-button
              @click="handleAddClick(scope.row)"
              type="text"
              size="small"
           
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
                 v-bind:disabled="scope.row.status != 1"
              @click.native.stop="deleteSubDialog(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        :title="formSubMap[formSubName]"
        :visible.sync="addDialogVisible"
        width="95%"
        v-if="addDialogVisible"
      >
        <modifySp
          :productDetail="productDetail"
          v-on:closeModifySub="closeModifySub"
        ></modifySp>
      </el-dialog>

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

<script>
import {
  listUdiProduct,
  addUdiProduct,
  modifyUdiProduct,
  deleteUdiProduct,
} from "../../api/publish/udiProduct";

import {
  listUdiSubProduct,
  addUdiSubProduct,
  modifyUdiSubProduct,
  deleteUdiSubProduct,
} from "../../api/publish/udiSubProduct";
import store from "../../store/index";
import modifySp from "./modifySubProduct";
import { listEnterpriseCert } from "../../api/basic/registerCert";

export default {
  data() {
    return {
      filterQuery: {
        productName: "",
        page: 1,
        limit: 5,
        // customerId: store.getters.customerId,
      },

      currentProductName: "",

      subFilterQuery: {
        specification: "",
        productId: "",
        page: 1,
        limit: 10,
        // customerId: store.getters.customerId,
      },
      editQuery: {
        productName: "",
        Text1: "",
        UDI_ProductOID: "",
      },
      formVisible: false,
      list: [],
      total: 0,

      subList: [],
      subTotal: 0,
      formName: null,
      formSubName: null,
      formMap: {
        add: "新增产品信息",
        edit: "编辑产品信息",
      },
      formSubMap: {
        add: "新增规格",
        edit: "编辑规格",
      },
      rules: {
        productName: [
          { required: true, message: "请输入产品名称", trigger: "blur" },
        ],
      },
      postStatus: {
        1: "未上传",
        2: "已上传未提交",
        3: "已上传已提交",
      },
      productId: "",
      addDialogVisible: false,
      productDetail: {
        UDI_SubProductOID: "",
        brandName: "",
        productOldCode: "",
        productCode: "",
        companyName: "",
        companyGBName: "",
        regcardCodes: "",
        businessLicense: "",
        deviceType: "",
        productType: "",
        deviceKit: "",
        specification: "",
        deviceDescription: "",
        catalogNumber: "",
        isMRISafety: "",
        MRISafetyInfo: "",
        singleUse: "",
        reuseTimes: "",
        isDeviceSterile: "",
        isSterilizationUse: "",
        sterilizationMethod: "",
        otherInfoLink: "",
        YBBM: "",
        deviceEndDate: "",
        specialText: "",
        clinicalSizeText: "",
        SPTM: "",
        Quality: "",
        QualityUnit: "",
        productOldName: "",
        productName: "",
        deviceclinicals: [],
        devicestorages: [],
        UDI_Product_FK: "",
        TYMC: this.currentProductName,
      },
      certValue: [],
    };
  },

  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        productName: "",
        page: 1,
        limit: 5,
        // customerId: store.getters.customerId,
      };
      // this.getList();
    },

    onSubReset() {
      this.subFilterQuery.specification = "";
      //  {
      //   specification: "",
      //   productId: this.productId,
      //   page: 1,
      //   limit: 10,
      //   // customerId: store.getters.customerId,
      // };
      // this.getSubList();
    },

    querySearch(queryString, cb) {
      console.log(queryString);
      var restaurants = this.certValue;
      console.log(this.certValue);
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据

      var data = [];
      for (var i = 0; i < results.length; i++) {
        let query = {
          value: results[i].ZCBACPMC,
        };
        data.push(query);
      }
      console.log(data);
      cb(data);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.ZCBACPMC.indexOf(queryString) === 0;
      };
    },
    handleSelect(item) {
      console.log(item);
    },

    getList() {
      this.loading = true;
      listUdiProduct(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;
        });
    },
    getSubList() {
      this.loading = true;
      if (this.subFilterQuery.productId == "") {
        this.$message.warning("请选择产品");
      } else {
        listUdiSubProduct(this.subFilterQuery)
          .then((response) => {
            this.loading = false;
            this.subList = response.data.list || [];
            this.subTotal = response.data.total || 0;
          })
          .catch(() => {
            this.loading = false;
            this.subList = [];
            this.subTotal = 0;
          });
      }
    },
    closeModifySub(val) {
      this.addDialogVisible = false;
      if (val) {
        this.$message.success("保存成功！");
        this.getSubList();
      } else if (val == null) {
      } else {
        this.$message.error("保存失败！");
      }
    },
    //父类操作

    handleForm(row) {
      console.log(row);
      this.formName = "add";
      if (row !== null) {
        if (row.status == 1) {
          this.formName = "edit";
          this.editQuery.productName = row.productName;
          this.editQuery.Text1 = row.Text1;
          this.editQuery.UDI_ProductOID = row.UDI_ProductOID;
          console.log(
            this.editQuery.UDI_ProductOID + "---" + row.udi_ProductOID
          );
          this.formVisible = true;
        } else {
          this.$message.warning("子类信息已有提交，不能修改");
        }
      } else {
        this.formVisible = true;
      }
    },

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

      deleteUdiProduct(tquery)
        .then((response) => {
          if (response.code == 20000) {
            this.$message.success("删除成功！");
            this.getList();
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {});
    },

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

      deleteUdiSubProduct(tquery)
        .then((response) => {
          if (response.code == 20000) {
            this.$message.success("删除成功！");
            this.getSubList();
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {});
    },

    cancelAdd() {
      this.formVisible = false;
      this.addDialogVisible = false;
    },
    onAddSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.cancelAdd();
          if (this.formName == "edit") {
            modifyUdiProduct(this.editQuery)
              .then((response) => {
                if (response.code == 20000) {
                  this.loading = false;
                  this.getList();
                } else {
                  this.$message.error(response.message);
                }
              })
              .catch(() => {
                this.loading = false;
              });
          } else {
            addUdiProduct(this.editQuery)
              .then((response) => {
                if (response.code == 20000) {
                  this.loading = false;
                  this.getList();
                } else {
                  this.$message.error(response.message);
                }
              })
              .catch(() => {
                this.loading = false;
              });
          }
        }
      });
    },

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

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

    handleCurrentChange(val) {
      this.filterQuery.page = val;
      this.getList();
    },

    intentDetail(row) {
      this.subFilterQuery.productId = row.UDI_ProductOID;
      this.currentProductName = row.productName;
      this.productDetail.TYMC = this.currentProductName;
      this.getSubList();
    },

    //子类操作
    handleAddClick(row) {
      if (row == null) {
        this.productDetail = {
          UDI_SubProductOID: "",
          brandName: "",
          productOldCode: "",
          productCode: "",
          companyName: "",
          companyGBName: "",
          regcardCodes: "",
          businessLicense: "",
          deviceType: "",
          productType: "",
          deviceKit: "",
          specification: "",
          deviceDescription: "",
          catalogNumber: "",
          isMRISafety: "",
          MRISafetyInfo: "",
          singleUse: "",
          reuseTimes: "",
          isDeviceSterile: "",
          isSterilizationUse: "",
          sterilizationMethod: "",
          otherInfoLink: "",
          YBBM: "",
          deviceEndDate: "",
          specialText: "",
          clinicalSizeText: "",
          SPTM: "",
          Quality: "",
          QualityUnit: "",
          productOldName: "",
          productName: "",
          UDI_Product_FK: "",
          TYMC: this.currentProductName,
        };
        if (this.subFilterQuery.productId == "") {
          this.$message.warning("请选择产品");
        } else {
          this.productDetail.UDI_Product_FK = this.subFilterQuery.productId;
          this.addDialogVisible = true;
          this.formSubName = "add";
        }
      } else {
        this.productDetail = row;
        this.productDetail.TYMC = this.currentProductName;
        this.addDialogVisible = true;
        this.formSubName = "edit";
      }
    },

    copyClick(row) {
      this.loading = true;
      let postQuery = {
        udiSubProductEntity: row,
      };
      postQuery.udiSubProductEntity.SPTM =null;
      console.log(postQuery);
      addUdiSubProduct(postQuery)
        .then((response) => {
          if (response.code == 20000) {
            this.getSubList();
            this.$message.success("复制成功");
          } else {
            this.$message.error(response.message);
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.$message.error(response.message);
        });
    },
    handleSubCurrentChange(val) {
      this.subFilterQuery.page = val;
      this.getSubList();
    },

    //获取注册证列表
    getCertList() {
      this.loading = true;
      let tquery = {
        page: 1,
        limit: 100,
      };
      listEnterpriseCert(tquery).then((response) => {
        this.loading = false;
        this.certValue = response.data.list || [];
        // for(var i = 0;i<data.length;i++){
        //   this.certValue[i] =data.ZCBACPMC;
        // }
      });
    },
  },
  mounted() {},
  components: {
    modifySp,
  },
  created() {
    this.getList();
    this.getCertList();
  },
};
</script>
<style>
.edit-text {
  width: 100%;
  font-size: 12px;
  margin-top: 12px;
  font-family: "Microsoft YaHei";
  color: #000000;
}
</style>