<template>
  <div class="bg-white min-h-100vh">
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
    <div class="nav">
      <template v-if="teamShow">
        <span class="sub_title">团队</span>
        <div>
          <div class="team_tr team_th flex justify-between">
            <span>姓名</span><span>单位</span><span>学科/专业</span>
          </div>
          <template v-if="teamData.length > 0">
            <div
              v-for="(item, index) in teamData"
              :key="index"
              class="team_tr flex justify-between"
            >
              <span>{{ item.name }}</span
              ><span>{{ item.dw }}</span
              ><span>{{ item.zy }}</span>
            </div>
          </template>
          <van-empty v-else image-size="100" description="暂无数据" />
        </div>
        <span class="sub_title">简介</span>
      </template>
      <div class="text indent-2em break-all">{{ briefData }}</div>
    </div>
  </div>
</template>
<script setup>
const onClickLeft = () => history.back();
let title = $ref("");
const route = useRoute();
let query = route.query;
let key = Object.keys(query)[0];
let value = query[key];
let briefData = $ref("");

let teamData = $ref([]);
let teamShow = $ref(false);
if (query.name.includes("tskc") || query.name.includes("jtjy") ) {
  title = "简介与团队";
  teamShow = true;
  getTeam();
} else {
  title = "课程简介";
  teamShow = false;
}

request({
  url: `/txwx/${query.name}/detail`,
  data: {
    [key]: value,
  },
}).then((res) => {
  if (res.code == "1") {
    let detailData = res.data.one_info;
    Object.keys(detailData).forEach((item) => {
      if (item.includes("kcjj") || item.includes("brief")) {
        briefData = detailData[item];
      }
    });
  }
});

function getTeam() {
  request({
    url: `/txwx/${query.name.split("_")[0]}_td/index`,
    data: {
      [key]: value,
    },
  }).then((res) => {
    if (res.code == "1") {
      let team = res.data.page_data;
      team.forEach((item) => {
        let obj = {};
        Object.keys(item).forEach((el) => {
          if (el.includes("cymc") || el.includes("brief")) {
            obj.name = item[el];
          }
          if (el.includes("cydwmc")) {
            obj.dw = item[el];
          }
          if (el.includes("xkzy") && !el.includes("id")) {
            obj.zy = item[el];
          }
        });
        teamData.push(obj);
      });
    }
  });
}
</script>
<style lang="scss" scoped>
.nav {
  padding: 0 23px;
}
.team_tr {
  padding: 0 20px 0 17px;
  width: 330px;
  background: #f7f7f7;
  color: #383d4a;
  border-radius: 13px;
  font-size: 14px;
  line-height: 40px;
  margin-bottom: 2px;
}
.team_th {
  background: rgba(63, 140, 255, 0.09);
  color: #081735;
  font-weight: 600;
}
.sub_title {
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  font-weight: bold;
  position: relative;
}
.sub_title::after {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 100%;
  opacity: 0.7;
  border-radius: 3px;
  background: #154a9a;
  content: "";
}
.text {
  height: 253px;
  font-size: 15px;
  text-align: left;
  color: #333333;
  line-height: 21px;
  margin-top: 8px;
}
</style>