<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="handleAddClick(null)"
              >新增规格型号</el-button
            >
          </el-button-group>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        :data="list"
        border
        style="width: 100%; height: 100%"
      >
        <el-table-column prop="deviceDescription" label="产品描述" width="150">
        </el-table-column>
        <el-table-column prop="specification" label="规格型号" width="120">
        </el-table-column>
        <el-table-column prop="deviceType" label="器械类别" width="100">
        </el-table-column>
        <el-table-column prop="productType" label="产品类别" width="100">
        </el-table-column>
        <el-table-column prop="productCode" label="分类编码" width="100">
        </el-table-column>
        <el-table-column
          prop="businessLicense"
          label="统一社会信用代码"
          width="170"
        >
        </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">
        </el-table-column>
        <el-table-column
          prop="catalogNumber"
          label="产品货号或编号"
          width="120"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="handleAddClick(scope.row)"
              type="text"
              size="small"
              >修改</el-button
            >
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        :visible.sync="addDialogVisible"
        width="95%"
        v-if="addDialogVisible"
      >
        <modifySp :productDetail="productDetail"></modifySp>
      </el-dialog>

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

<script>
import {
  listUdiSubProduct,
  addUdiSubProduct,
  modifyUdiSubProduct,
  deleteUdiSubProduct,
} from "../../api/publish/udiSubProduct";
import store from "../../store/index";

import modifySp from "./modifySubProduct";

export default {
  data() {
    return {
      filterQuery: {
        specification: "",
        productId: "",
        page: 1,
        limit: 20,
        // customerId: store.getters.customerId,
      },
      editQuery: {
        productName: "",
        Text1: "",
        UDI_ProductOID: "",
      },
      formVisible: false,
      list: [],
      total: 0,
      formName: null,
      loading: false,
      formMap: {
        add: "新增产品信息",
        edit: "编辑产品信息",
      },
      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: [],
      },
      rules: {
        productName: [
          { required: true, message: "请输用户名称", trigger: "blur" },
        ],
      },
    };
  },

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

    getList() {
      this.loading = true;
      listUdiSubProduct(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;
        });
    },
    handleForm(row) {
      this.formVisible = true;
      this.formName = "add";

      if (row !== null) {
        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);
      }
    },

    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(() => {});
    },

    handleAddClick(row) {
      this.addDialogVisible = true;
      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: "",
        };
      } else this.productDetail = row;
    },

    onAddSubmit() {},

    cancelAdd() {
      this.addDialogVisible = false;
    },

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

    handleCurrentChange(val) {
      this.filterQuery.page = val;
      this.getList();
    },
  },
  mounted() {},
  components: {
    modifySp,
  },
  created() {
    let query = this.$route.query;
    this.filterQuery.productId = query.id;
    this.productId = query.id;
    this.getList();
  },
};
</script>
<style>
.edit-text {
  width: 100%;
  font-size: 12px;
  margin-top: 12px;
  font-family: "Microsoft YaHei";
  color: #000000;
}
</style>