<template>
  <div class="pv20">
    <div v-for="n in list" :key="n.id" class="matchItem" @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 :src="fillImgUrl(n.coverUrl)" class="mauto mw100 coverLimitHeight">
        </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 ? '赛事级别' : 'EVENT LEVEL' }}：</label>{{ n.level }}</p>
            <p class="ppl"><label>{{
              language == 0 ? '赛事时间' : 'COMPETITION DATE'
            }}：</label>{{ n.beginTime?.slice(0, 10) }} ~ {{ n.endTime?.slice(0, 10) }}</p>
            <p class="ppl esp"><label>{{
              language == 0 ? '地&nbsp;&nbsp;&nbsp;&nbsp;点' : 'LOCATION'
            }}：</label>{{ n.address }}</p>
            <!--            <p class="ppl"><label>{{ language==0?'报名截止':'Registration Deadline' }}：</label>{{ n.signEndTime?.slice(0,10) }}</p>-->
            <p v-if="n.contactPerson" class="ppl"><label>{{
              language == 0 ? '联&nbsp;系&nbsp;人' : 'CONTACT PERSON'
            }}：</label>{{ n.contactPerson }}</p>
            <p class="ppl"><label>{{ language == 0 ? '联系电话' : 'TEL' }}：</label>086-{{ n.contactTelno }}</p>
            <p v-if="n.contactEmail" class="ppl"><label>{{
              language == 0 ? '邮&nbsp;&nbsp;&nbsp;&nbsp;箱' : 'EMAIL'
            }}：</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 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 v-if="n.time>0" class="btn-lineG mb20 mauto" style="display: block;">
              <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 class="btn-lineG mb20 mauto text-center" style="opacity: 0.5;">
              {{ language == 0 ? '报名已结束' : 'Registration has ended' }}
            </div>
            <p class="text-gray uppercase">{{
              language == 0 ? '报名截止' : 'Registration Deadline'
            }}：{{ n.signEndTime?.slice(0, 10) }}</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  
  <el-empty v-if="list?.length == 0" :image="`/img/order_no.png`" :image-size="228" 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 (const 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 lang="scss" scoped>
.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>