<template>
  <div>
    <div class="box ph-30">
      <el-card class="mb20">
        <team-sign-step :language="language" :active-step="activeStep"/>
      </el-card>
      <el-card :body-style="{ padding: '0px' }">
        <match-info-row :matchInfo="matchInfo" :language="language"/>
        <group-info-row :groupInfo="groupInfo" :language="language"/>
        <coach-info-row :names="names" :language="language"/>
        <div style="margin: 20px">

        <div class="mt20">
          <div class="leftboderTT">参赛人员清单</div>
          <el-table :data="tableData" border style="width: 100%" class="mt20" :span-method="arraySpanMethod">
            <el-table-column label="所属国家"/>
            <el-table-column prop="name" label="姓氏" width="180" align="center"></el-table-column>
            <el-table-column label="名"/>
            <el-table-column label="短名"/>
            <el-table-column prop="sex" label="性别" width="180" align="center"></el-table-column>
            <el-table-column prop="age" label="年龄" width="180" align="center"></el-table-column>
            <el-table-column label="出生日期" align="center"/>
            <el-table-column prop="phone" label="手机号码" width="180" align="center"></el-table-column>
            <el-table-column label="邮箱"/>
            <el-table-column label="证件类型" align="center"/>
            <el-table-column label="证件号码"/>
            <el-table-column label="报项" fixed="right">
              <template #default="scope">
                <ol>
                  <li v-for="item in scope.row.items" :key="item.id">{{ item.name }}</li>
                </ol>
              </template>
            </el-table-column>
            <el-table-column label="保险费" fixed="right" align="center">
              <template #default="scope">
                <span class="text-primary">¥{{ scope.row.signFee }}/人</span>
              </template>
            </el-table-column>
          </el-table>

        </div>
        <div class="mt20">
          <div class="leftboderTT">设项报名清单</div>
          <!--            报项列表-->
          <el-table :data="tableData" border style="width: 100%" class="mt20">
            <el-table-column label="组别代码" align="center"/>
            <el-table-column label="组别" align="center"/>
            <el-table-column label="舞种" align="center"/>
            <el-table-column label="参赛说明"/>
            <el-table-column label="参赛运动员"/>
            <el-table-column label="补充信息"/>
            <el-table-column label="报名费" align="center">
              <template #default="scope">
                <span class="text-primary">¥{{ scope.row.signFee }}/人</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        </div>


      </el-card>
      <el-card class="mt20" :body-style="{padding: '0px'}">
        <el-row class="priceBar">
          <el-col :lg="16" :xs="24" class="pd20">
            <div class="flex">
              <div class="item"><label>报名费：</label><span>¥3000</span></div>
              <div class="item"><label>保险费：</label><span>¥3000</span></div>
              <div class="item"><label>费用总计：</label><span>¥6000</span></div>
            </div>
          </el-col>
          <el-col :lg="8" :xs="24" class="text-right pd20">
            <el-link  type="primary"><el-icon><Upload /></el-icon>导出参赛人员清单</el-link>
            <el-link  type="primary"><el-icon><Upload /></el-icon>导出设项报名清单</el-link>
          </el-col>
        </el-row>
        <div class="text-center pd20">
          <el-button type="primary" class="" plain round @click="goPrev()">上一步</el-button>
          <el-button type="primary" class="" plain round @click="submitForm()">保存暂不提交审核</el-button>
          <el-button type="primary" class="btn-lineG w200px" round @click="submitForm()">提交审核</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import TeamSignStep from './components/teamSignStep'
import MatchInfoRow from "@/viewsPc/match/components/matchInfo-row"
import GroupInfoRow from "@/viewsPc/match/components/groupInfo-row"
import CoachInfoRow from "@/viewsPc/match/components/coachInfo-row"

import {ref} from "vue"
import cache from "@/plugins/cache";
import {onMounted} from "@vue/runtime-core";
import * as match from "@/apiPc/match"
import {useRoute, useRouter} from "vue-router";
import useUserStore from "@/store/modules/user";
const route = useRoute()
const router = useRouter()
const activeStep = ref(3)
const matchInfo = ref({})
const groupInfo = useUserStore().group || {}
const language = ref(cache.local.get('language') || 0)
const groupId = ref()
const form = ref({})
const matchId = ref()
const names = ref({})
onMounted(()=>{
  console.log(route.query)
  groupId.value = route.query.groupId || 0
  matchId.value = route.query.matchId
  getMatch()
  getFee()
  if(groupId.value!=0){
    tuandui()
  } else {
    geren()
  }
})
const getMatch = () => {
  match.getMatchById({ id: matchId.value }).then(res => {
    matchInfo.value = res.data
  })
}
function geren() {
  match.getChooseDoneSingleCoachs(matchId.value).then(res => {
    names.value = res.data
  })
}

function tuandui() {
  match.getChooseDoneGroupCoachs(matchId.value, groupId.value).then(res => {
    names.value = res.data
  })
}
const goPrev = () => {
  router.go(-1)
}
const getFee = () => {
  console.log(groupId.value)

  match.getTotalFee({
    entryId: groupId.value,
    cptId: matchId.value
  }).then(res => {
    form.value = res.data
  })
}
</script>

<style scoped lang="scss">
.leftboderTT{font-weight: 600;
  font-size: 16px;
  color: #453DEA;}
.bg-lineg {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  text-align: center;
}
.priceBar{
  background: #FAFBFD;
  .flex{display: flex;
    .item{font-size: 16px;margin-right: 15px;
      label{color: #95A1A6;}
    }
  }
}
.text-right{text-align: right;
  a{margin-left: 20px;}
}
.border-info{
  .item{margin: 5px 0;color: #4C5359;  font-size: 14px;
    label{font-size: 14px;margin-right: 14px}
  }
}
</style>