<template>
  <el-container class="th-equipment--tg th-equipment-tree-panel">
    <el-header height="auto">
      <div class="buttons-wrap">
        <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>
      <th-form ref="form" v-bind="form" />
    </el-header>
    <el-main>
      <th-table
        v-bind="list"
        @handleSelectionChange="handleSelectionChange"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </el-main>
  </el-container>
</template>
<script>
import baseTable from './../../../src/mixins/baseTable'
import baseForm from './../../../src/mixins/baseForm'

export default {
  mixins: [baseTable, baseForm],
  props: {
    request: {
      type: Object,
      default: () => ({})
    },
    selectType: {
      type: Number,
      default: 4
    }
  },
  data() {
    return {
      form: {
        labelWidth: '80px',
        loading: false,
        isSearch: true,
        data: {
          flag: '0',
          substationId: '',
          lineId: '',
          tgId: '',
          tgName: '',
          pub_priv_flag: '-1'
        },
        items: [
          {
            label: '台区ID',
            prop: 'tgId',
            component: 'input',
            props: {
              clearable: true,
              placeholder: '请输入'
            }
          },
          {
            label: '名称',
            prop: 'tgName',
            component: 'input',
            props: {
              clearable: true,
              placeholder: '请输入'
            }
          },
          {
            label: '资产属性',
            prop: 'pub_priv_flag',
            component: 'select',
            options: [
              {
                value: '-1',
                label: '全部'
              },
              {
                value: '01',
                label: '公变'
              },
              {
                value: '02',
                label: '专变'
              }
            ],
            props: {
              clearable: true
            }
          }
        ]
      },
      list: {
        ref: 'table',
        columns: [
          {
            prop: 'PUB_PRIV_FLAG',
            label: '资产属性',
            formatter: (row, col, val) => {
              return val === '01' ? '公变' : val === '02' ? '专变' : ''
            }
          },
          {
            prop: 'name',
            label: '配变名称（台区ID）',
            minWidth: '130'
          }
        ],
        showIndex: true,
        showSelection: true,
        pageSize: 100
        // props: {
        //   highlightCurrentRow: true
        // }
      },
      type: '',
      buttons: [
        {
          label: '查询',
          icon: 'el-icon-search',
          key: 'Search'
        },
        {
          label: '添加',
          icon: 'el-icon-th-add',
          key: 'Add'
        },
        {
          label: '全部添加',
          icon: 'el-icon-th-add',
          key: 'AddAll'
        }
      ],
      row: {},
      switchRows: []
    }
  },
  methods: {
    onSearch(row, type, switchRows) {
      this.type = type 
      this.row = row || {}
      this.switchRows = switchRows || []
      if (row) {
        this.form.data.substationId = row.substationId
        this.form.data.lineId = row.id 
      }
      this.list.pageNo = 1
      this.fetchTableApi()
    },
    handleEvent(name) {
      switch (name) {
        case 'Search':
          this.onSearch(this.row, this.type, this.switchRows)
          break
        case 'Add':
          this.handleAdd()
          break
        case 'AddAll':
          this.handleAddAll()
          break
        default:
          break
      }
    },
    handleAdd() {
      if (this.list.selectedRows.length) {
        this.$emit('select', this.list.selectedRows)
      } else {
        this.$message.warning('请选择数据！')
      }
    },
    handleAddAll() {
      // this.$refs.table.$refs.table.toggleAllSelection(true)
      this.$nextTick(() => {
        this.$emit('select', this.list.data)
      })
    },
    getParams() {
      const params = {}
      params.params = JSON.stringify({
        filter: this.$util.serialize({
          ...this.form.data,
          findType: this.type,
          switchId: this.switchRows.map(a => {
            return a.switchId
          }).join(',')
        }),
        pageIndex: this.list.pageNo,
        pageSize: this.list.pageSize
      })
      return params
    },
    // 请求表格
    fetchTableApi() {
      this.buttons[0].loading = true
      if (this.request.fetchEquipmentTgList) {
        const params = this.getParams()
        this.list.loading = true
        this.request.fetchEquipmentTgList(params).then(res => {
          this.buttons[0].loading = false
          this.resetTableStatus()
          if (res.data.successful) {
            this.list.data = res.data.resultValue.items.map(a => {
              a.name = a.TGNAME + '(' + a.TGNO + ')'
              return a
            })
            this.list.totalCount = res.data.resultValue.itemCount
          }
        })
      }
    },
    // 重置表格状态
    resetTableStatus() {
      this.list.loading = false
      this.list.selectedRows = []
    }
  }
}
</script>
