<template>
  <el-card class="mb20">
      <div class="">
        <div class="matchItem" v-for="n in billList" :key="n.id">
          <div class="status-po">
            <span class="bg-pink" v-if="n.auditStatus=='0'">{{ language==0?'未提交':'Uncommitted' }}</span>
            <span class="bg-primary" v-if="n.auditStatus=='1'">{{ language==0?'待审核':'Auditing' }}</span>
            <span class="bg-blue" v-if="n.auditStatus=='2'">{{ language==0?'审核通过':'Approved' }}</span>
            <span class="bg-danger" v-if="n.auditStatus=='3'">{{ language==0?'审核驳回':'Reject' }}</span>
            <span class="bg-warning" v-if="n.auditStatus=='4'">{{ language==0?'已取消':'Canceled' }}</span>
          </div>
          <el-row :gutter="15">
            <el-col :lg="6" :md="8" :xl="10">
              <img class="mauto w100" :src="fillImgUrl(n.coverUrl)">
            </el-col>
            <el-col :lg="18" :md="16" :xl="14">
              <el-row>
                <el-col :span="24">
                  <h3>{{ n.name }}</h3>
                </el-col>
                <el-col :lg="8">
                  <p class="ppl"><label>{{ language==0?'赛事级别':'Event Level' }}：</label>{{ n.level }}</p>
                  <p class="ppl" v-if="n.languageSource=='100'"><label v-if="n.groupName">{{ language==0?'参赛队':'Name of participating team' }}：</label>{{n.groupName}}</p>
                </el-col>
                <el-col :lg="8">
                  <p class="ppl"><label>{{ language==0?'比赛时间':'Event Date' }}：</label>{{ n.signBeginTime?.substring(0,10) }}~{{n.signEndTime.substring(0,10)}}
                  </p>
                  <p class="ppl"><label>{{ language==0?'参赛运动员':'PARTICIPATING ATHLETES' }}：</label>{{ n.signSize }} 人</p>
                </el-col>
                <el-col :lg="8">
                  <p class="ppl"><label>{{ language==0?'报名时间':'Registration Period' }}：</label>{{ n.signBeginTime.substring(0,10) }}~{{n.signEndTime.substring(0,10)}}</p>
                  <div class="btnbox" style="display: flex">
                    <el-button class="mb10" plain round type="primary" @click="goDetail(n)" v-if="n.auditStatus!='0'">
                      {{ language==0?'详情':'Detail' }}</el-button>
                    <el-button plain round type="primary" @click="continueSign(n)" v-if="n.auditStatus=='0'">
                      {{ language==0?'继续报名':'Continue to register' }}</el-button>
                    <el-button plain round type="primary" @click="withDraw(n)" v-if="n.auditStatus=='1'">
                      {{ language==0?'取消报名':'Cancel registration' }}</el-button>
                    <el-button plain round type="primary" @click="reSign(n)" v-if="n.auditStatus=='3'">
                      {{ language==0?'重新报名':'Re register' }}</el-button>
                    <el-button plain round type="primary" @click="goDetail(n)" v-if="n.auditStatus=='2'&&n.payStatus=='0'">
                      {{ language==0?'缴费':'Pay' }}</el-button>
<!--                    <el-button plain round type="primary" @click="goRefund(n)" v-if="n.orderId">-->
<!--                      {{ language==0?'退款':'Refund' }}-->
<!--                    </el-button>-->
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-alert v-if="n.reason" :title="language==0?'驳回理由：'+n.reason :'Reason：'+n.reason" type="error" show-icon :closable="false"/>
        </div>

        <el-empty :image="`/img/order_no.png`" :image-size="228"  v-if="billList?.length == 0"/>

      </div>
      <paginationPc
          v-show="total > 0"
          v-model:page="query.pageNum"
          v-model:limit="query.pageSize"
          :total="total"
          @pagination="getList"
      />
  </el-card>

</template>

<script setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {getCurrentInstance, onMounted} from '@vue/runtime-core'
import * as match from '@/apiPc/match'
import {ElMessage, ElMessageBox} from 'element-plus'
import _ from 'lodash'
import useUserStore from "@/store/modules/user";
import cache from "@/plugins/cache";
import {useStorage} from "@vueuse/core/index";
import {refundApply} from "@/apiPc/match";
const language= useStorage('language',0)
const router = useRouter()
const {proxy} = getCurrentInstance()
const total = ref(0)
const total2 = ref(0)
const dialogPropsBase = {
  open: false,
  isView: false,
  title: '',
  data: null
}
const dialogModifySignProps = ref({
  ...dialogPropsBase
})
const dialogModifyBillProps = ref({
  ...dialogPropsBase
})
const activeName = ref('first')
const cptPeriodArr = ref([])
const payTimeArr = ref([])
const commitTimeArr = ref([])
const countryList = ref([])
const tableData = ref([{name: '111'}])
const billList = ref([])
const query = ref({
  pageNum: 1,
  pageSize: 10
})
const query2 = ref({
  pageNum: 1,
  pageSize: 10
})
const org = ref({})
const user = useUserStore().user
const group = useUserStore().group
onMounted(() => {
  getList()
})
const reset = (form) => {
  query.value = {
    pageNum: 1,
    pageSize: 10
  }
  query2.value = {
    pageNum: 1,
    pageSize: 10
  }
  cptPeriodArr.value = []
  payTimeArr.value = []
  commitTimeArr.value = []
  getList()
}
function withDraw(n){
  match.withDrawByOrderId(n.orderId).then(res=>{
    getList()
  })
}
function reSign(n){
  match.recoverMySignFromCancel(n.id).then((res)=>{
    continueSign(n)
  })
}
function continueSign(n){
  if(n.status=='0'){
    ElMessage({
      message: language.value==0?'赛事已下线无法继续报名':'The current event is offline.',
      type: 'warning'
    })
    return
  }
  if (user.utype == '1') {
    // 个人报名
    router.push({
      name: 'chooseProject',
      params:{
        id: n.id
      },
      query: {
        matchId: n.id
      }
    })
  }
  if (user.utype == '2'){
    // 团队报名
    router.push({
      name: 'chooseSportsman',
      params:{
        id: n.id
      },
      query: {
        matchId: n.id,
        groupId: group.id
      }
    })
  }

}
function goDetail(n){
  // 查看详情
  router.push({
    name:`signPay`,
    query: {
      orderId: n.encodeOrderId
    }
  })
}
function goRefund(n) {
  ElMessageBox.confirm('Are you sure to refund?', 'Refund', {
    confirmButtonText: 'Confirm',
    cancelButtonText: 'Cancel',
    type: 'warning',
  }).then(() => {
    match.refundApply(n.orderId).then(res=>{
      ElMessage({
        message: 'Refund success',
        type: 'success'
      })
    })
  })
}
function getList() {
  console.log(query2.value)
  match.getMySignCptList(query2.value).then(res => {
    billList.value = res.rows
    total2.value = res.total
  })
}

// function getMemberInfoByCptId(cptId) {
//   match.getMemberInfoByCptId(cptId).then((res) => {
//     myBalance.value = res.data.balance
//   })
// }

</script>

<style scoped lang="scss">
.matchItem {
  cursor: pointer;
  margin: 0 0 20px;
  padding: 20px 15px;background: #FBFCFD;
  border-radius: 2px;
  position: relative;
  .status-po{position: absolute;right: 0;top: 0;font-size: 12px;
    color: #FFFFFF;
    span{border-radius: 0px 10px 0px 10px;padding: 4px 10px;}
    .bg-danger{background: #E60012;}
    .bg-warning{background: #e89f39;}
    .bg-pink{background: #F740A6;}
    .bg-primary{background: var(--el-color-primary)}
    .bg-blue{background: #00a0e9}
  }
  &:last-child {
    border-bottom: none;
  }

  .el-avatar {
    position: absolute;
    left: 20px;
    top: 30px;

    img {
      background: #fff;
    }
  }

  .info {
    p {
      font-size: 14px;
    }
  }

  .typeTag {
    position: absolute;
    right: 0;
    top: 0;
  }

  h3 {
    font-weight: 500;
    margin: 0 0 10px;
    font-size: 18px;
    color: #000000;
    text-overflow: ellipsis;
  }

  &:hover h3 {
    color: var(--el-color-primary);
  }
}

.centerPrice {
  text-align: center;
  font-size: 26px;
  margin: 20px;

  span {
    font-size: 40px;
    font-weight: bold;
  }
}


:deep(.el-tabs__nav-wrap) {
  padding: 0 15px;
}

:deep(.el-radio.el-radio--large .el-radio__label) {
  display: flex;
  align-items: center;

  img {
    margin-right: 6px;
  }
}

.panel-footer .el-button--success {
  background: #254385;
  border: none;
  padding: 0 40px;
  font-size: 16px;
}

.orange {
  font-size: 16px;
  font-style: normal;
  font-weight: bold
}

.orgbox {
  font-size: 16px;
  line-height: 30px;
}

.el-form--inline .el-form-item {
  width: auto;
}
.ppl{font-size: 14px;
  label{color: #929AA0;display: block;font-size: 12px;}
}
.btnbox{text-align: right;}
</style>