<template>
    <div v-loading="allLoading">
        <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>{{ detailData.tm_gzsmc }}</span></h3>
            <div class="btnDiv">
                <el-button size="large" @click="linkTo('home_msgzs_index')" class="w-100px">返回
                </el-button>
            </div>
        </div>
        <div class="flex justify-between mt-20px z-10">
            <!-- 左上 -->
            <div class="shadow-default bg-white rounded-10px w-874px h-1075px">
                <!-- 蓝色部分 工作室详情 -->
                <div class="w-full h-200px flex rounded-10px bg_blue_light py-22px px-15px">
                    <div class="flex w-474px">
                        <div class="w-268px h-157px overflow-hidden rounded-10px">
                            <img class="w-full" :src="getFullUrl(detailData.tm_img)" alt="">
                        </div>
                        <div class="pl-10px relative">
                            <p class="font-medium text-18px">{{ detailData.tm_gzsmc }}</p>
                            <p class="text-gray-700 text-16px leading-30px mt-18px">{{ detailData.tm_xd }}{{
                                detailData.tjzx_name }}</p>
                            <p class="text-gray-700 text-16px">{{ detailData.school_name }}</p>
                            <div class="absolute bottom-0">
                                <span class="icon-view"></span>
                                <span class="ml-5px text-14px">{{ detailData.tm_fws }}</span>
                            </div>
                        </div>
                    </div>
                    <el-divider direction="vertical" class="h-full"></el-divider>
                    <div class="px-13px h-full w-380px">
                        <h3 class="text-gray-800 text-16px">工作室成员</h3>
                        <el-scrollbar min-size="10" max-height="140px" :always="true" class="my-10px">
                            <ul class="w-full">
                                <li v-for="(c, i) in cyData" :key="i" class="flex items-center h-35px w-full border_b">
                                    <img :src="user_icon" alt=""><span class="ml-2 min-w-85px text-14px">{{ c.tmc_cyxm
                                    }}</span>
                                    <img :src="score_icon" alt=""><span class="ml-2 text-14px min-w-30px">{{ c.user_score
                                    }}</span>
                                    <span class="ml-6 text-14px w-154px justify-self-end truncate">{{ c.user_dept }}</span>
                                </li>
                            </ul>
                        </el-scrollbar>

                    </div>
                </div>
                <!-- 课堂研究 -->
                <div class="py-22px px-15px w-full">
                    <check-row class="w-full" v-model="queryForm.tjzn_id" label="年级" :items="gradeData"
                        @click="getKtyj"></check-row>
                    <check-row v-model="queryForm.tjzx_id" label="学科" :items="subjectData" @click="getKtyj"></check-row>
                    <div class="mt-25px search-box">
                        <input type="text" placeholder="搜索关键字" v-model="queryForm.keyword">
                        <button type="button" class="search-btn" @click="initData"></button>
                    </div>
                    <div class="w-full h-618px relative">
                        <ul v-loading="loading" v-if="ktyjData.length > 0" class="mt-25px course-list">
                            <li @click="linkTo('home_msgzs_ktyj',item.tmk_id)" v-for="(item, i) in ktyjData" :key="i">
                                <div class="course-img relative">
                                    <img :src="getFullUrl(item.tmk_img.split('|')[0])" alt="">
                                    <div class="info-bottom pl-7px items-center">
                                        <span class="icon-view"></span>
                                        <span class="ml-5px text-14px text-white">{{ item.tmk_fws }}</span>
                                    </div>
                                </div>
                                <div class="pt-10px pb-10px px-15px border-bottom-1">
                                    <div class="text-16px text-dark-400 h-40px leading-20px overflow-hidden">{{
                                        item.tmk_kcm }}
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <NoData v-else></NoData>
                        <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="getKtyj" :hide-on-single-page="false" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右上 -->
            <div class="w-315px">
                <!-- 资讯 -->
                <div class="w-full h-424px py-34px px-22px shadow-default bg-white rounded-10px ">
                    <div class="flex justify-between items-center">
                        <h3 class="text-18px font-500">资讯</h3>
                        <span class="text-14px font-400 color cursor-pointer" @click="linkTo('home_msgzs_zx',null, '3')">更多>>
                        </span>
                    </div>
                    <img class="w-full my-5" :src="zixun" alt="">
                    <ul v-if="zxData.length > 0">
                        <li v-for="(l, i) in zxData" :key="i"
                            class="text-14px flex items-center h-50px w-full border_b justify-between cursor-pointer" @click="linkTo('home_msgzs_gzw', l.tmg_id, '3')">
                            <p class="color truncate w-186px">{{ l.tmg_title }}</p> <span>{{ l.tmg_fbsj_datetime.split(' ')[0] }}</span>
                        </li>
                    </ul>
                    <no-data v-else size="100"></no-data>
                </div>
                <!-- 公告 -->
                <div class="w-full h-245px py-34px px-22px shadow-default bg-white rounded-10px my-5">
                    <div class="flex justify-between items-center mb-5">
                        <h3 class="text-18px font-500">公告</h3>
                        <span class="text-14px font-400 color cursor-pointer" @click="linkTo('home_msgzs_zx',null, '1')">更多>>
                        </span>
                    </div>
                    <ul v-if="ggData.length > 0">
                        <li v-for="(l, i) in ggData" :key="i"
                            class="text-14px flex items-center h-50px w-full border_b justify-between cursor-pointer" @click="linkTo('home_msgzs_gzw',l.tmg_id,'1')">
                            <p class="color truncate w-186px">{{ l.tmg_title }}</p> <span>{{ l.tmg_fbsj_datetime.split(' ')[0] }}</span>
                        </li>
                    </ul>
                    <no-data v-else size="100"></no-data>
                </div>
                <!-- 研修成果 -->
                <div class="w-full h-365px py-34px px-22px shadow-default bg-white rounded-10px my-5">
                    <div class="flex justify-between items-center mb-5">
                        <h3 class="text-18px font-500">成果展示</h3>
                        <span class="text-14px font-400 color cursor-pointer" @click="linkTo('home_msgzs_yxcg')">更多>>
                        </span>
                    </div>
                    <ul v-if="cgData.length > 0">
                        <li v-for="(l, i) in cgData" :key="i"
                            class="text-14px flex items-center h-86px w-full border_b justify-between cursor-pointer" @click="linkTo('home_msgzs_cgInfo',l.tmy_id)">
                            <img class="h-60px w-60px rounded-1/2" :src="getFullUrl(l.tmy_img)" alt="">
                            <p class="color truncate w-67px text-left">{{ l.tmy_title }}</p>
                            <p class="text-gray-500 w-100px truncate">发布人: {{ l.tmy_fbr }} </p>
                        </li>
                    </ul>
                    <no-data v-else size="100"></no-data>
                </div>
            </div>
        </div>
        <div class="flex justify-between mt-10px z-10 h-424px">
            <!-- 教师文章 -->
            <div class="shadow-default bg-white rounded-10px w-1/2 mr-2">
                <div class="w-full h-full py-34px px-22px shadow-default bg-white rounded-10px">
                    <div class="flex justify-between items-center mb-5">
                        <h3 class="text-18px font-500">教师文章</h3>
                        <span class="text-14px font-400 color cursor-pointer" @click="linkTo('home_msgzs_zx', null, '2')">更多>>
                        </span>
                    </div>
                    <ul v-if="wzData.length > 0">
                        <li v-show="i == 0" v-for="(l, i) in wzData" :key="i"
                            class="text-14px flex w-full border_b justify-between cursor-pointer" @click="linkTo('home_msgzs_gzw', l.tmg_id, '2')">
                            <img class="w-268px h-157px" :src="wenz" alt="">
                            <div class="ml-20px py-1">
                                <p class="font-600 text-18px truncate w-231px">{{ l.tmg_title }}</p>
                                <div class="flex justify-between text-16px my-5">
                                    <p>{{ l.tmt_cymc }}</p>
                                    <p>{{ l.tmg_fbr }}</p>
                                </div>
                                <div class="flex justify-between text-14px">
                                    <p>{{ l.tmg_fbr }}</p>
                                    <span>{{ l.tmg_fbsj_datetime.split(' ')[0] }}</span>
                                </div>
                            </div>
                        </li>
                        <li v-show="i > 0" v-for="(l, i) in wzData" :key="i"
                            class="text-14px flex items-center h-50px w-full border_b justify-between cursor-pointer" @click="linkTo('home_msgzs_gzw', l.tmg_id, '2')">
                            <p class="color truncate w-261px">{{ l.tmg_title }}</p>
                            <p class="w-62px truncate">{{ l.tmg_fbr }}</p>
                            <span>{{ l.tmg_fbsj_datetime.split(' ')[0] }}</span>
                        </li>
                    </ul>
                    <no-data v-else size="100"></no-data>
                </div>
            </div>
            <!-- 教研活动 -->
            <div class="shadow-default bg-white rounded-10px w-1/2 ml-2">
                <div class="w-full h-full py-34px px-22px shadow-default bg-white rounded-10px">
                    <div class="flex justify-between items-center mb-5">
                        <h3 class="text-18px font-500">教研活动</h3>
                        <span class="text-14px font-400 color cursor-pointer" @click="linkTo('home_msgzs_jyhd')">更多>>
                        </span>
                    </div>
                    <ul v-if="jyData.length > 0">
                        <li v-for="(l, i) in jyData" :key="i"
                            class="text-14px flex items-center h-50px w-full border_b justify-between cursor-pointer" @click="linkTo('home_msgzs_jyInfo',l.tmjh_id)">
                            <p class="color truncate w-261px">{{ l.tmjh_name }}</p>
                            <p class="w-60px truncate">{{ l.tmjh_cjr }}</p>
                            <span>{{ l.ex?.create_dateline.split(' ')[0] }}</span>
                        </li>
                    </ul>
                    <no-data v-else size="100"></no-data>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { gwz_list, jyhd_list, ktyj_list, msgzs_detail, option_list, subject_list, yxcg_list } from "./api";
import { useRoute, useRouter } from 'vue-router';
import score_icon from '@/assets/home/score.png'
import user_icon from '@/assets/home/user.png';
import zixun from '@/assets/home/zx.png'
import wenz from '@/assets/home/wz.png'
import { grade_list } from "../xsd/api";
import NoData from "../xsd/component/noData.vue";
const route = useRoute();
const router = useRouter();
let tm_id = route.params.id;
let loading = $ref(false);
let allLoading = $ref(false);
//工作室详情 
let detailData = $ref({});
let cyData = $ref([])
function initData() {
    loading = true;
    allLoading = true;
    msgzs_detail({ tm_id }).then(res => {
        if (res.code == '1') {
            detailData = res.data.one_info
            let a = detailData.tm_cy
            cyData = JSON.parse(a)
            getKtyj();
            getData('3', 3);//资讯
            getData('1', 3);//公告
            getData('2', 4);//文章
            getCg();
            getJy();
            loading = false;
            allLoading = false;
        }
    })
}
initData();

// #region 学科年级数据
let subjectData = $ref([]);
let gradeData = $ref([]);
subject_list({ limit: 9999, page: 1 }).then(res => {
    if (res.code == '1') {
        subjectData = [{ n: "全部", v: null }].concat(
            res.data.page_data.map(({ tjzx_id, tjzx_xkmc }) => ({
                v: tjzx_id,
                n: tjzx_xkmc
            }))
        )
    }
})
grade_list({ limit: 9999, page: 1 }).then(res => {
    if (res.code == '1') {
        gradeData = [{ n: "全部", v: null }].concat(
            res.data.page_data.map(({ tjzn_id, tjzn_njmc }) => ({
                v: tjzn_id,
                n: tjzn_njmc
            }))
        )
    }
})
// #endregion
let queryForm = $ref({
    tjzx_id: null,
    tjzn_id: null,
    limit: 6,
    page: 1,
})
let total = $ref(0);
function handleSelectionChange(val) {
    form_query.page = val;
    getKtyj();

}
// 课堂研究
let ktyjData = $ref([]);
function getKtyj() {
    loading = true;
    let data = {
        ...queryForm,
        tm_id
    }
    ktyj_list(data).then(res => {
        if (res.code == '1') {
            const { page_data, page_now, total_page, total_rows } = res.data;
            ktyjData = page_data;
            total = total_rows * 1;
            queryForm.page = page_now;
            loading = false;
        }
    })
}
// 文章资讯公告
let zxData = $ref([]);
let ggData = $ref([]);
let wzData = $ref([]);
function getData(tmg_lb, limit) {
    let data = {
        page: 1,
        limit,
        tm_id,
        tmg_lb,
    }
    gwz_list(data).then(res => {
        if (res.code == '1') {
            if (tmg_lb == '3') {
                zxData = res.data.page_data;
            } else if (tmg_lb == '1') {
                ggData = res.data.page_data
            } else {
                wzData = res.data.page_data
            }
        }
    })
}

// 研修成果
let cgData = $ref([]);
function getCg() {
    let data = {
        limit: 3,
        page: 1,
        tm_id
    }
    yxcg_list(data).then(res => {
        if (res.code == '1') {
            cgData = res.data.page_data
        }
    })
}
// 教研活动
let jyData = $ref([]);
function getJy() {
    let data = {
        limit: 6,
        page: 1,
        tm_id
    }
    jyhd_list(data).then(res => {
        if (res.code == '1') {
            jyData = res.data.page_data
        }
    })
}

const linkTo = (name, id, type) => {
    router.push({
        name, params: {
            type,
            tmy_id: id,
            tmjh_id: id,
            tmg_id: id,
            tmk_id: id,
        }
    });
}
</script>
<style lang="scss" scoped>
$color: #1259a1;

.color {
    color: $color;
}

.bg_blue_light {
    background: linear-gradient(100deg, #eefafe, #F2FAFF, #F2F8FE);
}

.border_b {
    border-bottom: 1px dashed #E4E6E8;
}

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

.nav-title {
    font-size: 16px;
    color: #949494;

    span {
        font-size: 18px;
        color: #050026;
    }
}

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

.icon-view {
    display: inline-block;
    width: 24px;
    height: 16px;
    background: url("@/assets/home/eye.png") center no-repeat;
    background-size: 24px 16px;
}

::v-deep .el-divider {
    height: 100%;
    width: 1.5px;
    background-color: #fff;
    border-left: none;
}

::v-deep .el-scrollbar__bar {
    width: 4px;
}

::v-deep .el-scrollbar__thumb {
    background-color: #1259a1;
}

.search-box {
    width: 300px;
    height: 48px;
    background: #f6f8fa;
    border-radius: 8px;
    padding: 0 10px 0 14px;
    display: flex;
    align-items: center;

    input {
        flex: 1;
        height: 48px;
        border: 0;
        font-size: 16px;
        color: #333;
        outline: none;
        background: #f6f8fa;
    }

    .search-btn {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        background: $color url("/images/icon-search.png") center no-repeat;
        background-size: 13px 13px;
    }
}

::v-deep .check {
    max-width: 818px;
}

.course-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    li {
        min-width: 0;
        width: 268px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
        margin-right: 15px;
        margin-bottom: 20px;
        cursor: pointer;

        &:nth-child(3n) {
            margin-right: 0;
        }

        .course-img {
            width: 100%;
            height: 157px;
            border-radius: 10px 10px 0 0;
            overflow: hidden;

            img {
                width: 100%;
            }

            .info-bottom {
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 30;
                width: 80px;
                height: 27px;
                background: rgba(0, 0, 0, .5);
                border-radius: 0 10px 0 0;
                display: flex;

                .icon-view {
                    width: 24px;
                    height: 16px;
                    background: url("/images/icon/view.png") center no-repeat;
                    background-size: 24px 16px;
                }

                .icon-thumb {
                    width: 17px;
                    height: 16px;
                    background: url("/images/icon/thumb.png") center no-repeat;
                    background-size: 17px 16px;
                }
            }
        }
    }
}</style>