<template>
  <div class="app-container">
    <div class="box">
      <el-breadcrumb class="mt20 forPc mb20" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">
          <el-icon>
            <HomeFilled />
          </el-icon>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/competition' }">竞赛</el-breadcrumb-item>
        <el-breadcrumb-item>竞赛日程</el-breadcrumb-item>
      </el-breadcrumb>

      <el-card class="mb20">
        <div class="calendar-head">
          <div>
            <el-button plain @click="selectDate('prev-year')">
              <el-icon><ArrowLeft /></el-icon>
            </el-button>
            <el-date-picker
              v-model="year" class="ml5 mr5" type="year" style="width: 80px;" :clearable="false"
              value-format="YYYY"
            />
            <el-button plain @click="selectDate('next-year')">
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
          <div>
            <el-button plain :disabled="month==1" @click="selectDate('prev-month')">
              <el-icon><ArrowLeft /></el-icon>
            </el-button>
            <el-select v-model="month" style="width: 70px;margin-right: 5px;margin-left: 5px">
              <el-option v-for="m in 12" :key="m" :label="m+'月'" :value="m" />
            </el-select>
            <el-button plain :disabled="month==12" @click="selectDate('next-month')">
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>
        </div>
        <div class="newsLine mt10">
          <div v-for="(n,index) in newsList" :key="index" class="item" @click="goDetail(n)">
            <div class="date">
              <p>{{ n.week }}</p>
              <div class="day">{{ n.day }}</div>
              <p>{{ n.ym }}</p>
            </div>
            <div class="item-body">
              <h3 class="esp" v-html="n.name" />
              <div>
                <el-tag v-for="t in n.level?.split(',')" :key="t" class="mr10" type="danger">{{ t }}</el-tag>
              </div>
            </div>
            <div class="local">
              <p class="esp">
                <el-icon><location /></el-icon>
                {{ n.address }}
              </p>
            </div>
            <a class="status">
              <span v-if="n.matchStatus==0" class="bg-gold leaf-tag">未开始</span>
              <span v-if="n.matchStatus==1" class="bg-danger leaf-tag">进行中</span>
              <span v-if="n.matchStatus==2" class="bg-gary leaf-tag">已结束</span>
            </a>
          </div>
        </div>
        <div v-if="total>0" class="pc-page-box">
          <PaginationPc v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
        </div>
        <el-empty v-if="total === 0" description="暂无数据" />
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import { dayjs } from 'element-plus'
import { getMatchList } from '@/apiPc/webSite'
import _ from 'lodash'
import { szToHz } from '@/utils/ruoyi'
import { useRouter } from 'vue-router'

const router = useRouter()
const year = ref(dayjs().year() + '')
const month = ref(dayjs().month() + 1)
const newsList = ref([])
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
const total = ref(0)

watch([year, month], (val) => {
  queryParams.value.year = val[0]
  queryParams.value.month = val[1]
  getList()
}, { immediate: true })
function getList() {
  getMatchList(queryParams.value).then(res => {
    newsList.value = res.rows
    total.value = res.total

    _.each(newsList.value, (n) => {
      const date = dayjs(n.startDate)
      n.week = '周' + szToHz(date.day())
      n.ym = date.format('YYYY/MM')
      n.day = date.get('date')
    })
  })
}
const selectDate = (val) => {
  switch (val) {
    case 'prev-year':
      year.value = parseInt(year.value) - 1 + ''
      break
    case 'next-year':
      year.value = parseInt(year.value) + 1 + ''
      break
    case 'prev-month':
      month.value--
      if (month.value < 1) {
        month.value = 1
      }
      break
    case 'next-month':
      month.value++
      if (month.value > 12) {
        month.value = 12
      }
      break
  }
}

const goDetail = (n) => {
  router.push({
    name: 'calendarMatchDetail',
    params: { id: n.noteId }
  })
}
</script>

<style scoped lang="scss">
.status{white-space: nowrap;}
.local{width: 25%;
  color: #7B7F83;}
.date{border-left: 2px solid #C62E19;height: 66px;}
.time{padding: 0 10px;
  color: #7B7F83;}
.calendar-head {
  display: flex;
  justify-content: center;
  width: 100%;

  div {
    margin: 0 15px;

    a {
      border: 1px solid #DDDDDD;
      display: inline-block;
      border-radius: 2px;
      padding: 4px
    }

    span {
      background: #F5F7F9;
      color: #2B3133;
      padding: 6px 10px;
      margin: 10px;
      font-size: 18px;
      border-radius: 2px;
    }
  }
}

.primary-event {
  background: var(--el-color-primary);
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 6px;
  font-size: 14px;
}
.newsLine .item{
  //justify-content: space-between;
  .item-body h3{padding: 0;margin: 0 0 15px;}
  .date{height: 70px;}
}
</style>