<template>
  <el-container class="th-equipment-tree--substation th-equipment-tree-panel">
    <el-header height="auto">
      <div class="buttons-wrap">
        <el-button :loading="loading" type="primary" size="mini" icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-radio-group v-model="type">
          <el-radio label="pms">pms</el-radio>
          <el-radio label="cis">营销</el-radio>
        </el-radio-group>
      </div>
      <th-form
        v-bind="form"
        :options="{
          orgNo: orgOptions,
          voltCode: volOptions
        }" />
    </el-header>
    <el-main class="tree-wrap">
      <el-tree
        ref="tree"
        v-loading="loading"
        v-bind="tree"
        node-key="id"
        highlight-current
        @node-click="handleNodeClick"
      >
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <img v-if="data.className === 'group'" src="./img/folder.png" class="group-class tree-icon" />
          <img v-if="data.className === 'children'" src="./img/item.png" class="children-class tree-icon" />
          <span>{{ node.label }}</span>
        </span>
      </el-tree>
    </el-main>
  </el-container>
</template>
<script>
export default {
  props: {
    request: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    const props = {
      clearable: true,
      style: {
        maxWith: '140px'
      }
    }
    return {
      loading: false,
      type: 'cis',
      orgOptions: [],
      volOptions: [],
      substations: [],
      form: {
        ref: 'form',
        labelWidth: '60px',
        loading: false,
        isSearch: true,
        data: {
          orgNo: '',
          substationName: '',
          voltCode: 'AC01101',
          category: '1'
        },
        items: [
          {
            label: '类别',
            prop: 'category',
            component: 'select',
            options: [
              {
                label: '本单位',
                value: '1'
              },
              {
                label: '外单位',
                value: '2'
              }
            ],
            props
          },
          {
            label: '单位',
            prop: 'orgNo',
            component: 'select',
            options: [],
            props: {
              clearable: true
            }
          },
          {
            label: '电压',
            prop: 'voltCode',
            component: 'select',
            options: [],
            props
          },
          {
            label: '变电站',
            prop: 'substationName',
            component: 'input',
            props: {
              clearable: true,
              placeholder: '请输入'
            }
          }
        ],
        props: {
          isSearch: true
        }
      },
      tree: {
        load: this.onLoadNode,
        lazy: true,
        props: {
          children: 'childNodes',
          label: 'text',
          isLeaf: 'leaf'
        }
      },
      resolve1: {},
      resolve2: {}
    }
  },
  watch: {
    'form.data.category'(val) {
      if (val === 1) {
        this.fetchAllCityInfo({ isShowCityAllOrg: '1' })
      } else if (val === 2) {
        this.fetchAllCityInfo({ level: '3' })
      }
    },
    'form.data.orgNo'(val) {
      if (val) {
        this.handleSearch()
      }
    },
    'type'(newVal, oldVal) {
      if (newVal && newVal !== oldVal) {
        this.handleSearch()
      }
    }
  },
  mounted() {
    this.fetchAllCityInfo({ isShowCityAllOrg: '1' })
    this.fetchCurrCity()
    this.fetchVoltageOptions()
  },
  methods: {
    // 请求单位下拉
    fetchAllCityInfo(params) {
      if (this.request.fetchAllCityInfo) {
        this.request.fetchAllCityInfo(params).then(res => {
          if (res.data.successful && Array.isArray(res.data.resultValue.items)) {
            this.form.items[1].options = res.data.resultValue.items.map(d => {
              d.value = d.CIS_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.orgNo = res.data.currCity
          }
        })
      }
    },
    // 请求电压下拉
    fetchVoltageOptions() {
      if (this.request.fetchVoltageOptions) {
        this.request.fetchVoltageOptions({
          types: 'POWEROFF_POWER_LEVEL',
          isActive: '1'
        }).then(res => {
          if (res.data.successful) {
            this.form.items.find(a => a.prop === 'voltCode').options = res.data.resultValue.items.map(b => {
              return {
                label: b.value,
                value: b.code
              }
            })
          }
        })
      }
    },
    // 搜索
    handleSearch() {
      if (this.substations.length) {
        this.substations.forEach(a => {
          const node = this.$refs.tree.getNode(a.id)
          this.$refs.tree.remove(node) //移除node
        })
      }
      this.fetchEquipmentSubstationList(this.resolve1)
    },
    // 加载树节点
    onLoadNode(node, resolve) {
      // resolove方法
      if (node.level === 0) {
        this.resolve1 = resolve
        // this.fetchEquipmentSubstationList(resolve)
      }
      if (node.level > 1) return resolve([])

      setTimeout(() => {
        if (node.level === 1) {
          this.resolve2 = resolve
          this.fetchEquipmentLine(node)
        }
      }, 500)
    },
    // 获取变电站
    fetchEquipmentSubstationList(resolve) {
      this.resolve1 = resolve
      this.loading = true
      this.request.fetchEquipmentSubstationList({
        source: this.type,
        filter: this.form.data
      }).then(res => {
        if (res.data.code === 0) {
          this.loading = false
          this.substations = res.data.data.map(a => {
            return {
              level: 0,
              id: a.SUBS_ID,
              text: a.SUBS_NAME,
              className: 'group'
            }
          })
          this.resolve1(this.substations)
        }
      })
    },
    // 获取线路
    fetchEquipmentLine(node) {
      this.request.fetchEquipmentLine({
        source: this.type,
        id: node.data.id
      }).then(res => {
        if (res.data.code === 0) {
          const data = res.data.data.filter(a => a.LINE_ID !== null)
          if (this.type === 'cis') {
            this.resolve2(data.map(a => {
              a.level = 1
              a.id = a.LINE_ID
              a.text = a.LINE_NAME
              a.substationId = node.data.id
              a.leaf = true
              a.className = 'children'
              return a
            }))
          } else {
            this.resolve2(data.map(a => {
              a.level = 1
              a.id = a.LINE_ID
              a.text = a.LINE_NAME
              a.substationId = a.SUBSTATIONID
              a.leaf = true
              a.className = 'children'
              return a
            }))
          }

        }
      })
    },

    // 点击节点
    handleNodeClick(data) {
      if (data.level) {
        this.$emit('select', data, this.type)
      }
    }
  }
}
</script>
