<style lang="scss" scoped>
.select-project {
  width: 50%;
}
</style>
<template>
  <div class="select-project">
    <treeselect
      :multiple="multiple"
      :disable-branch-nodes="!multiple"
      :disable-fuzzy-matching="true"
      :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.
    },
    getParticipateList() {
      //我参与的
      this.postDataAction('/ctop/projectMember/participateListByMediaId', {
        userId: this.userInfo().id,
      }).then((res) => {
        if (res.code == 0) {
          this.options = res.result.map((item) => {
            return {
              id: item.projectId + 'projectId',
              label: item.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.advertiserName,
              children: item.accountList
                ? item.accountList.map((i) => {
                    return {
                      id: i.accountId,
                      label:
                        (i.userName?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,
                    }
                  })
                : [],
            }
          })
        }
      })
    },
  },
  mounted() {
    this.getParticipateList()
  },
}
</script>
