<template>
  <el-container>
    <el-header height="auto">
      <span>线路：</span>
      <span style="color: red;">{{ list.currentRow && list.currentRow.LINENAME }}</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: {
          substationId: '',
          lineName: ''
        },
        items: [
          {
            label: '线路名称',
            prop: 'lineName',
            component: 'input',
            props: {
              maxlength: 200,
              clearable: true,
              placeholder: '请输入'
            }
          }
        ],
        buttons: [
          {
            label: '查询',
            key: 'search',
            skip: true,
            props: {
              loading: false
            }
          }
        ]
      },
      list: {
        columns: [
          {
            prop: 'LINENAME',
            label: '线路名称'
          }
        ],
        showIndex: true,
        pageSize: 100,
        props: {
          highlightCurrentRow: true
        }
      }
    }
  },
  watch: {
    'list.loading'(val) {
      this.form.buttons[0].props.loading = val
    }
  },
  methods: {
    onSearch(substationId) {
      if (substationId) {
        this.form.data.substationId = substationId
        this.fetchTableApi()
      }
    },
    // 请求表格
    fetchTableApi() {
      if (this.request.fetchLineList) {
        const params = this.getParams()
        this.list.loading = true
        this.request.fetchLineList(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) {
      this.fetchTableApi()
    },
    // 表格行选择
    handleRowChange(currentRow) {
      this.list.currentRow = currentRow
      this.$emit('select', currentRow)
    }
  }
}
</script>
