<template>
  <th-dialog
    ref="dialog"
    class="th-tg-select-dialog"
    v-bind="dialogProps"
    :loading="loading"
  >
    <el-row class="th-tg-select-content">
      <el-col :span="8">
        <substation-comp :request="request" @select="onSelectSubstation" />
      </el-col>
      <el-col :span="8">
        <line-comp ref="line" :request="request" @select="onSelectLine" />
      </el-col>
      <el-col :span="8">
        <tg-comp ref="tg" :request="request" @select="onSelectTg" />
      </el-col>
    </el-row>
  </th-dialog>
</template>
<script>
import ThDialog from '../../dialog/src/main'
import SubstationComp from './SubstationComp'
import LineComp from './LineComp'
import TgComp from './TgComp'

export default {
  name: 'ThTgSelect',
  components: {
    ThDialog,
    SubstationComp,
    LineComp,
    TgComp
  },
  props: {
    request: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      dialogProps: {
        title: '台区选择',
        showCancelButton: false,
        buttons: [],
        props: {
          fullscreen: true,
          appendToBody: true
        },
        isDisabledFullScreen: true
      }
    }
  },
  methods: {
    // dialog显示
    showDialog() {
      this.$refs.dialog.showDialog()
    },
    // 选择变电站
    onSelectSubstation(row) {
      this.$refs.line.onSearch(row.SUBSTATIONID)
    },
    // 选择线路
    onSelectLine(row) {
      this.$refs.tg.onSearch(row)
    },
    // 选择台区
    onSelectTg(row) {
      this.$emit('select', row)
      this.$refs.dialog.handleCancel()
    }
  }
}
</script>
