<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>{{ detailData.tm_gzsmc }}</span> - <span>教研活动</span> - <span
                    class="text-18px font-medium">{{ detailData.tmjh_name
                    }}</span></h3>
            <div class="btnDiv">
                <el-button size="large" @click="linkBack" class="w-100px">返回
                </el-button>
            </div>
        </div>
        <div class="shadow-default bg-white rounded-10px py-34px px-89px mt-5 content">
            <p class="text-20px font-mudiem text-center">{{ detailData.tmjh_name }}</p>
            <p class="text-gray-400 text-14px my-15px text-center">发布人: {{ detailData.tmjh_cjr }}</p>
            <div class="h-198px flex justify-center">
                <img v-if="detailData.tmjh_img" class="w-343px" :src="detailData.tmjh_img.split('|')[0]" alt="">
            </div>
            <div class="text-16px my-5">
                <h3>活动时间</h3>
                <p class="leading-loose tracking-wide ml-5">{{ detailData.tmjh_start_datetime }} 至 {{
                    detailData.tmjh_end_datetime }}</p>
            </div>
            <div class="text-16px my-5">
                <h3>参与者</h3>
                <p v-if="detailData.tmjh_cyz" class="leading-loose tracking-wide ml-5 break-all break-words"><span
                        class="mr-10px" v-for="(cy, i) in detailData.tmjh_cyz.split(',')" :key="i">{{ cy }}</span></p>
                <noData v-else :size="40" class="w-200px"></noData>
            </div>
            <div class="text-16px my-5">
                <h3>活动描述</h3>
                <div v-if="detailData.tmjh_hdms" v-html="detailData.tmjh_hdms" class="leading-loose tracking-wide ml-5"></div>
                <noData v-else :size="40" class="w-200px"></noData>
            </div>
            <div class="text-16px my-5">
                <h3>活动安排</h3>
                <div v-if="detailData.tmjh_hdap" v-html="detailData.tmjh_hdap" class="leading-loose tracking-wide ml-5"></div>
                <noData v-else :size="40" class="w-200px"></noData>
            </div>
            <div class="text-16px my-5">
                <h3>引领者简介</h3>
                <div class="flex" v-if="ylzjj.length>0">
                    <div v-for="(y, i) in ylzjj" :key="i" class="leading-loose tracking-wide ml-5 w-50px cursor-pointer "
                        @click="down(y)">
                        <img v-if="getImgType(y) == 'jpg'" :src="jpg" alt="">
                        <img v-else-if="getImgType(y) == 'png'" :src="png" alt="">
                        <img v-else-if="getImgType(y) == 'jpeg'" :src="jpeg" alt="">
                        <img v-else-if="getImgType(y) == 'ppt'" :src="ppt" alt="">
                        <img v-else-if="getImgType(y) == 'xls' || getImgType(y) == 'xlxs'" :src="excel" alt="">
                        <img v-else-if="getImgType(y) == 'mp4'" :src="mp4" alt="">
                        <img v-else-if="getImgType(y) == 'pdf'" :src="pdf" alt="">
                        <img v-else-if="getImgType(y) == 'doc' || getImgType(y) == 'docx'" :src="word" alt="">
                        <el-tooltip class="box-item" effect="dark" :content="getImgName(y)" placement="top-start">
                            <p class="w-full break-all text-14px leading-20px mt-10px truncate">{{ getImgName(y) }}</p>
                        </el-tooltip>

                    </div>
                </div>
                <noData v-else :size="40" class="w-200px"></noData>
            </div>
            <div class="text-16px my-5">
                <h3>教案课件</h3>
                <div class="flex" v-if="jakj.length > 0">
                    <div v-for="(y, i) in jakj" :key="i" class="leading-loose tracking-wide ml-5 w-50px cursor-pointer" @click="down(y)">
                        <img v-if="getImgType(y) == 'jpg'" :src="jpg" alt="">
                        <img v-else-if="getImgType(y) == 'jpeg'" :src="jpeg" alt="">
                        <img v-else-if="getImgType(y) == 'png'" :src="png" alt="">
                        <img v-else-if="getImgType(y) == 'ppt'" :src="ppt" alt="">
                        <img v-else-if="getImgType(y) == 'xls' || getImgType(y) == 'xlxs'" :src="excel" alt="">
                        <img v-else-if="getImgType(y) == 'mp4'" :src="mp4" alt="">
                        <img v-else-if="getImgType(y) == 'pdf'" :src="pdf" alt="">
                        <img v-else-if="getImgType(y) == 'doc' || getImgType(y) == 'docx'" :src="word" alt="">
                        <el-tooltip class="box-item" effect="dark" :content="getImgName(y)" placement="top-start">
                            <p class="w-full break-all text-14px leading-20px mt-10px truncate">{{ getImgName(y) }}</p>
                        </el-tooltip>
                    </div>
                </div>
                <noData v-else :size="40" class="w-200px"></noData>
            </div>
            <div class="text-16px my-5">
                <h3>活动安排</h3>
                <div class="flex" v-if="hdbd.length > 0">
                    <div v-for="(y, i) in hdbd" :key="i" class="leading-loose tracking-wide ml-5 w-50px cursor-pointer" @click="down(y)">
                        <img v-if="getImgType(y) == 'jpg'" :src="jpg" alt="">
                        <img v-else-if="getImgType(y) == 'jpeg'" :src="jpeg" alt="">
                        <img v-else-if="getImgType(y) == 'png'" :src="png" alt="">
                        <img v-else-if="getImgType(y) == 'ppt'" :src="ppt" alt="">
                        <img v-else-if="getImgType(y) == 'xls' || getImgType(y) == 'xlxs'" :src="excel" alt="">
                        <img v-else-if="getImgType(y) == 'mp4'" :src="mp4" alt="">
                        <img v-else-if="getImgType(y) == 'pdf'" :src="pdf" alt="">
                        <img v-else-if="getImgType(y) == 'doc' || getImgType(y) == 'docx'" :src="word" alt="">
                        <el-tooltip class="box-item" effect="dark" :content="getImgName(y)" placement="top-start">
                            <p class="w-full break-all text-14px leading-20px mt-10px truncate">{{ getImgName(y) }}</p>
                        </el-tooltip>
                    </div>
                </div>
                <noData v-else :size="40" class="w-200px"></noData>
            </div>
            <div class="text-16px my-5">
                <h3>其他描述</h3>
                <div v-if="detailData.tmjh_hdlcqtsm" v-html="detailData.tmjh_hdlcqtsm" class="leading-loose tracking-wide ml-5"></div>
                <noData v-else :size="40" class="w-200px"></noData>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router';
import noData from '../xsd/component/noData.vue'
import jpg from '../../assets/home/Jpg.png';
import jpeg from '../../assets/home/jpeg.png';
import ppt from '../../assets/home/PPT.png';
import excel from '../../assets/home/EXCEL.png';
import pdf from '../../assets/home/Pdf.png';
import png from '../../assets/home/Png.png';
import word from '../../assets/home/word.png';
import mp4 from '../../assets/home/mp4.png';
import { jyhd_detail } from './api';
const route = useRoute();
const router = useRouter();
let tmjh_id = route.params.tmjh_id
let title = $ref('');
let detailData = $ref({});
let ylzjj = $ref([]);
let jakj = $ref([]);
let hdbd = $ref([]);
jyhd_detail({ tmjh_id }).then(res => {
    if (res.code == '1') {
        detailData = res.data.one_info;
        ylzjj = detailData.tmjh_ylzjj.split(';');
        jakj = detailData.tmjh_jakj.split(';');
        hdbd = detailData.tmjh_hdbd.split(';');
    }
})
const linkBack = () => {
    router.back();
}
function getImgUrl(img) {
    return getFullUrl(img.split('|')[0])
}
function getImgName(img) {
    return img.split('|')[1].split('.')[0]
}
function getImgType(img) {
    return img.split('|')[1].split('.')[1]
}
function down(img) {
    window.open(getImgUrl(img), '_blank')
}
</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);
}

.content {
    h3 {
        height: 46px;
        line-height: 40px;
        padding-left: 25px;
        background-image: url(../../assets/home/title.png);
        background-repeat: no-repeat;
        color: #fff;
    }
}
</style>