<template>
    <div class="tips">
        <!-- 顶部面板 -->
        <div class="top-panel">
            <!-- 顶部导航菜单 -->
            <div class="top-navs">
                <div class="btns">
                    <div class="btn" :class="{ 'clicked': item.code === currentBtn.code }" v-for="(item, index) in navBtns"
                        :key="index" @click="handleBtnClick(item)">
                        {{ item.name }}
                        <div v-if="item.code === 'todo'">({{ todoData.length }})</div>
                        <div v-if="item.code === 'message'">({{ msgData.filter(msg => msg.read === 0).length }})</div>
                    </div>
                </div>
                <div class="close-btn" @click="closeTips"></div>
            </div>
            <!-- 下方列表 -->
            <div class="tips-list">
                <div class="msg-navs" v-if="currentBtn.code !== 'todo'">
                    <div class="msg-read read" :class="{ 'read-clicked': readTitle === 0 }" @click="choseRead(0)">未读({{
                        msgData.filter(msg => msg.read === 0).length }})</div>
                    <div class="msg-unread read" :class="{ 'read-clicked': readTitle === 1 }" @click="choseRead(1)">已读</div>
                </div>
                <!-- 消息列表 -->
                <div class="tips-item" style="height: calc(100% - 60px);" v-if="currentBtn.code !== 'todo'">
                    <div class="msg-list list" v-for="(item, index) in msgData.filter(msg => msg.read === readTitle)"
                        :key="index" @click="readMsg(item)">
                        <div class="list-header">
                            <div class="title">
                                <div class="msg-icon"></div>
                                {{ item.opt }}
                            </div>
                        </div>
                        <div class="list-content">
                            <div class="left-box">
                                <div class="item-info">审核人：{{ item.user }}</div>
                                <div class="item-info">时间：{{ item.time }}</div>
                            </div>
                            <div class="status" :class="[item.status === 1 ? 'passed' : 'nopassed']"></div>
                        </div>
                    </div>
                </div>
                <!-- 待处理 -->
                <div class="tips-item" v-else>
                    <div class="todo-list list" v-for="(item, index) in todoData" :key="index">
                        <div class="list-header">
                            <div class="title">【{{ item.title }}】</div>
                            <div class="more-btn"></div>
                        </div>
                        <div class="list-content">
                            <div class="left-box">
                                <div class="item-info">{{ item.opt }}</div>
                                <div class="item-info">发起人：{{ item.user }}</div>
                                <div class="item-info">时间：{{ item.time }}</div>
                            </div>
                            <div class="status" :class="[item.status === 1 ? 'passed' : 'nopassed']"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <Modal :visible="ifShowDialog" centered title="消息详情" :maskClosable="false" :footer="null"
        @cancel="closeDialog">
        <div class="content" style="padding: 20px 20px 20px;font-size: 16px;">
            <div class="msg-item" v-for="(item, index) in formItemData" :key="index">
                <div class="label">{{ item.label }}:</div>
                <div class="value">{{ item.value }}</div>
            </div>
        </div>
    </Modal>
</template>
<script>
import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch } from 'vue';
import { useAppStore } from '/@/store/modules/app';
import { Modal } from 'ant-design-vue';
import { getSmsByUserId } from '/@/api/sys/tips';

export default defineComponent({
    name: 'tips',
    components: { Modal },
    setup() {
        const appStore = useAppStore();
        const tipsDomRef = ref(null)

        const navBtns = reactive([
            {
                name: `待办信息`,
                code: "todo"
            },
            {
                name: "通知消息",
                code: "message"
            }
        ])
        const readTitle = ref(0)
        const currentBtn = reactive({
            name: "待办信息",
            code: "todo"
        })
        const ifShowTop = ref(true)
        const handleBtnClick = (item) => {
            currentBtn.code = item.code
            currentBtn.name = item.name
        }
        const todoData = reactive([
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 0,
                user: "张某某",
                time: "2023-07-06  14:30:00"
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 0,
                user: "张某某",
                time: "2023-07-06  14:30:00"
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 0,
                user: "张某某",
                time: "2023-07-06  14:30:00"
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 0,
                user: "张某某",
                time: "2023-07-06  14:30:00"
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 0,
                user: "张某某",
                time: "2023-07-06  14:30:00"
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 0,
                user: "张某某",
                time: "2023-07-06  14:30:00"
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 0,
                user: "张某某",
                time: "2023-07-06  14:30:00"
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 0,
                user: "张某某",
                time: "2023-07-06  14:30:00"
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 0,
                user: "张某某",
                time: "2023-07-06  14:30:00"
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 0,
                user: "张某某",
                time: "2023-07-06  14:30:00"
            }
        ])
        const msgData = reactive([
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 1,
                user: "张某某",
                time: "2023-07-06  14:30:00",
                read: 0
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 1,
                user: "张某某",
                time: "2023-07-06  14:30:00",
                read: 0
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 1,
                user: "张某某",
                time: "2023-07-06  14:30:00",
                read: 0
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 1,
                user: "张某某",
                time: "2023-07-06  14:30:00",
                read: 0
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 1,
                user: "张某某",
                time: "2023-07-06  14:30:00",
                read: 1
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 1,
                user: "张某某",
                time: "2023-07-06  14:30:00",
                read: 0
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 1,
                user: "张某某",
                time: "2023-07-06  14:30:00",
                read: 0
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 1,
                user: "张某某",
                time: "2023-07-06  14:30:00",
                read: 0
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 1,
                user: "张某某",
                time: "2023-07-06  14:30:00",
                read: 0
            },
            {
                title: "资源申请",
                opt: "xx地图资源授权申请",
                status: 1,
                user: "张某某",
                time: "2023-07-06  14:30:00",
                read: 1
            }
        ])
        const ifShowDialog = ref(false)
        const formItemData = ref([
            {
                label: '消息名称',
                value: ''
            },
            {
                label: '操作说明',
                value: ''
            },
            {
                label: '操作状态',
                value: ''
            },
            {
                label: '操作人',
                value: ''
            },
            {
                label: '操作时间',
                value: ''
            }
        ])

        watch(
            () => [todoData, msgData],
            (newVal, oldVal) => {
                let totalNum = newVal[0].length + newVal[1].filter(msg => msg.read === 0).length
                let num = totalNum <= 99 ? totalNum === 0 ? '' : totalNum : `99+`
                appStore.setTipsTotalNum(num)
            },
            {
                immediate: true,
                deep: true
            }
        )


        const closeTips = () => {
            appStore.setTipsShowFlag(false)
        }

        const choseRead = (flag) => {
            readTitle.value = flag
        }
        const readMsg = (item) => {
            formItemData.value = [
                {
                    label: '消息名称',
                    value: item.title
                },
                {
                    label: '操作说明',
                    value: item.opt
                },
                {
                    label: '操作状态',
                    value: item.status?'已通过':'未通过'
                },
                {
                    label: '操作人',
                    value: item.user
                },
                {
                    label: '操作时间',
                    value: item.time
                }
            ]
            ifShowDialog.value = true
            item.read = 1
        }
        const closeDialog = () => {
            ifShowDialog.value = false
        }

        onMounted(() => {
            getSmsByUserId().then(res=>{
                console.log(res);
            })
        })

        return {
            formItemData,
            ifShowDialog,
            readTitle,
            tipsDomRef,
            navBtns,
            currentBtn,
            ifShowTop,
            todoData,
            msgData,
            //func
            handleBtnClick,
            closeTips,
            choseRead,
            readMsg,
            closeDialog
        };
    },
});
</script>
<style lang="less" scoped>
.tips {
    // position: fixed;
    // left: calc(100% - 106px);
    // top: calc(100% - 80px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    user-select: none;

    .top-panel {
        width: 430px;
        height: 820px;
        padding: 0 16px 20px;
        background: #FFFFFF;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        border-radius: 6px;

        .top-navs {
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #DEDEDE;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .btns {
                display: flex;

                .btn {
                    display: flex;
                    margin-right: 32px;
                    width: 100px;
                    height: 50px;
                    font-family: Source Han Sans CN;
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 50px;
                    color: #333333;
                    user-select: none;
                    text-align: center;

                    &:hover {
                        cursor: pointer;
                        color: #0671DD;
                        border-bottom: 2px solid #0671DD;
                    }
                }

                .clicked {
                    color: #0671DD;
                    border-bottom: 2px solid #0671DD;
                }
            }

            .close-btn {
                width: 20px;
                height: 20px;
                margin-right: 10px;
                user-select: none;
                cursor: pointer;
                border-radius: 50%;
                text-align: center;
                line-height: 20px;
                background: url('/@/assets/images/close.png') no-repeat;
                background-size: 100% 100%;
            }
        }

        .tips-list {
            padding-top: 18px;
            width: 100%;
            height: 750px;

            .tips-item {
                height: 100%;
                overflow: auto;

                &::-webkit-scrollbar {
                    width: 3px;
                }

                &::-webkit-scrollbar-thumb {
                    border-radius: 2px;
                    background: #ccd5df;
                }

                &::-webkit-scrollbar-track {
                    display: none;
                }

                .list {
                    padding: 0 12px 12px;
                    width: 100%;
                    height: 130px;
                    border-radius: 6px;
                    background: linear-gradient(252deg, rgba(238, 247, 255, 0.76) 0%, #EDEDED 100%);
                    margin-bottom: 10px;
                    cursor: pointer;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .list-header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 100%;
                        height: 40px;
                        border-bottom: 1px solid #dedede;

                        .title {
                            max-width: 70%;
                            font-family: Source Han Sans CN;
                            font-size: 16px;
                            font-weight: 500;
                            line-height: 40px;
                            color: #333333;
                        }

                        .more-btn {
                            width: 24px;
                            height: 24px;
                            background: url('/@/assets/images/goto.png') no-repeat;
                            background-size: 100% 100%;
                            cursor: pointer;
                        }
                    }

                    .list-content {
                        height: 89px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .left-box {
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-evenly;

                            .item-info {
                                color: #333333;
                                font-size: 14px;
                                line-height: 14px;

                            }
                        }

                        .status {
                            width: 56px;
                            height: 56px;
                        }

                        .passed {
                            background: url('/@/assets/images/passed.png') no-repeat;
                            background-size: 100% 100%;
                        }

                        .nopassed {
                            background: url('/@/assets/images/no-passed.png') no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }

                .msg-list {
                    .list-header {

                        .title {
                            display: flex;
                            align-items: center;

                            .msg-icon {
                                margin-right: 10px;
                                width: 21px;
                                height: 20px;
                                background: url('/@/assets/images/tips.png') no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                    }
                }
            }

            .msg-navs {
                display: flex;
                justify-content: space-around;

                .read {
                    text-align: center;
                    margin-bottom: 12px;
                    // width: 48px;
                    height: 48px;
                    line-height: 48px;
                    color: #333333;
                    font-family: Source Han Sans CN;
                    font-size: 15px;
                    font-weight: 500;
                    box-sizing: border-box;

                    &:hover {
                        color: #2d74e7;
                    }
                }

                .read-clicked {
                    border-bottom: 4px solid #2d74e7;
                }
            }
        }
    }

    // .bottom-panel {
    //     position: relative;
    //     width: 60px;
    //     height: 60px;
    //     border-radius: 6px;
    //     background: #FFFFFF;
    //     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    //     cursor: pointer;

    //     .icon {
    //         position: absolute;
    //         left: 14px;
    //         top: 15px;
    //         width: 33px;
    //         height: 31px;
    //         background: url('/@/assets/images/tips.png') no-repeat;
    //         background-size: 100% 100%;
    //     }

    //     .msg-num {
    //         position: absolute;
    //         top: 5px;
    //         right: 5px;
    //         color: #F8252C;
    //         font-family: Source Han Sans CN;
    //         font-size: 14px;
    //         font-weight: bold;
    //         line-height: 18.72px;
    //     }
    // }
}
.content{
    .msg-item{
        margin: 10px 0;
        display: flex;
        .value{
            margin-left: 20px;
        }
    }
}
</style>