<template>
  <div class="box-border bg-white m-4 py-4 rounded-6px overflow-auto" style="height: calc(100% - 48px - 10px - 1rem);">
    <el-scrollbar class="px-4" view-class="h-full">
      <div class="detailContent">
        <el-form label-position="right" label-width="130px" :model="ruleForm">
          <div>
            <div class="title">{{ title }}</div>
            <div class="detailCon grid grid-cols-2">
              <el-form-item :class="item.class" v-for="(item, index) in formData" :key="index" :label="item.name+':'">
                <div v-if="!item.type">{{ ruleForm[item.key] }}</div>
                <img v-if="item.type=='img'" class="cover" :src="getFullUrl(ruleForm[item.key])" alt="" />
                <div v-if="item.type=='xzjs'" class="flex items-center space-x-3">
                  <div v-for="(value, i) in ruleForm[item.key]" :key="i">{{ value }}</div>
                </div>
                <div v-if="item.type=='video'" class="flex items-center space-x-2">
                  <img class="folder" src="/images/folder.png" alt="" />
                  <div class="filename">{{ ruleForm[item.key] }}</div>
                  <el-button text type="primary" @click="linkTo(item.name, ruleForm[item.keyUrl])">查看</el-button>
                </div>
                <div v-if="item.type=='file'" class="flex items-center space-x-2">
                  <img class="file" src="/images/file.png" alt="" />
                  <div class="filename">{{ ruleForm[item.key] }}</div>
                  <el-button text type="primary" @click="linkTo(item.name, ruleForm[item.keyUrl])">查看</el-button>
                </div>
                <div v-if="item.type=='radio'" class="flex items-center space-x-2">
                  <div class="dot"></div>
                  <div class="filename">{{ ruleForm[item.key] }}</div>
                </div>
              </el-form-item>
            </div>
          </div>
          <div>
            <div class="title">相关章节</div>
            <div class="detailCon">
              <template v-for="(element, i) in xgzjData" :key="i">
                <div v-if="(!xgzjMore && i < xgzjLimit) || xgzjMore" class="grid grid-cols-2 my-10px chapter-item">
                  <el-form-item :class="item.class" v-for="(item, index) in xgzjFormdata" :key="index" :label="item.name+':'">
                    <div v-if="!item.type">{{ element[item.key] }}</div>
                    <div v-else>
                      <div v-if="!element[item.key]" style="color: #aaa;">暂无{{ item.name }}</div>
                      <div v-else>
                        <img v-if="item.type=='img'" class="cover" :src="getFullUrl(element[item.key])" alt="" />
                        <div v-if="item.type=='video'" class="flex items-center space-x-2">
                          <img class="folder" src="/images/folder.png" alt="" />
                          <!-- <div class="filename">{{ element[item.key] }}</div> -->
                          <el-tooltip class="box-item" effect="dark" hide-after="50" :content="element[item.key]" placement="bottom">
                            <div class="filename px-1 titleWrap">{{ element[item.key] }}</div>
                          </el-tooltip>
                          <el-button text type="primary" @click="linkTo(item.name, element[item.keyUrl])">查看</el-button>
                        </div>
                        <div v-if="item.type=='file'" class="flex items-center space-x-2">
                          <img class="file" src="/images/file.png" alt="" />
                          <!-- <div class="filename">{{ element[item.key] }}</div> -->
                          <el-tooltip class="box-item" effect="dark" hide-after="50" :content="element[item.key]" placement="bottom">
                            <div class="filename px-1 titleWrap">{{ element[item.key] }}</div>
                          </el-tooltip>
                          <el-button text type="primary" @click="linkTo(item.name, element[item.keyUrl])">查看</el-button>
                        </div>
                        <div v-if="item.type=='radio'" class="flex items-center space-x-2">
                          <div class="dot"></div>
                          <div class="filename">{{ element[item.key] }}</div>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </template>
            </div>
            <div v-if="xgzjData.length > xgzjLimit" class="text-center pt-5">
              <el-button v-if="!xgzjMore" type="primary" plain @click="xgzjMore=true">展开</el-button>
              <el-button v-if="xgzjMore" type="primary" plain @click="xgzjMore=false">收起</el-button>
            </div>
          </div>
          <div>
            <div class="title">点赞详情</div>
            <el-empty v-if="dzxqData.length==0" description="暂无点赞数据" />
            <div class="pb-20" v-else>
              <div class="detailCon grid grid-cols-2">
                <template v-for="(item, index) in dzxqData" :key="index">
                  <div v-if="(!dzxqMore && index < dzxqLimit) || dzxqMore" class="flex space-x-4 dzxq">
                    <div>{{ item.td_datetime }}</div>
                    <div>{{ item.td_user_name }}</div>
                    <div>{{ item.td_dz_content }}</div>
                  </div>
                </template>
              </div>
              <div v-if="dzxqData.length > dzxqLimit" class="text-center pt-5 pb-10">
                <el-button v-if="!dzxqMore" type="primary" plain @click="dzxqMore=true">展开</el-button>
                <el-button v-if="dzxqMore" type="primary" plain @click="dzxqMore=false">收起</el-button>
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { getFullUrl } from '~/utils/helper';
import { userDetailStore } from "@/store/chapterDetail";
import { useRouter } from "vue-router";
const router = useRouter();
const parentId = router.currentRoute.value.params.id;
if (parentId) {
  initDetailInfo();
  initChapterData();
}
const detailStore = userDetailStore();

const title = ref("");

const ruleForm = ref({})
const formData = ref([
  {
    name: "责任教师",
    key: "tmk_zrjs_xm",
    class: "col-span-full"
  },
  {
    name: "协作教师",
    key: "xzjsData",
    type: "xzjs",
    class: "col-span-full"
  },
  {
    name: "课程名",
    key: "tmk_kcm"
  },
  {
    name: "课程关键字",
    key: "tmk_kcgjz"
  },
  {
    name: "课程简介",
    key: "tmk_kcjj",
    class: "col-span-full"
  },
  {
    name: "年级",
    key: "tjzn_name"
  },
  {
    name: "学科",
    key: "tjzx_name"
  },
  {
    name: "周期",
    key: "tmk_zq"
  },
  {
    name: "所属机构",
    key: "tmk_ssjg_name"
  },
  {
    name: "课程开放时间",
    key: "kckfsj"
  },
  {
    name: "课程封面图",
    key: "tmk_img",
    class: "col-span-full",
    type: "img"
  },
  {
    name: "课程权限",
    key: "tmk_kcqxsz",
    type: "radio"
  },
  {
    name: "是否推荐名师在线",
    key: "tmk_sftjmszx",
    type: "radio"
  },
  {
    name: "报名量",
    key: "bm_num"
  },
  {
    name: "点赞量",
    key: "tmk_dzl"
  },
  {
    name: "浏览量",
    key: "tmk_lll"
  },
  {
    name: "建立时间",
    key: "time"
  },
])

const dzxqMore = ref(false);
const dzxqLimit = ref(6);
const dzxqData = ref([]);

async function initDetailInfo() {
  let { code, data } = await request({ url: "/txwx/mszy_kc/detail", data: { tmk_id: parentId } });
  if (code == 1) {
    title.value = data.one_info.tmk_kcm + "详情";
    ruleForm.value = data.one_info;
    ruleForm.value.xzjsData = data.one_info.tmk_xzjs_user_xm.split(",");
    ruleForm.value.kckfsj = data.one_info.tmk_kckqsj + "~" + data.one_info.tmk_kcjssj;
    // ruleForm.value.time = data.one_info.ex.create_dateline;
    ruleForm.value.time = data.one_info.create_dateline;

    dzxqData.value = data.one_info.dz_record.record;
  }
}


const xgzjMore = ref(false);
const xgzjLimit = ref(1);
const xgzjData = ref([])
const xgzjFormdata = ref([
  {
    name: "章节名称",
    key: "tmz_zjmc",
    class: "col-span-full"
  },
  {
    name: "责任教师账号",
    key: "tmz_zrjs_user_name"
  },
  {
    name: "责任教师名称",
    key: "tmz_zrjs_mc"
  },
  {
    name: "课程封面图",
    key: "tmz_img_url",
    class: "col-span-full",
    type: "img"
  },
  {
    name: "章节视频",
    key: "zjsp",
    keyUrl: "zjspUrl",
    type: "video"
  },
  {
    name: "章节课件",
    key: "zjkj",
    keyUrl: "zjkjUrl",
    type: "file"
  },
  {
    name: "章节试题",
    key: "zjst",
    keyUrl: "zjstUrl",
    type: "file"
  },
  {
    name: "章节答案",
    key: "zjda",
    keyUrl: "zjdaUrl",
    type: "file"
  }
])

async function initChapterData() {
  let { code, data } = await request({ url: "/txwx/mszy_zj/index", data: { tmk_id: parentId, sort: "asc" } });
  if (code == 1) {
    data.page_data.map(item => {
      let arr = item.tmz_video_url.split("|");
      item.zjspUrl = arr[0] ? getFullUrl(arr[0]) : "";
      item.zjsp = arr[1] ? arr[1] : "章节视频";

      let file1 = item.tmz_zjkj_file.split(";");
      if (file1[0] && file1[1] && file1[2]) {
        item.zjkj = `${file1[0]}（${file1[1]}）`;
        item.zjkjUrl = getFullUrl(file1[2]);
      }

      let file2 = item.tmz_zjsjdajx_file.split(";");
      if (file2[0] && file2[1] && file2[2]) {
        item.zjda = `${file2[0]}（${file2[1]}）`;
        item.zjdaUrl = getFullUrl(file2[2]);
      }

      let file3 = item.tmz_kczjwjcs_file.split(";");
      if (file3[0] && file3[1] && file3[2]) {
        item.zjst = `${file3[0]}（${file3[1]}）`;
        item.zjstUrl = getFullUrl(file3[2]);
      }
    })
    xgzjData.value = data.page_data;
  }
}


const linkTo = (title, fileUrl) => {
  let flag = router.currentRoute.value.fullPath.indexOf("mszx");
  let name = flag == -1 ? "mszygl_mszy_fileDetail" : "mszygl_mszx_fileDetail";
  router.push({ name });

  detailStore.setTitle(title);
  detailStore.setFileUrl(fileUrl);
};
</script>

<style lang="scss" scoped>
@use "~/styles/scroll.scss";
.detailContent {
  .title {
    font-size: 16px;
    font-weight: 400;
    color: var(--el-color-primary);
    line-height: 22px;
    padding-left: 70px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .detailCon {
    width: 80%;
    min-width: 700px;
    margin: auto;
    :deep() {
      .el-form-item {
        margin-bottom: 8px;
      }
      .el-form-item__content {
        line-height: 24px;
      }
    }
    .cover {
      width: 220px;
      height: 124px;
    }
    .folder {
      width: 21px;
    }
    .file {
      width: 16px;
    }
    .filename {
      line-height: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 220px;
    }
    .el-button--primary.is-text {
      padding: 0 5px;
      background: none;
    }
    .dot {
      width: 16px;
      height: 16px;
      background: #ffffff;
      border: 1px solid #d9d9d9;
      border-radius: 50%;
      position: relative;
      &::after {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background: var(--el-color-primary);
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .chapter-item + .chapter-item {
      border-top: 1px dashed #e2e2e2;
      padding-top: 15px;
    }
    .dzxq {
      font-size: 14px;
      line-height: 40px;
    }
  }

  .el-button--primary.is-plain {
    background: unset;
    width: 200px;
    &:hover {
      color: var(--el-color-primary);
    }
  }
}
</style>