<template>
  <div class="app-container">
    <!-- 我是 赛事 -->
    <div class="kind mt20">

      <div class="box">
        <el-card>
          <ul>
            <li>
              <label>{{ language==0?'类型':'Type' }}：</label>
              <el-radio-group v-model="query.type"  @change="getList">
                <el-radio-button value="-1">{{ language==0?'全部':'All' }}</el-radio-button>
                <el-radio-button value="0">{{ language==0?'独立赛':'Station race' }}</el-radio-button>
                <el-radio-button value="1">{{ language==0?'联赛':'League' }}</el-radio-button>
              </el-radio-group>
            </li>
            <li>
              <label>{{ language==0?'状态':'Status' }}：</label>
              <el-radio-group
                v-model="query.progressStatusCode"
                @change="getList"
              >
                <el-radio-button value="-1">{{ language==0?'全部':'All' }}</el-radio-button>
                <el-radio-button value="2">{{ language==0?'报名中':'Registering now' }}</el-radio-button>
                <el-radio-button value="3">{{ language==0?'赛事即将开始':'Begin in a minute' }}</el-radio-button>
                <el-radio-button value="4">{{ language==0?'赛事进行中':'In progress' }}</el-radio-button>
                <el-radio-button value="5">{{ language==0?'已结束':'Ended' }}</el-radio-button>
              </el-radio-group>
            </li>
            <li>
              <label>{{ language==0?'时间':'Date' }}：</label>
              <el-radio-group v-model="query.month" @change="getList">
                <el-radio-button value="">{{ language==0?'全部':'All' }}</el-radio-button>
                <el-radio-button v-for="m in monthList" :key="m" :value="m">{{m}}</el-radio-button>
              </el-radio-group>
            </li>
          </ul>
        </el-card>
      </div>

    </div>
    <div class="box">
      <div class="listTitle">
        <h3>{{ language==0?'赛事列表':'List' }}</h3>
        <div class="search">
          <el-input
            v-model="query.name"
            :placeholder="language==0?'请输入赛事名称查询':'Search'"
            class="input-with-select" @change="getList"
          >
            <template #append>
              <el-button type="success" round @click="getList">{{ language==0?'查询':'Search' }}</el-button>
            </template>
          </el-input>
        </div>
      </div>

      <div v-loading="loading">
        <div class="matchItem" v-for="n in list" :key="n.id" @click="goDetail(n.id)">
          <el-row :gutter="15" align="middle">
            <el-col :lg="7" :md="24" :xl="6">
              <div class="popo">
                <el-tag v-if="n.signType==0">{{ language==0?'个人':'Individual' }}</el-tag>
                <el-tag v-if="n.signType==1">{{ language==0?'团体':'Team' }}</el-tag>
                <el-tag v-if="n.signType==2">{{ language==0?'个人/团体':'Individual/Team' }}</el-tag>
              </div>
              <img class="mauto mw100 coverLimitHeight" :src="fillImgUrl(n.coverUrl)">
            </el-col>
            <el-col :lg="9" :md="12" :xl="12">
              <div class="info">
                <h3 class="esp">{{ n.name }}</h3>
                <p class="ppl"><label>{{language==0?'赛事级别':'Level'}}：</label>{{n.level}}</p>
                <p class="ppl esp"><label>{{ language==0?'比赛时间':'Playing Time' }}：</label>{{n.beginTime?.slice(0,10)}} ~ {{ n.endTime?.slice(0,10) }}</p>
<!--                <p class="ppl" v-if="n.address"><label>{{ language==0?'地&ensp;&ensp;&ensp;&ensp;点':'Location' }}：</label>{{ n.address }}</p>-->
<!--                <p class="ppl"><label>{{ language==0?'报名截止':'Registration Deadline' }}：</label>{{ n.signEndTime?.slice(0,10) }}</p>-->

                <p class="ppl"><label>{{ language==0?'联&ensp;系&ensp;人':'Contact Person' }}：</label>{{ n.contactPerson }}</p>
                <p class="ppl"><label>{{ language==0?'联系电话':'Phone' }}：</label>086-{{ n.contactTelno }}</p>
                <p class="ppl esp"><label>{{ language==0?'邮&ensp;&ensp;&ensp;&ensp;箱':'E-mail' }}：</label>{{ n.contactEmail }}</p>
                <p class="ppl" v-if="n.type=='1'">
                  <label>{{ language==0?'分&ensp;站&ensp;赛':'Station race' }}：</label>{{n.cptsSize}}
                </p>
              </div>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <p class="countDownTitle">
                <span v-if="language==0">报名截止倒计时</span>
                <span v-else>Registration deadline countdown</span>
              </p>
              <van-count-down :time="n.time" format="DD 天 HH 时 mm 分 ss 秒">
                <template #default="timeData">
                  <span class="block">{{ timeData.days }}</span>
                  <span class="colon">{{ language==0?'天':'Days' }}</span>
                  <span class="block">{{ timeData.hours }}</span>
                  <span class="colon">{{ language==0?'时':'Hrs' }}</span>
                  <span class="block">{{ timeData.minutes }}</span>
                  <span class="colon">{{ language==0?'分':'Min' }}</span>
                  <span class="block">{{ timeData.seconds }}</span>
                  <span class="colon">{{ language==0?'秒':'Sec' }}</span>
                </template>
              </van-count-down>

              <div class="text-center mt30">
                <a class="btn-lineG mb20 mauto" v-if="n.time>0" style="display: block;">
                  {{ language==0?'我要报名':'Register' }}</a>
                <div v-else  style="opacity: 0.5;" class="btn-lineG mb20 mauto">{{ language==0?'报名已结束':'Registration has ended' }}</div>
                <p class="text-gray">{{ language==0?'报名截止':'Registration Deadline' }}：{{ n.signEndTime?.slice(0,10) }}</p>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-empty :image="`/img/order_no.png`" :image-size="228" v-if="list?.length == 0" description=" "/>

      </div>


      <div v-if="total>10" class="pc-page-box mb20">
        <PaginationPc v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="total" @pagination="getList" />
      </div>
      <div class="mb20"></div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'
import { reactive, onMounted } from '@vue/runtime-core'
import { useRouter } from 'vue-router'
import { dayjs } from 'element-plus'

const router = useRouter()
const { proxy } = getCurrentInstance()
import * as match from '@/apiPc/match'
import {useStorage} from "@vueuse/core/index";
const language= useStorage('language',0)
const typeList = ref([{ label: '全部', id: '0' }])
const list = ref([])
const projectList = ref([])
const monthList = ref([])
const loading = ref(false)
const activeName = ref('')
const total = ref(0)
const query = ref({
  type:'-1',
  projectId: '',
  progressStatusCode: '-1',
  month: '',
  pageNum: 1,
  pageSize: 18
})
onMounted(() => {
  activeName.value = typeList.value[0].id
  getMonthList()
  getList()
})


function getMonthList() {
  // const date = new Date()
  const arr = []
  // 获取年
  let year = dayjs().year()
  // 获取月
  let mon = dayjs().month() - 6
  if (mon < 1) {
    year = year - 1
    mon = 12 + mon
  }
  for (var i = 0; i <= 11; i++) {
    if (++mon > 12) {
      mon = 1
      year++
    }
    if (mon < 10) {
      mon = '0' + mon
    }
    // console.log(year + '-' + mon)
    arr.push(year + '-' + mon)
  }
  monthList.value = arr
}

function getList() {
  loading.value = true
  match.getMaList(query.value).then((res) => {
    list.value = res.rows
    for(let n of list.value){
      var today = dayjs().format('YYYY-MM-DD HH:mm:ss')
      n.time = dayjs(n.signEndTime).diff(today, 'millisecond')
    }
    total.value = res.total
    loading.value = false
  })
}

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

<style scoped lang="scss">
.app-container {
  background: #f5f7f9;
  padding: 0;
}
.matchItem {
  cursor: pointer;padding:10px 20px 20px;box-shadow: 0 0 6px #eee;
  background: #FFFFFF;margin: 0 0 20px;
  position: relative;
  .el-col{padding-top: 20px}
  .countDownTitle{margin: 0}
  &:last-child {
    border-bottom: none;
  }
  .el-avatar {
    position: absolute;
    left: 20px;
    top: 30px;

    img {
      background: #fff;
    }
  }

  .info {
    p {
      font-size: 14px;
    }
  }

  .typeTag {
    position: absolute;
    right: 0;
    top: 0;
  }

  h3 {
    font-weight: 500;margin: 0 0 10px;
    font-size: 18px;
    color: #000000;
    text-overflow: ellipsis;
  }

  &:hover h3 {
    color: var(--el-color-primary);
  }
}
.countDownTitle {
  text-align: center;
  color: #525F6B;
  position: relative;
  width: 100%;
  left: 0;
  font-size: 14px;
}

.countDownTitle span {
  background: #fff;
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

.countDownTitle::after {
  position: absolute;
  background: #ccc;
  height: 1px;
  content: '';
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  left: 0;
}
.info h3{margin: 0 0 15px}
.info .ppl{margin: 6px 0;}
.ppl{color: #29343C;
  label{color: #929AA0;}
}
.van-count-down {
  text-align: center;
  margin: 20px 0;
}

.colon {
  display: inline-block;
  font-size: 14px;
  margin: 0 8px;
  color: #7B7F83;
}

.block {
  display: inline-block;    opacity: 0.7;
  width: 52px;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  border-radius: 10px;
  background: url(@/assets/img/djs_bg.png) left;
  background-size: 100% 100%;
  line-height: 50px;
  text-align: center;
}
@media (max-width: 1450px) {
  .block{width: 44px;font-size: 20px;}
}
.el-pagination {
  --el-pagination-button-disabled-bg-color: transparent;
  justify-content: center;
  --el-pagination-bg-color: transparent;

}

.kind {
  .el-radio-group{width: 90%;}
  ul {
    list-style: none;

    li {
      margin: 0 0 10px;
      display: flex;
      align-items: flex-start;
      & > label {padding: 8px 0;
        width:5em;text-align: right;font-weight: normal;
      }
      .el-radio-button{min-width: 90px;text-align: center;}
      &:last-child{border-bottom: none;margin: 0}
    }
  }
}

.listTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goldbtn {
  color: #fff;
  border: #D5AC5A;
  background: #D5AC5A;
}

.el-button--primary:hover {
  background: var(--el-color-primary)
}

.mw100{max-width: 100%;}
</style>