<template>
  <div>
    <div class="box">
      <div class=" mt30"></div>
      <div class="flexBody" v-if="language==0">
        <el-tabs class="forPc" v-model="activeName" tab-position="left" @tab-change="changeTab" @tab-click="clickTab">
          <el-tab-pane v-for="(tab,index) in list" :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 list" :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">
          <h3 class="leftboderTT">{{ nowTab.name }}</h3>
          <div class="content" v-if="activeName==0">
            <div>
              太湖国际博览中心B馆，总面积3万平米，馆内面积达两万平米， 配置顶级灯光、舞美、音响和全套转播设备，可同时容纳5000名观众，
              是国内首屈一指的多功能文体综合馆，也是无锡本地新锐网红地标。
              <br/>
              位置:无锡市经开区清舒道88号<br/>
              商圈:10公里范围内，华润万象城、海岸城等数10个大型商业综合体<br/>
              <img src="@/assets/zhinan/1.png"/>
              <img src="@/assets/zhinan/2.png"/>
            </div>
            <h4 class="leftboderTT">馆内流线<span>(人员流线)</span></h4>
            <img src="@/assets/zhinan/4.png"/>
            <div>运动队从一楼正大门通过安检进入馆内，乘坐扶梯上二楼，到达 竞赛区域。技术官员乘坐组委会安排通行车辆从场馆北坡道直接到达
              二楼平台B5馆出入口进入馆内。
            </div>
            <div>整个二层按不同的功能分为五个区域，所有人员根据所持证件规 定权限到达不同的区域，红色为VIP区，蓝色为办公工作区，黄色为
              观赛区，紫色为竞赛区，粉色为公共区域。
            </div>
          </div>
          <div class="content" v-if="activeName!=0&&activeName<8">
            待更新
          </div>
          <div class="content" v-if="activeName==11">
            <div>注册报到中心位于酒店大堂，服务时间为7月19-22日10:00-22:00， 同时也作为咨询台。</div>
            <div>相关紧急通知、餐食安排和交通服务等信息将公布在公告栏，如有疑 问或需服务，可前往注册报到中心进行咨询。</div>
          </div>
          <div class="content" v-if="activeName==21">
            <h4>一、证件使用与保管</h4>
            <p>证件要妥善保管，不得故意损毁，证件仅限本人使用，严禁转让， 严禁超范围使用，严禁私自增减，涂改证件内容。
            </p>
            <p>出入有关活动和比赛场馆时，应将证件佩戴于胸前明显位置。</p>
            <p>持证人员应自觉接受现场安保人员的检查和管理。</p>
            <h4>二、证件丢失申领临时证件</h4>
            <p>遗落、丢失证件的人员急需进入场馆的，可以向竞赛部申请，前 往场馆运营中心领取临时证件。</p>
            <h4>三、代表队人员证件类别及通行权限</h4>
            <p>本次赛事将使用以下颜色和数字表示相关注册分区:</p>
            <img src="@/assets/zhinan/6.jpg"/>
          </div>
          <div class="content" v-if="activeName==31">
            <el-empty description="暂未上线"></el-empty>
          </div>
          <div class="content" v-if="activeName==41">
            <h4>一、抵离安排</h4>
            <p>所有技术官员、运动队接送站由组委会统一安排车辆接送，抵达站 应选择无锡苏南硕放机场、上海浦东国际机场和上海虹桥国际机场。
            </p>
            <p>(1)技术官员和运动队报到</p>
            <p>报到时间:7月19-22日，10:00-22:00</p>
            <p>报到(酒店)地点:无锡太湖华邑酒店</p>
            <p>(2)报到材料</p>
            <p>技术代表、技术官员及相关人员等报到时提交往返差旅交通票据，
              以便于相关费用报销。所有技术官员报到时，须向组委会提供:</p>
            <p>1. 纸质版登机牌(往返机票)</p>
            <p>2. 往返机票的行程单(有金额)或付款凭证(有金额)</p>
            <p>3. 办理签证的票据(有金额)</p>
            <h4>二、 餐食服务</h4>
            <p>用餐时间与形式:</p>
            <img src="@/assets/zhinan/14.png"/>
            <h5>提示:具体时间可能有所调整，调整过的时间表将于注册报到中心公告栏另行通知。</h5>
            <img src="@/assets/zhinan/13.png"/>

            <h4>三、通行车辆安排</h4>
            <p>酒店、赛场间通行车辆按《发车时刻表》发车，用于酒店、赛场 之间往返，接送技术官员和运动队参赛及训练，《发车时刻表》详见
              注册报到中心公告栏。</p>
            <p>接送站用车:主要用于参赛人员报到及离会。</p>
            <h4 style="text-indent: 2em">友情提示:</h4>
            <p>1. 认真阅读《发车时刻表》，提前规划出行时间。</p>
            <p>2. 时刻关注车辆行驶途中自身安全，坐好抓稳。</p>
            <p>3. 各领队、教练有义务在每次乘车时清点人数，确保同进同出。</p>
            <p>4. 下车时务必带齐自身携带物品，谨防遗失。</p>
            <p>5. 如错失赛会车辆或中途临时需要出行，请及时与咨询台联系。</p>
          </div>
          <div class="content" v-if="activeName==51">
            <h4>一、服务时间安排</h4>
            <p>2023年7月20日-2023年7月23日</p>
            <h4>二、医疗点位设置</h4>
            <p>馆内设置医疗室一个，竞赛区医疗点一个，救护车两辆。</p>
            <h4>三、现场医疗力量安排</h4>
            <p>4馆设立医务室一间，配备一名外科医生，一名护士，一名英语 志愿者。</p>
            <p>
              B6馆竞赛区设立医疗点一个，配备一名骨科医生，一名急救医生， 一名护士，两名急救人员，一名英语志愿者，一名工作人员。两个医疗
              点均配备齐全的现场医疗急救所需药品。
            </p>
            <p>120急救车一辆及急救转运车一辆停在G14通道口等候，车上均配 备除颤仪、氧气钢瓶等急救器材。</p>
          </div>
          <div class="content" v-if="activeName==61">
            <el-empty description="暂未上线"></el-empty>
          </div>
          <div class="content" v-if="activeName==71">
            <el-empty description="暂未上线"></el-empty>
          </div>

          <div class="content flex" v-if="activeName==8">
            <label>点击下载：</label>
            <div>
              <div>
                <a target="_blank" class="text-primary" href="https://wdsfwuxicenter.com/stage-api/fs/file/2024_WDSF_ASIAN_DANCESPORT_FESTIVAL_ENTRY_GUIDE.pdf">
                  <el-icon style="position: relative;top: 2px">
                    <download/>
                  </el-icon>
                  2024WDSF亚洲体育舞蹈节参赛指南
                </a>
              </div>
              <div>
                <a target="_blank" class="text-primary" href="https://wdsfwuxicenter.com/stage-api/fs/file/Program-WDSF_ASIAN_DANCESPORT_FESTIVAL_2024.WUXI.pdf">
                  <el-icon style="position: relative;top: 2px">
                    <download/>
                  </el-icon>
                  无锡2024亚洲体育舞蹈节秩序册
                </a>
              </div>
              <div>
                <a target="_blank" class="text-primary"
                   href="https://wdsfwuxicenter.com/stage-api/fs/file/Schedule-WDSF_ASIAN_DANCESPORT_FESTIVAL_2024.WUXI.pdf">
                  <el-icon style="position: relative;top: 2px">
                    <download/>
                  </el-icon>
                  赛程-无锡2024亚洲体育舞蹈节
                </a>
              </div>

              <div>
                <a target="_blank" class="text-primary" href="https://wdsfwuxicenter.com/stage-api/fs/file/COMPETITION_GUIDE_0520V1.pdf">
                  <!--              <a @click="showBuilding" class="text-primary">-->
                  <el-icon style="position: relative;top: 2px">
                    <download/>
                  </el-icon>
                  2024 WDSF亚洲体育舞蹈节参赛须知
                </a>
              </div>

            </div>
          </div>
        </div>
      </div>
      <div class="flexBody" v-else>
        <el-tabs class="forPc" v-model="activeName" tab-position="left" @tab-change="changeTab" @tab-click="clickTab">
          <el-tab-pane v-for="(tab,index) in 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 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">
          <h3 class="leftboderTT">{{ nowTab.name }}</h3>
          <div class="content" v-if="activeName==0">
            <div>
              The Taihu International Expo Center Block B covers a total area of 30,000m²and an interior area of
              20,000m². It is equipped with top lighting, stage, sound and a full set of broadcasting equipment, and can
              accommodate 5,000 spectators. It is the premier multi-purpose cultural and sports venue in China, also a
              landmark for Wuxi.
              <br/>
              Location: No. 88, Qingshu Road, Economic Development District, Wuxi<br/>
              Business District: Within 10 kilometers, there are nearly 10 large commercial complexes, including the
              Mixc and Coastal City etc.<br/>
              <img src="@/assets/zhinan/1.png"/>
              <img src="@/assets/zhinan/2.png"/>
            </div>
            <h4 class="leftboderTT">Flow Chart In The Venue<span>(Functional Area and Flow Chart)</span></h4>
            <img src="@/assets/zhinan/3.png"/>
            <div>Sports teams enter the venue through security check at the main gate on the first floor, take
              escalators to the second floor, and arrive the competition area. Technical officers take vehicles arranged
              by the organizing committee directly from the northern ramp of the venue to the entrance of Venue B5 on
              the second floor platform and enter the venue.
            </div>
            <div>The second floor is divided into five areas according to different functions. All personnel may arrive
              at different areas according to their access permissions. Red is the VIP area, blue is the office area,
              yellow is the spectator area, purple is the competition area and pink is the public area.
            </div>
          </div>

          <div class="content" v-if="activeName==11">
            <div>The Registration Center is located in the hotel lobby from 10:00-22:00 on July 19-22, also serves as
              the info desk.
            </div>
            <div>For information about emergency notices, catering services, and transportation services will be
              announced on the notice board. If you have any questions or need services, please contact the Registration
              Center.
            </div>
          </div>
          <div class="content" v-if="activeName==21">
            <h4>1 Use and Storage of Licenses</h4>
            <p>Licenses shall be properly kept and shall not be intentionally damaged. Licenses shall be used only by
              the holders, which shall not be transferred to others, used for unauthorized purposes, or altered.</p>
            <p>For access to relevant activity and competition venue, license holders shall wear licenses in a
              conspicuous position against the chest.</p>
            <p>License holders shall be subject to the inspection and management of on-site security personnel.</p>
            <h4>2 Temporary Access Pass Application</h4>
            <p>
              If you lose your license and urgently need to enter the venue, you can apply to the competition department
              and go to the venue operation center to get a temporary access pass.
            </p>
            <h4>3 Type of License and Access Permissions</h4>
            <p>The following colors and numbers will be used to indicate the different areas:</p>
            <img src="@/assets/zhinan/5.jpg"/>
          </div>
          <div class="content" v-if="activeName==31">
            <el-empty description="no data"></el-empty>
          </div>
          <div class="content" v-if="activeName==41">
            <h4>1.Arrivals and Departures</h4>
            <p>All technical officials and sports teams will be picked up by the organizing committee,
              and the arrival stations should be Wuxi Sunan Shuofang International Airport, Shanghai Pudong
              International Airport, and Shanghai Hongqiao International Airport.</p>
            <p>(1) Registration of Technical Officials and Sports Teams</p>
            <p>Registration Time: July 19-22, 10: 00-22: 00</p>
            <p>Registration (hotel) Location: HUALUXE Wuxi Taihu Hotel</p>
            <p>(2) Registration Materials</p>
            <p>Technical delegates, technical officials and relevant personnel shall provide round-trip traffic invoices
              for reimbursement.
              All technical officials are required to provide the Organizing Committee with the following materials:</p>
            <p>1. Paper boarding card (round-trip ticket)</p>
            <p>2. Itinerary of the round-trip ticket (with the amount) or receipt of payment (with the amount)</p>
            <p>3. Receipt for visa application (with amount)</p>
            <h4>2.Catering Service</h4>

            <img src="@/assets/zhinan/12.png"/>
            <h5>Notes: Time subject to changes, once adjusted, it will be announced on the notice board of the
              Registration Center.</h5>
            <img src="@/assets/zhinan/13.png"/>

            <h4>3.Transportation Service</h4>
            <p>
              Vehicles shuttle the technical officers and sports teams between the hotel and the competition venue as
              per the Departure Timetable. For details of the Departure Timetable,
              please refer to the notice board of the Registration Center.
            </p>
            <p>Pick-up and drop-off vehicles: mainly used for participants to make registration and departure.
            </p>
            <h4 style="text-indent: 2em">Tips:</h4>
            <p>1. Read the Departure Timetable carefully and schedule your travel in advance.</p>
            <p>2. Always sit securely to ensure your safety during the travel.</p>
            <p>3. Each head of team and coach shall count the number of people at each travel to ensure nobody is
              left.</p>
            <p>4. When getting off the vehicles, make sure to bring all belongings with you.</p>
            <p>5. If you miss the vehicle or need to make an unplanned travel, please contact the info desk in time.</p>
          </div>
          <div class="content" v-if="activeName==51">
            <h4>1. Service Time</h4>
            <p>July 20-23, 2023</p>
            <h4>2. Medical Stations</h4>
            <p>The venue has one medical room, one medical station in the competition area, and two ambulances.</p>
            <h4>3. On-site Medical Service</h4>
            <p>Venue B4 has one medical room and equipped with one surgeon, one nurse, and one English-speaking
              volunteer.</p>
            <p>
              Venue B6 has one medical station in the competition area, equipped with one orthopedic surgeon, one
              emergency doctor,
              one nurse, two first aiders, one English-speaking volunteer, and one staff. Both medical stations are
              fully equipped with medicines needed for on-site medical emergencies.</p>
            <p>One ambulance and one emergency transfer vehicle are waiting at the entrance of G14, and all of them are
              equipped with first aid equipment such as defibrilla- tors and oxygen cylinders.</p>
          </div>
          <div class="content" v-if="activeName>0&&activeName<8">
            <el-empty description="no data"></el-empty>
          </div>
          <div class="content" v-if="activeName==71">
            <el-empty description="no data"></el-empty>
          </div>
          <div class="content flex" v-if="activeName==8">
            <label>Download：</label>
            <div style="word-break: break-all;text-indent: 0">
              <div>
                <a target="_blank" class="text-primary" href="https://wdsfwuxicenter.com/stage-api/fs/file/2024_WDSF_ASIAN_DANCESPORT_FESTIVAL_ENTRY_GUIDE.pdf">
                  <el-icon style="position: relative;top: 2px">
                    <download/>
                  </el-icon>
                  2024 WDSF ASIAN DANCESPORT FESTIVAL ENTRY GUIDE
                </a>
              </div>
              <div>
                <a target="_blank" class="text-primary" href="https://wdsfwuxicenter.com/stage-api/fs/file/Program-WDSF_ASIAN_DANCESPORT_FESTIVAL_2024.WUXI.pdf">
                  <el-icon style="position: relative;top: 2px">
                    <download/>
                  </el-icon>
                  Program-WDSF ASIAN DANCESPORT FESTIVAL 2024.WUXI
                </a>
              </div>
              <div>
                <a target="_blank" class="text-primary"
                   href="https://wdsfwuxicenter.com/stage-api/fs/file/Schedule-WDSF_ASIAN_DANCESPORT_FESTIVAL_2024.WUXI.pdf">
                  <el-icon style="position: relative;top: 2px">
                    <download/>
                  </el-icon>
                  Schedule-WDSF ASIAN DANCESPORT FESTIVAL 2024.WUXI</a>
              </div>
              <div>
                <a target="_blank" class="text-primary" href="https://wdsfwuxicenter.com/stage-api/fs/file/COMPETITION_GUIDE_0520V1.pdf">
                  <!--            <a @click="showBuilding" class="text-primary">-->
                  <el-icon style="position: relative;top: 2px">
                    <download/>
                  </el-icon>
                  2024 WDSF ASIAN DANCESPORT FESTIVAL Entry Information
                </a>
              </div>
            </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";

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: '参赛场馆介绍'},
  {name: ' 注册报到中心   '},
  {name: '证件管理 '},
  {name: '地图指引 '},
  {name: '技术官员与运动队服务 '},
  {name: '医疗服务 '},
  {name: '周边交通图 '},
  {name: 'VISA 签证 '},
  {name: '指南手册下载'}
])
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
})
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]
  }
  console.log(nowTab.value)
  activeName.value = n
  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 = () => {

}
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>