<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>
      <div class="kind">
        <ul>
          <li>
            <label>状态：</label>
            <el-radio-group v-model="query.flag" @change="searchList">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="1">未开始</el-radio-button>
              <el-radio-button label="2">进行中</el-radio-button>
              <el-radio-button label="3">已结束</el-radio-button>
            </el-radio-group>
          </li>
          <li>
            <label>省份：</label>
            <el-radio-group v-model="query.projectId" @change="searchList">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button v-for="p in projectList" :key="p.provinceId" :label="p.provinceId">{{ p.provinceName }}</el-radio-button>
            </el-radio-group>
          </li>
          <li>
            <label>时间：</label>
            <el-radio-group v-model="query.yearMonth" @change="searchList">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button v-for="m in monthList" :key="m" :label="m" />
            </el-radio-group>
          </li>
        </ul>
      </div>
    </div>

    <div class="box">
      <div class="listTitle">
        <h3><label>培训列表</label></h3>
        <div class="search">
          <el-input
            v-model.trim="query.trainName"
            placeholder="请输入培训名称查询"
            class="input-with-select" @keydown.enter="searchList"
          >
            <template #append>
              <el-button type="success" round @click="searchList">查询</el-button>
            </template>
          </el-input>
        </div>
      </div>

      <el-row :gutter="30" class="pt-20">
        <el-col v-for="n in list" :key="n" :lg="6" :md="8" :sm="12" class="content">
          <train-card :data="n" @click="goDetail(n.id)">
            <!--            <template #image>-->
            <!--              <el-button @click="goDetail(n.id)">详情</el-button>-->
            <!--            </template>-->
            <div class="trrbtn">
              <a v-if="n.signStatus=='0'" disabled class="roundLabel gold-btn">未开始</a>
              <a v-if="n.signStatus=='1'" class="roundLabel red-btn" round>去报名</a>
              <a v-if="n.signStatus=='2'" class="roundLabel gray-btn" round disabled>已结束</a>
            </div>
          </train-card>
        </el-col>
      </el-row>
      <div v-if="total > query.pageSize" class="pc-page-box">
        <PaginationPc v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="total" @pagination="getList" />
      </div>
      <el-empty v-if="list.length == 0" description="暂无数据" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as train from '@/apiPc/train'
import TrainCard from '@/viewsPc/components/trainCard'
import { ArrowRight } from '@element-plus/icons-vue'

const router = useRouter()
const list = ref([])
const projectList = ref([])
const monthList = ref([])
const total = ref(0)
const query = ref({
  projectId: '',
  flag: '',
  yearMonth: '',
  trainName: '',
  pageSize: 12,
  pageNum: 1
})

onMounted(() => {
  getProvinceList()
  getMonthList()
  getList()
})

// 获取省
async function getProvinceList() {
  const res = await train.getProvinceNames()
  projectList.value = res.data
}

function getMonthList() {
  const data = new Date()
  // 获取年
  let year = data.getFullYear()
  // 获取月
  let mon = data.getMonth() - 5
  const arr = []

  if (mon < 1) {
    year = year - 1
    mon = 12 + mon
  }
  for (let i = 0; i < 12; i++) {
    if (mon <= 0) {
      year = year + 1
      mon = mon - 12
    }
    if (mon > 12) {
      mon = 1
      year = year + 1
    }
    if (mon < 10) {
      mon = '0' + mon
    }
    arr.push(year + '-' + mon)
    mon = mon * 1 + 1
  }
  monthList.value = arr
}

async function getList() {
  const res = await train.getTrains(query.value)
  list.value = res.rows
  total.value = res.total
}

function searchList() {
  query.value.pageNum = 1
  getList()
}


function goDetail(id) {
  const routeLocation = router.resolve({
    name: 'trainDetail',
    params: {
      id: id
    }
  })
  window.open(routeLocation.href, '_blank')
}
</script>

<style lang="scss" scoped>
.el-pagination {
  justify-content: center;
  --el-pagination-bg-color: none;
}

.kind {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0px 0px 46px 0px rgba(1,16,64,0.08);
  margin:30px 0;

  ul {
    list-style: none;
    padding: 30px 20px 10px;

    li {
      margin: 0 0 20px;
      display: flex;border-bottom: 1px solid #E5E5E5;padding: 0 0 20px;
      align-items: baseline;
      &>label{flex: 0 0 auto;padding:0 20px;
      border-left:3px solid var(--el-color-primary);    position: relative;
        top: 6px;}
    }
    li:last-child{border: none;margin: 0;}
  }
}

.pagination-container {
  height: 56px;
}
.listTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cared1 {
  background: darkgreen;
}
.cared2 {
  background: gray;
}
.coach{
  width: 58px;
  height: 24px;
  font-size: 14px;
  font-weight: 400;
  background: #FF8135;
  color: #FFFFFF;
  border-radius: 2px;
  text-align: center;
  line-height: 24px;
}
.judge{
  width: 58px;
  height: 24px;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  background: #00A1E6;
  border-radius: 2px;
  text-align: center;
  line-height: 24px;
}
.jinDuan{
  width: 58px;
  height: 24px;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  background: #D3AA5A ;
  border-radius: 2px;
  text-align: center;
  line-height: 24px;
}
.jinJi{
  width: 58px;
  height: 24px;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  background: #2FBAB6;
  border-radius: 2px;
  text-align: center;
  line-height: 24px;
}
</style>