<template>
  <div class="attribute-form-view">
    <el-form
      ref="form"
      style="padding: 20px 20px 0px 20px"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="参数名称:" prop="funName">
        <el-input v-model="form.funName" placeholder="请输入参数名称" />
      </el-form-item>
      <el-form-item label="标识符:" prop="funKey">
        <el-input
          v-model="form.funKey"
          @input="inputChange"
          :disabled="tempType === 'update'"
          placeholder="请输入标识符"
        />
      </el-form-item>
      <el-form-item label="数据类型:" prop="funDataType">
        <el-select
          v-model="form.funDataType"
          @change="funDataTypeChange"
          placeholder="请选择数据类型"
        >
          <el-option
            v-for="(dice, value) in funDataTypeOption"
            :value="value"
            :key="value"
            :label="dice"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="分组:" prop="cmdKey">
        <el-select v-model="form.cmdKey" placeholder="请选分组">
          <el-option
            v-for="(item, idx) in groupList"
            :value="item.cmdKey"
            :key="idx"
            :label="item.cmdName"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="保留小数位:"
        v-if="form.funDataType === 'FLOAT'"
        prop="funValAcc"
      >
        <el-input
          onkeyup="value=value.replace(/[^\d]/g,'')"
          @input="inputChange"
          v-model="form.funValAcc"
        ></el-input>
      </el-form-item>
      <el-form-item label="传输类型:" prop="funRwType">
        <el-select v-model="form.funRwType" placeholder="请选择传输类型">
          <el-option
            v-for="(dice, value) in funRwTypeOption"
            :value="value"
            :key="value"
            :label="dice"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="计量单位:" prop="unitName">
        <el-input v-model="form.unitName" @input="inputChange" placeholder="请输入计量单位" />
      </el-form-item>

      <div class="item-title-wrap">数据校验</div>
      <div class="custom-wrap">
        <el-button
          size="mini"
          :style="`position: absolute; top: ${ form.funDataType === 'FLOAT' ? '585px ' : '530px' }; left: 40px`"
          v-if="form.funValidType === 'ENUM'"
          @click="addJsonObj"
          >添加数值</el-button
        >
        <el-form-item
          label="校验方式:"
          :style="form.funValidType === 'ENUM' ? 'height: 80px;' : ''"
          prop="funValidType"
        >
          <el-select
            v-model="form.funValidType"
            @change="funValidTypeChange"
            placeholder="请选择校验方式"
          >
            <el-option
              v-for="(dice, value) in funValidTypeOption"
              v-show="
                !(
                  (form.funDataType === 'TEXT' && value === 'RANGE') ||
                  (form.funDataType !== 'TEXT' && value === 'LENGTH') ||
                  (form.funDataType === 'BOOL' && value === 'RANGE') ||
                  (form.funDataType === 'BOOL' && value === 'LENGTH')
                )
              "
              :value="value"
              :key="value"
              :label="dice"
            />
          </el-select>
        </el-form-item>

        <div class="enumTypeDiv" v-if="form.funValidType === 'ENUM'">
          <div class="enum-item">
            <json-editor
              ref="jsonEditors"
              :jsonString="form.funObj"
              @event="jsonEvent"
            />
          </div>
        </div>

        <el-row
          :gutter="10"
          class="max-min-row"
          v-if="form.funValidType === 'RANGE' || form.funValidType === 'LENGTH'"
        >
          <el-col :span="12">
            <el-form-item label prop="funValMin">
              <el-input v-model="form.funValMin" @input="inputChange" placeholder="最小值" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-input disabled placeholder="最小值" />
          </el-col>
        </el-row>

        <el-row
          :gutter="10"
          class="max-min-row"
          v-if="form.funValidType === 'RANGE' || form.funValidType === 'LENGTH'"
        >
          <el-col :span="12">
            <el-form-item label prop="funValMax">
              <el-input v-model="form.funValMax" @input="inputChange" placeholder="最大值" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-input disabled placeholder="最大值" />
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import JsonEditor from "./jsonEditor";
const funDataTypeOption = {
  INT32: "整数型",
  FLOAT: "浮点型",
  TEXT: "字符串",
  BOOL: "布尔型",
};
const funRwTypeOption = {
  READWRITE: "可上报可下发",
  READ: "只上报",
  WRITE: "只下发",
};

const funValidTypeOption = {
  ENUM: "枚举",
  RANGE: "范围",
  LENGTH: "长度",
  NOT: "不校验",
};

export default {
  name: "AttributeForm",
  components: { JsonEditor },
  props: {
    paramIdx: {
      type: Number,
      default: 0,
    },
    tempType: {
      type: String,
      default: "add",
    },
  },
  computed: {
    ...mapGetters(["groupList"]),
  },
  data() {
    return {
      funDataTypeOption,
      funRwTypeOption,
      funValidTypeOption,
      form: {},
      // 表单校验
      rules: {
        funName: [
          { required: true, message: "参数名称不能为空", trigger: "blur" },
        ],
        cmdKey: [{ required: true, message: "分组不能为空", trigger: "blur" }],
        funKey: [
          { required: true, message: "标识符不能为空", trigger: "blur" },
        ],
        funDataType: [
          { required: true, message: "数据类型不能为空", trigger: "blur" },
        ],
        funRwType: [
          { required: true, message: "传输类型不能为空", trigger: "blur" },
        ],
        funValidType: [
          { required: true, message: "校验方式不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    if (this.tempType !== "add" && this.paramIdx >= 0) {
      this.getParamIten(this.paramIdx);
    }
  },
  methods: {
    inputChange() {
      this.$forceUpdate()
    },
    cmdChange(val) {
      let newArr = this.groupList.filter((v) => {
        if (v["cmdKey"] === val) {
          return v["cmdType"];
        }
      });
      this.form.funRwType = newArr[0] || this.form.funRwType;
    },
    getParamIten(idx) {
      this.$store.dispatch("GetAttributeItem", idx).then((res) => {
        console.log(res);
        this.form = JSON.parse(JSON.stringify(res));
      });
    },
    /** 提交验证 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 新增和修改操作
          if (this.tempType === "add") {
            this.$store.dispatch("AddAttribute", this.form);
          } else if (this.tempType === "update") {
            this.$store.dispatch("EditAttribute", {
              item: this.form,
              idx: this.paramIdx,
            });
          }
          this.$emit("ok");
        }
      });
    },
    // 回调 ok
    //数据类型值变化出发方法
    funDataTypeChange(val) {
      this.form.funValAcc = null;
      this.form.funValidType = "";
    },
    addJsonObj() {
      this.$refs["jsonEditors"].addHandel();
    },
    jsonEvent(data) {
      this.form.funObj = data;
    },
    // 校验方式发生变化的方法
    funValidTypeChange(val) {
      this.form.funValidType = val;
      this.form.funValMax = "";
      this.form.funValMin = "";
      this.form.funObj = "";
      if (val === "ENUM") {
        this.form.funObj = '{"0":""}';
      }
      this.$forceUpdate()
    },
  },
};
</script>
<style lang="scss">
.attribute-form-view {
  .item-title-wrap {
    font-size: 15px;
    font-weight: 600;
    height: 30px;
  }
  .custom-wrap {
    border: 1px solid #d8d7d7;
    padding-top: 20px;
    background: #f0f0f0;
    padding-right: 10px;
    .el-form-item {
      border-bottom: 1px dashed #bdbdbd;
      padding-bottom: 12px;
      margin-bottom: 10px;
      margin-left: 10px;
    }
    .el-form-item--medium .el-form-item__label {
      width: 90px !important;
    }
    .el-form-item--medium .el-form-item__content {
      margin-left: 90px !important;
    }
    .enumTypeDiv {
      display: flex;
      justify-content: flex-end;
      max-height: 200px;
      overflow: auto;
      .enum-item {
        width: 90%;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }
    .max-min-row {
      width: 90%;
      padding: 0;
      margin-left: 5% !important;
      margin-right: 0 !important;
      .el-form-item {
        border: 0;
        margin-left: 0;
      }
      .el-form-item--medium .el-form-item__content {
        margin-left: 0px !important;
      }
    }
  }
  .el-select {
    width: 100%;
  }
  .el-input-number {
    width: 100%;
  }
  .enumTypeDiv {
    display: flex;
    justify-content: flex-end;
    max-height: 200px;
    overflow: auto;
    .enum-item {
      width: 90%;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
  .max-min-row {
    width: 90%;
    padding: 0;
    margin-left: 5% !important;
    margin-right: 0 !important;
    .el-form-item {
      border: 0;
      margin-left: 0;
    }
    .el-form-item--medium .el-form-item__content {
      margin-left: 0px !important;
    }
  }
}
</style>


