<template>
    <div class="hc-tasks-message">
        <div class="menu">
            <hc-card scrollbar>
                <hc-menu-simple :datas="menuOptions" :keys="menuKey" @change="handleMenuValue" />
            </hc-card>
        </div>
        <div class="content">
            <hc-card>
                <template #header>
                    <div class="w-32">
                        <el-select v-model="searchForm.tasksType" clearable block placeholder="任务类型">
                            <el-option label="暂无接口" value=" 1" />
                        </el-select>
                    </div>
                    <div class="ml-2 w-32">
                        <el-select v-model="searchForm.smsType" clearable block placeholder="消息类型">
                            <el-option label="暂无接口" value=" 1" />
                        </el-select>
                    </div>
                    <div class="ml-2 w-64">
                        <hc-date-picker :dates="betweenTime" clearable @change="betweenTimeUpdate" />
                    </div>
                    <div class="ml-2 w-64">
                        <hc-search-input v-model="searchForm.queryValue" @search="searchClick" />
                    </div>
                </template>
                <template #extra>
                    <el-button hc-btn type="danger">
                        <hc-icon name="delete-bin-3" />
                        <span>删除</span>
                    </el-button>
                    <el-button hc-btn type="primary">
                        <hc-icon name="check" />
                        <span>批量确认</span>
                    </el-button>
                </template>
                <hc-table
                    :column="tableColumn" :datas="tableData" :loading="tableLoading"
                    :index-style="{ width: 60 }" is-check :check-style="{ width: 29 }"
                    @selection-change="tableSelection"
                >
                    <template #key8="{ row }">
                        <span class="text-red-5">未读</span>
                        <span class="text-green-5">已读</span>
                    </template>
                    <template #action="{ row }">
                        <el-link type="primary">确认</el-link>
                        <el-link type="info" disabled>已确认</el-link>
                    </template>
                </hc-table>
                <template #action>
                    <hc-pages :pages="searchForm" :sizes="[50, 100, 150, 200, 300]" @change="pageChange" />
                </template>
            </hc-card>
        </div>
    </div>
</template>

<script setup>
import { onActivated, ref } from 'vue'

//渲染完成
onActivated(() => {
    searchClick()
})

//搜索和分页数据
const searchForm = ref({ current: 1, size: 20, total: 0 })

//左侧菜单
const menuKey = ref('3')
const menuOptions = ref([
    //{ key: '1', label: '任务催办', icon: 'alarm-warning', badge: 0 },
    //{ key: '2', label: '监测预警', icon: 'eye', badge: 0 },
    { key: '3', label: '废除通知', icon: 'delete-bin-3', badge: 0 },
    //{ key: '4', label: '工单反馈', icon: 'question-answer', badge: 0 },
    //{ key: '5', label: '系统消息', icon: 'chat-settings', badge: 0 },
])
const handleMenuValue = (item) => {
    searchForm.value.type = item.key
    menuKey.value = item.key
    searchClick()
}

//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({ val, arr }) => {
    betweenTime.value = arr
    if (val && val.length > 0) {
        searchForm.value.startTime = val['start']
        searchForm.value.endTime = val['end']
    } else {
        searchForm.value.startTime = null
        searchForm.value.endTime = null
    }
}

//搜索
const searchClick = () => {
    searchForm.value.current = 1
    getTableData()
}

//分页被点击
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表格
const tableColumn = [
    { key: 'key1', name: '任务类型' },
    { key: 'key2', name: '任务名称' },
    { key: 'key3', name: '开始时间' },
    { key: 'key4', name: '废除时间' },
    { key: 'key5', name: '任务流程' },
    { key: 'key6', name: '驳回人' },
    { key: 'key7', name: '驳回原因' },
    { key: 'key8', name: '消息状态' },
    { key: 'action', name: '操作', width: 94 },
]
const tableData = ref([
    {},
])

//获取消息数据
const tableLoading = ref(false)
const getTableData = () => {

}

//多选
const tableCheckedKeys = ref([])
const tableSelection = (rows) => {
    tableCheckedKeys.value = rows
}
</script>

<style lang="scss" scoped>
.hc-tasks-message {
    position: relative;
    display: flex;
    height: 100%;
    .menu {
        position: relative;
        margin-right: 20px;
        width: 220px;
        height: 100%;

    }
    .menu :deep(.el-card__body) {
        padding: 0;
    }
    .menu :deep(.hc-menu-simple-box) {
        padding: 10px;
    }
    .content {
        position: relative;
        height: 100%;
        flex: 1;
    }
}
</style>
