<template>
  <div>
    <el-alert
      v-if="infoData.stas == 'A' || infoData.stas == 'R'"
      style="margin-bottom: 10px"
      title="请您完成资质填报，并等待通过审核后再进入系统，在此之前您可通过系统查看资质审批进度。"
      type="warning"
      show-icon
      effect="dark"
      :closable="false"
    >
    </el-alert>
    <div class="common-card" v-if="infoData.stas == 'B' || infoData.stas == '0'">
      <h3>审批状态</h3>
      <yl-step></yl-step>
    </div>
    <el-form :model="infoData" ref="planForm" label-width="180px" class="grid-form-class">
      <div class="common-card">
        <h3>商品基本资料</h3>
        <!-- <div class="right-type" style="color: #3c64dc; font-weight: 800">
          {{ $store.state.user.username }}
        </div> -->
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="耗材名称" prop="materialName" :rules="rules.required">
              <el-input
                v-model="infoData.materialName"
                placeholder="请输入耗材名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="助记码" prop="zjm" :rules="rules.required">
              <el-input
                v-model="infoData.zjm"
                placeholder="请输入助记码"
              ></el-input>
            </el-form-item>
            <el-form-item label="通用名称" prop="genName" :rules="rules.required">
              <el-input
                v-model="infoData.genName"
                placeholder="请输入通用名称"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="英文名称" prop="engName" :rules="rules.required">
              <el-input
                v-model="infoData.engName"
                placeholder="请输入英文名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="品牌" prop="brand" :rules="rules.required">
              <el-input
                v-model="infoData.brand"
                placeholder="请输入品牌"
              ></el-input>
            </el-form-item>
            <el-form-item label="生产企业" prop="prodentpName" :rules="rules.required">
              <el-input
                v-model="infoData.prodentpName"
                placeholder="请输入生产企业"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="生产来源" prop="source" :rules="rules.selectRequired">
              <el-select v-model="infoData.source" placeholder="请选择生产来源" clearable>
                <el-option
                  v-for="item in sourceData"
                  :key="item.value"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="规格" prop="spec" :rules="rules.required">
              <el-input v-model="infoData.spec" placeholder="请输入规格"></el-input>
            </el-form-item>
            <el-form-item label="型号" prop="model" :rules="rules.required">
              <el-input v-model="infoData.model" placeholder="请输入型号"></el-input>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="材质" prop="matl" :rules="rules.required">
              <el-input v-model="infoData.matl" placeholder="请输入材质"></el-input>
            </el-form-item>
            <el-form-item label="包装材质" prop="pacMatl" :rules="rules.required">
              <el-input
                v-model="infoData.pacMatl"
                placeholder="请输入包装材质"
              ></el-input>
            </el-form-item>
            <el-form-item label="注册证号" prop="approve" :rules="rules.required">
              <el-input
                v-model="infoData.approve"
                placeholder="请输入注册证号"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="common-card">
        <h3>商品属性资料</h3>
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="商品大类" prop="prodClassCate" :rules="rules.required">
              <el-input
                v-model="infoData.prodClassCate"
                placeholder="请输入商品大类"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品类别" prop="prodTypeB" :rules="rules.required">
              <el-input
                v-model="infoData.prodTypeB"
                placeholder="请输入商品类别"
              ></el-input>
            </el-form-item>
            <el-form-item label="是否集采" prop="ifJc" :rules="rules.selectRequired">
              <el-select v-model="infoData.ifJc" placeholder="请选择是否集采" clearable>
                <el-option
                  v-for="item in iFjcData"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            
          </div>
          <div class="flex-css">
            <el-form-item label="集采批次" prop="batch" :rules="rules.required">
              <el-input
                v-model="infoData.batch"
                placeholder="请输入集采批次"
              ></el-input>
            </el-form-item>
            <el-form-item label="采购单位" prop="defPurcUnit" :rules="rules.required">
              <el-input
                v-model="infoData.defPurcUnit"
                placeholder="请输入采购单位"
              ></el-input>
            </el-form-item>
            <el-form-item label="采购价" prop="pric" :rules="rules.numPot2">
              <el-input
                v-model="infoData.pric"
                placeholder="请输入采购价"
              ></el-input>
            </el-form-item>
          </div>
          <div  class="flex-css">
            <el-form-item label="是否寄售" prop="ifJs" :rules="rules.selectRequired">
              <el-select v-model="infoData.ifJs" placeholder="请选择是否寄售" clearable>
                <el-option
                  v-for="item in iFjcData"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否十八项重点耗材" prop="ifZd" :rules="rules.selectRequired">
              <el-select v-model="infoData.ifZd" placeholder="请选择是否十八项重点耗材" clearable>
                <el-option
                  v-for="item in iFjcData"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="common-card">
        <h3>耗材编码资料</h3>
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="医保编码" prop="ybbm" :rules="rules.required">
              <el-input
                v-model="infoData.ybbm"
                placeholder="请输入医保编码"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="耗材编码" prop="duty" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.duty"
                placeholder="请输入耗材编码"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.duty }}
              </div>
            </el-form-item> -->
          </div>
        </div>
      </div>
      <!-- <div class="common-card">
        <h3>商品包装资料</h3>
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="大包装单位" prop="uscc" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.uscc"
                placeholder="请输入大包装单位"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.uscc }}
              </div>
            </el-form-item>
            <el-form-item label="大包装含量" prop="legrepName" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.legrepName"
                placeholder="请输入大包装含量"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.legrepName }}
              </div>
            </el-form-item>
            <el-form-item label="大包装条码" prop="regStas" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regStas"
                placeholder="请输入大包装条码"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regStas }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="中包装单位" prop="regStas" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regStas"
                placeholder="请输入中包装单位"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regStas }}
              </div>
            </el-form-item>
            <el-form-item label="中包装含量" prop="natstdIndu" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.natstdIndu"
                placeholder="请输入中包装含量"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.natstdIndu }}
              </div>
            </el-form-item>
            <el-form-item label="中包装条码" prop="regCapt" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regCapt"
                placeholder="请输入中包装条码"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regCapt }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="小包装单位" prop="regStas" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regStas"
                placeholder="请输入小包装单位"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regStas }}
              </div>
            </el-form-item>
            <el-form-item label="小包装含量" prop="natstdIndu" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.natstdIndu"
                placeholder="请输入小包装含量"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.natstdIndu }}
              </div>
            </el-form-item>
            <el-form-item label="小包装条码" prop="regCapt" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regCapt"
                placeholder="请输入小包装条码"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regCapt }}
              </div>
            </el-form-item>
          </div>
          <div class="flex-css">
            <el-form-item label="最小计量单位" prop="regStas" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regStas"
                placeholder="请输入最小计量单位"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regStas }}
              </div>
            </el-form-item>
            <el-form-item label="默认出库单位" prop="natstdIndu" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.natstdIndu"
                placeholder="请输入默认出库单位"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.natstdIndu }}
              </div>
            </el-form-item>
            <el-form-item label="默认采购单位" prop="regCapt" :rules="rules.required">
              <el-input
                v-if="infoData.stas == 'A' || infoData.stas == 'R'"
                v-model="infoData.regCapt"
                placeholder="请输入默认采购单位"
              ></el-input>
              <div class="content" v-else>
                {{ infoData.regCapt }}
              </div>
            </el-form-item>
          </div>
        </div>
      </div> -->
      <div class="common-card">
        <h3>其他资料</h3>
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="存储方式" prop="stoRe" :rules="rules.required">
              <el-input
                v-model="infoData.stoRe"
                placeholder="请输入存储方式"
              ></el-input>
            </el-form-item>
            <el-form-item label="存储温度" prop="stoTem" :rules="rules.required">
              <el-input
                v-model="infoData.stoTem"
                placeholder="请输入存储温度"
              ></el-input>
            </el-form-item>
            <el-form-item label="是否灭菌" prop="ifMj" :rules="rules.selectRequired">
              <el-select v-model="infoData.ifMj" placeholder="请选择是否灭菌" clearable>
                <el-option
                  v-for="item in iFjcData"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <div class="foot-button" >
      <el-button type="success" @click="handleSave" :loading="saveLoad">保存</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitLoad"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import ylUpload from "@/components/yl-upload";
import { selectMcsListById, insertSplerMcsList } from "@/api/consumCataManage-sup/index";
import rules from "@/utils/rules";
export default {
  components: { ylUpload, ylStep },
  data() {
    return {
      saveLoad: false,
      submitLoad: false,
      rules,
      infoData: { quaList: [] },
      listLoading: false,
      planForm: {},
      sourceData:[
        { value: "0", name: "非进口" },
        { value: "1", name: "进口" },
      ],
      iFjcData:[
        { value: "0", name: "否" },
        { value: "1", name: "是" },
      ]
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getUpload(id) {
      this.temp.fileId = id;
      if (id) {
        this.$refs.dataForm.clearValidate("fileId");
      } else {
        this.$refs.dataForm.validateField("fileId");
      }
    },
    //获取列表数据
    getData() {
      selectMcsListById({id:this.$route.query.id})
        .then((response) => {
          this.infoData = response.data;
        })
        .catch((err) => {
          this.$message.error("获取数据失败")
        });
    },
    // 新增
    handleAddOrEdit(type, row, index) {
      if (type === "update") {
        this.temp = {
          index: index,
          quaName: row.quaName,
          quaCode: row.quaCode,
          issuDate: row.issuDate,
          endDate: row.endDate,
          fileId: row.fileId,
          type: "updt",
        };
      } else {
        this.temp = {
          quaName: "",
          quaCode: "",
          issuDate: "",
          endDate: "",
          fileId: "",
          type: "add",
        };
      }

      this.dialogStatus = type;
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },

    //添加提交
    commitData() {
      if (this.temp.issuDate > this.temp.endDate) {
        this.$message({
          message: "发证日期不能大于截止日期",
          type: "warning",
        });
        return false;
      }
      if (this.temp.type === "add") {
        let flag = false;
        if (this.infoData && this.infoData.quaList && this.infoData.quaList.length > 0) {
          this.infoData.quaList.forEach((item) => {
            if (item.quaCode === this.temp.quaCode) {
              flag = true;
            }
          });
          if (flag) {
            this.$message({
              message: "证书编码不能为空且不能重复",
              type: "warning",
            });
            return false;
          }
        }
      }

      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          if (this.temp.type === "add") {
            this.infoData.quaList.push(this.temp);
          } else {
            this.$set(this.infoData.quaList, this.temp.index, this.temp);
          }
          this.dialogFormVisible = false;
        }
      });
    },

    // 信息保存
    handleSave() {
      // this.$refs["planForm"].validate((valid) => {
        // if (valid) {
          this.$confirm("确认保存", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.saveLoad = true;
              this.infoData.status ="A"
              insertSplerMcsList(this.infoData)
                .then((response) => {
                  this.$message({
                    message: "保存成功",
                    type: "success",
                  });
                  this.saveLoad = false;
                })
                .catch(() => {
                  this.saveLoad = false;
                });
            })
            .catch(() => {});
        // }
      // });
    },

    // 整体提交
    handleSubmit() {
      this.$refs["planForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.submitLoad = true;
              this.infoData.status ="B"
              insertSplerMcsList(this.infoData)
                .then((response) => {
                  this.$message({
                    message: "提交成功",
                    type: "success",
                  });
                  this.submitLoad = false;
                })
                .catch(() => {
                  this.submitLoad = false;
                });
            })
            .catch(() => {});
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  width: 199px;
}
</style>
