<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,
            immediate: true
        }
    },
    methods: {
        ...mapGetters(['nickname', 'avatar', 'userInfo']),
        update(node, id) {
            this.$emit('select-value', node)
            console.log(node)
            if (typeof node.id == 'string' && node.id.indexOf('p') != -1) {
                getAction('/ctop/userAllocation/getByProjectId', {
                    projectId: node.id.split('p')[0]
                }).then(res => {
                    // console.log(res)
                    if (res.code == 0) {
                        if (res.result.length > 0) {
                            node.children = res.result.map(item => {
                                return {
                                    id: item.userId ? item.userId : '',
                                    label: item.userId ? item.userId : '',
                                    children: item.accounts.map(c => {
                                        return {
                                            id: c.accountId,
                                            label:
                                                c.userName +
                                                '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
                                                c.authName
                                        }
                                    })
                                }
                            })
                        } else {
                        }
                    } else {
                        new Error('Failed to load options: network error.')
                    }
                })
            }
        },
        emitValue(value, id) {
            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/getByProjectId', {
                    projectId: parentNode.id.split('p')[0]
                }).then(res => {
                    if (res.code == 0) {
                        if (res.result.length > 0) {
                            parentNode.children = res.result.map(item => {
                                return {
                                    id: item.userId ? item.userId : '',
                                    label: item.userId ? item.userId : '',
                                    children: item.accounts.map(c => {
                                        return {
                                            id: c.accountId,
                                            label:
                                                c.userName +
                                                '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
                                                c.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
                }
                // 2021/9/1 蒙蒙让修改 接口增加 userId 原来的url链接并没有使用声明好的params
                getAction('/ctop/projectMember/projectList', {userId: this.userInfo().id}).then(res => {
                    if (res.success) {
                        this.options = res.data.map(item => {
                            return {
                                id: item.id + 'projectId',
                                label: item.projectName,
                                children: null
                            }
                        })
                        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,
                    userId: this.userInfo().id
                }).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>
