<template>
  <div>
    <div class="box ph-30">
      <el-card class="mb20">
        <team-sign-step v-if="user.utype=='2'" :active-step="activeStep" :language="language" />
        <single-sign-step v-if="user.utype=='1'" :active-step="2" :language="language" />
      </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" :group-id="groupId" :match-id="matchId" />
        <coach-info-row v-if="matchId&&user.utype=='2'" :language="language" :match-id="matchId" />
        <div style="margin: 20px">
          <div v-if="user.utype=='1'&&myMemberTable.length>0" class="leftboderTT">
            {{ language == 0 ? '随行人员清单' : 'List of accompanying personnel' }}
          </div>
          <div v-if="user.utype=='1'&&myMemberTable.length>0">
            <el-table :data="myMemberTable" border class="mt20">
              <el-table-column :label="language==0?'序号':'Index'" align="center" type="index" width="70" />
              <el-table-column :label="language==0?'姓氏':'Surname'" min-width="100" prop="xing" />
              <el-table-column :label="language==0?'名':'Name'" min-width="100" prop="ming" />
              <el-table-column :label="language==0?'国家/地区':'Nationality'" min-width="100" prop="countryName" />
              <!--              <el-table-column :label="language==0?'国家':'Nationality'" prop="countryStr" min-width="120"/>-->
              <!--              <el-table-column :label="language==0?'护照号':'Passport Number'" prop="idcCode" min-width="120"/>-->
              <!--              <el-table-column v-show="!isNational" :label="language==0?'出生日期':'Birthday'" prop="birth"/>-->
              <el-table-column :label="language==0?'性别':'Gender'" 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 ? '领队' : 'Head of team' }}</span>
                      <span v-if="item==='4'" class="ml5">{{ language == 0 ? '队医' : 'Team Doctor' }}</span>
                      <span v-if="item==='5'" class="ml5">{{ language == 0 ? '翻译' : 'Interpreter' }}</span>
                      <span v-if="item==='6'" class="ml5">{{ language == 0 ? '官员' : 'Official' }}</span>
                      <span v-if="item==='3'" 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
                  v-model="zuQuery.athName" :prefix-icon="Search" clearable
                  size="small" @change="getSignList"
                />
              </div>
            </div>
            <sign-info-table
              :has-action="false"
              :is-national="isNational"
              :list="signInfoList"
              :match-id="matchId"
              :show-summary="route.query.buy=='1'"
              :total="signTotal" class="mt20"
            />
          </div>
          <div class="mt20">
            <div class="leftboderTT">{{ language == 0 ? '设项报名清单' : 'LIST OF REGISTERED COMPETITIONS' }}
              <div class="fr">
                <el-input
                  v-model="zuQuery.groName" :prefix-icon="Search" clearable
                  size="small" @change="getSignList"
                />
              </div>
            </div>
            <zu-table
              :has-action="false"
              :list="zuTableList"
              :show-summary="true"
              :total="zuTotal"
              class="mt20"
            />
          </div>
        </div>
      </el-card>
      <!--      参赛服务费-->
      <el-card :body-style="{padding: '0px'}" class="mt20">
        <el-row class="priceBar">
          <el-col :lg="12" :xs="24" class="pd20">
            <div class="flex">
              <div v-if="form.cptRegistrationFee?.totalFee>0" class="item">
                <label>{{
                  language == 0 ? '参赛服务费' : 'REGISTRATION FEE'
                }}：</label>
                <span>{{ language == 0 ? '¥' : '€' }}{{ form.cptRegistrationFee?.totalFee }}</span>
              </div>
              <div v-if="route.query.buy=='1'&& form.cptInsuranceFee?.totalFee>0" class="item">
                <label>{{
                  language == 0 ? '保险费' : 'INSURANCE'
                }}：</label>
                <span>{{ language == 0 ? '¥' : '€' }}{{ form.cptInsuranceFee?.totalFee }}</span>
              </div>
              <div v-if="form.totalFee>0" 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 ? '导出设项报名清单' : 'EXPORT LIST OF REGISTERED COMPETITIONS' }}
            </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 class="" plain round type="primary" @click="goPrev()">{{
            language == 0 ? "上一步" : 'Go back'
          }}
          </el-button>
          <el-button class="" plain round type="primary" @click="submitForm(0)">
            {{ language == 0 ? '保存暂不提交审核' : 'Save, Do Not Submit for Review Yet' }}
          </el-button>
          <el-button class="btn-lineG w200px" round type="primary" @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 form = ref({})
const signInfoList = ref([])
const signEndTime = ref('')
const zuTableList = ref([])
const zuTotal = ref(0)
const signTotal = ref(0)
const groupId = ref(route.query.groupId || 0)
const matchId = ref(route.query.matchId)
const isNational = ref(route.query.isNational || false)
const myMemberTable = ref([])
const user = useUserStore().user
const { proxy } = getCurrentInstance()
const zuQuery = ref({
  cptId: matchId.value,
  groupId: groupId.value,
  buy: route.query.buy// 0不购买，1购买
})
const matchData = ref({})
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
    matchData.value = res.data
  }).catch(err => {
    router.push({ name: 'matchList' })
  })
}

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
    console.log(signInfoList.value)
    zuTableList.value = res.data.zuData
    for (var s of signInfoList.value) {
      signTotal.value = (Number(signTotal.value) + Number(s.insuranceFee)).toFixed(2)
    }
    for (var z of zuTableList.value) {
      zuTotal.value = (Number(zuTotal.value) + Number(z.project.serviceFee)).toFixed(2)
    }
  })
}

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,
    buy: route.query.buy// 0不购买，1购买"
  }).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 ? '请谨慎提交！请务必确保所有成员全部报名后，一次性提交。提交后不可修改！' : 'Please be cautious! Please make sure that all members have signed up ，it cannot be modified after submission!',
    language.value == 0 ? '注意' : 'Note',
    {
      confirmButtonText: language.value == 0 ? '确定' : 'Yes',
      cancelButtonText: language.value == 0 ? '取消' : 'Cancel'
    }).then(() => {
    match.commitSign({
      groupId: groupId.value || 0,
      cptId: matchId.value,
      buy: route.query.buy// 0不购买，1购买
    }).then(res => {
      router.push({
        name: `commitDone`,
        params: {
          orderId: res.data
        }
      })
    })
  }
  )
}

function exportSignList(n) {
  var obj = {
    cptId: matchId.value,
    groupId: groupId.value,
    type: n,
    buy: route.query.buy// 0不购买，1购买
  }
  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 = 'Export LIST OF REGISTERED COMPETITIONS'
    }
    proxy.download('/league/sign/exportEn', {
      ...obj
    }, `${fileName}_${new Date().getTime()}.xlsx`)
  }
}

function exportPdf() {
  var obj = {
    cptId: matchId.value,
    groupId: groupId.value,
    buy: route.query.buy// 0不购买，1购买
  }
  var fileName
  if (language.value == 0) {
    fileName = '设项报名清单'
    proxy.download('/pdf/exportMySignInfoList', {
      ...obj
    }, `${fileName}_${new Date().getTime()}.pdf`)
  } else {
    fileName = 'LIST OF REGISTERED COMPETITIONS'
    proxy.download('/pdf/exportMySignInfoList', {
      ...obj
    }, `${fileName}_${new Date().getTime()}.pdf`)
  }
}
</script>

<style lang="scss" scoped>
.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;
      text-transform: uppercase;
    }
  }
}
</style>