<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 v-if="matchId" :match-id="matchId"/>
        <group-info-row />
        <coach-info-row  v-if="matchId" :match-id="matchId" :language="language"/>
        <div style="margin: 20px">

        <div class="mt20">
          <div class="leftboderTT">{{ language==0?'参赛人员清单':'Participant List' }}</div>
          <sign-info-table class="mt20" :match-id="matchId" :list="signInfoList" :hasAction="false"/>
        </div>
        <div class="mt20">
          <div class="leftboderTT">{{ language==0?'设项报名清单':'Event Registration List' }}</div>
          <zu-table class="mt20"  :list="zuTableList" :hasAction="false"/>
        </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>{{ language==0?'报名费':'Registration Fee' }}：</label><span>¥{{form.cptRegistrationFee?.totalFee}}</span></div>
              <div class="item"><label>{{ language==0?'保险费':'Insurance Fee' }}：</label><span>¥{{form.cptInsuranceFee?.totalFee}}</span></div>
              <div class="item"><label>{{ language==0?'费用总计':'Total Cost' }}：</label><span>¥{{form.totalFee}}</span></div>
            </div>
          </el-col>
          <el-col :lg="8" :xs="24" class="text-right pd20">
            <el-link  type="primary" @click="exportSignList(1)"><el-icon><Upload /></el-icon>
              {{ language==0?'导出参赛人员清单':'Export Participant List' }}</el-link>
            <el-link  type="primary" @click="exportSignList(2)"><el-icon><Upload /></el-icon>
              {{ language==0?'导出设项报名清单':'Registration Fee for Event Entry' }}</el-link>
          </el-col>
        </el-row>
        <div class="text-center pd20">
          <el-button type="primary" class="" plain round @click="goPrev()">{{ language == 0 ? "上一步" : 'Go back' }}</el-button>
          <el-button type="primary" class="" plain round @click="submitForm(0)">{{ language==0?'保存暂不提交审核':'Save, Do Not Submit for Review Yet' }}</el-button>
          <el-button type="primary" class="btn-lineG w200px" round @click="submitForm(1)">{{ language==0?'提交审核':'Submit for review' }}</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 SignInfoTable from "@/viewsPc/match/components/signInfo-table"
import {getCurrentInstance, 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";
import ZuTable from "@/viewsPc/match/components/zu-table";
import {ElMessageBox} from "element-plus";
import {exportCn} from "@/apiPc/match";
const route = useRoute()
const router = useRouter()
const activeStep = ref(3)
const groupInfo = useUserStore().group || {}
const language = ref(cache.local.get('language') || 0)
const groupId = ref()
const form = ref({})
const matchId = ref(route.query.matchId)
const signInfoList = ref([])
const zuTableList = ref([])
const {proxy} = getCurrentInstance()
onMounted(()=>{
  // console.log(route.query)
  matchId.value = route.query.matchId
  groupId.value = route.query.groupId || 0
    getSignList()
    getFee(groupId.value)
})


function getSignList() {
  match.getMySignInfoList({
    cptId: matchId.value,
    groupId: groupId.value
  }).then(res=>{
    signInfoList.value = res.data.singleData
    zuTableList.value = res.data.zuData
  })
}
const goPrev = () => {
  // router.go(-1)
  router.push({
    name: 'chooseSportsman',
    query: {
      matchId: matchId.value,
      groupId: groupId.value
    }
  })
}
const getFee = (entryId) => {
  match.getTotalFee({
    entryId: entryId,
    cptId: matchId.value
  }).then(res => {
    form.value = res.data
  })
}
const submitForm = (n) => {
  if(n==0){
    ElMessageBox.confirm(`您当前的操作为暂存，并不是提交审核，必须在报名截止时间XXXX-XX-XX之前完成提交。\n` +
        '\n' +
        '您也可以在个人中心-我的报名中，找到这条报名，点击提交审核。','提示',{
      confirmButtonText: '去个人中心',
      cancelButtonText: '知道了',
      type: 'warning'
    }).then((res)=>{
      console.log(res)
      router.push({name: 'myMatch'})
    })
    return
  }
  match.commitSign({
    groupId: groupId.value,
    cptId: matchId.value
  }).then(res=>{
    router.push({
      name:`commitDone`,
      params: {
        orderId: res.data
      }
    })
  })
}
function exportSignList(n) {
  var obj = {
    cptId: matchId.value,
    groupId: groupId.value,
    type:n
  }
  var fileName
  if(language.value==0){
    if(n==1){
      fileName = '参赛人员清单'
    }else {
      fileName = '设项报名清单'
    }
    proxy.download('/league/sign/exportCn', {
      ...obj
    }, `${fileName}_${new Date().getTime()}.xlsx`)
  } else {
    if(n==1){
      fileName = 'Participant List'
    }else {
      fileName = 'Registration Fee for Event Entry'
    }
    proxy.download('/league/sign/exportEn', {
      ...obj
    }, `${fileName}_${new Date().getTime()}.xlsx`)
  }

}
</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>