<template>
  <el-drawer
    title="新增"
    :visible.sync="centervisible"
    size="60%"
    @close='closeA'>
    <div class="box">
      <!-- 搜索工作栏 -->
      <search-bar
        :formConfigs="formConfig"
        ref="searchBarForm"
        :removeBlue='true'
        @headBtnClick="buttonClick"
      />
      <!-- 列表 -->
      <base-table
        :page="queryParams.pageNo"
        :limit="queryParams.pageSize"
        :table-props="tableProps"
        :table-data="list"
        :max-height="tableH"
        :selectWidth="55"
        @selection-change="selectChange"
      >
      </base-table>
      <pagination
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        :total="total"
        @pagination="getList"
      />
    </div>
  </el-drawer>
</template>
<script>
import { addParamPage, createEnergyStatisticsDet } from '@/api/monitoring/energyStatisticsDet'
import { publicFormatter } from '@/utils/dict'
const tableProps = [
  {
    prop: 'objName',
    label: '所属对象'
  },
  {
    prop: 'objRemark',
    label: '对象备注'
  },
  {
    prop: 'paramName',
    label: '参数名称'
  },
  {
    prop: 'unit',
    label: '单位',
    filter: publicFormatter('energy_unit')
  },
  {
    prop: 'desc',
    label: '描述'
  }
]
export default {
  name: 'EnergyStatisticsDetAdd',
  data() {
    return {
      centervisible: false,
      formConfig: [
        {
          type: 'select',
          label: '对象类型',
          selectOptions: this.getDictDatas(this.DICT_TYPE.OBJECT_TYPE),
          labelField: 'label',
          valueField: 'value',
          param: 'objType'
        },
        {
          type: 'input',
          label: '参数名称',
          placeholder: '方案名称',
          param: 'paramName'
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: 'separate'
        },
        {
          type: 'button',
          btnName: '关联',
          name: 'add',
          color: 'primary',
          plain: true
        }
      ],
      queryParams: {
        pageNo: 1,
        pageSize: 20,
        energyTypeId: null,
        statisticId: null,
        paramName: '',
        objType: ''
      },
      tableProps,
      list: [],
      total: 0,
      tableH: this.tableHeight(260),
      selectedList: []
    }
  },
  methods: {
    init(param) {
      this.queryParams.statisticId = param.statisticsId
      this.queryParams.energyTypeId = param.energyTypeId
      window.addEventListener('resize', () => {
        this.tableH = this.tableHeight(260)
      })
      this.centervisible = true
      this.getList()
    },
    getList() {
      addParamPage({...this.queryParams}).then((res) => {
        this.list = res.data.list || []
        this.total = res.data.total
      })
    },
    buttonClick(val) {
      switch (val.btnName) {
        case 'search':
          this.queryParams.pageNo = 1;
          this.queryParams.objType = val.objType
          this.queryParams.paramName = val.paramName
          this.getList()
          break
        default:
          // 关联
          this.connectParam()
      }
    },
    // 选中数据
    selectChange(val) {
      this.selectedList = val
    },
    // 关联
    connectParam() {
      let param = {
        statisticsId: this.queryParams.statisticId,
        plcParamIds: []
      }
      if (this.selectedList.length === 0) {
        this.$modal.msgWarning("请选勾选数据")
        return false
      } else {
        this.selectedList.map((item) => {
          param.plcParamIds.push(item.id)
        })
      }
      createEnergyStatisticsDet({...param}).then((res) => {
        if (res.code === 0) {
          this.$modal.msgSuccess("操作成功");
          this.queryParams.pageNo = 1;
          this.getList()
        }
      })
    },
    closeA() {
      this.$emit('closeDet')
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding: 0 32px;
}
</style>
