<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="selectedVal"
            :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 false
            }
        },
        appId: {
            type: [Number, Array, String],
            default() {
                return ""
            }
        },
        //判断媒体类型
        request: {
            type: String,
            default() {
                return '2,4'
            }
        },
        //一级请求接口
        reqUrl: {
            type: String,
            default() {
                return '/ctop/projectMember/getProductProjectList'
            }
        },
        // 展示条数
        limit: {
            type: Number,
            default() {
                return 2
            }
        },
        disabled: {
            type: Boolean,
            default() {
                return false
            }
        }
    },
    components: {
        Treeselect
    },
    computed: {
        selectedVal: {
            get: function() {
                return this.value
            },
            set: function(val) {
                console.log(val)
                this.$emit('input', val)
                this.$emit('change', val)
            }
        }
    },
    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)
            // 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
            postAction(this.reqUrl, params).then(res => {
                if (res.success) {
                    this.options = res.result.map(item => {
                        return {
                            id: item.productId + 'productId',
                            label: item.productName,
                            children: item.projectList
                                ? item.projectList.map(i => {
                                      return {
                                          id: i.projectId,
                                          label: i.projectName
                                      }
                                  })
                                : []
                        }
                    })
                    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)
                    }
                }
            })
        }
    },

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