<template>
  <div class="app-container">
    <page-header :content="id?'编辑':'添加'"></page-header>
    <el-form label-width="120px" ref="dataForm" :model="dataForm" :rules="dataRules">
      <el-form-item label="检查项目名称" prop="checkItem.itemName">
        <el-input v-model.trim="dataForm.checkItem.itemName" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="默认输入值" prop="checkItem.defaultValue">
        <el-input v-model="dataForm.checkItem.defaultValue" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="是否为必填项" prop="checkItem.isRequired" required>
        <el-radio-group v-model="dataForm.checkItem.isRequired">
          <el-radio v-for="item in whetherList" :key="item.id" :label="item.id">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否允许多行" prop="extra.allowMultiple" required>
        <el-radio-group v-model="dataForm.extra.allowMultiple">
          <el-radio v-for="item in allowList" :key="item.id" :label="item.id">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否计算评分" prop="checkItem.isScore" required>
        <el-radio-group v-model="dataForm.checkItem.isScore">
          <el-radio v-for="item in whetherList" :key="item.id" :label="item.id">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="合格评分数" prop="extra.qualifiedScore">
        <el-input-number v-model.trim.number="dataForm.extra.qualifiedScore" class="input-width" controls-position="right"></el-input-number>
      </el-form-item>
      <el-form-item label="不合格评分数" prop="extra.noQualifiedScore">
        <el-input-number v-model.trim.number="dataForm.extra.noQualifiedScore" class="input-width" controls-position="right"></el-input-number>
      </el-form-item>
      <el-form-item label="合格判断方法" prop="extra.qualifiedJudge" required>
        <el-radio-group v-model="dataForm.extra.qualifiedJudge">
          <el-radio v-for="item in qualifiedJudgeList" :key="item.id" :label="item.id">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属分类目录" prop="checkItem.patrolTypeId">
        <el-select v-model="dataForm.checkItem.patrolTypeId" class="input-width">
          <el-option v-for="item in classifyList" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检查项目说明" prop="checkItem.remark">
        <el-input v-model="dataForm.checkItem.remark"
                  style="width: 400px"
                  type="textarea"
                  maxlength="200"
                  show-word-limit
                  :autosize="{ minRows: 4}"></el-input>
      </el-form-item>
    </el-form>

    <page-footer showConfirm @confirm="onConfirm" @cancel="onCancel" width="800px"></page-footer>
  </div>
</template>

<script>

import {validateNotEmpty} from "@/utils/validate";

export default {
  name: "inspectionCharacterEdit",
  watch: {
    'dataForm.checkItem.patrolTypeId'(value) {
      const classify = this.classifyList.find(item => item.id === value);
      this.dataForm.checkItem.patrolTypeName = classify && classify.typeName;
    },
    classifyList() {
      const classify = this.classifyList.find(item => item.id === this.dataForm.checkItem.patrolTypeId);
      this.dataForm.checkItem.patrolTypeName = classify && classify.typeName;
    }
  },
  data() {
    return {
      id: undefined, // 数据id
      dataForm: {
        checkItem: {
          itemName: undefined, // 检查项名称
          itemType: 3, // 检查项类别 1选择、2数字、3文本、4拍照
          isRequired: true, // 是否必填
          defaultValue: undefined, // 默认值
          isScore: true, // 是否参与评分
          patrolTypeId: undefined, // 巡检类别id
          patrolTypeName: undefined, // 巡检类别名称
          remark: undefined, // 备注说明
        },
        extra: { // 数字项类型检查项额外信息
          allowMultiple: false, // 是否允许多行
          qualifiedScore: 0, // 合格评分
          noQualifiedScore: 0, // 不合格评分
          qualifiedJudge: 1, // 合格判定 1始终合格、2始终不合格、3无内容合格、4有内容合格
        }
      },

      dataRules: {
        'checkItem.itemName': [{validator: validateNotEmpty, errorMessage: "检查项名称不能为空", required: true, trigger: 'blur'}],
        'checkItem.patrolTypeId': [{validator: validateNotEmpty, errorMessage: "巡检类别不能为空", required: true, trigger: 'change'}],
        'extra.qualifiedScore': [{validator: validateNotEmpty, errorMessage: "合格评分数不能为空", required: true, trigger: 'change'}],
        'extra.noQualifiedScore': [{validator: validateNotEmpty, errorMessage: "不合格评分不能为空", required: true, trigger: 'change'}]
      },

      classifyList: [], // 巡检类别列表
      whetherList: [{id: true, label: "是"}, {id: false, label: "否"}],
      allowList: [{id: true, label: "允许"}, {id: false, label: "不允许"}],
      qualifiedJudgeList: [{id: 1, label: "始终合格"}, {id: 2, label: "始终不合格"}, {id: 3, label: "无内容合格"}, {id: 4, label: "有内容合格"}]
    }
  },

  mounted() {
    this.initData();
    if (this.id) {
      this.getDetail(this.id);
    }
  },

  methods: {
    // 初始化数据
    initData() {
      this.id = this.$route.query.id;

      this.$axios.get("/v1/check/item/type/list", {params: {size: 100}}, false).then(data => {
        this.classifyList = data.list;
      });
    },

    // 取消
    onCancel() {
      this.$router.back();
    },

    // 确认
    onConfirm() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.id) { // 更新
            this.$axios.put("/v1/check/item/update/txt", this.dataForm).then(() => {
              this.$message.success("更新成功！");
              this.$eventBus.$emit("inspectionCharacterUpdate");
              this.onCancel();
            });
          } else { // 添加
            this.$axios.post("/v1/check/item/add/txt", this.dataForm).then(() => {
              this.$message.success("保存成功！");
              this.$eventBus.$emit("inspectionCharacterAdd");
              this.onCancel();
            });
          }
        }
      });
    },

    // 获取详情
    getDetail(checkItemId) {
      this.$axios.get(`/v1/check/item/query/txt/${checkItemId}`).then(data => {
        this.dataForm = data;
      });
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  .input-width {
    width: 250px;
  }
}
</style>
