<template>
  <div>
    <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>
            <a @click="selectDate('prev-year')">
              <el-icon>
                <ArrowLeft />
              </el-icon>
            </a>
            <span>{{ year }}</span>
            <a @click="selectDate('next-year')">
              <el-icon>
                <ArrowRight />
              </el-icon>
            </a>
          </div>
          <div>
            <a @click="selectDate('prev-month')">
              <el-icon>
                <ArrowLeft />
              </el-icon>
            </a>
            <span>{{ month }}</span>
            <a @click="selectDate('next-month')">
              <el-icon>
                <ArrowRight />
              </el-icon>
            </a>
          </div>

        </div>
        <div class="newsLine">
          <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.belongTime?.substring(8, 10) }}</div>
              <p>{{ n.belongTime?.substring(0, 7).replace(/-/g, '/') }}</p>
            </div>
            <div class="item-body">
              <h3 v-html="n.name" />
              <p class="time">231人报名  （可报名人数：300）</p>
            </div>
            <div class="local">
              <p class="esp">
                <el-icon><location/></el-icon>
                无锡市跆拳道中心</p>
            </div>
            <a class="status">
              <span v-if="n.status==0" class="bg-gold leaf-tag">未开始</span>
              <span v-if="n.status==1" class="bg-danger leaf-tag">进行中</span>
              <span v-if="n.status==2" class="bg-gary leaf-tag">已结束</span>
            </a>
          </div>
        </div>
      </el-card>

    </div>
  </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'

const year = ref('2023')
const month = ref('11')
const newsList = ref([])
onMounted(() => {
  var list = [{
    belongTime: '2023-11-03',
    week: '周五',
    name: '2023年少年跆拳道大赛男子组',
    status: 2
  }, {
    belongTime: '2023-11-20',
    week: '周一',
    name: '2023年少年跆拳道大赛女子组',
    status: 1
  }, {
    belongTime: '2023-11-22',
    week: '周三',
    name: '2023年少年跆拳道大赛男子组',
    status: 0
  }]
  newsList.value = list
})
const selectDate = (val) => {
  console.log(val)
}
const goDetail = (n) => {
  
}
</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;
}
</style>