<template>
  <div class="app-container">
    <div class="mt30" />
    <div class="box mb20 ">
      <el-card class="mb20">
        <el-row :gutter="20">
          <el-col :lg="7" :md="24" :xl="6" >
            <img class="mauto w100" :src="fillImgUrl(matchData.coverUrl)" >
          </el-col>
          <el-col :lg="9" :md="12" :xl="10">
            <h3>
              {{ matchData.name }}
            </h3>
            <p class="ppl"><label class="bm1">比赛时间：</label>{{matchData.beginTime?.slice(0,10)}} 至 {{ matchData.endTime?.slice(0,10) }}</p>
            <p class="ppl"><label class="bm2">赛事级别：</label>{{ matchData.level }}</p>
            <p class="ppl"><label class="bm3">地&ensp;&ensp;&ensp;&ensp;点：</label>{{ matchData.address }}</p>
            <p class="ppl"><label class="bm4">报名截止：</label>{{ matchData.signEndTime?.slice(0,10) }}</p>
          </el-col>
          <el-col :lg="8" :md="12" :xl="8"  v-if="matchData.type=='0'">
            <p class="countDownTitle"><span>报名截止倒计时</span></p>
            <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒">
              <template #default="timeData">
                <span class="block">{{ timeData.days }}</span>
                <span class="colon">天</span>
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">时</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">分</span>
                <span class="block">{{ timeData.seconds }}</span>
                <span class="colon">秒</span>
              </template>
            </van-count-down>

            <div>
              <a class="btn-lineG mb20" @click="choseSignType" style="display: block;text-align: center;">我要报名</a>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <el-row gutter="14">
        <el-col :lg="4">
          <div class="funcBtn" @click="building">
            <img src="@/assets/dance/btn04.png"/>
            <h4>票务预订</h4>
          </div>
        </el-col>
        <el-col :lg="4">
          <div class="funcBtn" @click="building">
            <img src="@/assets/dance/btn01.png"/>
            <h4>酒店预约</h4>
          </div>
        </el-col>
        <el-col :lg="4">
          <div class="funcBtn" @click="building">
            <img src="@/assets/dance/btn02.png"/>
            <h4>车辆预约</h4>
          </div>
        </el-col>
        <el-col :lg="4">
          <div class="funcBtn" @click="building">
            <img src="@/assets/dance/btn03.png"/>
            <h4>餐饮预订</h4>
          </div>
        </el-col>
        <el-col :lg="4">
          <div class="funcBtn" @click="building">
            <img src="@/assets/dance/btn05.png"/>
            <h4>化妆预约</h4>
          </div>
        </el-col>
        <el-col :lg="4">
          <div class="funcBtn" @click="building">
            <img src="@/assets/dance/btn06.png"/>
            <h4>拍照预约</h4>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-if="matchData.type=='0'">
        <el-col :lg="18">
          <el-card :body-style="{'padding':'0'}">
            <div class="lineHead">
              <ul>
                <li v-for="l in menu" :key="l.name" @click="changeMenu(menu,l)" :class="l.active==1?'active':''">{{l.name}}</li>
              </ul>
            </div>
            <matchInfo :form="matchData"  v-if="menu[0].active==1"/>
            <div v-if="menu[1].active==1">
              <div class="collapsebox">
                <div class="pd20">
                  <table class="table" cellspacing="0" cellpadding="0" v-if="matchData.cptProjectList?.length > 0">
                    <tr>
                      <th>组别编号</th>
                      <th>组别名称</th>
                      <th>舞种</th>
                      <th>舞种明细</th>
                      <th>参赛性别</th>
                      <th>参赛年龄</th>
                      <th>服务费（元）</th>
                    </tr>
                    <tr  v-for="(p,index) in matchData.cptProjectList" :key="index">
                      <td>{{ p.code }}</td>
                      <td>{{ p.name }}</td>
                      <td>{{ p.danceType }}</td>
                      <td>{{ p.danceTypeDetailStr }}</td>
                      <td>{{ p.playTypeStr }}</td>
                      <td>{{ p.birthPeriod }}</td>
                      <td>¥{{ p.serviceFee }}</td>
                    </tr>
                  </table>
                </div>

                <el-empty image="@/assets/img/order_no.png" :image-size="228"  v-if="matchData.cptProjectList?.length == 0" description=" "/>
              </div>
            </div>
            <match-schedule-list :match-data="matchData"  v-if="menu[2].active==1"/>
            <div v-if="menu[3].active==1">
              <el-row :gutter="20" v-if="matchData.signType == '0'">
                <el-col v-for="t in signDoneGroupList" :key="t.id" :span="8">
                  <div class="teamItem">
                    <el-avatar :size="60" :src="t.imgUrl||t.avatar" />
                    <span class="name">{{ t.name }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20" v-else>
                <el-col :span="24" v-for="(t,index) in signDoneGroupList" :key="t.id">
                  <div class="nowteamItem">
                    <span>{{index+1}}.</span>
                    <el-avatar :size="80" :src="t.imgUrl||t.avatar" :fit="cover"/>
                    <div class="info">
                      <h3 class="name">{{ t.name }}</h3>
                      <p v-if="t.extraInfo">
                          <span v-for="(ee,index) in JSON.parse(t.extraInfo)" :key="index" v-show="(ee?.type == '0'||ee?.type == '4')&&index<2">
                            {{ee.value}}&ensp;&ensp;
                          </span>
                      </p>
                    </div>
                    <p class="rr"><span>{{t.renCi}}</span>  人参赛</p>
                  </div>
                </el-col>
              </el-row>
              <el-empty image="@/assets/img/order_no.png" :image-size="228" v-if="(signDoneGroupList==null)||(signDoneGroupList.length==0)" description="" />
            </div>
            <div v-if="menu[4].active==1">
<!--              成绩-->
              <el-empty image="@/assets/img/order_no.png" :image-size="228"  description="暂无成绩" />
            </div>
            <div v-if="menu[5].active==1" class="pd20">
              <div class="xzbox" v-html="matchData.signKnow">

              </div>
            </div>
          </el-card>
          <div style="height: 20px"></div>

        </el-col>
        <el-col :lg="6">
          <match-news/>
        </el-col>
      </el-row>

      <el-row v-if="matchData.type=='1'" class="mb20">
        <el-col :lg="24">
          <el-card :body-style="{'padding':'0'}">
            <div class="lineHead">
              <ul>
                <li v-for="l in menu1" :key="l.name" @click="changeMenu(menu1,l)" :class="l.active==1?'active':''">{{l.name}}</li>
              </ul>
            </div>
<!--            分站赛-->
            <substation-list v-if="menu1[0].active==1" :list="matchData.cpts"/>
            <matchInfo :form="matchData"  v-if="menu1[1].active==1"/>
            <match-schedule-list :match-data="matchData"  v-if="menu1[2].active==1"/>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import MatchInfo from '@/viewsPc/match/components/matchInfo'
import MatchScheduleList from "@/viewsPc/match/components/matchScheduleList";
import MatchNews from "@/viewsPc/match/components/matchNews";
import SubstationList from "@/viewsPc/match/components/substation-list";

import { getCurrentInstance, ref } from 'vue'
import { reactive, onMounted } from '@vue/runtime-core'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()
import * as match from '@/apiPc/match'
import { toRefs } from '@vueuse/shared'
import {dayjs, ElMessage} from 'element-plus'
import useUserStore from "@/store/modules/user";
const data = reactive({
  matchData: {},
  matchId: 0,
  groupId: '',
  activeName2:'first',
  popupGroupList:false,
  menu:[{name:'赛事详情',active:1},{name:'赛事设项',active:0},{name:'日程',active:0},{name:'参赛队',active:0},{name:'成绩',active:0},{name:'报名须知',active:0}],
  menu1:[{name:'分站赛',active:1},{name:'赛事详情',active:0},{name:'日程',active:0}],
  signDoneGroupList: [],
  time:''
})
const {time,matchData,matchId,groupId,activeName2,popupGroupList,menu,menu1,signDoneGroupList} = toRefs(data)
const group = useUserStore().group
const user = useUserStore().user
onMounted(() => {
  if(group){
    groupId.value = group.id
  } else {
    groupId.value = 0
  }
  match.getMaList().then((res) => {
    if(route.params.id!=0){
      matchId.value = route.params.id
    } else {
      matchId.value = res.rows[0].id
    }
    getMatch(matchId.value)
    getGroupListByCptId(matchId.value)
  })

})
function building() {
  ElMessage.warning('暂未开发，敬请期待！')
}
function getMatch(id) {
  if(id!=0)
  match.getMatchById({ id: id }).then(res => {
    matchData.value = res.data
    var today = dayjs().format('YYYY-MM-DD HH:mm:ss')
    time.value = dayjs(res.data.signEndTime).diff(today, 'millisecond')
  })
}
function getGroupListByCptId(id) {
  match.getGroupListByCptId(id).then(res => {
    signDoneGroupList.value = res.data
  })
}
function changeMenu(menu,l){
  for(const n of menu){
    if(n==l){
      n.active = 1
    } else {
      n.active = 0
    }
  }
}
function choseSignType() {
  if(!user){
    ElMessage.warning('请登录')
    return
  }
  console.log(matchData.value.signType)
  // checkIsSign().then(() => {
    if (matchData.value.signType == '0'||(matchData.value.signType == '2' && user.utype == '1')) {
      // 个人报名
      // router.push({
      //   path: `${matchId.value}/singleSign`
      // })
      router.push({
        name: `chooseCoach`,
        query: {
          matchId: matchId.value,
          signType: matchData.value.signType
        }
      })
    }
    if(matchData.value.signType == '1'||(matchData.value.signType == '2' && user.utype == '2')){
      router.push({
        path: `${matchId.value}/teamSign`,
        query: {
          matchId: matchId.value,
          groupId: groupId.value,
          signType: matchData.value.signType
        }
      })
    }
  // })
}

// 获取已报信息
function checkIsSign() {
  var obj = {
    cptId: matchId.value,
    groupId: groupId.value
  }
  return match.getMySignInfo(obj).then(res => {
    if (res.data.type == '1') {
      ElMessage.error('已报名，不能重复报名')
      return Promise.reject('rejected message')
    }
  })
}
</script>

<style scoped lang="scss">

.indexTitle{margin: 20px 0 12px;
  h3{
    font-size: 20px;
    color:var(--el-color-primary);
  }
}


.ppl{color: #29343C;
  label{color: #929AA0;}
}
.bm1{background: url("@/assets/dance/bm1.png") no-repeat left;background-size: contain;padding-left: 24px;}
.bm2{background: url("@/assets/dance/bm2.png") no-repeat left;background-size: contain;padding-left: 24px;}
.bm3{background: url("@/assets/dance/bm3.png") no-repeat left;background-size: contain;padding-left: 24px;}
.bm4{background: url("@/assets/dance/bm4.png") no-repeat left;background-size: contain;padding-left: 24px;}
.app-container {
  padding: 0;
  background: #F5F7F9;
}

.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;
}

.typeTag {
  border-radius: 10px 10px 10px 0px;
  padding: 2px 12px;
  background: #FF8124;
  font-size: 14px;
  color: #fff;
}

.matchItem {
  cursor: pointer;
  margin-bottom: 40px;
  height: 180px;
  background: #FFFFFF;
  position: relative;
  border-radius: 10px;

  .el-avatar {
    position: absolute;
    left: 20px;
    top: 30px;

    img {
      background: #fff;
    }
  }

  .info {
    padding: 12px 0 0 140px;

    p {
      font-size: 14px;
    }
  }

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

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

  &:hover h3 {
    font-weight: bold;
  }
}

.el-pagination {
  justify-content: center;
  --el-pagination-bg-color: none;
}

.kind {
  background: #fff;
  margin: 0 0 30px;

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

    li {
      margin: 0 0 20px;
      display: flex;
      align-items: center;
    }
  }
}

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

.match-tabs {
  background: #fff;
  padding: 10px 20px 20px;
}

.teamItem {
  height: 80px;
  background: #FBFCFD;
  border-radius: 10px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;

  .el-avatar {
    border: 1px solid #EEEEEE;
  }

  .name {
    margin-left: 15px;
    flex: 1;
    font-size: 14px;
  }
}

.grid-top {
  background: #fff;
  min-height: 300px;
  padding: 28px 28px 10px;
  border-radius: 10px;
  margin: 30px auto;
  position: relative;

  .cover {
    width: 420px;
    height: 250px;
    position: absolute;
    border-radius: 10px;
    background: #fff;
    object-fit: cover;
  }

  .info {
    padding-left: 440px;

    h3 {
      font-weight: 500;
      color: #000000;
      margin: 0 0 10px;
      font-size: 24px;
      img{margin-right: 10px}
      .typeTag {
        border-radius: 13px 13px 13px 0;
        margin-left: 10px;
      }
    }

    p {
      color: #7B7F83;
      font-size: 16px;
    }
    .countDownTitle{font-size: 14px;}
    .el-button.el-button--primary {
      background: #CA171D;
      border: none;
    }
  }
}

.gg {
  margin: 0 0 28px;

  h3 {border-left: 2px solid #BA2E29;    padding: 0 0 0 12px;
    margin: 20px 0 8px;
    font-weight: 500;
    font-size: 16px;
  }

  p {
    font-size: 16px;
    color: #000;
    margin: 0 0 8px;
    line-height: 24px;
    label{color: #7D8790;}
  }

  .pp {
    border: 1px solid rgba(186, 46, 41, 0.3);
    padding: 20px;
  }
}

.van-count-down {
  text-align: center;
  margin: 20px 0;
}

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

.block {
  display: inline-block;
  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;
}


.time-address {
  font-size: 15px;
  margin: 10px 0 0;
  color: #999;
}

.popList .teamItem {
  cursor: pointer;
}

.popList .teamItem:hover {
  background: #e7e7e7;
}

.richContent {
  overflow: hidden;
}

.richContent img {
  max-width: 100%;
}

.red-center {
  font-size: 24px;
  text-align: center;
  font-family: DIN Alternate;
  padding: 30px 0;
  font-weight: bold;
  color: #E60012;
}

.plist {
  dt {
    font-size: 14px;
  }

  dd {
    display: inline-block;
    margin: 0 15px 0 0;
  }

  dd.t {
    display: block;
    margin: 15px 0 6px;
    border-left: 3px solid #1ec886;
    line-height: 1;
    padding: 6px;
    background: #f5f5f5;
  }

  li {
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    cursor: pointer;
  }

  li:hover {
    background: #eee;
  }
}

.pp .el-link {
  margin-right: 15px;
  font-size: 16px;
}

:deep(.el-collapse-item__header) {
  font-weight: 500;
  font-size: 16px;
}

.pobtns {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

:deep(.el-tabs__item) {
  font-size: 16px;
}

.signButton {
  margin: 0 0 20px;

  button {
    width: 90%;background: var(--el-color-primary);
    font-size: 20px;margin: 30px auto 0;display: block;
    height: 50px;
  }
}

.el-timeline-item__timestamp.is-top {
  font-size: 16px;
}

.el-timeline-item__content {
  font-size: 16px;
  margin: 10px 0 0;
}

.typeTag.blue {
  background: #00a0e9;
}

.typeTag.green {
  background: #34cf96;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}

.table{width: 100%;border-left: 1px solid #e1e1e1;border-top:1px solid #e1e1e1;
  th{background: #eee;padding: 6px 10px;
    border-right: 1px solid #e1e1e1;
    border-bottom:1px solid #e1e1e1;
    font-size: 15px;
  }
  td{padding: 6px 10px;border-right: 1px solid #e1e1e1;font-size: 15px;
    border-bottom:1px solid #e1e1e1;vertical-align: middle;text-align: center;
    span{margin-right: 10px}
    span::after{content: ','}
    span:last-child::after{content: ''}
  }
}
.flexLine{display: flex;
  label{font-weight: normal}
}

.nowteamItem{
  height: 100px;
  background: #FBFCFD;
  border-radius: 10px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  .el-avatar {margin: 0 20px}
  .info{
    h3{margin: 0 0 15px;}
    p{margin: 0;color: #1ab394}
  }
  .rr{text-align: right;    flex: 1;
    span{color: #1ab394}
  }
}

.collapsebox{
  .el-collapse-item{margin-bottom: 15px;--el-collapse-content-bg-color:#F4F9FE;
    border: 2px solid #DDECFB;
    .table{background: #fff;}
  }
  .is-active{--el-collapse-header-bg-color:#F4F9FE}
  :deep(.el-collapse-item__header){padding: 0 20px;}
}
.funcBtns{display: flex;    justify-content: space-around;
  div{text-align: center;background: #F7FAFF;box-shadow:0 0 10px #d4cae4;
    border-radius: 15px;padding: 0px 10px 5px;
    img{}
    h4{margin: 0;font-size: 16px;}
  }
}
.table{white-space: nowrap}
@media (max-width: 800px) {
  .van-count-down{
    .block{margin: 0 10px;}
  }
  .colon{display: none;}
  .funcBtns{
    div{padding: 0 0 10px;
      margin: 0 5px;

    }
  }
}
</style>