<template>
    <section style="display: flex;justify-content: space-between;">
        <section class="info_img">
            <!-- 录播图 -->
            <div v-if="aqttLbt.length" class="content-top">
                <el-carousel indicator-position="none" style="width: 100%;height: 100%;overflow: hidden;"
                    @change="changeBanner">
                    <el-carousel-item style="width: 100%;height: 100%;" v-for="(item, index) in aqttLbt" :key="item"
                        @click="handleClickDetail(item)">
                        <img class="img" :src="item.titleFile" />
                        <span class="head-name" @click="handleClickDetail(aqttArr[index])">{{ aqttArr[index] &&
                            aqttArr[index].name }}</span>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </section>
        <section class="modules">
            <section class="m-head">
                <span class="m-head-title" @click="handleMore('/dutyBook/aqdt/showList/01', '安全动态')">安全头条</span>
                <el-link @click="handleMore('/dutyBook/aqdt/showList/01', '安全动态')"
                    style="width: 22px;font-weight: bolder;">{{ '>'
                    }}</el-link>
            </section>
            <section class="m-content">
                <el-divider style="margin: 0 !important;" />
                <div class="m-content-container">
                    <section class="left-anqtt">
                        <!-- 录播图 -->
                        <div v-if="aqttLbt.length" class="m-content-top">
                            <el-carousel indicator-position="none" style="width: 100%;height: 100%;overflow: hidden;"
                                @change="changeBanner">
                                <el-carousel-item style="width: 100%;height: 100%;" v-for="item in aqttLbt" :key="item"
                                    @click="handleClickDetail(item)">
                                    <img class="img" :src="item.titleFile" />
                                </el-carousel-item>
                            </el-carousel>
                        </div>

                        <!-- 安全头条内容 从第2条开始 -->
                        <div v-if="aqttArr.length" class="left-anqtt-bottom">
                            <div class="anqtt-bottom-item" v-for="item in aqttArr.slice(0, 4)"
                                @click="handleClickDetail(item)">
                                {{ item.name }}
                            </div>
                        </div>
                    </section>

                    <!-- 右边 -->
                    <div class="right-aqyw-and-jcdt">
                        <div class="aqyw-container">
                            <div class="aqyw-container-head">

                                <span @click="handleMore('/dutyBook/aqdt/showList/02', '安全要闻')"
                                    class="m-head-title">安全要闻</span>
                                <el-link @click="handleMore('/dutyBook/aqdt/showList/02', '安全要闻')"
                                    style="width: 22px;font-weight: bolder;">{{ '>'
                                    }}</el-link>
                            </div>

                            <div>
                                <div class="right-title-item" v-for="item in aqywArr.slice(0, 4)"
                                    @click="handleClickDetail(item)">
                                    {{ item.name }}
                                </div>
                            </div>
                        </div>
                        <div class="aqyw-container">
                            <div class="aqyw-container-head">
                                <span @click="handleMore('/dutyBook/aqdt/showList/03', '基层动态')"
                                    class="m-head-title">基层动态</span>
                                <el-link @click="handleMore('/dutyBook/aqdt/showList/03', '基层动态')"
                                    style="width: 22px;font-weight: bolder;">{{ '>'
                                    }}</el-link>
                            </div>

                            <div>
                                <div class="right-title-item" v-for="item in jcdtArr.slice(0, 4)"
                                    @click="handleClickDetail(item)">
                                    {{ item.name }}
                                </div>
                            </div>
                        </div>
                        <!-- <div class="jcdt-container">
                        <div>
                            <span class="m-head-title">安全要闻</span>
                        </div>
                    </div> -->
                    </div>
                </div>

            </section>
            <!-- <el-empty description="暂无数据" v-else /> -->
        </section>
    </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";
import DetailsDialog from "../../components/DetailsDialog.vue";
const router = useRouter();
const store = useStore();
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ref, reactive, onMounted, computed } from 'vue'
const dialogVisibility = ref(false)
const workData = ref({
    query: {
        pageCurrent: 1,
        pageSize: 5,
        zdlx: "02",
        clzt: '01'
    },
    dataList: [],
    details: {},
    firstItem: {},
    fileList: []
})
const item = ref({})
const actives = ref('01');
// level参数：01 安全头条 02 安全要闻 03 基层动态
const listData = ref([
    { title: '安全头条', id: '01', tips: 0 },
    { title: '安全要闻', id: '02', tips: 0 },
    { title: '基层动态', id: '03', tips: 0 },
])
/** 头条轮播图 */
const aqttLbt = ref([])
/** 安全头条 */
const aqttArr = ref([])
/** 安全要闻 */
const aqywArr = ref([])
/** 基层动态 */
const jcdtArr = ref([])

const needDataList = computed(() => {
    let dataList = Array.isArray(workData.value.dataList) ? workData.value.dataList : [];
    dataList = dataList.map((item, index) => {
        item.idx = index + 1
        return item
    })
    // 有图第一个为右图，后面几个为无图
    return workData.value?.fileList?.length ? dataList.slice(1, 4) : dataList
})
const bannerClick = (file) => {
    let index = workData.value.dataList.findIndex(item => item.titleFile === file)
    if (index !== -1) {
        handleClickDetail(workData.value.dataList[index])
    }
}
// 点击查看详情
const handleClickDetail = (val) => {
    item.value = val
    // dialogVisibility.value = true
    // 改天跳转到展示页
    router.push({
        name: 'dutyBook/aqdt/show',
        params: {
            id: val.id,
            row: JSON.stringify({
                id: val.id,
                name: val.name,
                time: val.time,
                content: val.content,
                otherFile: val.otherFile,
                level: actives.value
            })
        }
    })
}

function getSimpleText(html) {
    var re1 = new RegExp("<.+?>", "g");//匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
    var msg = html.replace(re1, '');//执行替换成空字符
    return msg;
}
const getDataArr = async (level) => {
    return new Promise((resolve, reject) => {
        postApi({}, `/mosty-jcgl/securityDynamics/querySecurityDynamicsInfo?type=${1}&level=${level}`).then((res) => {
            resolve(Array.isArray(res?.records) ? res.records : [])
        }).catch(err => {
            console.log('err: ', err);
            reject([])
        })
    })
}
// 获取安全动态列表
const getListData = async () => {
    aqttArr.value = await getDataArr('01') || []
    aqywArr.value = await getDataArr('02') || []
    jcdtArr.value = await getDataArr('03') || []

    aqttLbt.value = aqttArr.value.filter(item => item.titleFile)
    // workData.value.fileList = []
    // workData.value.dataList = []
    // workData.value.firstItem = {}
    // postApi({}, `/mosty-jcgl/securityDynamics/querySecurityDynamicsInfo?type=${1}&level=${actives.value}`).then((res) => {
    //     if (res.records) {
    //         workData.value.dataList = res.records.map(item => {
    //             item.textContent = getSimpleText(item.content)
    //             item.timeCont = typeof item.time === 'string' ? item.time.slice(0, 10) : ''
    //             if (item.titleFile && workData.value.fileList.length < 6) workData.value.fileList.push(item)
    //             return item
    //         })
    //         workData.value.firstItem = res.records[0]
    //         // res.records.map(item => {
    //         // })
    //     }
    // });
}
// 轮播图切换
const changeBanner = index => {
    workData.value.firstItem = workData.value.dataList[index]
}
const handleTabs = idVal => {
    actives.value = idVal
    getListData()
}
// 查看全部
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';
.info_img {
    width: 56%;
    position: relative;
    height: 344px;
    background: #fff;
    // padding: 0 16px;
    box-sizing: border-box;

    .content-top {
        width: 100%;
        height: 100%;

        :deep(.el-carousel__container) {
            height: 100%;
        }

        .img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .head-name {
            color: #fff;
            position: absolute;
            bottom: 15px;
            left: 15px;
        }
    }

}

.modules {
    width: 43%;
    height: 344px;
    background: #fff;
    padding: 0 16px;
    box-sizing: border-box;

    .m-head {
        padding: 8px 0px;

        .m-head-title {
            font-weight: bold;
            font-size: 16px;
            color: var(--el-color-primary);
            cursor: pointer;
        }

        .m-head-name {
            display: inline-block;
            width: calc(100% - 12em);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
            cursor: pointer;
        }
    }

    .m-content {
        height: calc(328px - 50px);

        .m-content-container {
            display: flex;
            height: 100%;
            width: 100%;
        }

        .left-anqtt {
            // display: flex;
            position: relative;
            // margin-top: 6px;
            width: 50%;

            .m-content-top {
                height: 150px;
                flex-shrink: 0;
                overflow: hidden;
            }

            .left-anqtt-bottom {
                height: calc(100% - 150px);
                overflow-y: hidden;

                .anqtt-bottom-item {
                    padding: 2px 5px 2px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    cursor: pointer;
                }
            }

            .m-content-bottom {
                width: 50%;
                padding: 0px 0px 0px 10px;

                &.no-left {
                    width: 100%;
                }

                .time-ellipsis {
                    display: inline-block;
                    width: calc(100% - 80px);
                    padding-right: 5px;
                    box-sizing: border-box;
                    overflow: hidden;
                    line-height: 11px;
                }
            }

            .text {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 7;
                line-clamp: 7; // 标准属性
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 12px;
            }


            .bottom {
                background-color: rgba(0, 0, 0, 0.5);
                color: #fff;
                width: 100%;
                height: 30px;
                line-height: 30px;
                padding: 0 6px;
                box-sizing: border-box;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 9;
                display: flex;
                align-items: center;
                font-size: 12px;
                justify-content: space-between;
            }

            .img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            cursor: pointer;

            .desc {
                margin-left: 13px;
                flex: 1;
                height: 94px;



                .time {
                    color: #909399;
                    font-size: 14px;
                    margin-top: 26px;
                }

            }
        }

        // 安全要闻，基层动态
        .right-aqyw-and-jcdt {
            width: 50%;
            height: 100%;

            // 安全要闻
            .aqyw-container {
                height: 137px;
                padding-left: 5px;
                border: 1px solid #f3f0f0;
                margin-top: 5px;
                margin-left: 7px;
                border-radius: 4px;

                .aqyw-container-head {
                    display: flex;
                    justify-content: space-between;
                    padding: 6px 0px;
                    // border-bottom: 1px solid #ccc;

                    .m-head-title {
                        font-weight: bold;
                        font-size: 16px;
                        color: var(--el-color-primary);
                        cursor: pointer;
                    }
                }

                .right-title-item {
                    padding: 2px 5px 2px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    cursor: pointer;
                }
            }

            .jcdt-container {
                height: calc(100% - 150px);
                border: 1px solid red;
                border: 1px solid #ccc;
            }
        }

        .m-content-other-item {
            display: flex;
            margin-top: 8px;
            cursor: pointer;
            align-items: center;

            // border-bottom: 1px solid #ebeef5;
            .m-cont-ohter-left {
                padding-right: 10px;
                max-width: calc(100% - 90px);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

                &.no-pic {
                    padding-top: 8px;
                    padding-bottom: 8px;
                }
            }
        }

        .m-list {
            .m-flex {
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 12px;
                cursor: pointer;

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

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

                .title {
                    color: #000000;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 65%;
                }

                .time {
                    color: #999999;
                }
            }

        }
    }

    ::v-deep .el-scrollbar {
        height: 63%;
    }

    ::v-deep .el-carousel__container {
        height: 150px !important;
    }

    .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;
        }
    }

    .m-head-left {
        display: flex;
    }

    .m-head-left-title-container {
        display: flex;
        align-items: center;

        .title-item {
            cursor: pointer;
        }

        .title-item+.title-item {
            margin-left: 15px;
        }
    }
}
</style>
