
<template>
  <div>
    <el-card class="el-card">
      <el-form
        :model="productDetail"
        ref="productDetail"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              prop="TYMC"
              label="产品通用名称:"
              style="font-weight: bold"
            >
              <el-input
                size="small"
                :disabled="true"
                v-model="productDetail.TYMC"
                style="width: 70%; font-weight: bold"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="regcardCodes" label="注册证号/备案凭证号:">
              <el-select
                v-model="regcardValue"
                multiple
                style="width: 70%"
                @change="intenCertChanged"
                @visible-change="visableChange"
                placeholder="请选择注册证号/备案凭证号"
              >
                <el-option
                  v-for="item in certValue"
                  :key="item.ZCBAH"
                  :label="item.ZCBAH"
                  :value="item.ZCBAH"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="zczcpmc" label="注册/备案产品名称:">
              <el-input
                size="small"
                :disabled="true"
                v-model="zczcpmc"
                style="width: 70%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="companyName" label="注册人/备案人名称:">
              <el-input
                size="small"
                placeholder="请输入注册人/备案人名称"
                v-model="productDetail.companyName"
                style="width: 84.5%"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="companyGBName" label="注册人/备案人英文名称:">
              <el-input
                size="small"
                placeholder="请输入注册人/备案人英文名称"
                v-model="productDetail.companyGBName"
                style="width: 83%"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="deviceType" label="器械类别:">
              <el-select
                size="small"
                v-model="productDetail.deviceType"
                @change="handleDeviceTypeChange"
                style="width: 81%"
                placeholder="请选择器械类别"
              >
                <el-option label="器械" value="器械"></el-option>
                <el-option
                  label="体外诊断试剂"
                  value="体外诊断试剂"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="productOldCode" label="原分类编码:">
              <el-input
                size="small"
                placeholder="请输入原分类编码"
                style="width: 77%"
                v-model="productDetail.productOldCode"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="productName" label="分类编码:">
              <el-input
                size="small"
                v-model="productDetail.productName"
                :disabled="true"
                style="width: 74%"
                @input="change()"
              ></el-input>
              <el-cascader
                ref="myCascader"
                v-model="classifyValue"
                size="small"
                style="width: 5%"
                :options="classifyOptions"
                v-bind:disabled="productDetail.deviceType == ''"
                @change="handleClassifyChange"
              ></el-cascader>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="productType" label="产品类别:">
              <el-select
                size="small"
                v-model="productDetail.productType"
                style="width: 78%"
                placeholder="请选择产品类别"
              >
                <el-option label="耗材" value="耗材"></el-option>
                <el-option label="设备" value="设备"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="deviceKit" label="是否为包类/组套类产品:">
              <el-select
                size="small"
                style="width: 68%"
                v-model="productDetail.deviceKit"
                placeholder="是否为包类/组套类产品"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="nickName" label="商品名称:">
              <el-input
                size="small"
                style="width: 79.5%"
                placeholder="请输入商品名称"
                v-model="productDetail.brandName"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="specification" label="规格型号:">
              <el-input
                size="small"
                placeholder="请输入规格型号"
                v-model="productDetail.specification"
                style="width: 89%"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item prop="deviceDescription" label="产品描述:">
              <el-input
                size="small"
                placeholder="请输入产品描述"
                v-model="productDetail.deviceDescription"
                style="width: 89%"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="catalogNumber" label="产品货号或编号:">
              <el-input
                size="small"
                placeholder="请输入产品货号或编号"
                v-model="productDetail.catalogNumber"
                style="width: 76%"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="isMRISafety" label="是否包含MRI安全信息:">
              <el-select
                size="small"
                v-model="productDetail.isMRISafety"
                :disabled="true"
                style="width: 67%"
                placeholder="是否包含MRI安全信息"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              prop="MRISafetyInfo"
              label="磁共振（MR）安全相关信息:"
            >
              <el-select
                size="small"
                style="width: 63%"
                v-model="productDetail.MRISafetyInfo"
                placeholder="请选择"
              >
                <el-option label="安全" value="1"></el-option>
                <el-option label="不安全" value="2"></el-option>
                <el-option label="条件安全" value="3"></el-option>
                <el-option
                  label="说明书或标签上不包含MR安全性信息"
                  value="4"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="singleUse" label="是否标记为一次性使用:">
              <el-select
                size="small"
                v-model="productDetail.singleUse"
                placeholder="是否标记为一次性使用"
                style="width: 65%"
                @change="isSingleUseChange"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="reuseTimes" label="最大重复使用次数:">
              <el-input
                size="small"
                placeholder="请输入最大重复使用次数"
                v-model="productDetail.reuseTimes"
                v-bind:disabled="productDetail.singleUse == 1"
                style="width: 74%"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="isDeviceSterile" label="是否为无菌包装:">
              <el-select
                size="small"
                v-model="productDetail.isDeviceSterile"
                placeholder="是否为无菌包装"
                style="width: 71.5%"
                @change="isDeviceSterileUseChange"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="isSterilizationUse" label="使用前是否需要灭菌:">
              <el-select
                size="small"
                v-model="productDetail.isSterilizationUse"
                placeholder="使用前是否需要灭菌"
                style="width: 71%"
                @change="isSterilizationUseChange"
                v-bind:disabled="productDetail.isDeviceSterile == 1"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="sterilizationMethod" label="灭菌方式:">
              <el-input
                size="small"
                placeholder="请输入灭菌方式"
                style="width: 80%"
                v-model="productDetail.sterilizationMethod"
                v-bind:disabled="productDetail.isSterilizationUse == 2"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="otherInfoLink" label="其它信息的链接网址:">
              <el-input
                size="small"
                placeholder="请输入其它信息的链接网址"
                v-model="productDetail.otherInfoLink"
                style="width: 72.5%"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="YBBM" label="医保编码:">
              <el-input
                size="small"
                placeholder="请输入医保编码"
                style="width: 80%"
                v-model="productDetail.YBBM"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="deviceEndDate" label="退市日期:">
              <el-date-picker
                v-model="productDetail.deviceEndDate"
                type="date"
                placeholder="选择日期"
                style="width: 83%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="specialText" label="特殊储存或操作条件:">
              <el-input
                size="small"
                placeholder="请输入特殊储存或操作条件"
                style="width: 70%"
                v-model="productDetail.specialText"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="clinicalSizeText" label="特殊尺寸说明:">
              <el-input
                size="small"
                placeholder="请输入特殊尺寸说明"
                v-model="productDetail.clinicalSizeText"
                style="width: 79%"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="SPTM" label="商品条码:">
              <el-input
                size="small"
                placeholder="请输入商品条码"
                style="width: 80%"
                v-model="productDetail.SPTM"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="Quality" label="保质期:">
              <el-input
                size="small"
                placeholder="请输入保质期"
                v-model="productDetail.Quality"
                style="width: 85%"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item prop="QualityUnit" label="保质期单位:">
              <el-input
                size="small"
                placeholder="请输入保质期单位"
                style="width: 78%"
                v-model="productDetail.QualityUnit"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="el-card">
      <div
        slot="header"
        style="font-weight: bold; justify-content: space-between; display: flex"
      >
        <span>存储或操作信息</span>
        <el-button
          type="primary"
          size="small"
          @click="handleAddStrgClick(null, null)"
          >添加</el-button
        >
      </div>
      <el-table :data="srgList" style="width: 100%">
        <el-table-column label="序号" type="index" width="80"></el-table-column>

        <el-table-column
          prop="storageType"
          label="储存或操作条件"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="lowValue"
          label="最低值"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="highValue"
          label="最高值"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="unit"
          label="计量单位"
          width="120"
        ></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              @click="handleAddStrgClick(scope.$index, scope.row)"
              type="text"
              size="small"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteSrgDialog(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="el-card">
      <div
        slot="header"
        style="font-weight: bold; justify-content: space-between; display: flex"
      >
        <span>临床使用尺寸信息</span>
        <el-button
          type="primary"
          size="small"
          @click="handleAddCliClick(null, null)"
          >添加</el-button
        >
      </div>
      <el-table :data="cliList" style="width: 100%">
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column
          prop="LCSYCCLX"
          width="160"
          label="临床使用尺寸类型"
        ></el-table-column>
        <el-table-column
          prop="CCZ"
          label="尺寸值"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="CCDW"
          label="尺寸单位"
          width="120"
        ></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              @click="handleAddCliClick(scope.$index, scope.row)"
              type="text"
              size="small"
              >修改</el-button
            >
            <el-button
              @click="deleteCliDialog(scope.$index, scope.row)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      :title="strgTitle[formName]"
      :visible.sync="strgTitleVisible"
      width="45%"
      :append-to-body="true"
      top="5vh"
    >
      <el-form :model="strgQuery" 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="8">
            <el-form-item prop="storageType">
              <el-input
                v-model="strgQuery.storageType"
                size="small"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="edit-text">
              <span>计量单位:</span>
            </div>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="unit">
              <el-input
                v-model="strgQuery.unit"
                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="8">
            <el-form-item prop="lowValue">
              <el-input
                v-model="strgQuery.lowValue"
                style="width: 80%"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <div class="edit-text">
              <span>最低值:</span>
            </div>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="highValue">
              <el-input
                v-model="strgQuery.highValue"
                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="onSrgSubmit()"
          >保存</el-button
        >
        <el-button @click.native="cancelDialog" size="small">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="cliTitle[formName]"
      :visible.sync="cliTitleVisible"
      width="45%"
      :append-to-body="true"
      top="5vh"
    >
      <el-form :model="cliQuery" ref="cliForm">
        <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="8">
            <el-form-item prop="LCSYCCLX">
              <el-input
                v-model="cliQuery.LCSYCCLX"
                size="small"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="edit-text">
              <span>尺寸值:</span>
            </div>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="unit">
              <el-input
                v-model="cliQuery.CCZ"
                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="8">
            <el-form-item prop="CCDW">
              <el-input
                v-model="cliQuery.CCDW"
                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="onCliSubmit()"
          >保存</el-button
        >
        <el-button @click.native="cancelDialog" size="small">取消</el-button>
      </div>
    </el-dialog>

    <div style="text-align: center; margin-top: 20px">
      <el-button type="primary" size="small" icon="search" @click="postData">{{
        btSaveStr
      }}</el-button>
      <el-button type="primary" size="small" icon="search" @click="cancelModify"
        >取消</el-button
      >
    </div>
  </div>
</template>
<script>
import {
  listCli,
  listSrg,
  listClassify,
  addUdiSubProduct,
  modifyUdiSubProduct,
} from "../../api/publish/udiSubProduct";
import { listEnterpriseCert } from "../../api/basic/registerCert";

export default {
  name: "productDetail",
  props: {
    productDetail: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      query: {
        page: 1,
        limit: 20,
      },
      strgTitle: {
        add: "新增存储或操作信息",
        edit: "编辑存储或操作信息",
      },
      cliTitle: {
        add: "新增临床使用尺寸信息",
        edit: "编辑临床使用尺寸信息",
      },
      strgQuery: {
        UDI_DeviceSrgOID: "", //
        storageType: "", //储存或操作条件
        lowValue: "", //最低值
        highValue: "", //最高值
        unit: "", //计量单位
        UDI_SubProduct_FK: "", //子类信息外键
      },
      cliList: [],
      srgList: [],
      deleteCliList: [],
      deleteSrgList: [],
      regcardValue: [], //注册证号
      curCliIndex: 0,
      curSrgIndex: 0,
      zczcpmc: "",
      filterQuery: {
        subProductId: "",
      },
      btSaveStr: "保存",
      isEdit: false,
      classifyQuery: {
        QXLB: "器械",
      },
      classifyOptions: [],
      classifyValue: [],
      certValue: [],
      isDeviceKit: {
        0: "否",
        1: "是",
      },

      cliQuery: {
        index: 0,
        UDI_DeviceCliOID: "",
        LCSYCCLX: "", //临床使用尺寸类型
        CCZ: "", //尺寸值
        CCDW: "", //尺寸单位
        UDI_SubProduct_FK: "", //子类信息外键
      },

      postQuery: {
        udiSubProductEntity: "",
        udiDeviceCliEntities: [],
        udiDeviceSrgEntities: [],
      },

      strgTitleVisible: false,
      cliTitleVisible: false,
      formName: "",
      total: 0,
      loading: true,
      index: null,

      rules: {
        regcardCodes: [
          {
            required: true,
            message: "请输入注册证号/备案凭证号",
            trigger: "blur",
          },
        ],
        companyName: [
          {
            required: true,
            message: "请输入注册证号/备案凭证号",
            trigger: "blur",
          },
        ],
        deviceType: [
          { required: true, message: "请选择器械类别", trigger: "change" },
        ],
        productName: [
          {
            required: true,
            message: "请选择分类编码",
            trigger: "blur",
          },
        ],

        productType: [
          { required: true, message: "请选择产品类别", trigger: "change" },
        ],

        deviceKit: [
          {
            required: true,
            message: "请选择是否为包类/组套类产品",
            trigger: "change",
          },
        ],
        specification: [
          {
            required: true,
            message: "请输入规格型号",
            trigger: "blur",
          },
        ],
        deviceDescription: [
          {
            required: true,
            message: "请输入产品描述",
            trigger: "blur",
          },
        ],
        MRISafetyInfo: [
          {
            required: true,
            message: "请选择磁共振（MR）安全相关信息",
            trigger: "change",
          },
        ],
        singleUse: [
          {
            required: true,
            message: "请选择是否标记为一次性使用",
            trigger: "change",
          },
        ],
        isDeviceSterile: [
          {
            required: true,
            message: "请选择是否为无菌包装",
            trigger: "change",
          },
        ],
        isSterilizationUse: [
          {
            required: true,
            message: "请选择使用前是否需要灭菌",
            trigger: "change",
          },
        ],
        MRISafetyInfo: [
          {
            required: true,
            message: "请选择磁共振（MR）安全相关信息",
            trigger: "change",
          },
        ],
      },
    };
  },

  methods: {
    //添加存储信息
    handleAddStrgClick(index, row) {
      this.strgTitleVisible = true;
      this.formName = "add";
      if (row !== null) {
        this.formName = "edit";
        this.strgQuery = row;
        this.curSrgIndex = index;
        console.log("this.curSrgIndex = " + this.curSrgIndex);
      }
    },

    //产品类别选择，根据产品类别分别拉取分类编码列表
    handleDeviceTypeChange(value) {
      console.log("value = " + value);
      this.classifyQuery.QXLB = value;
      this.productDetail.productName = "";
      this.getCPList();
    },

    //分类编码选择
    handleClassifyChange(value) {
      this.productDetail.productCode = value[value.length - 1];
      this.productDetail.productName =
        // "(" +
        // this.productDetail.productCode +
        // ")" +
        // this.$refs["myCascader"].currentLabels[value.length - 1];
        this.$refs.myCascader.getCheckedNodes()[0].pathLabels[value.length - 1];
      this.classifyValue = [];
    },
    //添加临床信息
    handleAddCliClick(index, row) {
      this.cliTitleVisible = true;
      this.formName = "add";
      if (row !== null) {
        this.formName = "edit";
        this.cliQuery = row;
        this.curCliIndex = index;
      }
    },

    deleteCliDialog(index, row) {
      console.log(index + "---" + row);
      if (row.UDI_DeviceCliOID != null) {
        row.isDelete = 1;
        this.deleteCliList.push(row);
        this.cliList.splice(index, 1);
        console.log("真" + index + "---" + row);
      } else {
        this.cliList.splice(index, 1);
        console.log("假" + index + "---" + row);
      }
    },
    deleteSrgDialog(index, row) {
      console.log(index + "---" + row);
      if (row.UDI_DeviceSrgOID != "") {
        row.isDelete = 1;
        this.deleteSrgList.push(row);
        this.srgList.splice(index, 1);
        console.log("真" + index + "---" + row);
      } else {
        this.srgList.splice(index, 1);
        console.log("假" + index + "---" + row);
      }
    },

    onSrgSubmit() {
      if (this.formName == "add") {
        this.srgList.push(this.strgQuery);

        console.log("---" + this.srgList.length);
        this.cancelDialog();
      } else {
        this.srgList[this.curSrgIndex] = this.strgQuery;
        this.cancelDialog();
      }
      this.strgQuery = {
        UDI_DeviceSrgOID: "", //
        storageType: "", //储存或操作条件
        lowValue: "", //最低值
        highValue: "", //最高值
        unit: "", //计量单位
        UDI_SubProduct_FK: "", //子类信息外键
      };
    },

    isSingleUseChange(value) {
      if (this.productDetail.singleUse != 2) {
        this.productDetail.reuseTimes = "1";
      }
    },
    isDeviceSterileUseChange(value) {
      if (this.productDetail.isDeviceSterile == 1) {
        this.productDetail.isSterilizationUse = "2";
        this.productDetail.sterilizationMethod = "";
      }
    },
    isSterilizationUseChange(value) {
      if (this.productDetail.isSterilizationUse == 2) {
        this.productDetail.sterilizationMethod = "";
      }
    },

    onCliSubmit() {
      if (this.formName == "add") {
        this.cliList.push(this.cliQuery);
        this.cancelDialog();
      } else {
        this.cliList[this.curCliIndex] = this.cliQuery;
        this.cancelDialog();
      }
      this.cliQuery = {
        index: 0,
        UDI_DeviceCliOID: "",
        LCSYCCLX: "", //临床使用尺寸类型
        CCZ: "", //尺寸值
        CCDW: "", //尺寸单位
        UDI_SubProduct_FK: "", //子类信息外键
      };
    },

    cancelDialog() {
      this.strgTitleVisible = false;
      this.cliTitleVisible = false;
    },

    //获取临床，存储列表
    getSCList() {
      this.filterQuery.subProductId = this.productDetail.UDI_SubProductOID;
      listCli(this.filterQuery)
        .then((response) => {
          this.loading = false;
          this.cliList = response.data || [];
        })
        .catch(() => {
          this.loading = false;
          this.cliList = [];
        });

      listSrg(this.filterQuery)
        .then((response) => {
          this.loading = false;
          this.srgList = response.data || [];
        })
        .catch(() => {
          this.loading = false;
          this.srgList = [];
        });
    },

    //获取产品类别列表
    getCPList() {
      listClassify(this.classifyQuery)
        .then((response) => {
          this.loading = false;
          this.classifyOptions = response.data || [];
          console.log("response.data=" + response.data + response.data.length);
        })
        .catch(() => {
          this.loading = false;
          this.classifyOptions = [];
        });
    },

    //获取注册证列表
    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 < this.certValue.length; i++) {
          if (this.certValue[i].ZCBAH == this.regcardValue[0]) {
            this.zczcpmc = this.certValue[i].ZCBACPMC;
          }
        }
        // this.zczcpmc = value
        //   ? this.certValue.find((ele) => ele.ZCBAH === value).ZCBAH
        //   : "";
      });
    },

    intenCertChanged(value) {
      let cert = value[0]
        ? this.certValue.find((ele) => ele.ZCBAH === value[0])
        : "";
      let regcardCodes = [];
      for (var i = 0; i < value.length; i++) {
        let regcardCode = value[i]
          ? this.certValue.find((ele) => ele.ZCBAH === value[i]).ZCBAH
          : "";
        regcardCodes.push(regcardCode);
      }
      this.productDetail.regcardCodes = regcardCodes.join(",");
      this.productDetail.companyName = cert.ZCBAR;
      this.zczcpmc = cert.ZCBACPMC;
      this.productDetail.brandName = cert.ZCBACPMC;
      this.productDetail.deviceType = cert.QXLB;
      this.productDetail.productName = cert.QXMLFLMC;
      this.productDetail.productCode = cert.QXMLFLBM;
      this.productDetail.specification = cert.GGXH;
      this.productDetail.deviceDescription = cert.JGJZC;
    },
    visableChange(value) {
      if (value == false)
        if (this.zczcpmc != this.productDetail.TYMC) {
          this.$alert(
            "注册证/备案证上的器械通用名称和当前维护的器械通用名称不符，请检查！",
            "提示",
            {
              confirmButtonText: "确定",
              callback: (action) => {
                // this.regcardValue = "";
              },
            }
          );
        }
    },

    //提交保存
    postData() {
      console.log("提交保存---");
      this.$refs["productDetail"].validate((valid) => {
         console.log("提交保存valid---"+valid);
        if (valid) {
          console.log(this.productDetail.TYMC+this.zczcpmc );
          if(this.productDetail.SPTM!="" && this.productDetail.SPTM!=null){
            if(this.productDetail.SPTM.length!=13){
              this.$message.error("商品条码格式错误，需为13位！");
              return;
            }
          }

          if (this.zczcpmc != this.productDetail.TYMC) {
            this.$confirm(
              "注册/备案名称与器械通用名称不符，是否继续？",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }
            )
              .then(() => {
                this.confirmPost();
              })
              .catch(() => {});
          }else{
              this.confirmPost();
          }
        }else{
           console.log("验证不通过---");
        }
      });
    },
    confirmPost() {
      this.postQuery = {
        udiSubProductEntity: this.productDetail,
        udiDeviceCliEntities: this.cliList,
        udiDeviceSrgEntities: this.srgList,
      };

      if (this.isEdit) {
        for (var i = 0; i < this.deleteSrgList.length; i++) {
          this.postQuery.udiDeviceSrgEntities.push(this.deleteSrgList[i]);
        }
        for (var i = 0; i < this.deleteCliList.length; i++) {
          this.postQuery.udiDeviceCliEntities.push(this.deleteSrgList[i]);
        }

        modifyUdiSubProduct(this.postQuery)
          .then((response) => {
            if (response.code == 20000) {
              this.$emit("closeModifySub", true);
            } else {
              this.$emit("closeModifySub", false);
            }
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
            this.$emit("closeModifySub", false);
          });
      } else {
        addUdiSubProduct(this.postQuery)
          .then((response) => {
            if (response.code == 20000) {
              this.$emit("closeModifySub", true);
            } else {
              this.$emit("closeModifySub", false);
            }
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
            this.$emit("closeModifySub", false);
          });
      }
    },
    //取消保存
    cancelModify() {
      this.$emit("closeModifySub", null);
    },
    change() {},
  },
  filters: {},
  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  created() {
    if (this.productDetail.UDI_SubProductOID != "") {
      this.isEdit = true;
      this.classifyQuery.QXLB = this.productDetail.deviceType;
      this.regcardValue = this.productDetail.regcardCodes.split(",");
      this.btSaveStr = "修改保存";
    } else {
      this.isEdit = false;
      this.btSaveStr = "保存";
    }
    this.getCertList();
    this.productDetail.isMRISafety = "1";
    this.getSCList();
    this.getCPList();
  },
};
</script>
<style scoped>
@import url("//unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css");
</style>

