<template>
  <el-container class="th-equipment--user 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
        ref="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: () => ({})
    }
  },
  data() {
    return {
      buttons: [
        {
          label: '查询',
          icon: 'el-icon-search',
          key: 'Search'
        },
        {
          label: '添加',
          icon: 'el-icon-th-add',
          key: 'Add'
        },
        {
          label: '全部添加',
          icon: 'el-icon-th-add',
          key: 'AddAll'
        }
      ],
      tgIds: '',
      form: {
        labelWidth: '70px',
        loading: false,
        isSearch: true,
        data: {
          flag: '0',
          consNo: '',
          consName: ''
        },
        items: [
          {
            label: '用户编号',
            prop: 'consNo',
            component: 'input',
            props: {
              clearable: true,
              placeholder: '请输入'
            }
          },
          {
            label: '用户名称',
            prop: 'consName',
            component: 'input',
            props: {
              clearable: true,
              placeholder: '请输入'
            }
          }
        ]
      },
      list: {
        ref: 'table',
        columns: [
          {
            prop: 'CONS_NO',
            label: '用户编号'
          },
          {
            prop: 'CONS_NAME',
            label: '用户名称'
          },
          {
            prop: 'TEL',
            label: '联系方式'
          }
        ],
        showIndex: true,
        showSelection: true,
        pageSize: 300,
        oringinSelectedRow: []
        // props: {
        //   highlightCurrentRow: true
        // }
      }
    }
  },
  methods: {
    // 搜索
    onSearch(row) {
      this.oringinSelectedRow = row || {}
      this.tgIds = row.TGID
      this.list.pageNo = 1
      this.fetchTableApi()
    },
    handleEvent(name) {
      switch (name) {
        case 'Search':
          this.onSearch(this.oringinSelectedRow)
          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, this.oringinSelectedRow)
      } else {
        this.$message.warning('请选择数据！')
      }
    },
    handleAddAll() {
      // this.$refs.table.$refs.table.toggleAllSelection(true)
      this.$emit('select', this.list.data, this.oringinSelectedRow)
    },
    // 请求表格
    fetchTableApi() {
      this.buttons[0].loading = true
      if (this.request.fetchEquipmentUserList) {
        const params = {
          tgIds: this.tgIds,
          filter: {
            ...this.form.data,
            params: {
              pageIndex: this.list.pageNo,
              pageSize: this.list.pageSize
            }
          }
        }
        this.list.loading = true
        this.request.fetchEquipmentUserList(params).then(res => {
          this.buttons[0].loading = false
          this.resetTableStatus()
          if (res.data.successful) {
            this.list.data = res.data.resultValue.items
            this.list.totalCount = res.data.resultValue.itemCount
          }
        })
      }
    },
    // 重置表格状态
    resetTableStatus() {
      this.list.loading = false
      this.list.selectedRows = []
    }
  }
}
</script>
