<template>
  <div class="app-container product-customparams-wrap">
    <el-row :gutter="10" class="mb8" v-show="isOption">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-s-platform"
          size="mini"
          @click="handleParams"
          >物模型参数</el-button
        >
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="functionList" height="300px">
      <el-table-column type="index" width="75" align="center" label="序号" />
      <el-table-column label="参数名称" align="left" prop="funName" />
      <el-table-column label="标识符" align="left" prop="funKey" />
      <el-table-column label="数据类型" align="left" prop="funDataType" >
         <template slot-scope="scope">
           <span>{{ funDataTypeOption[scope.row.funDataType] }}</span>
         </template>
      </el-table-column>
      <el-table-column label="所属分组" align="left" prop="funDataType" >
         <template slot-scope="scope">
           <span>{{ scope.row.cmdKey }}</span>
         </template>
      </el-table-column>
      <el-table-column label="传输类型" align="left" prop="funRwType" >
        <template slot-scope="scope">
           <span>{{ funRwTypeOption[scope.row.funRwType] }}</span>
         </template>
      </el-table-column>

      <!-- <el-table-column label="属性" align="left" prop="funObj" /> -->
      <el-table-column
        v-if="isOption"
        label="操作"
        width="100px"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row, scope.$index, 'update')"
            >修改</el-button
          >

          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row, scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改功能定义对话框 -->
    <el-dialog class="eldialog-wrap" :title="title" :visible.sync="attributeopen" width="550px">
      <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"
            :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="保留小数位:"
          v-if="form.funDataType === 'FLOAT'"
          prop="funValAcc"
        >
          <el-input
            onkeyup="value=value.replace(/[^\d]/g,'')"
            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" placeholder="请输入计量单位" />
        </el-form-item>

        <div class="item-title-wrap">数据校验</div>
        <div class="custom-wrap">
          <el-button
            size="mini"
            style="position: absolute; top: 460px; 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" 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" placeholder="最大值" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-input disabled placeholder="最大值" />
            </el-col>
          </el-row>
        </div>
      </el-form>

      <div class="form-button-div">
        <el-button type="primary" size="mini" @click="submitForm">保存</el-button>
        <el-button size="mini" @click="cancel">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      class="params-eldialog"
      title="物模型参数"
      top="5vh"
      :visible.sync="paramsOpen"
      width="800px"
    >
      <params-json-wrap
        v-if="paramsOpen === true"
        :other="{
          action: '',
          prodPK: sourceId,
          cmdKey: '',
        }"
        :paramsList="functionList"
      ></params-json-wrap>
    </el-dialog>

  </div>
</template>

<script>

import JsonEditor from "./jsonEditor.vue";
import ParamsJsonWrap from "./paramsJson";
const funDataTypeOption = {
  INT32: "整数型",
  FLOAT: "浮点型",
  TEXT: "字符串",
  BOOL: "布尔型",
};
const funRwTypeOption = {
  READWRITE: "可上报可下发",
  READ: "只上报",
  WRITE: "只下发",
};

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

export default {
  name: "CustomParams",
  components: {
    JsonEditor,
    ParamsJsonWrap,
  },
  props: {
    sourceId: {
      type: [Number, String],
      default: "",
    },
    isOption: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      funDataTypeOption,
      funRwTypeOption,
      funValidTypeOption,
      paramsOpen: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 功能定义表格数据
      functionList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      attributeopen: false,
      // 查询参数
      queryParams: {},
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        funName: [{ 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" }],
      },
      baseModelId: "",
      tempType: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //数据类型值变化出发方法
    funDataTypeChange(val) {
      this.form.funValAcc = null;
      this.form.funValidType = "";
    },
    addJsonObj() {
      this.$refs["jsonEditors"].addHandel();
    },
    jsonEvent(data) {
      this.form.funObj = data;
    },
    // 校验方式发生变化的方法
    funValidTypeChange(val) {
      this.form.funValMax = "";
      this.form.funValMin = "";
      this.form.funObj = "";
      if (val === "ENUM") {
        this.form.funObj = '{"0":""}';
      }
    },
    /** 查询功能定义列表 */
    getList() {
      this.loading = true
      this.functionList = []
      setTimeout(() => {
        this.functionList = this.$store.getters.attributeList
        this.$forceUpdate()
        this.loading = false
      }, 50)
    },
    // 取消按钮
    cancel() {
      this.attributeopen = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        sourceId: this.sourceId,
        mainId: undefined,
        funName: undefined,
        funKey: undefined,
        funDataType: undefined,
        funValAcc: undefined,
        funRwType: undefined,
        funValidType: undefined,
        funValMin: undefined,
        funValMax: undefined,
        funObj: {},
        unitName: "",
      };
      this.resetForm("form");
    },
    handleParams() {
       this.$emit('handleClick', { type: 'param', idx: 0 })
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$emit('handleClick', { type: 'add', idx: 0 })
    },
    handleCope(row) {
      this.reset();
      const funId = row.funId
      this.tempType = "create";
      this.title = "复制自定义参数";
      this.form = row;
    },
    /** 修改按钮操作 */
    handleUpdate(row, idx, type) {
      this.$emit('handleClick', { 'type': type, 'idx': idx })
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 新增和修改操作
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row, idx) {
      var that = this
      this.$confirm(
        // '是否确认删除功能定义编号为"' + funIds + '"的数据项?',
        "是否删除该选项",
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 执行删除数据
          that.$store.dispatch('DeleteAttribute', idx)
          that.$emit('handleClick', { 'type': 'list' })
        })
    },
  },
};
</script>
<style lang="scss">
.product-customparams-wrap {
  .nl-dialog .el-dialog:not(.is-fullscreen) {
    margin-top: 3vh !important;
  }
  .eldialog-wrap {
    .el-dialog__header {
      border-bottom: 1px solid #bdbdbd;
    }
    .el-dialog__body {
      padding: 0px;
    }
    .form-button-div {
      margin-top: 20px;
      height: 60px;
      border-top: 1px solid #bdbdbd;
      text-align: right;
      width: 100%;
      padding-top: 15px;

      .el-button + .el-button {
        margin-right: 10px;
      }
      .el-button {
        padding-top: 8px;
      }
    }
    .el-select {
      width: 100%;
    }
    .el-input-number {
      width: 100%;
    }
    .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;
        }
      }
    }
  }
  .params-eldialog {
    .el-dialog__header {
      border-bottom: 1px solid #747373;
    }
    .el-dialog__body {
      height: 100%;
      max-height: calc(100vh - 200px);
      overflow: auto;
      padding: 20px 5px;
    }
  }
}
.enumTypeDiv .enumTypeDiv::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 3px;
}
.enumTypeDiv::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px #9e9d9d;
  background: #ffffff;
}
.enumTypeDiv::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #f6f6f6;
  border-radius: 10px;
  background: #ffffff;
}

.product-customparams-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 5px;
}
.product-customparams-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px #c4c4c4;
  background: #dededea6;
}
.product-customparams-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #f6f6f6;
  border-radius: 10px;
  background: #ffffff;
}
.product-customparams-wrap .nl-dialog .form-button-div {
  margin-top: 0;
}
</style>
