
<template>
  <div>
    <el-card class="el-card">
      <el-form :model="registertDetail" ref="registertDetail" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              style="font-size: 6px"
              size="small"
              label="注册/备案号:"
              prop="ZCBAH"
            >
              <el-input
                size="small"
                style="width: 70%"
                placeholder="请输入注册/备案号"
                v-model="registertDetail.ZCBAH"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              size="small"
              label="注册/备案产品名称:"
              prop="ZCBACPMC"
            >
              <el-input
                size="small"
                style="width: 62%"
                placeholder="请输入注册/备案产品名称"
                v-model="registertDetail.ZCBACPMC"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              size="small"
              label="注册/备案产品英文名称:"
              prop="ZCBACPYWMC"
            >
              <el-input
                size="small"
                style="width: 61%"
                placeholder="请输入注册/备案产品英文名称"
                v-model="registertDetail.ZCBACPYWMC"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              size="small"
              label="注册/备案产品标识:"
              prop="ZCBACPBS"
            >
              <el-input
                size="small"
                style="width: 63%"
                placeholder="请输入注册/备案产品标识"
                v-model="registertDetail.ZCBACPBS"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              size="small"
              label="医疗器械管理类别:"
              prop="YLQXGLLB"
            >
              <el-select
                size="small"
                style="width: 64.3%"
                v-model="registertDetail.YLQXGLLB"
                placeholder="请选择"
              >
                <el-option label="I" value="I"></el-option>
                <el-option label="II" value="II"></el-option>
                <el-option label="III" value="III"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item size="small" label="注册/备案人:" prop="ZCBAR">
              <el-input
                size="small"
                style="width: 68%"
                placeholder="请输入注册/备案人"
                v-model="registertDetail.ZCBAR"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item size="small" label="注册人地区:" prop="options">
              <el-cascader
                size="small"
                :options="options"
                v-model="selectedOptions"
                placeholder="请选择所在地区"
                style="width: 72%"
                @change="handleSZDQChange"
              >
              </el-cascader>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item size="small" label="产地:" prop="CD">
              <el-select
                size="small"
                v-model="registertDetail.CD"
                style="width: 76%"
                placeholder="请选择"
              >
                <el-option label="国产" value="国产"></el-option>
                <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="24">
            <el-form-item size="small" label="注册/备案人住所:" prop="ZCBARZS">
              <el-input
                size="small"
                v-model="registertDetail.ZCBARZS"
                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 size="small" label="器械类别:" prop="QXLB">
              <el-select
                size="small"
                v-model="registertDetail.QXLB"
                style="width: 73%"
                @change="handleDeviceTypeChange"
                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="QXMLFLMC" label="器械目录分类编码:">
              <el-input
                size="small"
                v-model="registertDetail.QXMLFLMC"
                disabled="true"
                style="width: 55%"
                @input="change()"
              ></el-input>
              <el-cascader
                ref="myCascader"
                v-model="classifyValue"
                size="small"
                style="width: 5%"
                v-bind:disabled="registertDetail.QXLB == ''"
                :options="classifyOptions"
                @change="handleClassifyChange"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item size="small" label="批准日期:" prop="DateApproval">
              <el-date-picker
                v-model="registertDetail.DateApproval"
                type="date"
                style="width: 73%"
                placeholder="请选择批准日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item size="small" label="有效期至:" prop="DateValiduntil">
              <el-date-picker
                v-model="registertDetail.DateValiduntil"
                type="date"
                style="width: 71%"
                placeholder="请选择有效期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item size="small" label="代理人名称:" prop="DLRMC">
              <el-input
                size="small"
                style="width: 72%"
                placeholder="请输入代理人名称"
                v-model="registertDetail.DLRMC"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item size="small" label="代理人所在地区:" prop="DLRGJ">
              <el-cascader
                size="small"
                :options="options"
                v-model="selectedDLOptions"
                placeholder="请选择所属地区"
                style="width: 66%"
                @change="handleDLChange"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item size="small" label="代理人住所:" prop="DLRZS">
              <el-input
                size="small"
                style="width: 85.5%"
                placeholder="请输入代理人住所"
                v-model="registertDetail.DLRZS"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item size="small" label="说明书附件:" prop="SMSFJ">
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="注册/备案证电子档案:" prop="ZCBAZDZDA">
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item size="small" label="生产地址:" prop="SCDZ">
              <el-input
                size="small"
                style="width: 74%"
                placeholder="请输入生产地址"
                v-model="registertDetail.SCDZ"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item size="small" label="生产国或地区:" prop="SCGHDQ">
              <el-input
                size="small"
                style="width: 68%"
                placeholder="请输入生产国或地区"
                v-model="registertDetail.SCGHDQ"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item size="small" label="生产厂商名称:" prop="SCCSMC">
              <el-input
                size="small"
                style="width: 70%"
                placeholder="请输入生产厂商名称"
                v-model="registertDetail.SCCSMC"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item size="small" label="售后服务机构:" prop="SHFWJG">
              <el-input
                size="small"
                style="width: 68%"
                placeholder="请输入售后服务机构"
                v-model="registertDetail.SHFWJG"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item size="small" label="规格型号:" prop="GGXH">
              <el-input
                size="small"
                style="width: 86.5%"
                placeholder="请输入规格型号"
                v-model="registertDetail.GGXH"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item size="small" label="结构及组成:" prop="JGJZC">
              <el-input
                size="small"
                style="width: 85.5%"
                placeholder="请输入结构及组成"
                v-model="registertDetail.JGJZC"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item
              size="small"
              label="适用范围:"
              prop="Scopeofapplication"
            >
              <el-input
                size="small"
                style="width: 86.5%"
                placeholder="请输入适用范围"
                v-model="registertDetail.Scopeofapplication"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item size="small" label="其他内容:" prop="Othercontents">
              <el-input
                size="small"
                style="width: 86.5%"
                placeholder="请输入其他内容"
                v-model="registertDetail.Othercontents"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item size="small" label="备注:" prop="remarks">
              <el-input
                size="small"
                style="width: 88.5%"
                placeholder="请输入备注"
                v-model="registertDetail.remarks"
                @input="change()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <div style="text-align: center; margin-top: 20px">
      <el-button
        type="primary"
        size="small"
        icon="search"
        @click.native="postData()"
        >{{ btSaveStr }}</el-button
      >
      <el-button type="primary" size="small" icon="search" @click="cancelDialog"
        >取消</el-button
      >
    </div>
  </div>
</template>
<script>
import {
  addEnterpriseCert,
  modifyEnterpriseCert,
} from "../../api/basic/registerCert";
import { listClassify } from "../../api/publish/udiSubProduct";
import { getCompany } from "../../api/warehouse/company";
import store from "../../store/index";
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
export default {
  name: "registertDetail",
  props: {
    registertDetail: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      value1: [],

      filterQuery: {
        subProductId: "",
      },
      classifyQuery: {
        QXLB: "器械",
      },
      classifyOptions: [],
      classifyValue: [],
      value: [],
      dit: false,
      btSaveStr: "保存",
      formName: "",
      total: 0,
      loading: true,
      index: null,

      options: regionDataPlus,
      selectedOptions: [],
      selectedDLOptions: [],

      rules: {
        ZCBAH: [
          {
            required: true,
            message: "请输入注册/备案号",
            trigger: "blur",
          },
        ],
        ZCBACPMC: [
          {
            required: true,
            message: "请输入注册证号/备案凭证号",
            trigger: "blur",
          },
        ],
        ZCBAR: [
          {
            required: true,
            message: "请输入注册/备案人",
            trigger: "blur",
          },
        ],

        YLQXGLLB: [
          {
            required: true,
            message: "请选择医疗器械管理类别",
            trigger: "change",
          },
        ],

        QXLB: [
          {
            required: true,
            message: "请选择器械类别",
            trigger: "change",
          },
        ],

        QXMLFLBM: [
          {
            required: true,
            message: "请输入产品描述",
            trigger: "blur",
          },
        ],
        isMRISafety: [
          {
            required: true,
            message: "请选择是否包含MRI安全信息",
            trigger: "change",
          },
        ],
        DateApproval: [
          {
            required: true,
            message: "请选择批准日期",
            trigger: "change",
          },
        ],
        DateValiduntil: [
          {
            required: true,
            message: "请选择有效期",
            trigger: "change",
          },
        ],
        QXMLFLMC: [
          {
            required: true,
            message: "请选择器械目录分类编码",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    handleChange(value) {
      console.log(value);
    },

    //提交保存或修改
    postData() {
      console.log("提交保存");
      this.$refs["registertDetail"].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            modifyEnterpriseCert(this.registertDetail)
              .then((response) => {
                if (response.code == 20000) {
                  this.$emit("closeModifyRegister", true);
                } else {
                  this.$message.error(response.message);
                  // this.$emit("closeModifyRegister", false);
                }
                this.loading = false;
              })
              .catch(() => {
                this.loading = false;
                  this.$message.error(response.message);
                // this.$emit("closeModifyRegister", false);
              });
          } else {
            addEnterpriseCert(this.registertDetail)
              .then((response) => {
                if (response.code == 20000) {
                  this.$emit("closeModifyRegister", true);
                } else {
                  this.$emit("closeModifyRegister", false);
                }
                this.loading = false;
              })
              .catch(() => {
                this.loading = false;
                this.$emit("closeModifyRegister", false);
              });
          }
        }
      });
    },
    //产品类别选择，根据产品类别分别拉取分类编码列表
    handleDeviceTypeChange(value) {
      console.log("value = " + value);
      this.classifyQuery.QXLB = value;
      this.registertDetail.QXMLFLMC = "";
      this.getCPList();
    },

    //分类编码选择
    handleClassifyChange(value) {
      this.registertDetail.QXMLFLBM = value[value.length - 1];
      this.registertDetail.QXMLFLMC =
        // "(" +
        // this.registertDetail.QXMLFLBM +
        // ")" +
        // this.$refs["myCascader"].currentLabels[value.length - 1];
        this.$refs.myCascader.getCheckedNodes()[0].pathLabels[value.length - 1];
      this.classifyValue = [];
    },
    //获取产品类别列表
    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 = [];
        });
    },
    //选择所在地区
    handleSZDQChange(value) {
      this.registertDetail.SZSF =
        CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
      this.registertDetail.SZDS = value.toString();
      console.log(value + "\n" + this.registertDetail.SZSF);
    },

    //选择所在地区
    handleDLChange(value) {
      this.registertDetail.DLRSZSF =
        CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
      this.registertDetail.DLRSZDS = value.toString();
      console.log(value + "\n" + this.registertDetail.DLRSZSF);
    },

    //获取本企业信息
    getCompanyInfo() {
      let tquery = {
        customerId: store.getters.customerId,
      };
      getCompany(tquery).then((response) => {
        var data = response.data;
        this.registertDetail.SZSF = data.area;
        this.registertDetail.SZDS = data.areaCode;
        this.registertDetail.ZCBAR = data.companyName;
        this.registertDetail.SCDZ = data.detailAddr;
        this.registertDetail.ZCBARZS = data.detailAddr;
        this.registertDetail.SCCSMC = data.companyName;
        this.selectedOptions = this.registertDetail.SZDS.split(",");
        this.inputQuery.bussinessStatus = this.inputQuery.bussinessStatus + "";
      });
    },

    cancelDialog() {
      this.$emit("closeModifyRegister", false);
    },
    change() {},
  },
  filters: {},
  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },

  created() {
    //区分编辑或添加
    if (
      this.registertDetail.UDI_RegistrationOID != "" &&
      this.registertDetail.UDI_RegistrationOID != null
    ) {
      this.isEdit = true;
      // if (this.registertDetail.QXLB == "1") this.classifyQuery.QXLB = "器械";
      // else this.classifyQuery.QXLB = "体外诊断试剂";

      this.selectedOptions = this.registertDetail.SZDS.split(",");
      this.selectedDLOptions = this.registertDetail.DLRSZDS.split(",");
      console.log(this.selectedOptions);
      this.btSaveStr = "修改保存";
    } else {
      this.isEdit = false;
      this.getCompanyInfo();
      this.btSaveStr = "保存";
    }
    this.getCPList();
  },
};
</script>



<style>
.el-form-m .el-form-item__label {
  font-size: 6px;
  font-family: "Microsoft YaHei";
  color: #000000;
}
</style>

