<template>
  <el-calendar ref="calendarRef" v-model="currentDate">
    <template #header="{ date }">
      <div class="father">
        <span class="textDay">{{ date }}</span>
        <el-button-group class="son">
          <el-button size="small" type="info" @click="selectDateCalendar('prev-month')">
            {{ language == 0 ? '上一月' : 'Last month' }}
          </el-button>
          <el-button size="small" type="info" @click="selectDateCalendar('today')">
            {{ language == 0 ? '今天' : 'Today' }}
          </el-button>
          <el-button size="small" type="info" @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>
</template>

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

const emit = defineEmits( ['selectDate'])

const language = useStorage('language', 0)
const calendarRef = ref(null)
const currentDate = ref()
const query = ref({
  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) {
    currentDate.value = dayjs(res.rows[0].beginTime).toDate()
    query.value.currentDate = dayjs(res.rows[0].beginTime).format('YYYY-MM-DD')
  }
}


async function getScheduleList() {
  emit('selectDate', query.value)
}

function selectDate(date) {
  query.value.currentDate = date
  getScheduleList()
}

const selectDateCalendar = (val) => {
  if (!calendarRef.value) return
  calendarRef.value.selectDate(val)
  if (val == 'today') {
    query.value.currentDate = dayjs().format('YYYY-MM-DD')
    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);
    background: #000;
  }

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

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