<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 currentMsg" :key="index" @click="readMsg(item)">
                        <div class="list-header">
                            <div class="title">
                                <div class="msg-icon"></div>
                                【{{ item.title }}】
                            </div>
                        </div>
                        <div class="list-content">
                            <div class="left-box">
                                <div class="item-info">{{ item.opt }}</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 currentTodo" :key="index" @click="gotoTodo(item)">
                        <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 class="status nopassed"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pagination-box">
                <div class="read-all">
                    <div class="read-btn" v-if="currentBtn.code !== 'todo' && readTitle === 0" @click="readAllMsg">一键已读
                    </div>
                </div>
                <Pagination simple v-model:current="pageData.page" :total="pageData.total" @change="changeSize" />
            </div>
        </div>
    </div>
    <Modal :visible="ifShowDialog" centered title="消息详情" :maskClosable="false" :footer="null" @cancel="closeDialog"
        :width="600">
        <div class="content" style="padding: 20px 20px 20px;font-size: 16px;">
            <div class="msg-item">
                <div class="label">消息名称:</div>
                <div class="value">{{ formItemData.msgTitle }}</div>
            </div>
            <div class="msg-item">
                <div class="label">消息描述:</div>
                <div class="value">{{ formItemData.msgDescrible }}</div>
            </div>
            <div class="msg-item">
                <div class="label">消息时间:</div>
                <div class="value">{{ formItemData.msgTime }}</div>
            </div>
            <div class="msg-item">
                <div class="label">资源名称:</div>
                <div class="value">{{ formItemData.serviceName }}</div>
            </div>
            <div class="msg-item">
                <div class="label">审核状态:</div>
                <div class="value">{{ formItemData.shzt }}</div>
            </div>
            <div class="msg-item">
                <div class="label">审核详情:</div>
            </div>
            <!-- 审核流程相关列表 -->
            <div class="audit-list">
                <div class="audit" v-for="(item, index) in formItemData.lcxx" :key="index">
                    <div class="check">
                        <div class="name">人员：{{ item.nodeName }}</div>
                        <div class="ispass">审核：{{ item.nodeIsPass }}</div>
                        <div class="time">时间：{{ item.nodeTime }}</div>

                    </div>
                    <div class="check-info">意见：{{ item.nodeInfo || '未填写' }}</div>
                </div>
            </div>
        </div>
    </Modal>
</template>
<script>
import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch, createVNode } from 'vue';
import { useAppStore } from '/@/store/modules/app';
import { Modal, Pagination } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { getSmsByUserId, editSmsById } from '/@/api/sys/tips';
import { queryBussInfoById } from '/@/api/resource/examine';
import { router } from '/@/router';

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

        const sourceTypes = [
            { SERVICETYPE: 'MR', name: '地图' },
            { SERVICETYPE: 'ER', name: '场景' },
            { SERVICETYPE: 'DR', name: '文件' },
            { SERVICETYPE: 'SR', name: '组件' },
            { SERVICETYPE: 'interface', name: '接口' },
        ]

        const navBtns = reactive([
            {
                name: `待办信息`,
                code: "todo"
            },
            {
                name: "通知消息",
                code: "message"
            }
        ])
        const readTitle = ref(0)
        const currentBtn = reactive({
            name: "待办信息",
            code: "todo"
        })
        const handleBtnClick = (item) => {
            currentBtn.code = item.code
            currentBtn.name = item.name
            pageData.page = 1
            item.code === 'todo' && (pageData.total = todoData.value.length)
            item.code === 'message' && (pageData.total = msgData.value.filter(msg => msg.read === readTitle.value).length)
            currentTodo.value = todoData.value.slice(0, 10)
            currentMsg.value = msgData.value.filter(msg => msg.read === readTitle.value).slice(0, 10)
        }
        const todoData = ref([])
        const msgData = ref([])
        const currentTodo = ref([])
        const currentMsg = ref([])
        const ifShowDialog = ref(false)
        const formItemData = reactive({
            msgTitle: "",
            msgDescrible: "",
            msgTime: "",
            serviceName: "",
            shzt: "",
            lcxx: []
        })
        const pageData = reactive({
            page: 1,
            total: 10
        })
        // const pageSizeOptions = ['10','20','50']
        // 实时计算总数
        // 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
        //     }
        // )
        watch(
            () => appStore.tipsShowFlag,
            (val) => {
                getAllData()
            }
        )

        // 关闭弹窗
        const closeTips = () => {
            appStore.setTipsShowFlag(false)
        }
        // 切换已读未读
        const choseRead = (flag) => {
            readTitle.value = flag
            pageData.page = 1
            currentMsg.value = msgData.value.filter(msg => msg.read === readTitle.value).slice((pageData.page - 1) * 10, pageData.page * 10);
            pageData.total = msgData.value.filter(msg => msg.read === readTitle.value).length;
        }
        // 读取消息详情
        const readMsg = (item) => {
            formItemData.msgTitle = item.title;
            formItemData.msgDescrible = item.opt;
            formItemData.msgTime = item.time;
            let params = {
                bussid: item.bussid,
                page: 1,
                rows: 1000
            }
            queryBussInfoById(params).then(res => {
                if (res.resp_code === 0) {
                    formItemData.serviceName = res.datas.pageData[0].NAME;
                    formItemData.shzt = res.datas.pageData[0].SHZT;
                    res.datas.lzxx.pageData.forEach((lc) => {
                        formItemData.lcxx.push({
                            nodeName: lc.CHECKUSERNAEM,
                            nodeTime: lc.CHECKTIME,
                            nodeInfo: lc.CHECKINFO,
                            nodeIsPass: lc.ISPASS === '0' ? '不通过' : '通过'
                        })
                    })
                    formItemData.lcxx.pop()
                }
            })
            ifShowDialog.value = true
            if (!readTitle.value) {
                msgData.value.forEach(msg => {
                    if (msg.id === item.id) {
                        msg.read = 1
                        let params = { smid: msg.id }
                        editSmsById(params)
                    }
                })
                currentMsg.value = msgData.value.filter(msg => msg.read === readTitle.value).slice((pageData.page - 1) * 10, pageData.page * 10);
                pageData.total = msgData.value.filter(msg => msg.read === readTitle.value).length;
            }
        }
        // 一键读取所有消息
        const readAllMsg = () => {
            if (!currentMsg.value.length) {
                return;
            }
            Modal.confirm({
                title: '删除提示',
                icon: createVNode(ExclamationCircleOutlined),
                content: '确定将所有消息改为已读？',
                centered: true,
                okText: '确定',
                cancelText: '取消',
                onOk: (() => {
                    let ids = [];
                    currentMsg.value.forEach(msg => {
                        ids.push(msg.id)
                    })
                    let params = { smid: ids.join(',') }
                    editSmsById(params).then(res => {
                        if (res.resp_code === 0) {
                            msgData.value.forEach(msg => {
                                msg.read = 1
                            })
                            currentMsg.value = [];
                            pageData.total = 0;
                        }
                    })
                })
            });
        };
        // 跳转待办页面
        const gotoTodo = (item) => {
            // console.log(router);
            // console.log(item);
            let path = item.title.indexOf('授权') > -1 ? '/authorize/empower' : '/resource/examine';
            let type = 'MR';
            let t = new Date().getTime()
            appStore.setRouterPushAuditFlag(true)
            if (path === '/resource/examine') {

            }
            sourceTypes.forEach(source => {
                source.name === item.title.slice(0,2) && (type = source.SERVICETYPE)
            })
            router.push({ path: path, query: { bussid: item.bussid, type: type, t: t } })
            closeTips()
        }
        // 关闭消息详情弹窗
        const closeDialog = () => {
            ifShowDialog.value = false
            formItemData.msgTitle = "";
            formItemData.msgDescrible = "";
            formItemData.msgTime = "";
            formItemData.serviceName = "";
            formItemData.shzt = "";
            formItemData.lcxx = [];
        }
        // 切换分页
        const changeSize = (page, pageSize) => {
            // console.log(page);
            // console.log(pageSize);
            currentBtn.code === 'todo' && (currentTodo.value = todoData.value.slice((page - 1) * pageSize, page * pageSize))
            currentBtn.code === 'message' && (currentMsg.value = msgData.value.filter(msg => msg.read === readTitle.value).slice((page - 1) * pageSize, page * pageSize))
        }
        // 获取所有数据
        const getAllData = () => {
            todoData.value = []
            msgData.value = []
            currentTodo.value = []
            currentMsg.value = []
            pageData.page = 1
            currentBtn.name = "待办信息"
            currentBtn.code = "todo"
            readTitle.value = 0
            let params = {
                keyStr: "",
                page: 1,
                rows: 1000000
            }
            getSmsByUserId(params).then(res => {
                if (res.datas?.records?.length) {
                    res.datas.records.forEach(item => {
                        // 待办
                        if (item.message.indexOf('请及时处理') > -1) {
                            todoData.value.push({
                                title: item.message.substring(item.message.indexOf('【') + 1, item.message.indexOf('】')),
                                opt: item.message,
                                // status: item.status,
                                time: item.createtime,
                                ...item
                            })
                        }
                        // 消息
                        else {
                            msgData.value.push({
                                title: item.message.substring(item.message.indexOf('【') + 1, item.message.indexOf('】')),
                                opt: item.message,
                                // status: item.status,
                                time: item.createtime,
                                read: item.status,
                                ...item
                            })
                        }
                    })
                    currentTodo.value = todoData.value.slice(0, 10)
                    currentMsg.value = msgData.value.filter(msg => msg.read === readTitle.value).slice(0, 10)
                    pageData.page = 1;
                    pageData.total = todoData.value.length;
                }
            })
        }

        onMounted(() => {
            getAllData()
        })

        return {
            formItemData,
            ifShowDialog,
            readTitle,
            tipsDomRef,
            navBtns,
            currentBtn,
            todoData,
            msgData,
            pageData,
            currentTodo,
            currentMsg,
            // pageSizeOptions,
            //func
            handleBtnClick,
            closeTips,
            choseRead,
            readMsg,
            readAllMsg,
            closeDialog,
            changeSize,
            gotoTodo
        };
    },
});
</script>
<style lang="less" scoped>
.tips {
    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: 700px;

            .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 {
                            flex-shrink: 0;
                            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;
                }
            }
        }

        .pagination-box {
            margin-top: 20px;
            height: 30px;
            width: 100%;
            display: flex;
            justify-content: space-between;

            .read-all {
                .read-btn {
                    font-size: 16px;
                    font-weight: 500;
                    height: 30px;
                    line-height: 30px;
                    color: #0671DD;
                }
            }
        }
    }
}

.content {
    .msg-item {
        margin: 10px 0;
        display: flex;

        .label {
            width: 80px;
            flex-shrink: 0;
        }

        .value {
            margin-left: 20px;
        }
    }

    .audit-list {
        .audit {
            padding: 0 10px;
            border-bottom: 1px solid rgba(182, 173, 173, 0.6);

            .check {
                margin-top: 10px;
                display: flex;
                height: 30px;
                // width: 60%;
                justify-content: space-between;

                .name {
                    width: 30%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    // flex: 1;
                    // margin-right: 20px;
                }

                .time {
                    // margin-right: 20px;
                    // flex:1;
                }

                .ispass {
                    // flex:1;
                }
            }

            .check-info {
                height: 30px;
                // width: 60%;
            }
        }
    }
}</style>