<template>
  <el-dialog v-model="open" :title="title" width="1000px" append-to-body :close-on-click-modal="false">
    <div v-loading="loading">
      <h3 style="margin: 0;text-align: center;">
        {{ list[0]?.signInfo[0]?.cptName }}
        <el-tag v-if="list[0]?.signInfo[0]?.cptSignType=='0'" type="success">个人报项</el-tag>
        <el-tag v-if="list[0]?.signInfo[0]?.cptSignType=='1'">参赛队报项</el-tag>
        <el-tag v-if="list[0]?.signInfo[0]?.cptSignType=='2'" type="warning">参赛队-队伍报项</el-tag>
      </h3>

      <el-descriptions :column="2">
        <el-descriptions-item label="比赛时间">{{ list[0]?.signInfo[0]?.cptBeginTime.substring(0,10) }}- {{ list[0]?.signInfo[0]?.cptEndTime.substring(0,10) }}</el-descriptions-item>
        <el-descriptions-item label="审核状态：">
          <el-tag v-if="list[0]?.signInfo[0]?.stage=='0'">未提交</el-tag>
          <el-tag v-if="list[0]?.signInfo[0]?.stage=='1'">已提交</el-tag>
          <el-tag v-else-if="list[0]?.signInfo[0]?.stage=='5'" type="success">审核通过</el-tag>
          <el-tag v-else-if="list[0]?.signInfo[0]?.stage=='2'" type="primary">审核中</el-tag>
          <el-tag v-else-if="list[0]?.signInfo[0]?.stage=='3'" type="danger">审核拒绝</el-tag>
          <el-tag v-else-if="list[0]?.signInfo[0]?.stage=='6'||list[0]?.signInfo[0]?.stage=='4'" type="warning">{{ list[0]?.stageStr }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-table :data="list" max-height="500px">
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column label="头像" min-width="70">
          <template #default="scope">
            <img :src="scope.row.personInfo.picUrl" style="width: 50px;">
          </template>
        </el-table-column>
        <el-table-column prop="personInfo.realName" label="姓名" min-width="100" />
        <el-table-column prop="personInfo.sexStr" label="性别" min-width="50" />
        <el-table-column label="证件号码" min-width="180">
          <template #default="scope">
            {{ scope.row.personInfo.idcTypeStr }}
            <div>{{ scope.row.personInfo.idcCode }}</div>
          </template>
        </el-table-column>
        <!--        <el-table-column prop="groupName" label="参赛团体" min-width="150" />-->
        <!--        <el-table-column v-if="list[0]?.signInfo[0]?.cptSignType=='2'" prop="teamName" label="队伍名称" min-width="120" />-->
        <el-table-column label="报名项目" min-width="180">
          <template #default="scope">
            <ol>
              <li v-for="ss in scope.row.signInfo">
                {{ ss.cptProjectName }} {{ ss.cptGroupName }}{{ ss.cptLevelName }}
                <span v-show="ss.cptSonLevelName">[{{ ss.cptSonLevelName }}]</span>
                {{ ss.zu }}
              </li>
            </ol>

          </template>
        </el-table-column>
        <el-table-column prop="signInfo[0].coachNames" label="教练" min-width="100" />
        <el-table-column prop="signInfo[0].leaderNames" label="领队" min-width="100" />
      </el-table>
    </div>

    <div v-if="(form.auditStatus=='0'&&form.payStatus=='0')||form.auditStatus=='3'||form.auditStatus=='4'" class="foot">
      <el-button type="success" round @click="goConti">继续报名</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance } from '@vue/runtime-core'
import { reactive, watch } from 'vue'
import { toRefs } from '@vueuse/shared'
import * as match from '@/apiPc/match'
const router = useRouter()
const { proxy } = getCurrentInstance()

const props = defineProps({
  props: {
    type: Object,
    default: () => ({
      open: false,
      isView: false,
      title: ''
    })
  }
})
const emit = defineEmits(['submitForm'])
const data = reactive({
  form: {},
  list: []
})
const loading = ref(true)
const { open, title, isView } = toRefs(props.props)
const { form, list } = toRefs(data)
let cptId = ''
let signType = ''
watch(open, (val) => {
  if (val) {
    form.value = props.props.data
    cptId = form.value.id
    getData(form.value)
  }
})

function getData(form) {
  match.getMySignListFromBaoXiang({
    cptId: form.id,
    groupId: form.signList[0].groupId
  }).then(res => {
    list.value = res.data
    signType = list.value[0].signInfo[0].cptSignType
    loading.value = false
  })
}


const goConti = () => {
  if (signType == '0') {
    router.push({
      path: `/match/list/${cptId}/chooseProject`,
      query: {
        matchId: cptId
      }
    })
  } 
  // else if (signType == '1') {
  //   alert('222')
  //   router.push({
  //     path: `/match/list/${cptId}/chooseCoach`,
  //     query: {
  //       matchId: cptId,
  //       groupId: form.value.signList[0].groupId,
  //       signType: 1
  //     }
  //   })
  // }
  else if (signType == '1') {
    router.push({
      path: `/match/list/${cptId}/chooseSportsman`,
      query: {
        matchId: cptId,
        groupId: form.value.signList[0].groupId,
        signType: 1
      }
    })
  } else {
    router.push({
      path: `/match/list/${cptId}/teamSign`,
      query: {
        matchId: cptId,
        groupId: form.value.signList[0].groupId,
        signType: 2
      }
    })
  }
}

</script>

<style scoped>
.foot{text-align: center;
  margin: 40px 0 0;}
</style>