<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="limit"
      :default-options="true"
      :disabled="disabled"
      :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: {
    oneData: {
      type: Boolean,
      default() {
        return false
      },
    },
    //是否多选
    multiple: {
      type: Boolean,
      default() {
        return true
      },
    },
    appId: {
      default() {
        return ''
      },
    },
    //判断媒体类型
    request: {
      type: String,
      default() {
        return '2,4'
      },
    },
    //一级请求接口
    reqUrl: {
      type: String,
      default() {
        return '/ctop/projectMember/participateListByMediaId'
      },
    },
    // 展示条数
    limit: {
      type: Number,
      default() {
        return 2
      },
    },
    disabled:{
      type: Boolean,
      default() {
        return false
      },
    }
  },
  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') {
        if (this.options.length > 0) {
          return
        }
        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,
                      }
                    })
                  : [],
                }
              
              
            })
            if (this.oneData&&!this.multiple) {
              var data = this.options.filter((item) => {
                if (item.children&&item.children.length > 0) {
                  return { ...item }
                }
              })
              this.$emit('update:appId', data[0].children[0].id)
            }
          }
        })
      } else if (this.reqUrl == '/ctop/projectMember/getProjectAccountByUserId') {
        getAction(this.reqUrl, {
          mediaType: this.request,
        }).then((res) => {
          if (res.code == 0) {
            if (res.result.length > 0) {
              res.result.forEach((element, index) => {
                if (element) {
                  this.options.push({})
                  this.options[index].label = element.project.projectName + '_(' + element.project.advertiserName + ')'
                  this.options[index].id = 'project' + element.project.projectId
                  this.options[index].key = element.project.projectId
                  this.options[index].mediaId = element.project.mediaId
                  this.options[index].children = []

                  if (element.account.length) {
                    element.account.forEach((ele, i) => {
                      this.options[index].children.push({})
                      this.options[index].children[i].label =
                        ele.userName + '_' + ele.authName + '_' + element.project.projectName
                      this.options[index].children[i].id = ele.accountId
                      this.options[index].children[i].key = ele.accountId
                    })
                  }
                }
              })
            } 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>