<template>
  <div class="bg-white rounded-md pb-10 h-screen">
    <div class="flex w-1000px pl-40 py-4 justify-between">
      <h3 class="text-blue-500">详情</h3>
      <el-button type="primary" @click="backLink">返回</el-button>
    </div>
    <div
      style="height: calc(70% - 50px)"
      class="overflow-auto main text-black-600"
    >
      <div class="flex"><span>活动封面图片：</span><img class="w-300px" v-if="detailData.tmjh_img" :src="detailData.tmjh_img.split('|')[0]" alt="" /></div>
      <div class="flex" v-if="detailData.tmjh_img"><span>活动封面图片地址：</span><div class="w-520px">{{ detailData.tmjh_img.split('|')[0] }}</div></div>
      <div class="flex justify-between">
        <div><span>活动名称：</span>{{ detailData.tmjh_name }}</div>
        <div class="w-1/2"><span>创建者：</span> {{ detailData.tmjh_cjr }}</div>
      </div>
      <div class="flex justify-between">
        <div><span>开始时间：</span>{{ detailData.tmjh_start_datetime }}</div>
        <div class="w-1/2"><span>结束时间：</span>{{ detailData.tmjh_end_datetime }}</div>
      </div>
      <div><span>参与者：</span>{{ detailData.tmjh_cyz }}</div>
      <div class="flex"><span>活动描述：</span><div class="w-520px" v-html="detailData.tmjh_hdms"></div></div>
      <div class="flex"><span>活动安排：</span><div class="w-520px" v-html="detailData.tmjh_hdap"></div></div>
      <div class="flex">
        <span>引领者简介：</span>
        <table class="divide-y > :not([hidden]) ~ :not([hidden]) w-520px">
          <thead>
            <tr>
              <td>文件名</td>
              <td>文件大小</td>
            </tr>
          </thead>
          <tbody v-if="detailData.tmjh_ylzjj" class="divide-y > :not([hidden]) ~ :not([hidden]) ">
            <tr class="" v-for="(y,i) in ylzjjList" :key="i">
              <td>{{ y.split('|')[1] }}</td>
              <td>{{ (y.split('|')[2]/1024).toFixed(2) }}KB</td>
            </tr>
          </tbody>
          <tbody v-else class="divide-y > :not([hidden]) ~ :not([hidden]) ">
              <el-empty description="暂无数据" :image-size="50"></el-empty>
          </tbody>
        </table>
      </div>
      <div class="flex">
        <span>教案课件：</span>
        <table class="divide-y > :not([hidden]) ~ :not([hidden]) w-520px">
            <thead>
              <tr>
                <td>文件名</td>
                <td>文件大小</td>
              </tr>
            </thead>
            <tbody v-if="detailData.tmjh_jakj" class="divide-y > :not([hidden]) ~ :not([hidden]) ">
              <tr class="" v-for="(y, i) in jaklList" :key="i">
                <td>{{ y.split('|')[1] }}</td>
                <td>{{ (y.split('|')[2] / 1024).toFixed(2) }}KB </td>
              </tr>
            </tbody>
            <tbody v-else class="divide-y > :not([hidden]) ~ :not([hidden]) ">
                <el-empty description="暂无数据" :image-size="50"></el-empty>
            </tbody>
          </table>
      </div>
      <div class="flex">
        <span>活动报道：</span>
        <table class="divide-y > :not([hidden]) ~ :not([hidden]) w-520px">
            <thead>
              <tr>
                <td>文件名</td>
                <td>文件大小</td>
              </tr>
            </thead>
            <tbody v-if="detailData.tmjh_hdbd" class="divide-y > :not([hidden]) ~ :not([hidden]) ">
              <tr class="" v-for="(y, i) in hdbdList" :key="i">
                <td>{{ y.split('|')[1] }}</td>
                <td>{{ (y.split('|')[2] / 1024).toFixed(2) }}KB</td>
              </tr>
            </tbody>
            <tbody v-else class="divide-y > :not([hidden]) ~ :not([hidden]) ">
                  <el-empty description="暂无数据" :image-size="50" ></el-empty>
              </tbody>
          </table>
      </div>
      <div class="flex"><span>活动流程其他说明：</span><div v-html="detailData.tmjh_hdlcqtsm" class="w-520px"></div></div>
      <div><span>所属名师工作室：</span>{{ detailData.tm_gzsmc }}</div>
    </div>
  </div>
</template>
  <script setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
let https = window.GLOBAL_CONFIG.api;
console.log(route.params.id);
let detailData = $ref({});
let ylzjjList = $ref([]);
let jaklList = $ref([]);
let hdbdList = $ref([]);
initData();
function initData() {
  let data = {
    tmjh_id: route.params.id,
  };
  request({
    url: "/txwx/msgzs_jyhd/detail",
    data,
  }).then(res=>{
    if(res.code=='1'){
      detailData = res.data.one_info;
      ylzjjList = res.data.one_info.tmjh_ylzjj.split(';')
      jaklList = res.data.one_info.tmjh_jakj.split(';')
      hdbdList = res.data.one_info.tmjh_hdbd.split(';')
    }
  });
}

function backLink() {
  router.go(-1);
}
</script>
  <style lang="scss" scoped>
.main {
  width: 820px;
  margin: 0 auto;
  font-size: 14px;
  padding-right: 120px;
  > div {
    // height: 30px;
    margin: 15px 0;
  }
  span {
    display: inline-block;
    width: 160px;
    text-align: right;
  }
}
table{
  tr{
    td{
      padding: 0 20px 5px;
    }
  }
}
::v-deep .el-empty{
  padding: 0;
  p{
  }
}
</style>