<template>
  <div>
    <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
      <el-form-item class="query-form-item">
        <el-input
          v-model="filterQuery.ZCBAH"
          placeholder="注册/备案号"
        ></el-input>
      </el-form-item>
      <el-form-item class="query-form-item">
        <el-input
          v-model="filterQuery.ZCBACPMC"
          placeholder="注册/备案产品名称"
        ></el-input>
      </el-form-item>
      <el-form-item class="query-form-item">
        <el-input
          v-model="filterQuery.ZCBACPBS"
          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
      :row-style="{ height: 5 + 'px' }"
      :cell-style="{ padding: 2 + 'px' }"
      style="width: 100%; height: 100%"
    >
      <el-table-column label="序号" type="index" ></el-table-column>
      <el-table-column
        prop="ZCBAH"
        label="注册/备案号"
        width="150"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="ZCBACPMC"
        label="注册/备案产品名称 "
        width="220"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        prop="YLQXGLLB"
        label="医疗器械管理类别 "
        width="120"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="ZCBAR"
        label="注册/备案人"
        width="200"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        prop="SZSF"
        label="所在地区"
        width="140"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        prop="ZCBARZS"
        label="注册/备案人住所 "
        width="200"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="QXLB"
        label="器械类别 "
        width="120"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="QXMLFLBM"
        label="器械目录分类编码 "
        width="120"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="DateApproval"
        label="批准日期"
        width="140"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="DateValiduntil"
        label="有效期至"
        width="140"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="DLRMC"
        label="代理人名称 "
        width="120"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        prop="DLRSZSF"
        label="代理人所在地区"
        width="120"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        prop="DLRZS"
        label="代理人住所"
        width="120"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="SMSFJ"
        label="说明书附件"
        width="180"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="SCDZ"
        label="生产地址"
        width="300"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        prop="ZCBACPYWMC"
        label="注册/备案产品英文名称"
        width="220"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="ZCBACPBS"
        label="注册/备案产品标识 "
        width="140"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="ZCBAZDZDA"
        label="注册/备案证电子档案 "
        width="160"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="CD"
        label="产地 "
        width="120"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="SCGHDQ"
        label="生产国或地区"
        width="120"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="SCCSMC"
        label="生产厂商名称"
        width="120"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="SHFWJG"
        label="售后服务机构"
        width="120"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="GGXH"
        label="规格型号"
        width="200"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="JGJZC"
        label="结构及组成"
        width="300"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        prop="Scopeofapplication"
        label="适用范围"
        width="250"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="Othercontents"
        label="其他内容"
        width="120"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="备注"
        width="120"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
        :show-overflow-tooltip="true"
      >
        <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
      :title="formMap[formName]"
      :visible.sync="addDialogVisible"
      width="95%"
      v-if="addDialogVisible"
    >
      <modifyRC
        :registertDetail="registertDetail"
        v-on:closeModifyRegister="closeModifyRegister"
      ></modifyRC>
    </el-dialog>

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

<script>
import {
  listEnterpriseCert,
  addEnterpriseCert,
  modifyEnterpriseCert,
  deleteEnterpriseCert,
} from "../../api/basic/registerCert";
import store from "../../store/index";

import modifyRC from "./modifyRegisterCert";

export default {
  data() {
    return {
      filterQuery: {
        ZCBAH: "",
        ZCBACPMC: "",
        ZCBACPBS: "",
        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,
      registertDetail: {
        ZCBACPBS: "",
        YLQXGLLB: "",
        ZCBAR: "",
        SZGJ: "",
        SZSF: "",
        SZDS: "",
        SZQX: "",
        ZCBARZS: "",
        QXLB: "",
        QXMLFLBM: "",
        DLRMC: "",
        DLRGJ: "",
        DLRSZSF: "",
        DLRSZDS: "",
        DLRSZQX: "",
        DLRZS: "",
        SMSFJ: "",
        SCDZ: "",
        ZCBAZDZDA: "",
        CD: "",
        SCGHDQ: "",
        SCCSMC: "",
        SHFWJG: "",
        GGXH: "",
        JGJZC: "",
        productOldCode: "",
        productOldName: "",
        QXMLFLMC: "",
        DateApproval: "",
        DateValiduntil: "",
        Scopeofapplication: "",
        Othercontents: "",
        remarks: "",
        SMSFJPath: "",
        SMSFJFlieType: "",
        ZCBAZDZDAPath: "",
        ZCBAZDZDAFileType: "",
        Reserved1: "",
        SYS_CreatedBy: "",
        SYS_REPLACEMENT: "",
        SYS_POSTN: "",
        SYS_DIVISION: "",
        SYS_ORG: "",
        SYS_LAST_UPD_BY: "",
        UDI_Enterprise_FK: "",
        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;
      listEnterpriseCert(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;
        });
    },

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

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

    handleAddClick(row) {
      if (row == null) {
        this.formName = "add";
        this.registertDetail = {
          ZCBACPBS: "",
          YLQXGLLB: "",
          ZCBAR: "",
          SZGJ: "",
          SZSF: "",
          SZDS: "",
          SZQX: "",
          ZCBARZS: "",
          QXLB: "",
          QXMLFLBM: "",
          DLRMC: "",
          DLRGJ: "",
          DLRSZSF: "",
          DLRSZDS: "",
          DLRSZQX: "",
          DLRZS: "",
          SMSFJ: "",
          SCDZ: "",
          ZCBAZDZDA: "",
          CD: "",
          SCGHDQ: "",
          SCCSMC: "",
          SHFWJG: "",
          GGXH: "",
          JGJZC: "",
          productOldCode: "",
          productOldName: "",
          QXMLFLMC: "",
          DateApproval: "",
          DateValiduntil: "",
          Scopeofapplication: "",
          Othercontents: "",
          remarks: "",
          SMSFJPath: "",
          SMSFJFlieType: "",
          ZCBAZDZDAPath: "",
          ZCBAZDZDAFileType: "",
          Reserved1: "",
          SYS_CreatedBy: "",
          SYS_REPLACEMENT: "",
          SYS_POSTN: "",
          SYS_DIVISION: "",
          SYS_ORG: "",
          SYS_LAST_UPD_BY: "",
          UDI_Enterprise_FK: "",
        };
      } else {
        this.registertDetail = row;
        this.formName = "edit";
      }
      this.addDialogVisible = true;
    },

    closeModifyRegister(val) {
      this.addDialogVisible = false;
      if (val) {
        this.$message.success("保存成功！");
        this.getList();
      } 
    },

    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: {
    modifyRC,
  },
  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>

