<template>
  <treeselect
    :value="value"
    :options="treeData"
    :normalizer="normalizerTreeNode"
    :load-options="loadTreeOptions"
    :allow-selecting-disabled-descendants="true"
    loading-text="加载中..."
    no-options-text="没有选项"
    no-children-text="没有子项"
    no-results-text="没有搜索到结果"
    :placeholder="placeholder"
    @input="$emit('input', $event)"
    @select="selectTreeNode"
  >
    <div slot="value-label">{{ partNames.split(',').join(' / ') }}</div>
    <label slot="option-label" slot-scope="{ node }">
      <el-tag v-show="node.raw.isProject" size="mini" type="primary">项目</el-tag>
      <el-tag v-show="node.raw.isSection" size="mini" type="success">标段</el-tag>
      <el-tag v-show="node.raw.isSite" size="mini" type="danger">工点</el-tag>
      {{ node.label }}
    </label>
  </treeselect>
</template>

<script>
import * as projectApi from '@/api/backbone/project'
import * as sectionApi from '@/api/backbone/section'
import * as siteApi from '@/api/backbone/section-site'

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {
  LOAD_CHILDREN_OPTIONS
  // LOAD_ROOT_OPTIONS
} from '@riophae/vue-treeselect'

export default {
  components: { Treeselect },
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      treeData: [],
      partNames: '',
      partIds: '',
      parts: []
    }
  },
  created() {
    projectApi.lookupAll().then(projects => {
      projects.forEach(t => {
        t.isProject = true
        t.name = t.shortName || t.name
        t.children = null
      })
      this.$emit('project-loaded', projects)
      this.treeData = projects
    })
  },
  methods: {
    selectTreeNode(node) {
      var names = [node.shortName || node.name]
      var ids = [node.id]
      var parent = node.parent
      while (parent) {
        names.push(parent.shortName || parent.name)
        ids.push(parent.id)
        parent = parent.parent
      }
      names = names.reverse()
      ids = ids.reverse()
      this.parts = ids
      this.partIds = ids.join(',')
      this.partNames = names.join(',')

      this.$emit('select', node)
    },
    normalizerTreeNode(node) {
      return {
        id: node.id,
        label: node.shortName || node.name,
        children: node.children
      }
    },
    loadTreeOptions({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        if (parentNode.isProject) {
          // sectionApi.lookupAllByProject(parentNode.id).then(res => {
          sectionApi.lookupConstructions(parentNode.id).then(res => {
            res.forEach(t => {
              t.isSection = true
              t.children = null
              t.parent = parentNode
            })
            parentNode.children = res
            callback()
          })
        }
        if (parentNode.isSection) {
          siteApi.lookupBySection(parentNode.id).then(res => {
            res.forEach(t => {
              t.isSite = true
              t.parent = parentNode
            })
            parentNode.children = res
            callback()
          })
        }
      }
    }
  }
}
</script>
