<template>
  <div>
    <div class="mt20"/>
    <div class="box">
      <el-card>
        <el-row>
          <el-col>
            <div class="infoPart pd20">
              <h3 class="leftboderTT">{{ language == 0 ? '操作手册' : 'The Manual' }}</h3>
              <br>
              <div style="padding-left: 30px">
                <el-link v-for="v in fileList" :href="fillImgUrl(v.url)" :underline="false" class="link" target="_blank"
                         type="primary">
                  <span style="border-bottom: 1px solid var(--el-color-primary)">
                    {{ v.name }}
                    <el-icon style="margin-left: 10px;position: relative;bottom: -2px">
                    <Download/>
                  </el-icon>
                  </span>
                
                </el-link>
              </div>
              <div class="contentBox">
                <div v-html="content"></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    
    <div style="height: 50px"></div>
  </div>
</template>

<script setup>
import {useStorage} from "@vueuse/core";
import {onMounted, ref} from "vue";
import {getppInfo} from "@/apiPc/match";
import {useRoute} from "vue-router";
import {fillImgUrl} from "/@/utils/ruoyi";

const route = useRoute()
const language = useStorage('language', 0)

const activeIndex = ref(0)
const content = ref('')
const fileList = ref([])

onMounted(() => {
  if (route.query.activeIndex) {
    activeIndex.value = route.query.activeIndex
  }
  getMenuList()
})
const getMenuList = () => {
  
  getppInfo('10000005').then(res => {
    if (language.value == 0) {
      content.value = res.data.contextZh
      fileList.value = JSON.parse(res.data.fileZh)
    } else {
      content.value = res.data.contextEn
      fileList.value = JSON.parse(res.data.fileEn)
    }
  })
}

</script>

<style lang="scss" scoped>
.link {
  font-size: 16px;
  display: block;
  margin-bottom: 10px;
}

:deep(.contentBox ) {
  max-width: 1000px;
  
  img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

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