<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: {
          lineId: '',
          switchName: ''
        },
        items: [
          {
            label: '起始开关',
            prop: 'switchName',
            component: 'input',
            props: {
              clearable: true
            }
          }
        ]
      },
      list: {
        ref: 'table',
        columns: [
          {
            prop: 'switchName',
            label: '起始开关'
          }
        ],
        showIndex: true,
        showSelection: true,
        pageSize: 100
        // props: {
        //   highlightCurrentRow: true
        // }
      },
      type: '',
      buttons: [
        {
          label: '查询',
          icon: 'el-icon-search',
          key: 'Search'
        }
      ],
      substationId: '',
      row: {}
    }
  },
  watch: {
    'list.selectedRows'(val) {
      if (val.length) {
        this.$emit('select', { substationId: this.substationId, id: this.form.data.lineId }, this.type, val)
      }
    }
  },
  methods: {
    onSearch(row, type) {
      this.type = type || ''
      this.row = row || {}
      if (row) {
        this.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)
          break
        default:
          break
      }
    },
    getParams() {
      const params = {
        ...this.form.data,
        findType: this.type,
        pageIndex: this.list.pageNo,
        pageSize: this.list.pageSize
      }
      return params
    },
    // 请求表格
    fetchTableApi() {
      this.buttons[0].loading = true
      if (this.request.fetchSwitchList) {
        const params = this.getParams()
        this.list.loading = true
        this.request.fetchSwitchList(params).then(res => {
          this.buttons[0].loading = false
          this.resetTableStatus()
          if (res.data.code === 0) {
            this.list.data = res.data.data.records
            this.list.totalCount = res.data.data.total
          }
        })
      }
    },
    // 重置表格状态
    resetTableStatus() {
      this.list.loading = false
      this.list.selectedRows = []
    }
  }
}
</script>
