<template>
  <div>
    <el-calendar v-model="currentDate" :range="calendarRange">
      <template #date-cell="data">
        <div :class="data.data.day==query.currentDate?'primaryDate date':'date'"  @click="selectDate(data.data.day)">
          {{ data.data.day.slice(8, 10) }}
        </div>

      </template>
    </el-calendar>
    <div class="calendarList">
      <ul v-loading="loading">
        <li v-for="n in schList" :key="n.id" @click="goMatch(n)">
          <label>{{ n.timeStr }}</label>
          <div class="esp mt5">{{ n.name }}</div>
        </li>
      </ul>
      <el-empty v-if="schList.length== 0"
                style="--el-empty-padding:0;--el-empty-description-margin-top:0"
                :image="`/img/order_no.png`" :image-size="200"/>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {dayjs} from "element-plus";
import {getIndexScheduleList} from "@/apiPc/common";
import {useRouter} from "vue-router";
const router = useRouter()
const currentDate = ref(new Date())
const calendarRange = ref([dayjs('2023-07-17').toDate(), dayjs('2023-07-17').toDate()])
const schList = ref([])
const loading = ref(false)
const query = ref({
  // currentDate:dayjs().format('YYYY-MM-DD')
  currentDate: '2023-07-17'
})
getScheduleList()
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 scoped lang="scss">
.el-calendar {
  --el-calendar-border: none;
  --el-calendar-cell-width: 40px;
  text-align: center;
  --el-text-color-regular: #8E8D94;

  :deep(.el-calendar__header) {
    justify-content: center;
    padding: 0 0 10px
  }

  :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;
  }

  :deep(.el-calendar-table thead th) {
    padding: 5px 0 0
  }

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

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

.calendarList {
  border: 1px solid #F0F0F0;
  padding: 12px 20px;
  overflow: auto;
  height: 225px;

  ul {
    li {cursor: pointer;
      background: #F6F9FE;
      margin: 7px 0 7px 20px;
      position: relative;
      padding: 13px;
      border-radius: 10px;
      font-weight: 500;
      font-size: 15px;

      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;
      }
    }
  }
}

</style>