<template>
  <el-container>
    <el-header height="auto">
      <span>台区：</span>
      <span style="color: red;">{{ list.currentRow && list.currentRow.TGNAME }}</span>
    </el-header>
    <el-main>
      <th-search
        :ref="searchRef"
        :form="form"
        :list="list"
        @current-change="handleRowChange"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        @handleSubmit="handleSubmit"
      />
    </el-main>
  </el-container>
</template>
<script>
import search from '../../../src/mixins/search'
import ThSearch from '../../search/src/main'

export default {
  components: {
    ThSearch
  },
  mixins: [search],
  props: {
    request: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        data: {
          flag: '0',
          substationId: '',
          lineId: '',
          tgName: ''
        },
        items: [
          {
            label: '台区名称',
            prop: 'tgName',
            component: 'input',
            props: {
              maxlength: 200,
              clearable: true,
              placeholder: '请输入'
            }
          }
        ],
        buttons: [
          {
            label: '查询',
            key: 'search',
            skip: true,
            props: {
              loading: false
            }
          },
          {
            label: '确认',
            key: 'confirm',
            skip: true
          }
        ]
      },
      list: {
        columns: [
          {
            prop: 'TGNAME',
            label: '台区名称'
          }
        ],
        showIndex: true,
        pageSize: 300,
        props: {
          highlightCurrentRow: true
        }
      }
    }
  },
  watch: {
    'list.loading'(val) {
      this.form.buttons[0].props.loading = val
    }
  },
  methods: {
    onSearch(row) {
      if (row) {
        this.form.data.substationId = row.SUBSTATIONID
        this.form.data.lineId = row.LINEID
        this.fetchTableApi()
      }
    },
    // 请求表格
    fetchTableApi() {
      if (this.request.fetchTgList) {
        const params = this.getParams()
        this.list.loading = true
        this.request.fetchTgList(params).then(res => {
          this.resetTableStatus()
          if (res.data.successful) {
            this.list.data = res.data.resultValue.items
            this.list.totalCount = res.data.resultValue.itemCount
          }
        })
      }
    },
    // 点击查询
    handleSubmit(data, btn) {
      switch (btn.key) {
        case 'search':
          this.fetchTableApi()
          break
        case 'confirm':
          this.onConfirm()
          break
        default:
          break
      }
    },
    onConfirm() {
      if (!this.list.currentRow) {
        this.$message.warning('请选择一个台区！')
      } else {
        this.$emit('select', this.list.currentRow)
      }
    }
  }
}
</script>
