<template>
  <th-dialog
    ref="dialog"
    class="th-equipment-tree-dialog"
    v-bind="dialogProps"
    :title="title"
  >
    <el-row class="th-equipment-tree-content">
      <!-- 变电站 -->
      <el-col :span="spanNum">
        <substation-comp ref="substation" :request="request" @select="onSelectSubstation" />
      </el-col>
      <!-- 台区 -->
      <el-col v-if="selectType > 2" :span="spanNum">
        <tg-user-comp v-if="selectType === 4 && equipmentType === 'user'" ref="tgUser" :request="request" :select-type="selectType" @select="onSelectTg" />
        <switch-comp v-if="selectType === 4 && equipmentType === 'tq'" ref="switch" :request="request" @select="onSelectSwitch"></switch-comp>
      </el-col>
      <!-- 用户 -->
      <el-col v-if="selectType > 3" :span="spanNum">
        <user-comp v-if="selectType === 4 && equipmentType === 'user'" ref="user" :request="request" @select="onSelectUser" />
        <tg-comp v-if="selectType === 4 && equipmentType === 'tq'" ref="tg" :request="request" :select-type="selectType" @select="onSelectTg" />
      </el-col>
      <!-- 已选择 -->
      <el-col :span="spanNum">
        <choose-comp v-if="selectType === 4 && equipmentType === 'user'" ref="choose" :request="request" @select="onSelectChooseUser" />
        <choose-tg-comp v-if="selectType === 2 || (selectType === 4 && equipmentType === 'tq')" ref="chooseTg" :request="request" @select="onSelectChoose" />
      </el-col>
    </el-row>
  </th-dialog>
</template>
<script>
import SubstationComp from './substation'
import ChooseComp from './choose'
import ChooseTgComp from './choose-tg'
import TgComp from './tg'
import TgUserComp from './tg-user'
import UserComp from './user'
import SwitchComp from './switch'

export default {
  name: 'ThEquipmentTree',
  components: {
    SubstationComp,
    ChooseTgComp,
    ChooseComp,
    TgComp,
    TgUserComp,
    UserComp,
    SwitchComp
  },
  props: {
    // 请求接口
    request: {
      type: Object,
      default: () => ({})
    },
    // 选择器类型：4-用户，3-台区，2-线路
    selectType: {
      type: Number,
      default: 4,
      validator(val) {
        return [2, 3, 4].includes(val)
      }
    },
    multiple: {
      type: Boolean,
      default: true
    },
    // 可选值：cis,pms
    sourceType: {
      type: String,
      default: 'cis'
    },
    equipmentType: {
      type: String,
      default: 'tq'
    }
  },
  data() {
    return {
      dialogProps: {
        loading: false,
        showCancelButton: false,
        buttons: [],
        props: {
          fullscreen: true,
          appendToBody: true
        },
        isDisabledFullScreen: true
      }
    }
  },
  computed: {
    title() {
      if (this.selectType === 2) {
        return '线路选择'
      } else if (this.selectType === 4 && this.equipmentType === 'tq') {
        return '台区选择'
      } else {
        return '用户选择'
      }
    },
    spanNum() {
      return 24 / this.selectType
    }
  },
  methods: {
    // dialog显示
    showDialog() {
      this.$refs.dialog.showDialog()
    },
    getMultiple() {
      return this.multiple
    },
    getSourceType() {
      return this.sourceType || 'cis'
    },
    // 选择变电站
    onSelectSubstation(row, type) {
      if (this.selectType === 4 && this.equipmentType === 'user') {
        this.$refs.tgUser.onSearch(row, type)
      } else if (this.selectType === 4 && this.equipmentType === 'tq') {
        this.$refs.switch.onSearch(row, type)
        this.$refs.tg.onSearch(row, type)
      } else {
        this.$refs.chooseTg.handleSearch(row, type)
      }
    },
    // 选择开关
    onSelectSwitch(row, type, switchRows) {
      this.$refs.tg.onSearch(row, type, switchRows)
    },
    // 选择台区
    onSelectTg(selectedRows) {
      if (this.selectType === 4 && this.equipmentType === 'user') {
        this.$refs.user.onSearch(selectedRows)
      } else {
        this.$refs.chooseTg.onSearch(selectedRows)
      }
    },
    // 选择用户
    onSelectUser(selectedRows, oringinSelectedRow) {
      this.$refs.choose.onSearch(selectedRows, oringinSelectedRow)
    },
    // 已选择台区
    onSelectChoose(rows) {
      this.$emit('select', rows)
      this.$refs.dialog.handleCancel()
    },
    onSelectChooseUser(selectedRows, oringinSelectedRow) {
      this.$emit('select', selectedRows, oringinSelectedRow, 'user')
      this.$refs.dialog.handleCancel()
    }
  }
}
</script>
