<template>
    <div>
        <div
            class="mt-10px shadow-default bg-white pl-35px pr-30px pr-35px h-60px rounded-10px relative flex items-center justify-between">
            <h3 class="nav-title"> 名师工作室 - <span>{{ F_title }}</span> - <span class="text-18px font-medium">{{ title
            }}</span></h3>
            <div class="btnDiv">
                <el-button size="large" @click="linkTo('home_msgzs_detail')" class="w-100px">返回
                </el-button>
            </div>
        </div>
        <div class="mt-20px flex justify-between">
            <!-- 列表 -->
            <div class="w-873px min-h-400px shadow-default bg-white rounded-10px py-34px px-22px relative">
                <h3 class="text-18px font-medium ml-10px mb-10px">{{ title }}</h3>
                <el-table :data="listData" v-loading="loading">
                    <el-table-column label="标题" width="540px">
                        <template #default="{ row }">
                            <div class="color cursor-pointer" @click="linkTo('home_msgzs_gzw',row.tmg_id)">{{ row.tmg_title }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tmg_fbr" label="发布人"></el-table-column>
                    <el-table-column label="发布时间">
                        <template #default="{ row }">
                            <div>{{ row.tmg_fbsj_datetime.split(' ')[0] }}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="flex justify-center items-end absolute bottom-10px left-0 right-0">
                    <el-pagination v-model:current-page="queryForm.page" v-model:page-size="queryForm.limit"
                        layout="total,sizes, prev, pager, next, jumper" :total="total" :background="true"
                        @current-change="initData" :hide-on-single-page="false" />
                </div>
            </div>
            <!-- 日历 -->
            <div class="w-300px h-400px shadow-default bg-white rounded-10px py-5px">
                <el-radio-group v-model="radio" class="ml-5">
                    <el-radio :label="1">选择日期</el-radio>
                    <el-radio :label="2">选择范围</el-radio>
                </el-radio-group>
                <Calendar backgroundText class-name="select-mode" :selectMode="radio === 1 ? 'select' : 'range'"
                    :monFirst="true" :format="formatOfmultiMode" @onSelect="onSelect" />
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router';
import Calendar from 'mpvue-calendar'
import { gwz_list } from './api';
const route = useRoute();
const router = useRouter();
let tmg_lb = route.params.type;
let tm_id = route.params.id;
let title = $ref('');
title = tmg_lb == '3' ? '资讯' : (tmg_lb == '1' ? '公告' : '文章');
let loading = $ref(false);;
const linkTo = (name, id) => {
    router.push({
        name,
        params: {
            tmg_id: id
        }
    });
}
// const currentDate = new Date();
// const currentYear = currentDate.getFullYear();
// const currentMonth = currentDate.getMonth() + 1;
// const currentDay = currentDate.getDate();
// const getRandom = () => Math.floor(Math.random() * (28 - 1 + 1)) + 1
// const selectModeDate = ref(`${currentYear}-${currentMonth}-${getRandom()}`)
// const rangeModeDate = ref({ start: `${currentYear}-${currentMonth}-10`, end: `${currentYear}-${currentMonth}-14` })
function formatOfmultiMode(year, month) {
    return [`${year}年`, `${month}月`];
}
let queryForm = $ref({
    limit: 6,
    page: '1'
})
let tmg_fbsj_datetime = $ref('');
let F_title = $ref('');
let listData = $ref([]);
let total = $ref(0);
function initData() {
    loading = true;
    let data = {
        ...queryForm,
        tm_id,
        tmg_lb,
        tmg_fbsj_datetime,
    }
    gwz_list(data).then(res => {
        if (res.code == '1') {
            const { page_data, page_now, total_page, total_rows } = res.data;
            listData = page_data;
            F_title = listData[0]?.tmt_cymc
            total = total_rows * 1;
            queryForm.page = page_now;
            loading = false;
        }
    })
}
initData();

function handleSelectionChange(val) {
    queryForm.page = val;
    initData();
}

const radio = $ref(1)
const calendar = ref()

function onSelect(selectDate) {
    if (radio === 1) {
        tmg_fbsj_datetime = selectDate;
        initData();
    } else {
        if (selectDate.end) {
            tmg_fbsj_datetime = selectDate.start + ' - ' + selectDate.end;
            initData();
        }
    }
}

</script>
<style lang="scss" scoped>
$color: #1259A1;

.color {
    color: $color;
}

.btnDiv {
    .el-button {
        background: $color;
        border-color: $color;
        color: #fff;
    }
}

.shadow-default {
    box-shadow: 0 10px 24px rgba(161, 153, 168, 0.18);
}
</style>