<template>
  <div class="params-wrap">
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="180px"
      class="demo-ruleForm"
      v-show="list"
    >
      <el-form-item
        v-for="doct in list"
        :key="doct.paramKey"
        :label="doct.paramName + ':'"
        :prop="doct.paramKey"
        :rules="[
          {
            required: false,
            message: doct.paramName + '不能为空',
            trigger: 'blur',
          },
        ]"
      >
        <el-input
          :disabled="doct.canModify === false"
          v-model="doct.paramVal"
          size="mini"
          style="width: calc(100% - 85px); margin-right: 10px"
        ></el-input>
        <el-switch
          size="mini"
          v-model="doct.canModify"
          active-text="未锁"
          inactive-text="锁定"
          :active-value="true"
          :inactive-value="false"
          active-color="#13ce66"
          inactive-color="#dcdfe6"
          class="switch-wrap"
        >
        </el-switch>
      </el-form-item>
    </el-form>
    <span v-show="list && list.length <= 0">暂无参数信息</span>
  </div>
</template>
<script>
import { getTypeParam } from "@/basedata/typeParams";
export default {
  name: "DeviceParam",
  props: ["typeKeys"],
  data() {
    return {
      list: [],
      ruleForm: {},
    };
  },
  methods: {
    getParams() {
      this.list = [];
      const newArr = getTypeParam(this.typeKeys);
      if (newArr) {
        newArr.forEach((v) => {
          this.list.push(Object.assign({}, v));
        });
      }
      this.$forceUpdate();
    },
    setList(data) {
      this.list = data;
    },
    getResult() {
      return this.list;
    },
  },
  watch: {
    typeKeys(val) {
      if (val) {
        this.getParams();
      }
    },
  },
};
</script>
<style lang="scss">
.params-wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;

  .el-form {
    padding: 0px !important;
  }
  .el-form-item {
    margin: 10px 0 !important;
  }
  /* switch按钮样式 */
  .switch-wrap .el-switch__label {
    position: absolute;
    display: none;
    color: #fff !important;
  }
  /*打开时文字位置设置*/
  .switch-wrap .el-switch__label--right {
    z-index: 1;
  }
  /* 调整打开时文字的显示位子 */
  .switch-wrap .el-switch__label--right span {
    margin-left: 10px;
  }
  /*关闭时文字位置设置*/
  .switch-wrap .el-switch__label--left {
    z-index: 1;
  }
  /* 调整关闭时文字的显示位子 */
  .switch-wrap .el-switch__label--left span {
    margin-left: 20px;
  }
  /*显示文字*/
  .switch-wrap .el-switch__label.is-active {
    display: block;
  }
  /* 调整按钮的宽度 */
  .switch-wrap.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 60px !important;
    margin: 0;
  }
}
.params-wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 5px;
}
.params-wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px #c4c4c4;
  background: #dededea6;
}
.params-wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #f6f6f6;
  border-radius: 10px;
  background: #ffffff;
}
</style>
