<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="extra.unit">
        <el-input v-model="dataForm.extra.unit" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="小数点后位数" prop="extra.decimalPlaces">
        <el-input-number v-model.trim.number="dataForm.extra.decimalPlaces" class="input-width" controls-position="right" :min="0" :max="6"/>
      </el-form-item>
      <el-form-item label="默认输入值" prop="checkItem.defaultValue">
        <el-input v-model="dataForm.checkItem.defaultValue" class="input-width" @input="dataForm.checkItem.defaultValue = toMoney(dataForm.checkItem.defaultValue, dataForm.extra.decimalPlaces)"></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" :value="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" :value="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 :rules="[{validator: validateNotEmpty, errorMessage: '有效值上限不能为空', required: dataForm.extra.checkValidMaxValue}]" label="有效值上限" prop="extra.validMaxValue">
        <el-input v-model="dataForm.extra.validMaxValue" class="input-width" @input="dataForm.extra.validMaxValue = toMoney(dataForm.extra.validMaxValue, dataForm.extra.decimalPlaces)"></el-input>
        <el-checkbox v-model="dataForm.extra.checkValidMaxValue" label="强制校验，输入值不能大于有效值上限。" class="ml20"></el-checkbox>
      </el-form-item>
      <el-form-item :rules="[{validator: validateNotEmpty, errorMessage: '有效值下限不能为空', required: dataForm.extra.checkValidMinValue}]" label="有效值下限" prop="extra.validMinValue">
        <el-input v-model="dataForm.extra.validMinValue" class="input-width" @input="dataForm.extra.validMinValue = toMoney(dataForm.extra.validMinValue, dataForm.extra.decimalPlaces)"></el-input>
        <el-checkbox v-model="dataForm.extra.checkValidMinValue" label="强制校验，输入值不能小于有效值下限。" class="ml20"></el-checkbox>
      </el-form-item>
      <el-form-item :rules="[{validator: validateNotEmpty, errorMessage: '合格值上限不能为空', required: dataForm.extra.checkQualifiedMaxValue}]" label="合格值上限" prop="extra.qualifiedMaxValue">
        <el-input v-model="dataForm.extra.qualifiedMaxValue" class="input-width" @input="dataForm.extra.qualifiedMaxValue = toMoney(dataForm.extra.qualifiedMaxValue, dataForm.extra.decimalPlaces)"></el-input>
        <el-checkbox v-model="dataForm.extra.checkQualifiedMaxValue" label="合格判断，输入值大于合格值上限时为不合格。" class="ml20"></el-checkbox>
      </el-form-item>
      <el-form-item :rules="[{validator: validateNotEmpty, errorMessage: '合格值下限不能为空', required: dataForm.extra.checkQualifiedMinValue}]" label="合格值下限" prop="extra.qualifiedMinValue">
        <el-input v-model="dataForm.extra.qualifiedMinValue" class="input-width" @input="dataForm.extra.qualifiedMinValue = toMoney(dataForm.extra.qualifiedMinValue, dataForm.extra.decimalPlaces)"></el-input>
        <el-checkbox v-model="dataForm.extra.checkQualifiedMinValue" label="合格判断，输入值小于合格值下限时为不合格。" class="ml20"></el-checkbox>
      </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";
import {toMoney} from "@/utils/stringUtil";

export default {
  name: "inspectionNumberEdit",
  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;
    },
    'dataForm.extra.decimalPlaces'(value) {
      this.dataForm.checkItem.defaultValue = toMoney(this.dataForm.checkItem.defaultValue, value);
      this.dataForm.extra.validMaxValue = toMoney(this.dataForm.extra.validMaxValue, value);
      this.dataForm.extra.validMinValue = toMoney(this.dataForm.extra.validMinValue, value);
      this.dataForm.extra.qualifiedMaxValue = toMoney(this.dataForm.extra.qualifiedMaxValue, value);
      this.dataForm.extra.qualifiedMinValue = toMoney(this.dataForm.extra.qualifiedMinValue, value);
    },
  },
  data() {
    return {
      id: undefined, // 数据id
      dataForm: {
        checkItem: {
          itemName: undefined, // 检查项名称
          itemType: 2, // 检查项类别 1选择、2数字、3文本、4拍照
          isRequired: true, // 是否必填
          defaultValue: undefined, // 默认值
          isScore: true, // 是否参与评分
          patrolTypeId: undefined, // 巡检类别id
          patrolTypeName: undefined, // 巡检类别名称
          remark: undefined, // 备注说明
        },
        extra: { // 数字项类型检查项额外信息
          unit: undefined, // 单位
          decimalPlaces: 0, // 小数点后位数
          qualifiedScore: 0, // 合格评分
          noQualifiedScore: 0, // 不合格评分
          validMaxValue: undefined, // 有效值上限
          validMinValue: undefined, // 有效值下限
          qualifiedMaxValue: undefined, // 合格值上限
          qualifiedMinValue: undefined, // 合格值下限
          checkValidMaxValue: false, // 是否强制校验有效值上限 输入值不能大于有效值上限
          checkValidMinValue: false, // 是否强制校验有效值下限 输入值不能大于有效值下限
          checkQualifiedMaxValue: false, // 是否强制校验合格值上限 输入值大于合格值上限时为不合格
          checkQualifiedMinValue: false, // 是否强制校验合格值下限 输入值小于合格值下限时为不合格
        }
      },

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

      classifyList: [], // 巡检类别列表
      whetherList: [{id: true, label: "是"}, {id: false, label: "否"}]
    }
  },

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

  methods: {
    toMoney,
    validateNotEmpty,

    // 初始化数据
    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/num", this.dataForm).then(() => {
              this.$message.success("更新成功！");
              this.$eventBus.$emit("inspectionNumberUpdate");
              this.onCancel();
            });
          } else { // 添加
            this.$axios.post("/v1/check/item/add/num", this.dataForm).then(() => {
              this.$message.success("保存成功！");
              this.$eventBus.$emit("inspectionNumberAdd");
              this.onCancel();
            });
          }
        }
      });
    },

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

<style scoped lang="scss">
::v-deep .el-input-number.is-controls-right .el-input__inner {
  text-align: left;
}
.app-container {
  .input-width {
    width: 250px;
  }
}
</style>
