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

     <!-- <treeselect :options="options" @input="emitValue" placeholder="请选择项目以及账户" v-model="value" :multiple="multiple"  noOptionsText="loading..."  :limit="2"
      :limitText="
        count => {
          return '隐藏' + count + '条'
        }
      ">
  </treeselect> -->
  </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.
  let called = false
  export default {
    data: () => ({
      multiple: true,
      value: null,
      options: [],
      valueConsistsOf: 'LEAF_PRIORITY',
     
    }),
     props: {
    // multiple: {
    //   type: Boolean,
    //   default() {
    //     return true
    //   }
    // },
    appId: {},
    // request: {
    //   type: String,
    //   default() {
    //     return '2'
    //   }
    // },
    reqUrl: {
        type: String,
        default () {
          return '/ctop/projectMember/participateList'
        }

      }
  },
    components: {
      Treeselect
    },
    watch: {
      $route(n, o) {},
      appId: {
        handler(n, o) {
          console.log(n)
          if (n.length == 0) {
            if (this.multiple) {
              this.value = []
            } else {
              this.value = ''
            }
          }
        },
        deep: true
      }
    },
    methods: {
      ...mapGetters(['nickname', 'avatar', 'userInfo']),
      emitValue() {
          console.log(this.value)
        this.$emit('update:appId', this.value)
      },

    update(node, id) {

      getAction('/ctop/projectMember/bytedanceProjectParticipateInList', { projectId: node.id }).then(res => {
        console.log(res)
        if (res.code == 0) {
          if (res.result.length > 0) {
            node.children = res.result.map(item => {
              return {
                id: item.accountId,
                label: item.userName + '         ' + item.authName
              }
            })
          } else {
              
          }
        } else {
          new Error('Failed to load options: network error.')
        }
      })
    },
      getChildren() {},
      getParticipateList() {
        //我参与的
        //   toutiaoParticipateList
        getAction('/ctop/projectMember/bytedanceProjectParticipateInList').then(res => {
          if (res.code == 0) {
            this.options = res.result.map(item => {
              return {
                id: item.id,
                label: item.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item
                  .advertiserName
              }
            })
          }
        })
      },

      loadOptions({ action, parentNode, callback }) {
        console.log({ 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/getAccountListByProjectId', { projectId: parentNode.id }).then(res => {
          console.log(res)
          if (res.code == 0) {
            if (res.result.length > 0) {
              parentNode.children = res.result.map(item => {
                return {
                  id: item.accountId,
                  label: item.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.authName
                }
              })
              callback()
            } else {
              parentNode.children = []
              callback()
            }
          } else {
            callback(new Error('Failed to load options: network error.'))
          }
        })
      }
    },
    },

    activated() {
      this.getParticipateList()
    }
  }
</script>