<style lang="scss" scoped>
.select-project {
    width: 50%;
}
::v-deep.vue-treeselect__control {
    line-height: 20px !important;
}
</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="selectedVal"
            :value-consists-of="valueConsistsOf"
            :auto-load-root-options="false"
            @select="update"
            @deselect="unUpdate"
            @input="emitValue"
            :limit="limit"
            :default-options="true"
            :disabled="disabled"
            :limitText="
                count => {
                    return '隐藏' + count + '条'
                }
            "
            noChildrenText="该项目下暂无账号"
            :noOptionsText="showLoading"
        />
    </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect' // 引用树组件
import '@riophae/vue-treeselect/dist/vue-treeselect.css' //树组件样式
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' //树组件参数
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: () => ({
        valueConsistsOf: 'LEAF_PRIORITY',
        options: [],
        showLoading: 'loading...',
        selectRightData: []
    }),
    props: {
        value: {
            type: [Number, Array, String],
            default() {
                return undefined
            }
        },
        //是否展示一个默认值
        oneData: {
            type: Boolean,
            default() {
                return false
            }
        },
        //是否多选
        multiple: {
            type: Boolean,
            default() {
                return false
            }
        },
        //判断媒体类型  kuaishou/bytedance
        type: {
            type: String,
            default() {
                return 'kuaishou'
            }
        },
        //请求接口  process.env.VUE_APP_BASE_REPORT_URL为配置的全局变量
        reqUrl: {
            type: String,
            default() {
                return process.env.VUE_APP_BASE_REPORT_URL + '/material/report/getProjectAccountByUserId'
            }
        },
        // 展示条数
        limit: {
            type: Number,
            default() {
                return 2
            }
        },
        //是否禁用
        disabled: {
            type: Boolean,
            default() {
                return false
            }
        }
    },
    components: {
        Treeselect
    },
    computed: {
        selectedVal: {
            get: function() {
                return this.value
            },
            set: function(val) {
                this.$nextTick(() => {
                    this.$emit('input', val)
                    this.$emit('change', val)
                    this.$emit('value')
                })
            }
        }
    },
    watch: {},
    methods: {
        ...mapGetters(['userInfo']),
        update(node, id) {
            if (node.id == 'all') {
                this.node(this.options)
                this.$nextTick(() => {
                    this.selectedVal = this.selectRightData.map(item => {
                        return item.id
                    })
                })
            }
        },
        unUpdate(node, id) {
            if (node.id == 'all') {
                this.$nextTick(() => {
                    this.selectedVal = []
                    this.selectRightData = []
                })
            } else {
                let index = this.selectedVal.findIndex(item => item == 'all')
                this.$nextTick(() => {
                    this.selectedVal.splice(index, 1)
                })
            }
        },
        node(data) {
            data.forEach(item => {
                if (item.children) {
                    this.node(item.children)
                } else {
                    if (this.selectRightData.findIndex(i => i.id == item.id) == -1) {
                        this.selectRightData.push(item)
                    }
                }
            })
        },
        emitValue() {},
        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) {
            }
        },
        //获取数据
        getParticipateList() {
            //   toutiaoParticipateList
            var params = {}
            params.userId = this.userInfo().id
            params.type = this.type
            this.postDataAction(this.reqUrl, params).then(res => {
                if (res.success) {
                    this.options = res.data
                        ? res.data.map(item => {
                              return {
                                  id: item.projectId + 'projectId',
                                  label: item.projectName,
                                  children: item.accountList
                                      ? item.accountList.map(c => {
                                            return {
                                                id: c.accountId,
                                                label:
                                                    (c.userName && c.userName.length == 2
                                                        ? c.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
                                                        : c.userName && c.userName.length == 3
                                                        ? c.userName + '\xa0\xa0\xa0\xa0'
                                                        : c.userName) +
                                                    '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
                                                    c.accountId +
                                                    '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
                                                    c.authName
                                            }
                                        })
                                      : []
                              }
                          })
                        : res.result.map(item => {
                              return {
                                  id: item.projectId + 'projectId',
                                  label: item.projectName,
                                  children: item.accountList
                                      ? item.accountList.map(c => {
                                            return {
                                                id: c.accountId,
                                                label:
                                                    (c.userName && c.userName.length == 2
                                                        ? c.userName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
                                                        : c.userName && c.userName.length == 3
                                                        ? c.userName + '\xa0\xa0\xa0\xa0'
                                                        : c.userName) +
                                                    '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
                                                    c.accountId +
                                                    '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
                                                    c.authName
                                            }
                                        })
                                      : []
                              }
                          })
                    if (this.multiple) {
                        this.options.unshift({ id: 'all', label: '全选' })
                    }

                    if (this.oneData) {
                        this.$nextTick(() => {
                            if (this.multiple) {
                                this.selectedVal.push(this.options[0].children[0].id)
                            } else {
                                this.selectedVal = this.options[0].children[0].id
                            }
                        })

                        // this.value = this.options[0].children[0].id
                        // this.$emit('input', this.options[0].children[0].id)
                        // this.$emit('change', this.options[0].children[0].id)
                    }
                }
            })
        }
    },

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