<template>
  <div>
    <div class="box">
      <div class=" mt30"></div>
      <div class="flexBody">
        <el-tabs class="forPc" v-model="activeName" tab-position="left" @tab-change="changeTab" @tab-click="clickTab">
          <el-tab-pane v-for="(tab,index) in (language===0?list:list_en)" :label="tab.name" :name="index">
            <template #label>
                <span class="custom-tabs-label">
                  <span class="tabFont">{{ tab.name }}</span>
                </span>
            </template>
          </el-tab-pane>
        </el-tabs>
        <el-tabs class="forWei" v-model="activeName" tab-position="top" @tab-change="changeTab" @tab-click="clickTab">
          <el-tab-pane v-for="(tab,index) in (language===0?list:list_en)" :label="tab.name" :name="index">
            <template #label>
                <span class="custom-tabs-label">
                  <span class="tabFont">{{ tab.name }}</span>
                </span>
            </template>
          </el-tab-pane>
        </el-tabs>
        <div class="infoPart" v-loading="loading">
          <h3 class="leftboderTT">{{ nowTab.name }}</h3>
          <div class="content" v-if="activeName!==8">
            <div v-html="content" v-if="content"></div>
            <div v-else>
              <el-empty />
            </div>
          </div>

          <div class="content flex" v-if="activeName===8">
            <label>{{ language===0?'点击下载':'DownLoad' }}：</label>
            <div v-if="fileList.length>0">
              <div v-for="f in fileList">
                <a target="_blank" class="text-primary" :href="f.fileUrl">
                  <el-icon style="position: relative;top: 2px">
                    <download/>
                  </el-icon>
                  {{f.name}}
                </a>
              </div>
            </div>
            <div v-else>{{ language==0?'暂无':'No Data' }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
import {getNewsListById, getRuleKind} from '@/apiPc/webSite'
import {useRoute, useRouter} from 'vue-router'
import {useStorage} from "@vueuse/core";
import {getCurrentInstance} from "@vue/runtime-core";
import {getppInfo, getZNList} from "@/apiPc/match";

const language = useStorage('language', 0)
const router = useRouter()
const route = useRoute()
const {proxy} = getCurrentInstance()
const activeName = ref(0)
const showVipFee = ref(false)
const list = ref([
  {name: '参赛场馆介绍',code: '30000001'},
  {name: ' 注册报到中心',code: '30000002'},
  {name: '证件管理 ',code: '30000003'},
  {name: '地图指引 ',code: '30000004'},
  {name: '技术官员与运动队服务 ',code: '30000005'},
  {name: '医疗服务 ',code: '30000006'},
  {name: '周边交通图 ',code: '30000007'},
  {name: 'VISA 签证 ',code: '30000008'},
  {name: '指南手册下载',code: '30000009'}
])
const list_en = ref([
  {name: 'Introduction of the Competition Venue'},
  {name: ' Registration Center'},
  {name: 'License Management'},
  {name: 'Map Guidance '},
  {name: 'Service for Technical Officials and Teams'},
  {name: 'Medical Services '},
  {name: 'Surrounding Traffic Map'},
  {name: 'VISA '},
  {name: 'The Manual'}
])
const newsList = ref([])
const nowTab = ref({
  tag: ''
})
const total = ref(0)
const query = ref({
  pageSize: 10,
  pageNum: 1
})
const content = ref({})
const fileList = ref([])
const loading = ref(false)
onMounted(() => {
  if (route.query.index) {
    changeTab(route.query.index)
  } else {
    getKindList()
  }
})
const getKindList = () => {
  changeTab(0)
}
const changeTab = (n) => {
  n = Number(n)
  if (language.value === 0) {
    nowTab.value = list.value[n]
  } else {
    nowTab.value = list_en.value[n]
  }
  activeName.value = n

  if(n==8){
    var obj = {sortId:30000009,language:1}
    if(language.value==1){
      obj.language = 2
    }
    getZNList(obj).then(res=>{
      fileList.value = res.rows
      for(let f of fileList.value){
        f.fileUrl = JSON.parse(f.picUrl)[0].url
      }
    })
  } else {
    loading.value = true
    getppInfo(list.value[n].code).then(res=>{
      loading.value = false
      if(language.value==0){
        content.value = res.data.contextZh
      } else {
        content.value = res.data.contextEn
      }
    })
  }

  // if (nowTab.value.tag === 'fee') {
  //   showVipFee.value = true
  // } else {
  //   showVipFee.value = false
  //   if (language.value === 0) {
  //     query.value.sortId = list.value[n].sortId
  //     query.value.code = list.value[n].code
  //   } else {
  //     query.value.sortId = list_en.value[n].sortId
  //     query.value.code = list_en.value[n].code
  //   }
  //   getList()
  // }
}
const clickTab = (e) => {

}
const getList = () => {
  getNewsListById(query.value).then(res => {
    newsList.value = res.rows
    total.value = res.total
  })
}
const goDetail = (n) => {
  if (n.isOut === '1') {
    window.open(n.jumpUrl)
  } else {
    router.push({
      path: `/news/detail/${n.noteId}`
    })
  }
}
const showBuilding = () => {
  proxy.$message.warning(language.value == 0 ? '待更新' : 'Building')
}
</script>
<style lang="scss" scoped>
.content {
  margin: 20px 0 0;
  text-indent: 2em;
  line-height: 1.8;
  font-weight: 400;
  font-size: 16px;
  color: #29343C;

  img {
    max-width: 100%;
    margin: 20px auto;
    display: block;
  }

  h4 {
    text-indent: 0
  }
}

h4.leftboderTT {
  text-indent: 0;
  font-size: 20px;
  color: var(--el-color-primary);

  span {
    color: #929AA0;
    font-size: 16px;
    margin-left: 5px;
  }
}

.custom-tabs-label {
  display: flex;
  font-size: 16px;
  align-items: center;
}

:deep(.el-tabs--left .el-tabs__item.is-left) {
  margin: 0 0 20px;
}

:deep(.el-tabs--left .el-tabs__active-bar.is-left) {
  left: 0 !important;
  right: auto !important;
}

:deep(.el-tabs--left .el-tabs__nav-wrap.is-left::after) {
  display: none;
}

:deep(.el-tabs__nav) {
  float: none;
}

:deep(.el-tabs__item.is-active) {
  font-size: 15px;
  background: #fff;
}

:deep(.el-tabs--left .el-tabs__header.is-left) {
  padding: 30px 0 30px 30px;
  background: #F4F9FE;
  min-width: 280px;
}

.tabFont {
  margin-left: 20px;
}

.flexBody {
  display: flex;
  background: #fff;
  margin-bottom: 20px;
}

.infoPart {
  padding: 20px;
  flex: 1;

  & > h3 {
    font-size: 24px;
    color: var(--el-color-primary);
  }
}

.forWei {
  display: none;
}

@media (max-width: 500px) {
  .box {
    width: 100%
  }
  .forWei {
    display: block;
  }
  .forPc {
    display: none
  }
  :deep(.el-tabs__nav-scroll) {
    overflow: auto;
  }
  .flexBody {
    display: block;
    background: transparent;
  }
  .infoPart {
    background: #fff;
    padding: 10px;
    margin: 0 15px
  }
  .newsLine {
    .item {
      height: 50px;

      .date {
        height: 34px;
        width: 44px;
        margin: 0;

        .day {
          font-size: 16px;
        }

        p {
          font-size: 12px;
        }
      }

      h3 {
        font-size: 14px;
      }
    }

    .go {
      display: none;
    }

    .item-body {
      width: 80%;
    }
  }
}

.wTabtop {
  :deep(.el-tabs__header) {
    background: #fff;
    padding: 10px 15px 0;
  }

  :deep(.el-tabs__content) {
    padding: 0 10px;
  }

}

@media (max-width: 768px) {
  .infoPart .leftboderTT {
    font-size: 16px;
  }
}
</style>