<template>
  <div>
    <el-calendar ref="calendar" v-model="currentDate" :range="calendarRange">
      <template #header="{ date }">
        <div class="father">
          <span class="textDay">{{ date }}</span>
          <el-button-group class="son">
            <el-button size="small" type="primary" @click="selectDateCalendar('prev-month')">
              {{ language == 0 ? '上一月' : 'Last month' }}
            </el-button>
            <el-button size="small" type="primary" @click="selectDateCalendar('today')">
              {{ language == 0 ? '今天' : 'Today' }}
            </el-button>
            <el-button size="small" type="primary" @click="selectDateCalendar('next-month')">
              {{ language == 0 ? '下一月' : 'Next month' }}
            </el-button>
          </el-button-group>
        </div>
      
      </template>
      <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"
        :image="`/img/order_no.png`"
        :image-size="200" style="--el-empty-padding:0;--el-empty-description-margin-top:0"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { dayjs } from 'element-plus'
import { getIndexScheduleList } from '@/apiPc/common'
import { useRouter } from 'vue-router'
import { useStorage } from '@vueuse/core/index'
import { getMaList } from '@/apiPc/match'

const language = useStorage('language', 0)

const calendar = ref('')
const router = useRouter()
const currentDate = ref(new Date())
// const calendarRange = ref([dayjs().toDate(), dayjs().toDate()])
const schList = ref([])
const loading = ref(false)
const query = ref({
  // currentDate:dayjs().format('YYYY-MM-DD')
  currentDate: dayjs().format('YYYY-MM-DD')
})

onMounted(async() => {
  await handelGetMatch()
  await getScheduleList()
})

async function handelGetMatch() {
  const res = await getMaList({
    type: '-1',
    progressStatusCode: '-1',
    pageNum: 1,
    pageSize: 10
  })
  if (res.rows.length > 0) {
    query.value.currentDate = res.rows[0].beginTime
    currentDate.value = res.rows[0].beginTime
  }
}


async function getScheduleList() {
  loading.value = true
  query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
  await 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
    }
  })
}

const selectDateCalendar = (val) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
  if (val == 'today') {
    query.value.currentDate = dayjs().toDate()
    getScheduleList()
  }
}


</script>

<style lang="scss" scoped>
.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;
      }
    }
  }
}

.father {
  text-align: center;
  position: relative;
  width: 100%;
}

.son {
  position: absolute;
  right: 0;
  width: 230px;
}

.textDay {
  font-weight: bold;
  background: linear-gradient(to right, #8623FC, #453DEA); /* 定义渐变方向和颜色 */
  -webkit-background-clip: text; /* 兼容 WebKit 浏览器 */
  background-clip: text; /* 标准语法 */
  -webkit-text-fill-color: transparent; /* 文字颜色透明 */
}
</style>