<template>
  <div>
    <div class="mt20" />
    <div class="box">
      <el-card>
        <el-row :gutter="20">
          <el-col :lg="5">
            <div class="leftNav">
              <ul>
                <li v-for="(item,index) in menu" :class="activeIndex==index?'active':''" @click="getDetail(item,index)">{{ language==0?item.name:item.ename }}</li>
              </ul>
            </div>
          </el-col>
          <el-col :lg="19">
            <div class="infoPart pd20" v-if="activeIndex==0">
              <h3 class="leftboderTT">{{ language==0?menu[activeIndex].name:menu[activeIndex].ename }}</h3>
              <div class="content">
                <div v-html="con1"></div>
              </div>
            </div>

            <div class="infoPart pd20" v-if="activeIndex==1">
              <h3 class="leftboderTT">{{ language==0?menu[activeIndex].name:menu[activeIndex].ename }}</h3>
              <div class="content">
                <div v-html="con2"></div>
              </div>
            </div>

            <div class="infoPart pd20" v-if="activeIndex==2">
              <h3 class="leftboderTT">{{ language==0?menu[activeIndex].name:menu[activeIndex].ename }}</h3>
              <div class="content">
                <div v-html="con3"></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <div class="indexTitle"  v-if="false">
        <h3 class="leftboderTT">{{ language==0?'联系我们':'CONTACT' }}</h3>
      </div>
      <div class="mapBox mb20" v-if="false">
        <div class="content">
          <div :class="index==0?'phone':index==1?'address':'email'" v-for="(item,index) in contact">
            <h4>{{language==1?item.ename:item.name}}</h4>
            <p>{{language==0?item.value:item.evalue}}</p>
          </div>
        </div>
      </div>
    </div>

    <div style="height: 50px"></div>
  </div>
</template>

<script setup>
import {useStorage} from "@vueuse/core";
import {onMounted} from "vue";
import {getppInfo} from "@/apiPc/match";
import {useRoute} from "vue-router";
const route = useRoute()
const language = useStorage('language', 0)

const activeIndex = ref(0)
const con1 = ref('')
const con2 = ref('')
const con3 = ref('')

const menu = ref([
  {name:'组织机构',ename:'Organizer'},
  {name:'无锡WDSF亚洲体育舞蹈节',ename:'WUXI WDSF ASIAN DANCESPORT FESTIVAL'},
  {name:'周边活动',ename:'Around Activity'},
  // {name:'体育舞蹈项目',ename:''},
])

const contact = ref([
  {name:'电话',ename:'Phone',value:'武先生：15606190026',evalue:'Mr.WU:15606190026'},
  {name:'地址',ename:'Address',value:'江苏省 无锡市太湖新城和风路与清舒交叉口东北100米',
    evalue:'No.88 Qingshu Road,Economic Development District, Wuxi City,Jiangsu Province,China'},
  {name:'邮箱',ename:'Email',value:'info@wdsfwuxicenter.com',evalue:'info@wdsfwuxicenter.com'},
])

onMounted(()=>{
  if(route.query.activeIndex){
    activeIndex.value = route.query.activeIndex
  }
  getMenuList()
})
const getMenuList = ()=>{
  // menu.value = []
  getppInfo('10000002').then(res=>{
    if(language.value==0){
      con1.value = res.data.contextZh
    } else {
      con1.value = res.data.contextEn
    }
  })

  getppInfo('10000003').then(res=>{
    if(language.value==0){
      con2.value = res.data.contextZh
    } else {
      con2.value = res.data.contextEn
    }
  })

  getppInfo('10000004').then(res=>{
    if(language.value==0){
      con3.value = res.data.contextZh
    } else {
      con3.value = res.data.contextEn
    }
  })
}
//根据菜单id获取详情
const getDetail = (item,index)=>{
  activeIndex.value = index
  // item.id
}

</script>

<style scoped lang="scss">
.leftNav{
  ul{border-right: 2px solid #E5E5E5;padding:0 20px 0 0;}
  li{margin: 30px 0;padding: 10px;text-align: right;
    border-radius: 2px;position: relative;
    font-weight: 600;text-transform: uppercase;
    font-size: 18px;cursor: pointer;
    background: linear-gradient(90deg, rgba(134, 35, 252, 0.1), rgba(69, 61, 234, 0.1));}
  li::after{content: '';position: absolute;background: #898989;width: 8px;height: 8px;
  border-radius: 50%;right: -29px;border: 4px solid #fff;outline: 2px solid #898989;
  box-sizing: content-box;top: 0;bottom: 0;margin: auto;}
  li.active{color: #fff;
    background: #000;
    &::after{outline: 2px solid #000;background: #000;}
  }
}
.infoPart{
  .leftboderTT{font-size:20px;color: var(--el-color-primary); }
}
.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}
}
.mapBox{background: url("@/assets/zhinan/map.png") no-repeat right;height: 375px;
  background-size: cover;padding: 1px;position: relative;display: flex;
  .content{background: #fff;width: 60%;left: 40px;padding: 30px;text-indent: 0;
    line-height: 1;
    position: absolute;height: 90%;top: 0;bottom: 0;margin: auto;
  }
  div{padding-left: 60px;}
  .phone{background: url("@/assets/dance/map01.png") no-repeat left;background-size: 30px;}
  .address{background: url("@/assets/dance/map02.png") no-repeat left;background-size: 30px;
    margin:50px 0;
  }
  .email{background: url("@/assets/dance/map03.png") no-repeat left;background-size: 30px;}
  h4{margin: 0;
    font-size: 16px;
    color: #AAAAAA;}
  p{margin: 13px 0 0;}
}
</style>