<template>
  <el-container class="th-equipment--line th-equipment-tree-panel">
    <el-header height="auto">
      <div class="buttons-wrap" style="justify-content:flex-start">
        <el-button v-for="(a, index) in buttons" :key="index" :loading="a.loading" type="primary" size="mini" :icon="a.icon" @click="handleEvent(a.key)">{{ a.label }}</el-button>
      </div>
    </el-header>
    <el-main>
      <th-table
        ref="table"
        v-bind="list"
        @handleSelectionChange="handleSelectionChange"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </el-main>
  </el-container>
</template>
<script>
import baseTable from './../../../src/mixins/baseTable'

export default {
  mixins: [baseTable],
  props: {
    request: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      buttons: [
        {
          label: '确认',
          icon: 'el-icon-check',
          key: 'ConfirmAdd'
        },
        {
          label: '删除',
          icon: 'el-icon-delete',
          key: 'Delete'
        }
      ],
      loading: false,
      list: {
        columns: [
          {
            prop: 'TGNAME',
            label: '已选择台区名称'
          }
        ],
        showIndex: true,
        showSelection: true,
        pageSize: 100,
        props: {
          highlightCurrentRow: true
        }
      },
      row: {},
      type: 'chooseTg',
      findType: '',
      oringinSelectedRow: {}
    }
  },
  watch: {
    // 'list.loading' (val) {
    //   this.form.buttons[0].props.loading = val
    // },
  },
  methods: {
    onSearch(selectedRows, oringinSelectedRow) {
      this.oringinSelectedRow = oringinSelectedRow
      this.list.data = selectedRows || []
      this.list.totalCount = selectedRows.length
    },
    // selectedType为2时，调获取台区接口
    getParams() {
      const params = {}
      params.params = JSON.stringify({
        filter: this.$util.serialize({
          substationId: this.row.substationId,
          lineId: this.row.id,
          flag: '0',
          pub_priv_flag: '-1',
          findType: this.findType
        }),
        pageIndex: this.list.pageNo,
        pageSize: this.list.pageSize
      })
      return params
    },
    // 请求表格
    fetchTableApi() {
      if (this.request.fetchEquipmentTgList) {
        const params = this.getParams()
        this.list.loading = true
        this.request.fetchEquipmentTgList(params).then(res => {
          this.resetTableStatus()
          if (res.data.successful) {
            this.list.data = res.data.resultValue.items
            this.list.totalCount = res.data.resultValue.itemCount
          }
        })
      }
    },
    handleSearch(row, type) {
      this.row = row || {}
      this.findType = type || ''
      this.fetchTableApi()
    },
    handleEvent(name) {
      switch (name) {
        case 'ConfirmAdd':
          this.handleConfirmAdd()
          break
        case 'Delete':
          this.handleDelete()
          break
        default:
          break
      }
    },
    // 批量删除
    handleDelete() {
      if (this.list.selectedRows.length) {
        if (this.type === 'chooseTg') {
          this.list.data = this.list.data.filter(a =>
            !this.list.selectedRows.find(b => b.TGID === a.TGID)
          )
        } else {
          this.list.data = this.list.data.filter(a =>
            !this.list.selectedRows.find(b => b.CONS_NO === a.CONS_NO)
          )
        }
        this.list.totalCount = this.list.data.length
      }
    },
    // 确认添加
    handleConfirmAdd() {
      if (this.type === 'cust') {
        this.$emit('select', this.list.data, this.oringinSelectedRow)
      } else {
        this.$emit('select', this.list.data)
      }
    },
    // 点击查询
    handleSubmit(data, btn) {
      this.fetchTableApi()
    },
    // 重置表格状态
    resetTableStatus() {
      this.list.loading = false
      this.list.selectedRows = []
    }
  }
}
</script>
