<template>
  <div>
    <div class="box ph-30">
      <el-card class="mb20">
        <team-sign-step v-if="user.utype=='2'" :language="language" :active-step="activeStep"/>
        <single-sign-step v-if="user.utype=='1'" :language="language" :active-step="2"/>
      </el-card>
      <el-card :body-style="{ padding: '0px' }">
        <match-info-row v-if="matchId" :match-id="matchId"/>
        <group-info-row v-if="matchId&&groupId!=0" :match-id="matchId" :group-id="groupId"/>
        <coach-info-row  v-if="matchId&&user.utype=='2'" :match-id="matchId" :language="language"/>



        <div style="margin: 20px">
          <div class="leftboderTT" v-if="user.utype=='1'&&myMemberTable.length>0">{{ language==0?'随行人员清单':'List of accompanying personnel' }}
          </div>
          <div v-if="user.utype=='1'&&myMemberTable.length>0">
            <el-table class="mt20" :data="myMemberTable" border>
              <el-table-column type="index" :label="language==0?'序号':'Index'" width="70" align="center"/>
              <el-table-column :label="language==0?'姓氏':'surname'" prop="xing" min-width="100"/>
              <el-table-column :label="language==0?'名':'name'" prop="ming" min-width="100"/>
              <el-table-column :label="language==0?'护照号':'Passport number'" prop="idcCode" min-width="120"/>
              <el-table-column :label="language==0?'出生日期':'Birthday'" prop="birth"/>
              <el-table-column :label="language==0?'性别':'Sex'" prop="sexStr"/>
              <el-table-column :label="language==0?'角色':'Role'" min-width="160">
                <template #default="scope">
                  <div class="roletd">
                    <span v-for="item in scope.row.label?.split(',')" :key="item.id" class="text-primary">
                      <span v-if="item==='0'" class="ml5">{{ language == 0 ? '运动员' : 'athletes' }}</span>
                      <span v-if="item==='1'" class="ml5">{{ language == 0 ? '教练' : 'coach' }}</span>
                      <span v-if="item==='2'" class="ml5">{{ language == 0 ? '领队' : 'team leader' }}</span>
                      <span v-if="item==='3'" class="ml5">{{ language == 0 ? '队医' : 'team doctor' }}</span>
                      <span v-if="item==='4'" class="ml5">{{ language == 0 ? '翻译' : 'translator' }}</span>
                      <span v-if="item==='5'" class="ml5">{{ language == 0 ? '官员' : 'official' }}</span>
                      <span v-if="item==='6'" class="ml5">{{ language == 0 ? '其他' : 'other' }}</span>
                    </span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        <div class="mt20">
          <div class="leftboderTT">{{ language==0?'参赛人员清单':'Participant List' }}
            <div class="fr">
              <el-input size="small" v-model="zuQuery.athName" :prefix-icon="Search"
                        @change="getSignList" clearable/>
            </div>
          </div>
          <sign-info-table class="mt20" :showSummary="true" :total="signTotal" :match-id="matchId" :list="signInfoList" :hasAction="false"/>
        </div>
        <div class="mt20">
          <div class="leftboderTT">{{ language==0?'设项报名清单':'Event Registration List' }}
            <div class="fr">
              <el-input size="small" v-model="zuQuery.groName" :prefix-icon="Search"
               @change="getSignList" clearable/>
            </div>
          </div>
          <zu-table class="mt20" :showSummary="true" :total="zuTotal" :list="zuTableList" :hasAction="false"/>
        </div>
        </div>


      </el-card>
      <el-card class="mt20" :body-style="{padding: '0px'}">
        <el-row class="priceBar">
          <el-col :lg="12" :xs="24" class="pd20">
            <div class="flex">
              <div class="item"><label>{{ language==0?'报名费':'Registration Fee' }}：</label><span>{{ language==0?'¥':'€' }}{{form.cptRegistrationFee?.totalFee}}</span></div>
              <div class="item"><label>{{ language==0?'保险费':'Insurance Fee' }}：</label><span>{{ language==0?'¥':'€' }}{{form.cptInsuranceFee?.totalFee}}</span></div>
              <div class="item"><label>{{ language==0?'费用总计':'Total Cost' }}：</label><span>{{ language==0?'¥':'€' }}{{form.totalFee}}</span></div>
            </div>
          </el-col>
          <el-col :lg="12" :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-link  type="primary" @click="exportPdf"><el-icon><Upload /></el-icon>
              {{ language==0?'导出pdf':'Export PDF' }}
            </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 {Search} from "@element-plus/icons-vue";
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 SingleSignStep from "@/viewsPc/match/components/singleSignStep";
import {useStorage} from "@vueuse/core/index";
const route = useRoute()
const router = useRouter()
const activeStep = ref(3)
const groupInfo = useUserStore().group || {}
const language= useStorage('language',0)
const groupId = ref(route.query.groupId || 0)
const form = ref({})
const matchId = ref(route.query.matchId)
const signInfoList = ref([])
const signEndTime = ref('')
const zuTableList = ref([])
const zuTotal = ref(0)
const signTotal = ref(0)
const myMemberTable = ref([])
const user = useUserStore().user
const {proxy} = getCurrentInstance()
const zuQuery = ref({
  cptId: matchId.value,
  groupId: groupId.value
})
onMounted(()=>{
  Promise.all([
    getMatch(),
    getSignList(),
    getFee(groupId.value)
  ])
  if(user.utype=='1'){
    getMyMemberTable()
  }
})
function getMatch() {
  match.getMatchById({
    id: matchId.value
  }).then(res => {
    signEndTime.value = res.data.signEndTime
  })
}
function getMyMemberTable() {
  match.getPerPersonList({cptId: matchId.value, searchLabels: '1,2,3,4,5,6'}, user.userId).then(res => {
    myMemberTable.value = res.rows
  })
}
function getSignList() {
  match.getMySignInfoList(zuQuery.value).then(res=>{
    zuTotal.value = 0
    signTotal.value = 0
    signInfoList.value = res.data.singleData
    zuTableList.value = res.data.zuData
    for(var s of signInfoList.value){
      signTotal.value = signTotal.value + Number(s.insuranceFee)
    }
    for(var z of zuTableList.value){
      zuTotal.value = zuTotal.value + Number(z.project.serviceFee)
    }
  })
}
const goPrev = () => {
  if(user.utype=='2'){
    router.push({
      name: 'chooseSportsman',
      query: {
        matchId: matchId.value,
        groupId: groupId.value
      }
    })
  }
  if(user.utype=='1'){
    router.push({
      name: 'chooseProject',
      params:{
        id:matchId.value
      },
      query: {
        matchId: matchId.value
      }
    })
  }

}
const getFee = (entryId) => {
  match.getTotalFee({
    entryId: entryId,
    cptId: matchId.value
  }).then(res => {
    form.value = res.data
    // zuTotal.value = form.value.cptRegistrationFee?.totalFee
    // signTotal.value = form.value.cptInsuranceFee?.totalFee
  })
}
const submitForm = (n) => {
  if(n==0){
      ElMessageBox.confirm(language.value==0?`您当前的操作为暂存，并不是提交审核，
        必须在报名截止时间${signEndTime.value.substring(0,10)}之前完成提交。
        您也可以在个人中心-我的报名中，找到这条报名，点击提交审核。`:
              `Your current operation is temporary and not submitted for review,
              Submission must be completed before the registration deadline${signEndTime.value.substring(0,10)}。
              You can also find this registration in the My Registration section of your personal center and click submit for review.`,
          language.value == 0 ? '提示' : 'Tip', {
            confirmButtonText: language.value == 0 ? '去个人中心' : 'Go My Registration ',
            cancelButtonText: language.value == 0 ? '知道了' : 'OK',
            type: 'warning'
          }).then((res) => {
        console.log(res)
        router.push({name: 'myMatch'})
      })
    return
  }
  ElMessageBox.confirm(language.value == 0 ? '确定提交吗？' : 'Are you sure to submit?',
      language.value == 0 ? '提示' : 'Tip',
      {
        confirmButtonText: language.value == 0 ? '确定' : 'Yes',
        cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
      }).then(()=>{
      match.commitSign({
        groupId: groupId.value||0,
        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`)
  }

}
function exportPdf() {
  var obj = {
    cptId: matchId.value,
    groupId: groupId.value
  }
  var fileName
  if(language.value==0){
    fileName = '设项报名清单'
    proxy.download('/pdf/exportMySignInfoList', {
      ...obj
    }, `${fileName}_${new Date().getTime()}.pdf`)
  } else {
    fileName = 'Registration Fee for Event Entry'
    proxy.download('/pdf/exportMySignInfoList', {
      ...obj
    }, `${fileName}_${new Date().getTime()}.pdf`)
  }

}
</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;}
      span{font-family: DIN Alternate;}
    }
  }
}
.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>