<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"
      :auto-load-root-options="false"
      @select="update"
      @input="emitValue"
      :limit="2"
      :default-options="true"
      :limitText="
        count => {
          return '隐藏' + count + '条'
        }
      "
      noChildrenText="该项目下暂无账号"
      :noOptionsText="showLoading"
    />
  </div>
</template>

<script>
//   @open="getParticipateList"
// 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: () => ({
    value: null,
    valueConsistsOf: 'LEAF_PRIORITY',
    options: [],
    showLoading: 'loading...',
  }),
  props: {
    //是否多选
    multiple: {
      type: Boolean,
      default() {
        return true
      },
    },
    appId: {
      
      default() {
        return ''
      },
    },
    //判断媒体类型
    request: {
      type: String,
      default() {
        return '2,4'
      },
    },
    //一级请求接口
    reqUrl: {
      type: String,
      default() {
        return '/ctop/projectMember/participateListByMediaId'
      },
    },
  },
  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 = undefined
            }
          }else{
            this.value=this.appId
          }
        },
        deep: true
      }
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    update(node, id) {
      // console.log(node)
      // getAction('/ctop/userAllocation/getAccountListByProjectId', {
      //   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.')
      //   }
      // })
    },
    emitValue() {
      this.$emit('update:appId', this.value)
    },
    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/getAccountListByProjectId', {
        //   projectId: parentNode.id,
        // }).then((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.'))
        //   }
        // })
      }
    },
    getParticipateList() {
      //我参与的
      //   toutiaoParticipateList
      var params = {}
      params.userId = this.userInfo().id

      if (this.request == '1,3') {
        params.type = 'bytedance'
      } else if (this.request == '2,4') {
        params.type = 'kuaishou'
      }

      if (this.reqUrl == '/ctop/projectMember/participateListByMediaId') {
        postAction(this.reqUrl, params).then((res) => {
          if (res.success) {
            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.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,
                      }
                    })
                  : [],
              }
            })
          }
        })
      } else if(this.reqUrl == '/ctop/userAllocation/getAccountIdsByUserId'){
          getAction(this.reqUrl, {
            userId: this.userInfo().id,
          }).then((res) => {
            if (res.success) {
              if (res.result.length > 0) {
                res.result.forEach((element,index) => {
                  if(element){                  
                      this.options.push({});                    
                    
                        this.options.label=element.auth_name+'_('+element.project_name+')'
                        this.options.id=element.account_id;
                        this.options.key=element.account_id;                  
                  }      
                });
              } else {
                this.showLoading = '暂无数据'
              }
            }
          })
      }else {
        getAction(this.reqUrl, {
          userId: this.userInfo().id,
        }).then((res) => {
          if (res.code == 0) {
            if (res.result.length > 0) {
              var arr = this.request.split(',')
              var dataTwo = []
              var data = res.result.filter((item) => {
                return item.mediaId == arr[0]
              })
              if (arr.length > 1) {
                dataTwo = res.result.filter((item) => {
                  return item.mediaId == arr[1]
                })
              }
              var allData = data.concat(dataTwo)
              this.options = allData.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,
                }
              })
            } else {
              this.showLoading = '暂无数据'
            }
          }
        })
      }
    },
  },

  mounted() {
    this.getParticipateList()
  },
}
</script>