define([
    'kefu-assets/components/empty/index',
    'kefu-assets/api/kefu',
    'dayjs',
    'text!./index.html',
    'css!./index.css'
], function (empty, kefuApi, dayjs, template) {


    return {
        template,
        name: "chat-list",
        props: {
            userOnline: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            newRecored: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            searchData: {
                type: String,
                default: ''
            }
        },
        components: {
            empty
        },
        watch: {
            userOnline: {
                handler(nVal, oVal) {
                    if (nVal.hasOwnProperty('to_uid')) {
                        this.userList.forEach((el, index) => {
                            if (el.to_uid == nVal.to_uid) {
                                el.online = nVal.online
                                if (nVal.online == 1) {
                                    this.$Notice.info({
                                        title: '上线通知',
                                        desc: `${el.nickname}上线`
                                    });
                                }

                            }
                        })
                    }
                },
                deep: true
            },
            searchData: {
                handler(nVal, oVal) {
                    if (nVal != oVal) {
                        this.nickname = nVal
                        this.page = 1
                        this.isScroll = true
                        this.userList = []
                        this.isSearch = true
                        this.getList()
                    }
                },
                deep: true
            }
        },
        data() {
            return {
                hdTabCur: 0,
                hdTab: [
                    {
                        key: 0,
                        title: '用户列表'
                    },
                    {
                        key: 1,
                        title: '游客列表'
                    }
                ],
                userList: [],
                curId: '',
                page: 1,
                limit: 15,
                isScroll: true,
                nickname: '',
                isSearch: false,
                ops: {
                    vuescroll: {
                        mode: 'native',
                        enable: false,
                        tips: {
                            deactive: 'Push to Load',
                            active: 'Release to Load',
                            start: 'Loading...',
                            beforeDeactive: 'Load Successfully!'
                        },
                        auto: false,
                        autoLoadDistance: 0,
                        pullRefresh: {
                            enable: false
                        },
                        pushLoad: {
                            enable: true,
                            auto: true,
                            autoLoadDistance: 10
                        }
                    },
                    bar: {
                        background: '#393232',
                        opacity: '.5',
                        size: '5px'
                    }
                },
            }
        },
        filters: {
            toDay: function (value) {
                if (!value) return ''
                return dayjs.unix(value).format('M月D日 HH:mm')

            }
        },
        mounted() {
            let that = this
            this.$socket.then(ws => {
                //用户转接
                ws.$on('transfer', data => {
                    let status = false
                    that.userList.forEach((el, index, arr) => {
                        if (data.recored.id == el.id) {
                            status = true
                            if (data.recored.is_tourist == that.hdTabCur) {
                                let oldVal = data.recored
                                arr.splice(index, 1)

                                if (index == 0) {
                                    this.$emit('set-data-id', oldVal)
                                    oldVal.mssage_num = 0
                                }
                                arr.unshift(oldVal)
                            }
                            this.$Notice.info({
                                title: '您有一条转接消息！',
                            });
                        }
                    })
                    if (!status) {
                        if (data.recored.is_tourist == this.hdTabCur)
                            this.userList.unshift(data.recored)
                    }
                })
                ws.$on('mssage_num', data => {
                    if (data.recored.id) {
                        let status = false
                        that.userList.forEach((el, index, arr) => {
                            if (data.recored.id == el.id) {
                                status = true
                                if (data.recored.is_tourist == that.hdTabCur) {
                                    let oldVal = data.recored
                                    arr.splice(index, 1)
                                    arr.unshift(oldVal)
                                }
                            }
                        })
                        if (!status) {
                            if (data.recored.is_tourist == this.hdTabCur)
                                this.userList.unshift(data.recored)
                        }
                    }
                    if (data.recored.is_tourist != this.hdTabCur && data.recored.id) {
                        this.$Notice.info({
                            title: this.hdTabCur ? '用户发来消息啦！' : '游客发来消息啦！',
                        });
                    }
                });
                ws.$on('chat', (data) => {
                    const targetId = data.is_kefu_send ? data.to_uid : data.uid;
                    const userRecord = this.userList.find(i => i.to_uid == targetId);
                    if (userRecord) {
                        userRecord.online = 1;
                        const isActiveUser = this.curId == userRecord.id;
                        Object.assign(userRecord, {
                            message: data.msn,
                            message_type: data.msn_type,
                            update_time: data.add_time,
                            mssage_num: isActiveUser ? 0 : userRecord.mssage_num + 1
                        });

                        if (document.hidden || !isActiveUser) {
                            mp3.play();
                        }
                    } else {
                        this.isScroll = true;
                        this.page = 1;
                        this.getList(true);
                    }
                });
                ws.$on('offline', (data) => {
                    if (data.self) return;
                    const userRecord = this.userList.find(i => i.to_uid == data.uid);
                    if (userRecord) {
                        userRecord.online = 0;
                    }
                });
            });
            this.bus.$on('change', data => {
                this.nickname = data
            })
            this.getList();

        },
        methods: {
            //切换
            changeTab(item) {
                if (this.hdTabCur == item.key) return
                this.hdTabCur = item.key
                this.isScroll = true
                this.page = 1
                this.userList = []
                this.$emit('change-type', item.key)
                this.getList()
            },
            getList(forceUpdate = false) {
                if (!this.isScroll) return
                return kefuApi.record({
                    nickname: this.nickname,
                    page: this.page,
                    limit: this.limit,
                    is_tourist: this.hdTabCur
                }).then(res => {
                    if (res.data.length > 0) {
                        res.data[0].mssage_num = 0
                        this.isScroll = res.data.length >= this.limit

                        if (forceUpdate) {
                            this.userList = res.data;
                            if (!this.curId && this.page == 1 && res.data.length > 0 && !this.isSearch) {
                                this.curId = res.data[0].id
                                this.$emit('set-data-id', res.data[0])
                            }
                        } else {
                            this.userList = this.userList.concat(res.data);
                            if (this.page == 1 && res.data.length > 0 && !this.isSearch) {
                                this.curId = res.data[0].id
                                this.$emit('set-data-id', res.data[0])
                            }
                        }





                        this.page++
                    } else {
                        this.$emit('set-data-id', 0)
                    }

                })
            },
            chartReachBottom() {
                this.getList()
            },
            // 选择用户
            selectUser(item) {
                if (this.curId == item.id) return
                item.mssage_num = 0
                this.curId = item.id
                this.$emit('set-data-id', item)
            },
            handleScroll(vertical, horizontal, nativeEvent) {
                if (vertical.process == 1) {
                    this.getList()
                }
            }
        }
    };
});