<template>
  <div class="customer-wrap">
    <treeselect
      class="customer-cnt"
      v-model="orgValue"
      size="small"
      placeholder="请选择归属机构"
      :options="treeList"
      @select="onTreeChange"
      :beforeClearAll="onClose"
    />
  </div>
</template>

<script>
import { getDeptTree } from '@/api/grid/list/gridlist.js'

export default {
  props: {
    selectValue: {
      default: null
    },
    addMapId: {
      type: Number,
      default: 0
    }
  },
  watch: {},
  data() {
    return {
      treeList: [],
      dataMap: {},
      orgValue: null
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    onClose() {
      this.orgValue = null
      this.$emit('clear')
    },
    async getInitData() {
      const { data, code } = await getDeptTree()
      if (code === 200) {
        this.treeList = data || []
      }
    },
    getTransformData(tree) {
      return tree.map((item) => {
        const newItem = { ...item }
        newItem.id = newItem.value
        delete newItem.value
        newItem.label = `${item.label}(${item.value})`

        if (Array.isArray(newItem.children)) {
          newItem.children = this.getTransformData(newItem.children)
        }

        return newItem
      })
    },
    onTreeChange(obj) {
      this.$emit('onTreeSelect', obj.id)
    },
    resetSelect() {
      this.orgValue = null
    }
  }
}
</script>

<style lang="scss" scoped>
.customer-wrap {
  border-radius: 4px;
  .customer-cnt {
    width: 220px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:last-child {
      margin-bottom: 0;
    }
  }
  ::v-deep .vue-treeselect__input {
    font-size: 12px;
  }
  ::v-deep .vue-treeselect__control {
    height: 30px;
  }
  ::v-deep .vue-treeselect__placeholder,
  ::v-deep .vue-treeselect__single-value {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
  }
  // ::v-deep .vue-treeselect__x-container {
  //   display: none;
  // }
  ::v-deep .vue-treeselect--has-value .vue-treeselect__input {
    vertical-align: middle !important;
  }
  ::v-deep .vue-treeselect__menu-container {
    color: #4f5052;
  }
}
</style>