<template>
  <div>
    <div class="box">
      <div class="mt20" />
      <el-card class="mt20 mb20">
        
        <h3 style="text-align: center">
          <!--          {{ // language == 0 ? query.name : query.enName  }}-->
          {{ language == 0 ? query.code != 'tw' ? query.name : '中华台北' : query.enName }}
        </h3>
        <div class="mt20" />
        <el-table :data="rank" stripe>
          <el-table-column :label="language==0?'组别':'Group'" align="center" min-width="200">
            <template #default="scope">
              <div class="text-primary esp">{{ scope.row.zu }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="language==0?'组合':'Couple'" align="center" min-width="200">
            <template #default="scope">
              <div class="text-primary esp">{{ scope.row.personName }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="language==0?'国家':'Country'" prop="name">
            <template #default="scope">
              <div>
                <!--                <span :class="`flag-icon flag-icon-${query.code}`" />-->
                <span v-if="query.code!='tw'" :class="`flag-icon flag-icon-${query.code}`" />
                <span v-else class="flag-icon">
                  <img :src="hkImage" alt="" class="hkimg">
                </span>
                {{ language == 0 ? query.code != 'tw' ? scope.row.name : '中华台北' : scope.row.enName }}
                <!--                {{ language == 0 ? scope.row.countryName : scope.row.countryNameEn }}-->
              </div>
            </template>
          </el-table-column>
          
          <el-table-column :label="language==0?'名次':'Rank'" align="center" type="index" width="100">
            <template #default="scope">
              <span v-if="scope.row.mingCi == 1" style="color:#F8A617">{{ scope.row.mingCi }}</span>
              <span v-else-if="scope.row.mingCi == 2" style="color:#778B92">{{ scope.row.mingCi }}</span>
              <span v-else-if="scope.row.mingCi == 3" style="color:#7F2D00">{{ scope.row.mingCi }}</span>
              <span v-else>{{ scope.row.mingCi }}</span>
            </template>
          </el-table-column>
        
        
        </el-table>
      
      </el-card>
      
      <br>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as match from '@/apiPc/match'
import { useRoute } from 'vue-router'
import hkImage from '@/assets/nationalFlag/hk.png'

const route = useRoute()
import { useStorage } from '@vueuse/core/index'

const language = useStorage('language', 0)
const rank = ref([])
const query = ref({
  name: ''
})

onMounted(() => {
  query.value.name = route.query.name
  query.value.code = route.query.code
  query.value.enName = route.query.enName
  if (query.value.name) getListView()
})

async function getListView() {
  const res = await match.medalTableDetail(query.value)
  rank.value = res.data || []
}


</script>

<style lang="scss" scoped>
.leftboderTT {
  margin: 0 0 20px;
  color: var(--el-color-primary);
  font-size: 20px;
}

h3 {
  background: #F5F0FF;
  margin: 0;
  padding: 10px 0;
  color: var(--el-color-primary);
  font-size: 18px;
}

.table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  
  td, th {
    padding: 8px;
    font-size: 14px;
  }
}

:deep(.table-striped > tbody > tr:nth-of-type(odd)) {
  background: #F6F9FE;
}

.el-calendar {
  --el-calendar-border: none;
  --el-calendar-cell-width: 51px;
  text-align: center;
  --el-text-color-regular: #8E8D94;
  
  :deep(.el-calendar__header) {
    justify-content: center;
  }
  
  :deep(.el-calendar__body) {
    border: 1px solid #F0F0F0;
    padding: 0
  }
  
  :deep(.el-calendar-table .el-calendar-day) {
    padding: 1px;
  }
  
  :deep(.el-calendar-table td.is-selected) {
    background: transparent;
  }
  
  :deep(.el-calendar__button-group) {
    display: none;
  }
}

.primaryDate {
  color: #fff;
  background: linear-gradient(90deg, #8623FC, #453DEA);
}

.date {
  margin: 5px auto;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  line-height: 34px;
  font-weight: bold;
}

.calendarList {
  border: 1px solid #F0F0F0;
  padding: 12px 20px 0;
  overflow: hidden;
  height: 100%;
  
  ul {
    overflow: auto;
    height: 330px;
    margin: 0;
    
    li {
      background: #F6F9FE;
      margin: 7px 0 7px 20px;
      position: relative;
      padding: 13px;
      border-radius: 10px;
      font-weight: 500;
      font-size: 15px;
      cursor: pointer;
      
      label {
        color: #453DEA;
        margin-right: 15px;
        
        &::before {
          content: '';
          background: #fff;
          left: -17px;
          top: 0px;
          bottom: 0;
          margin: auto;
          border-radius: 50%;
          width: 2px;
          height: 2px;
          position: absolute;
          z-index: 1
        }
      }
    }
    
    li::before {
      content: '';
      background: linear-gradient(0deg, #8623FC, #453DEA);
      border-radius: 50%;
      width: 8px;
      height: 8px;
      position: absolute;
      left: -20px;
      top: 0;
      bottom: 0;
      margin: auto;
      z-index: 1;
    }
    
    li::after {
      content: '';
      left: -16px;
      width: 1px;
      height: 100%;
      background: #EBEBEB;
      position: absolute;
      top: 20px
    }
    
    li:hover {
      color: #fff;
      background: linear-gradient(-90deg, #8623FC, #453DEA);
      
      label {
        color: #fff;
      }
    }
  }
}

.w15 {
  width: 15%;
}

.hkimg {
  width: 19px;
  height: 14px;
  position: absolute;
  top: 0;
}
</style>