<template>
  <div>
    <headerTitle title="表计信息" style="margin-top: 15px"></headerTitle>

    <el-descriptions
      title=""
      :column="4"
      size="medium"
      border
      style="edit"
      :label-style="labelStyle"
      class="descriptions"
    >
      <!-- 表计型号模板 -->
      <el-descriptions-item>
        <template slot="label"> 表计型号模板 </template>
        <el-form-item label-width="0">
          <el-input
            v-model="value.modelName"
            disabled
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-descriptions-item>

      <!-- 排序号 -->
      <el-descriptions-item>
        <template slot="label"> 排序号 </template>
        <el-form-item label-width="0">
          <el-input
            v-model="value.indexNo"
            type="number"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-descriptions-item>

      <!-- 是否能耗表计 -->
      <el-descriptions-item :span="4">
        <template slot="label"> 是否能耗表计 </template>
        <el-form-item label-width="0">
          <el-radio-group v-model="value.isEnergyMeter">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-descriptions-item>

      <!-- 选择"是"时显示的字段 -->
      <template v-if="form.isEnergyMeter == '1'">
        <!-- 用能分类 -->
        <el-descriptions-item>
          <template slot="label"> 用能分类 </template>
          <el-form-item label-width="0">
            <el-select
              clearable
              v-model="value.energyClassificationCode"
              placeholder=" "
              :style="{ width: '100%' }"
            >
              <el-option
                @click.native="handleEnergyClassificationChange(item)"
                v-for="item in energyConsumingUnitList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-descriptions-item>

        <!-- 能源名称 -->
        <el-descriptions-item>
          <template slot="label"> 能源名称 </template>
          <el-form-item label-width="0">
            <el-select
              v-model="value.energyTypeId"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                @click.native="energyTypeChange(item)"
                v-for="item in energyTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-descriptions-item>

        <!-- 能源单位 -->
        <el-descriptions-item>
          <template slot="label"> 能源单位 </template>
          <el-form-item label-width="0">
            <el-input
              :value="
                energyConsumingUnitList
                  .find((val) => val.value == value.energyClassificationCode)
                  ?.unit.find((val) => val.value == value.energyUnit)?.label
              "
              placeholder="请输入"
              readonly
            ></el-input>
          </el-form-item>
        </el-descriptions-item>

        <!-- 表计单位 -->
        <el-descriptions-item>
          <template slot="label"> 表计单位 </template>
          <el-form-item label-width="0">
            <el-input
              :value="
                energyConsumingUnitList
                  .find((val) => val.value == value.energyClassificationCode)
                  ?.unit.find((val) => val.value == value.meterUnit)?.label
              "
              placeholder="请输入 "
              readonly
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
      </template>
    </el-descriptions>
  </div>
</template>

<script>
  import { getPage } from '@/api/energyClassification/index.js';
  import { energyConsumingUnitList } from '@/enum/dict.js';

  export default {
    components: {},
    props: {
      form: {
        type: Object,
        default: () => {
          return {
            modelName: '',
            indexNo: '',
            isEnergyMeter: 0,
            energyClassificationCode: '',
            energyTypeId: '',
            energyUnit: '',
            meterUnit: ''
          };
        }
      }
    },

    watch: {
      form: {
        //监听的对象
        deep: true, //深度监听设置为 true
        handler: function (newValue) {
          if (newValue.energyClassificationCode) {
            this.loadEnergyTypeList();
          }
          this.value = newValue;
        }
      }
    },
    data() {
      return {
        labelStyle: {
          width: '180px'
        },
        value: {},
        // 用能分类选项
        energyConsumingUnitList,
        // 能源名称选项
        energyTypeList: []
      };
    },

    created() {},
    methods: {
      // 加载能源名称列表
      loadEnergyTypeList() {
        const params = {
          energyClassificationCode: this.value.energyClassificationCode,
          pageNum: 1,
          limit: 999
        };
        getPage(params)
          .then((res) => {
            this.energyTypeList = res.list;
          })
          .catch(() => {
            this.energyTypeList = [];
          });
      },
      energyTypeChange(data) {
        this.$set(this.value, 'energyUnit', data.energyUnit);
        this.$set(this.value, 'meterUnit', data.energyUnit);
        this.value.energyTypeName = data.name;
        this.value.energyTypeCode = data.code;
      },
      // 用能分类切换
      handleEnergyClassificationChange(data) {
        this.$set(this.value, 'energyTypeId', '');
        this.$set(this.value, 'energyClassificationName', data.label);
        this.value.energyTypeName = '';
        this.loadEnergyTypeList();
      }
    }
  };
</script>
<style lang="scss" scoped>
  :deep(.el-descriptions-item__label.is-bordered-label) {
    color: #606266;
  }
  ::v-deep .descriptions {
    margin-bottom: 10px;
  }
  .baseinfo-container .basic-details-title {
    font-size: 16px;
    margin: 15px 0;
  }
  .upload-container {
    display: flex;
    justify-content: flex-start;
    .file-list {
      margin-left: 50px;
      flex: 1;
    }
  }
  .equipment-container {
    // .content {
    //   padding: 0 20px;
    // }
    .label-none {
      .el-form-item__content {
        margin-left: 0 !important;
      }
    }
  }
  .sbwz {
    .item {
      width: 120px !important;
    }
    .item + .item {
      margin-left: 10px;
    }
    .item-input {
      width: 350px !important;
    }
  }
  .input {
    width: 100%;
  }
  .kzzd {
    width: 500px;
    .add-col {
      display: flex;
      .col-input {
        & + .col-input {
          margin-left: 10px;
        }
      }
      .del {
        margin-left: 10px;
      }
    }
  }
  ::v-deep .el-descriptions {
    .el-form-item {
      margin-bottom: 0px;
    }
  }
  :deep(.el-input__inner) {
    border: none;
  }
  :deep(.el-textarea__inner) {
    border: none;
  }

  :deep(.el-descriptions--medium.is-bordered) {
    .el-descriptions-item__cell {
      padding: 3px 10px;
    }
  }
</style>
