<template>
    <el-tabs v-model="activeName">
        <el-tab-pane label="我的待办" name="todo">
            <TabsTable :data="todos" @update="todoList" />
            
        </el-tab-pane>
        <el-tab-pane label="即将到期" name="due">
            <el-table :data="superviseTodos" style="width: 100%" stripe>
                <el-table-column
                    prop="mailTime"
                    label="来信时间"
                    align="center"
                    width="180"
                />
                <el-table-column
                    prop="contactName"
                    label="姓名"
                    align="center"
                    width="120"
                />
                <el-table-column
                    prop="contactPhone"
                    label="联系电话"
                    width="120"
                />
                <el-table-column
                    prop="contactIdCard"
                    label="身份证号"
                    width="120"
                />
                <el-table-column
                    prop="content"
                    label="信件内容"
                    show-overflow-tooltip
                />
                <el-table-column prop="mailState" label="信件状态">
                    <template #default="{ row }">
                        <span>{{
                            getDictLable(dictData.mail_state, row.mailState)
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="流程节点">
                    <template #default="{ row }"> </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="handleMail(row)"
                            >立即处理</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="督办信件" name="supervise">
            <el-table :data="superviseTodos" style="width: 100%" stripe>
                <el-table-column
                    prop="mailTime"
                    label="来信时间"
                    align="center"
                    width="180"
                />
                <el-table-column
                    prop="contactName"
                    label="姓名"
                    align="center"
                    width="120"
                />
                <el-table-column
                    prop="contactPhone"
                    label="联系电话"
                    width="120"
                />
                <el-table-column
                    prop="contactIdCard"
                    label="身份证号"
                    width="120"
                />
                <el-table-column
                    prop="content"
                    label="信件内容"
                    show-overflow-tooltip
                />
                <el-table-column prop="mailState" label="信件状态">
                    <template #default="{ row }">
                        <span>{{
                            getDictLable(dictData.mail_state, row.mailState)
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="流程节点">
                    <template #default="{ row }"> </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="handleMail(row)"
                            >立即处理</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="高敏信件" name="high">
            <el-table :data="highTodos" style="width: 100%" stripe>
                <el-table-column
                    prop="mailTime"
                    label="来信时间"
                    align="center"
                    width="180"
                />
                <el-table-column
                    prop="contactName"
                    label="姓名"
                    align="center"
                    width="120"
                />
                <el-table-column
                    prop="contactPhone"
                    label="联系电话"
                    width="120"
                />
                <el-table-column
                    prop="contactIdCard"
                    label="身份证号"
                    width="120"
                />
                <el-table-column
                    prop="content"
                    label="信件内容"
                    show-overflow-tooltip
                />
                <el-table-column prop="mailState" label="信件状态">
                    <template #default="{ row }">
                        <span>{{
                            getDictLable(dictData.mail_state, row.mailState)
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="流程节点">
                    <template #default="{ row }"> </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="handleMail(row)"
                            >立即处理</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="我的收藏" name="fav">
            <el-table :data="highTodos" style="width: 100%" stripe>
                <el-table-column
                    prop="mailTime"
                    label="来信时间"
                    align="center"
                    width="180"
                />
                <el-table-column
                    prop="contactName"
                    label="姓名"
                    align="center"
                    width="120"
                />
                <el-table-column
                    prop="contactPhone"
                    label="联系电话"
                    width="120"
                />
                <el-table-column
                    prop="contactIdCard"
                    label="身份证号"
                    width="120"
                />
                <el-table-column
                    prop="content"
                    label="信件内容"
                    show-overflow-tooltip
                />
                <el-table-column prop="mailState" label="信件状态">
                    <template #default="{ row }">
                        <span>{{
                            getDictLable(dictData.mail_state, row.mailState)
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="流程节点">
                    <template #default="{ row }"> </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
    </el-tabs>

    <audio loop ref="newMailAudioRef">
        <source :src="NewMailMp3" type="audio/mpeg">
    </audio>
</template>
<script setup>
import TabsTable from "./TabsTable.vue";
import NewMailMp3 from '/mp3/new-mail.mp3'

import { useDictData } from "@/hooks/useDictOptions";
import { getTodos } from "@/api/work";
import { getDictLable, getFlowTagType } from "@/utils/util";

const { dictData } = useDictData(["mail_state"]);
import emitter from "@/utils/bus";
import { nextTick } from "vue";

emitter.on('notice',()=>{
    todoList()
})

const activeName = ref("todo");

watch(activeName, (val) => {
    if (val === "todo") {
    }
    if (val === "supervise") {
        superviseTodoList();
    }
    if (val === "high") {
        highTodoList();
    }
});

const todos = ref([]);
const superviseTodos = ref([]);
const highTodos = ref([]);
const showModel = ref(false);

const newMailAudioRef = ref()
watch(todos, (val) => {
    nextTick(() => {
        todos.value.filter(item => item.flowName === '待签收').length > 0 ? newMailAudioRef.value.play() : newMailAudioRef.value.pause()
    })
})

todoList();
function todoList() {
    getTodos({
        size: 100,
        current: 1,
    }).then((data) => {
        todos.value = data.records;
    });
}

function superviseTodoList() {
    getTodos({
        size: 8,
        current: 1,
        mailLevel: "superintend",
    }).then((data) => {
        superviseTodos.value = data.records;
    });
}

function highTodoList() {
    getTodos({
        size: 8,
        current: 1,
        mailLevel: "high_sensitivity",
    }).then((data) => {
        highTodos.value = data.records;
    });
}

const activeMailId = ref("");
const activeWorkId = ref(0);
const activeWorkType = ref("");

function handleMail(row) {
    showModel.value = true;
    activeMailId.value = row.mailId;
    activeWorkId.value = row.id;
    activeWorkType.value = row.workType;
}
</script>
<style lang="scss" scoped>
.el-tabs {
    .el-tab-pane {
        min-height: 200px;
    }
    :deep() {
        .el-tabs__header {
            margin: 0;

            .el-tabs__nav {
                padding-bottom: 16px;

                .el-tabs__item {
                    font-weight: 700;
                }
            }
        }
        .el-tabs__active-bar {
            height: 4px;
        }
        .el-tabs__item {
            --el-font-size-base: 24px;
            --el-text-color-primary: #999;
        }
    }
}
</style>