<template>
  <div>
    <div class="box">
      <div class=" mt30" />
      <div class="flexBody">
        <el-tabs v-model="activeName" class="forPc" 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 v-model="activeName" class="forWei" 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 v-loading="loading" class="infoPart">
          <h3 class="leftboderTT">{{ nowTab.name }}</h3>
          <div v-if="activeName!==8" class="content">
            <div v-if="content" v-html="content" />
            <div v-else>
              <el-empty />
            </div>
          </div>
          
          <div v-if="activeName===8" class="content flex">
            <label>{{ language === 0 ? '点击下载' : 'DownLoad' }}：</label>
            <div v-if="fileList.length>0">
              <div v-for="f in fileList" :key="f">
                <a :href="fillImgUrl(f.url) " class="text-primary" target="_blank">
                  <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 { getMatchById, getppInfo, getZNList } from '@/apiPc/match'
import * as match from '@/apiPc/match'
import { fillImgUrl } from '/@/utils/ruoyi'

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)
const cptId = ref(route.query.cptId)

onMounted(() => {
  if (route.query.index) {
    changeTab(route.query.index)
  } else {
    getKindList()
  }
  
  if (route.query.cptId) getMatch()
})
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 (const 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')
}

async function getMatch() {
  const res = await match.getMatchById({ id: cptId.value })
  if (res.data.cptGuide) {
    fileList.value = JSON.parse(res.data.cptGuide)
  } else {
    fileList.value = []
  }
  console.log(res)
}
</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>