<template>
    <section class='bottom-modules modules'>
        <section class="header">
            <section style="display: flex;align-items: center;justify-content: space-between;">
                <article class="posi">
                    <MOSTY.Assort title="" />
                </article>
                <section class="tabs">
                    <article v-for="(item, index) in listData" :key="index" :class="{ 'active': actives == item.id }"
                        @click="handleTabs(item.id)">
                        <!-- <el-badge :value="item.tips" class="item" :hidden="item.tips <= 0"> -->
                            {{ item.title }}
                        <!-- </el-badge> -->
                    </article>
                </section>
            </section>
            <el-link @click="handleMore('/dutyBook/tzgg/index', '曝光台')" style="width: 82px;">查看全部 ></el-link>
        </section>
        <el-divider style="margin: 0 !important;border-color: #EFEFEF;" />
		<div class="task-content">
			<ExposePlatForm />
		</div>
    </section>
    <!-- <DetailsDialog :item="item" v-if="dialogVisibility" @close="dialogVisibility = false" /> -->
    
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
import { getApi, postApi } from "@/api/tobAcco_api.js";
import ExposePlatForm from './exposeCom/ExposePlatForm.vue';
import { ref, reactive, onMounted } from 'vue'
const dialogVisibility = ref(false)
const item = ref({})
const listData = ref([
    { title: '曝光台', id: '01', tips: 0 },
    { title: '安全动态', id: '03', tips: 0 },
    { title: '安全建议', id: '03', tips:0 },
])
const messageList = ref({
    query: {
        pageCurrent: 1,
        pageSize: 10,
    },
    dataList: [],
    details: {},
    dialogVisible: false
})

const actives = ref('01')
const handleTabs = _index => {
	console.log('_index: ', _index);
    actives.value = _index
    if (_index == '03') {
        // getWorkListData()
    } else {
        // getListData()
    }
}

// // 获取通知公告列表
// const getListData = () => {
//     messageList.value.query.type = actives.value
//     postApi(messageList.value.query, `/mosty-jcgl/noticeController/queryNotice`).then((res) => {
//         if (res.records) {
//             messageList.value.dataList = res.records;
//         }
//     });
// }
// 获取工作代办列表

// 点击列表弹出框

// 查看全部
const handleMore = (_url, _title) => {
    if (_url) {
        store.commit(
            "app/addTagsViewList",
            {
                fullPath: _url,
                meta: {
                    meta: {
                        title: _title
                    }
                },
                name: _url,
                params: {},
                path: _url,
                query: {},
                title: _title
            },
            {
                immediate: true
            }
        );
        router.push(_url)
    }
}
onMounted(() => {
    // getListData()
})
</script>
<style scoped lang="scss">
@import '../style/index.scss';

.bottom-modules {
    position: relative !important;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .posi {
            margin-left: 16px;
            width: 10px;
        }

        .tabs {
            display: flex;
            align-items: center;
            color: #666666;
            font-size: 14px;

            >article {
                margin-right: 23px;
                cursor: pointer;

                &:hover {
                    color: var(--el-color-primary);
                }
            }

            .active {
                color: #000000;
                font-size: 16px;
            }
        }
    }

    
}
.task-content {
	// border: 1px solid #000;
	height: 100%;
}

</style>