<template>
  <div class="pv20">
    <div class="matchItem" v-for="n in list" :key="n.id" @click="goDetail(n.id)">
      <el-row :gutter="15">
        <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?'比赛时间':'Playing Time' }}：</label>{{n.beginTime?.slice(0,10)}} ~ {{ n.endTime?.slice(0,10) }}</p>
            <p class="ppl esp"><label>{{ language==0?'地&ensp;&ensp;&ensp;&ensp;点':'Location' }}：</label>{{ n.address }}</p>
            <p class="ppl"><label>{{language==0?'赛事级别':'Level'}}：</label>{{n.level}}</p>
<!--            <p class="ppl"><label>{{ language==0?'报名截止':'Registration Deadline' }}：</label>{{ n.signEndTime?.slice(0,10) }}</p>-->
            <p class="ppl" v-if="n.contactPerson"><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" v-if="n.contactEmail"><label>{{ language==0?'邮&ensp;&ensp;&ensp;&ensp;箱':'E-mail' }}：</label>{{ n.contactEmail }}</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" style="display: block;" v-if="n.time>0">
              <span v-if="n.time>0 && n.startSign<=0"> {{ language==0?'我要报名':'Register' }}</span>

              <span v-if="n.startSign>0"> {{ language==0?'报名未开始':'Not started yet' }}</span>
            </a>
            <div v-else style="opacity: 0.5;" class="btn-lineG mb20 mauto text-center">
              {{ 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>
  </div>

  <el-empty :image="`/img/order_no.png`" :image-size="228" v-if="list?.length == 0" description=" "/>
</template>

<script setup>
import {ref} from "vue";
import {onMounted} from "@vue/runtime-core";
import {dayjs} from "element-plus"
import {useStorage} from "@vueuse/core/index";
const language= useStorage('language',0)

const router = useRouter()
const time = ref(0)
const props = defineProps({
  list: {
    type: Array,
    required: true
  }
})
onMounted(()=>{
  for(let n of props.list){
    var today = dayjs().format('YYYY-MM-DD HH:mm:ss')
    n.time = dayjs(n.signEndTime).diff(today, 'millisecond')
    n.startSign = dayjs(n.signBeginTime).diff(today, 'millisecond')
  }
})
function goDetail(id) {
  const routeData = router.resolve({
    path: `/match/list/${id}`
  })
  window.open(routeData.href, '_blank')
}
</script>

<style scoped lang="scss">
.pv20{padding: 0 20px;}
.mt60{margin-top: 60px}
.matchItem {
  cursor: pointer;padding: 0 0 20px;
  background: #FFFFFF;border-bottom: 1px solid #e5e5e5;
  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 .ppl{margin: 5px 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;}
}
</style>