<template>
  <div>
    <div class="box">
      <div class=" mt30"></div>
      <div class="flexBody">
        <el-tabs 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>
        <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 and 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==1">
            <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==2">
            <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==3">
            <el-empty description="no data"></el-empty>
          </div>
          <div class="content" v-if="activeName==4">
            <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==5">
            <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==6"><el-empty description="no data"></el-empty></div>
          <div class="content" v-if="activeName==7"><el-empty description="no data"></el-empty></div>
          <div class="content" v-if="activeName==8">
            <label>Download：</label>
            <a target="_blank" class="text-primary" >
              <el-icon style="position: relative;top: 2px"><download/></el-icon>
              WDSF ASIAN DANCESPORT FESTIVAL ENTRY GUIDE 0714
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { getNewsListById, getRuleKind } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeName = ref(0)
const showVipFee = ref(false)
const list = ref([
  {name:'Introduction of the Competition Venue'},
  {name:' Registration Center   '},
  {name:'License Management '},
  {name:'Map Guidance '},
  {name:'Service for Technical Officers and Sports 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(() => {
  getKindList()
})
const getKindList = () => {
  changeTab(0)
}
const changeTab = (n) => {
  nowTab.value = list.value[n]
  if (nowTab.value.tag == 'fee') {
    showVipFee.value = true
  } else {
    showVipFee.value = false
    query.value.sortId = list.value[n].sortId
    query.value.code = list.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}`
    })
  }
}
</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__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;}

}

</style>