<style lang="scss" scoped>
.select-project {
  width: 50%;
}
</style>
<template>
  <div class="select-project">
    <treeselect
      :multiple="multiple"
      :disable-branch-nodes="!multiple"
      :options="options"
      :load-options="loadOptions"
      placeholder="请选择项目以及账户"
      v-model="value"
      :value-consists-of="valueConsistsOf"
      @input="emitValue"
      :limit="2"
      :limitText="
        (count) => {
          return '隐藏' + count + '条'
        }
      "
      noChildrenText="该项目下暂无账号"
      noOptionsText="暂无项目"
    />
  </div>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'

import { getAction, postAction } from '@/api/manage'
import { mapGetters } from 'vuex'
// We just use `setTimeout()` here to simulate an async operation
// instead of requesting a real API server for demo purpose.

export default {
  data: () => ({
    value: null,
    valueConsistsOf: 'LEAF_PRIORITY',
    options: [],
  }),
  props: {
    multiple: {
      type: Boolean,
      default() {
        return true
      },
    },
    appId: {
      default() {
        return ''
      },
    },
  },
  components: { Treeselect },
  watch: {
    $route(n, o) {
      console.log(n, o)
    },
    appId: {
      handler(n, o) {
        console.log(n)
        if (n.length == 0) {
          if (this.multiple) {
            this.value = []
          } else {
            this.value = undefined
          }
        } else {
          this.value = this.appId
        }
      },
      deep: true,
    },
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
  
    emitValue() {
      this.$emit('update:appId', this.value)
    },
    getChildren() {},
    loadOptions({ action, parentNode, callback }) {
      // Typically, do the AJAX stuff here.
      // Once the server has responded,
      // assign children options to the parent node & call the callback.
      if (action === LOAD_CHILDREN_OPTIONS) {
        getAction('/ctop/userAllocation/getAccountList', { projectId: parentNode.id, userId: this.userInfo().id }).then(
          (res) => {
            console.log(res)
            if (res.code == 0) {
              if (res.result.length > 0) {
                parentNode.children = res.result.map((i) => {
                  return {
                    id: i.accountId,
                    label:
                      (i.userName.length == 2
                        ? i.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
                        : i.userName.length == 3
                        ? i.userName + '\xa0\xa0\xa0\xa0'
                        : i.userName) +
                      '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
                      i.accountId +
                      '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
                      i.authName,
                  }
                })
                callback()
              } else {
                parentNode.children = []
                callback()
              }
            } else {
              callback(new Error('Failed to load options: network error.'))
            }
          }
        )
      }
    },
    getParticipateList() {
      //我参与的
      getAction('/ctop/projectMember/participateListV2', {
        userId: this.userInfo().id,
        pageSize: 1000000,
        pageNo: 1,
      }).then((res) => {
        if (res.code == 0) {
          this.options = res.result.records.map((item) => {
            return {
              id: item.projectId,
              label: item.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.advertiserName,
              children: null,
            }
          })
        }
      })
    },
  },
  mounted() {
    this.getParticipateList()
  },
}
</script>
