<template>
  <div>
    <div class="box">
      
      <div class="mt20" />
      <el-card>
        <el-row :gutter="20">
          <el-col :lg="12" :sm="24">
            <!--赛事日历-->
            
            <el-calendar v-model="currentDate">
              <template #date-cell="data">
                
                <div
                  :class="data.data.day==query.currentDate?'primaryDate':''" class="date"
                  @click="selectDate(data.data.day)"
                >
                  {{ data.data.day.slice(8, 10) }}
                </div>
              
              </template>
            </el-calendar>
          
          </el-col>
          <el-col :lg="12" :sm="24">
            <div class="calendarList">
              <ul v-loading="loading">
                <li v-for="n in schList" @click="goMatch(n)">
                  <label>{{ n.timeStr }}</label>
                  <div class="esp mt5">{{ n.name }}</div>
                </li>
                <el-empty v-if="schList.length== 0" :image="`/img/order_no.png`" :image-size="200" />
              </ul>
            </div>
          
          </el-col>
        </el-row>
      </el-card>
      <el-card class="mt20 mb20">
        <el-table :data="rank" stripe>
          <el-table-column align="center" label="名次" type="index">
            <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-column label="国家" prop="name">
            <template #default="scope">
              <div>
                <span :class="`flag-icon flag-icon-${scope.row.code}`" />
                {{ scope.row.countryName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="组合">
            <template #default="scope">
              <div class="text-primary esp">{{ scope.row.zuHe }}</div>
            </template>
          </el-table-column>
          <el-table-column min-width="60">
            <template #header>
              <img class="mauto" src="@/assets/dance/1.png">
            </template>
            <template #default="scope">
              <div class="text-warning text-center">{{ scope.row.jin }}</div>
            </template>
          </el-table-column>
          <el-table-column min-width="60">
            <template #header>
              <img class="mauto" src="@/assets/dance/2.png">
            </template>
            <template #default="scope">
              <div class="text-blue text-center">{{ scope.row.yin }}</div>
            </template>
          </el-table-column>
          <el-table-column min-width="60">
            <template #header>
              <img class="mauto" src="@/assets/dance/3.png">
            </template>
            <template #default="scope">
              <div class="text-primary text-center">{{ scope.row.tong }}</div>
            </template>
          </el-table-column>
        </el-table>
      
      </el-card>
      <el-card v-for="(n,index) in cjList" class="mt20 mb20" hidden>
        <div class="leftboderTT">{{ language == 0 ? n.title : n.en_title }}</div>
        <div v-for="(m,jndex) in n.list">
          <h3 class="text-center">{{ m.title }}</h3>
          <div class="tablebody">
            <table class="table table-striped">
              <thead>
                <tr class="bg-lineg">
                  <td class="text-center" style="width: 120px;">{{ language == 0 ? '名次' : 'RANK' }}</td>
                  <td class="text-center">{{ language == 0 ? '组合' : 'COUPLE' }}</td>
                  <td class="text-center w15">{{ language == 0 ? '国家' : 'COUNTRY' }}</td>
                  <td class="text-center w15">START #</td>
                  <td v-if="index>0" class="text-center w15">BASE</td>
                  <td v-if="index>0" class="text-center w15">POINTS</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(l,kndex) in m.rows">
                  <td class="text-center">{{ l.RANK }}</td>
                  <td class="text-center">{{ l.COUPLE }}</td>
                  <td class="text-center">{{ l.COUNTRY }}</td>
                  <td class="text-primary text-center">{{ l.START }}</td>
                  <td v-if="index>0" class="text-center">{{ l.BASE }}</td>
                  <td v-if="index>0" class="text-primary text-center">{{ l.POINTS }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      
      </el-card>
      <br><br>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { getPlanYears, getYearZtxPlanList } from '@/apiPc/train'
import { cjList } from '@/assets/js/data'
import { ArrowRight } from '@element-plus/icons-vue'
import { dayjs } from 'element-plus'

const router = useRouter()
import { useStorage } from '@vueuse/core/index'
import { getIndexScheduleList } from '@/apiPc/common'
import { getRank } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'

const language = useStorage('language', 0)
const years = ref([])
const currYear = ref(null)
const ztxPlanList = ref([])
const planList = ref([])
const rank = ref([])
const schList = ref([])
const loading = ref(false)
const currentDate = ref(dayjs('2025-07-17').toDate())
const query = ref({
  // currentDate:dayjs().format('YYYY-MM-DD')
  currentDate: '2025-07-17'
})

getScheduleList()
getRankList()

function getRankList() {
  getRank().then(res => {
    rank.value = res.data
  })
}

function getScheduleList() {
  loading.value = true
  query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
  getIndexScheduleList(query.value).then(res => {
    loading.value = false
    schList.value = res.data
  })
}

function selectDate(date) {
  console.log(dayjs(date).toDate())
  console.log(query.value.currentDate)
  query.value.currentDate = dayjs(date).toDate()
  getScheduleList()
}

function goMatch(n) {
  router.push({
    name: 'matchDetail',
    params: {
      id: n.cptId
    },
    query: {
      matchId: n.cptId
    }
  })
}
</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%;
}
</style>