<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>
