<template>
  <div>
    <el-descriptions
      :border="true"
      :column="2"
      labelClassName="leftStyle"
      contentClassName="rightStyle"
      v-loading="loading"
    >
      <el-descriptions-item>
        <template slot="label"> 生产质量监管/管理年限 </template>
        {{ userData.regulatoryYears }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 擅长领域</template>
        {{ userData.field }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 参加生产企业现场检查的次数 </template>
        {{ userData.sceneCheckNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 参加省级检查的次数</template>
        {{ userData.provincialCheckNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 参加国家级飞行检查的次数 </template>
        {{ userData.nationalCheckNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 担任现场检查组组长的次数 </template>
        {{ userData.checkLeaderNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 熟悉检查的生产类别 </template>
        {{ getType(userData.productionCategory) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"> 担任组长次数</template>
        {{ userData.teamNumber }}
      </el-descriptions-item>
    </el-descriptions>
    <!-- 检查员特质 -->
    <el-dialog
      :visible.sync="show"
      width="55%"
      append-to-body
      destroy-on-close
      custom-class="my-dialog-container"
    >
      <div slot="title" class="my-dialog-title">检查员特质</div>
      <el-form
        ref="formName"
        :model="form"
        :rules="rules"
        label-position="right"
        label-width="210px"
        class="my-dialog-body"
        v-loading="load1"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="生产质量监管/管理年限："
              prop="regulatoryYears"
            >
              <el-input
                v-model.number="form.regulatoryYears"
                placeholder="请输入年限"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="参加省级检查的次数："
              prop="provincialCheckNumber"
            >
              <el-input
                v-model.number="form.provincialCheckNumber"
                placeholder="请输入次数"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="参加生产企业现场检查的次数："
              prop="sceneCheckNumber"
            >
              <el-input
                v-model.number="form.sceneCheckNumber"
                placeholder="请输入次数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="担任现场检查组组长的次数："
              prop="checkLeaderNumber"
            >
              <el-input
                v-model.number="form.checkLeaderNumber"
                placeholder="请输入次数"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="参加国家级飞行检查的次数："
              prop="nationalCheckNumber"
            >
              <el-input
                v-model.number="form.nationalCheckNumber"
                placeholder="请输入次数"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="担任组长的次数：" prop="teamNumber">
              <el-input
                v-model.number="form.teamNumber"
                placeholder="请输入次数"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="擅长领域：" prop="field">
              <el-select v-model="form.field" placeholder="请选择擅长领域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="熟悉检查的生产类别：">
              <el-checkbox-group v-model="form.productionCategory">
                <div>
                  <el-checkbox label="1" name="type">化学药品</el-checkbox>
                  <el-checkbox label="2" name="type">中药制剂</el-checkbox>
                  <el-checkbox label="3" name="type">中药饮片</el-checkbox>
                  <el-checkbox label="4" name="type">体外诊断试剂</el-checkbox>
                </div>
                <div>
                  <el-checkbox label="5" name="type">特殊药品</el-checkbox>
                  <el-checkbox label="6" name="type">药用辅料</el-checkbox>
                  <el-checkbox label="7" name="type">医用氧</el-checkbox>
                  <el-checkbox label="8" name="type">生物制品</el-checkbox>
                </div>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-my-save"
          @click="submit()"
          >提交</el-button
        >
        <el-button size="small" icon="el-icon-my-reset" @click="reset()"
          >重置</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: true,
      show: false,
      form: {
        id: 0,
        inspectorId: null,
        regulatoryYears: 0,
        sceneCheckNumber: 0,
        checkLeaderNumber: 0,
        nationalCheckNumber: 0,
        teamNumber: 0,
        field: "区域一",
        provincialCheckNumber: 0,
        productionCategory: "",
      },
      load1: true,
      rules: {
        regulatoryYears: [
          {
            required: true,
            message: "生产质量监管/管理年限不能为空",
            trigger: "blur",
          },
          {
            type: "number",
            message: "请输入数字",
            trigger: "blur",
          },
        ],
        provincialCheckNumber: [
          {
            required: true,
            message: "参加省级检查的次数不能为空",
            trigger: "blur",
          },
          {
            type: "number",
            message: "请输入数字",
            trigger: "blur",
          },
        ],
        sceneCheckNumber: [
          {
            required: true,
            message: "参加企业现场检查的次数不能为空",
            trigger: "blur",
          },
          {
            type: "number",
            message: "请输入数字",
            trigger: "blur",
          },
        ],
        checkLeaderNumber: [
          {
            required: true,
            message: "担任现场检查组组长的次数不能为空",
            trigger: "blur",
          },
          {
            type: "number",
            message: "请输入数字",
            trigger: "blur",
          },
        ],
        nationalCheckNumber: [
          {
            required: true,
            message: "参加国家级飞行检查的次数不能为空",
            trigger: "blur",
          },
          {
            type: "number",
            message: "请输入数字",
            trigger: "blur",
          },
        ],

        teamNumber: [
          {
            required: true,
            message: "担任组长的次数不能为空",
            trigger: "blur",
          },
          {
            type: "number",
            message: "请输入数字",
            trigger: "blur",
          },
        ],
        field: [
          {
            required: true,
            message: "擅长领域不能为空",
            trigger: "blur",
          },
        ],
      },
      option: [
        {
          value: "1",
          label: "化学药品",
        },
        {
          value: "2",
          label: "中药制剂",
        },
        {
          value: "3",
          label: "中药饮片",
        },
        {
          value: "4",
          label: "体外诊断试剂",
        },
        {
          value: "5",
          label: "特殊药品",
        },
        {
          value: "6",
          label: "药用辅料",
        },
        {
          value: "7",
          label: "医用氧",
        },
        {
          value: "8",
          label: "生物制品",
        },
      ],
      userData: {},
    };
  },
  created() {
    //获取检查员的id并赋值
    this.form.inspectorId = this.inspectorId;
    this.getMsg();
  },
  props: {
    inspectorId: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    reset() {
      let id = this.form.id;
      this.form = {
        id,
        inspectorId: this.inspectorId,
        regulatoryYears: 0,
        sceneCheckNumber: 0,
        checkLeaderNumber: 0,
        nationalCheckNumber: 0,
        teamNumber: 0,
        field: "",
        provincialCheckNumber: 0,
        productionCategory: "",
      };
    },
    getType(e) {
      if (e == undefined || null || "") return;
      let arr1 = [...e];
      var names = [];
      arr1.forEach((v, i) => {
        this.option.forEach((value, index) => {
          if (value.value == v) {
            names.push(value.label);
          }
        });
      });
      return names.join("、");
    },
    async examineUpdate() {
      this.show = true;
      this.load1 = true;
      let msg = await this.$api.traits.detailTraits(this.userData.id);
      if (msg.status == 200) this.load1 = false;

      this.form = msg.result;
      let arr1 = this.form.productionCategory;
      this.form.productionCategory = arr1.split(",");
    },
    async getMsg() {
      this.loading = true;
      let msg = await this.$api.traits.listTraits({
        inspectorId: this.form.inspectorId,
      });
      if (msg.status == 200) this.loading = false;
      if (msg.result.records.length > 0) {
        this.userData = msg.result.records[0];
      } else {
        this.userData = {
          regulatoryYears: "",
          field: "",
          sceneCheckNumber: "",
          provincialCheckNumber: "",
          nationalCheckNumber: "",
          checkLeaderNumber: "",
          productionCategory: "",
          teamNumber: "",
        };
      }
    },
    submit() {
      this.$refs.formName.validate(async (valid) => {
        if (valid) {
          if (this.form.productionCategory != "") {
            let arr1 = this.form.productionCategory.join(",");
            this.form.productionCategory = arr1;
          }
          let msg = await this.$api.traits.updateTraits(this.form);

          if (msg.status == 200)
            this.$message({
              type: "success",
              message: `修改成功!`,
            });
          this.show = false;
          this.getMsg();
        }
      });
    },
  },
};
</script>
<style lang="scss">
.leftStyle {
  background-color: #f6faff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #292f38 !important;
  width: 18%;
}
.rightStyle {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #4d5158 !important;
  width: 32%;
}
</style>
