<template>
  <el-container>
    <el-header height="auto">
      <span>变电站：</span>
      <span style="color: red;">{{ list.currentRow && list.currentRow.SUBSTATIONNAME }}</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: {
          org: '',
          substation: ''
        },
        items: [
          {
            label: '单位',
            prop: 'org',
            component: 'select',
            options: [],
            props: {
              clearable: true
            }
          },
          {
            label: '变电站',
            prop: 'substation',
            component: 'input',
            props: {
              maxlength: 200,
              clearable: true,
              placeholder: '请输入'
            }
          }
        ],
        buttons: [
          {
            label: '查询',
            key: 'search',
            skip: true,
            props: {
              loading: false
            }
          }
        ],
        style: {
          minWidth: '500px'
        }
      },
      list: {
        columns: [
          {
            prop: 'SUBSTATIONNAME',
            label: '变电站名称'
          }
        ],
        showIndex: true,
        pageSize: 50,
        props: {
          highlightCurrentRow: true
        }
      }
    }
  },
  watch: {
    'list.loading'(val) {
      this.form.buttons[0].props.loading = val
    }
  },
  mounted() {
    this.fetchAllCityInfo()
    this.fetchCurrCity()
  },
  methods: {
    // 请求单位下拉
    fetchAllCityInfo() {
      if (this.request.fetchAllCityInfo) {
        this.request.fetchAllCityInfo({ level: 3 }).then(res => {
          if (res.data.successful && Array.isArray(res.data.resultValue.items)) {
            this.form.items[0].options = res.data.resultValue.items.map(d => {
              d.value = d.CITY_ORG_NO
              d.label = d.JC
              return d
            })
          }
        })
      }
    },
    // 请求当前单位
    fetchCurrCity() {
      if (this.request.fetchCurrCity) {
        this.request.fetchCurrCity().then(res => {
          if (res.data.success) {
            this.form.data.org = res.data.currCity
            this.fetchTableApi()
          }
        })
      }
    },
    // 请求表格
    fetchTableApi() {
      if (this.request.fetchSubstationList) {
        const params = this.getParams()
        this.list.loading = true
        this.request.fetchSubstationList(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>
