<template>
  <el-card class="mb20">
      <div class="pd20">
        <div class="matchItem" v-for="n in billList" :key="n.id">
          <div class="status-po">
            <span class="bg-pink" v-if="n.auditStatus=='0'">未提交</span>
            <span class="bg-primary" v-if="n.auditStatus=='1'">待审核</span>
            <span class="bg-blue" v-if="n.auditStatus=='2'">审核通过</span>
            <span class="bg-danger" v-if="n.auditStatus=='3'">审核驳回</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>赛事类型：</label>{{ n.level }}</p>
                  <p class="ppl"><label v-if="n.groupName">参赛队：</label>{{n.groupName}}</p>
                </el-col>
                <el-col :lg="8">
                  <p class="ppl"><label>比赛时间：</label>{{ n.signBeginTime }}~{{n.signEndTime}}
                  </p>
                  <p class="ppl"><label>参赛运动员：</label>{{ n.signSize }} 人</p>
                </el-col>
                <el-col :lg="8">
                  <p class="ppl"><label>报名时间：</label>{{ n.signBeginTime }}~{{n.signEndTime}}</p>
                  <div class="btnbox">
                    <el-button plain round type="primary" @click="goDetail(n)" v-if="n.auditStatus!='0'">详情</el-button>
                    <el-button plain round type="primary" @click="continueSign(n)" v-if="n.auditStatus=='0'">继续报名</el-button>
                    <el-button plain round type="primary" @click="withDraw(n)" v-if="n.auditStatus=='1'">取消报名</el-button>
                    <el-button plain round type="primary" @click="continueSign(n)" v-if="n.auditStatus=='3'">重新报名</el-button>
                    <el-button plain round type="primary" @click="goDetail(n)" v-if="n.auditStatus=='2'&&n.payStatus=='0'">缴费</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>

        <el-empty image="@/assets/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"
      />

    <!--    报项详情-->
    <dialogModifySign :props="dialogModifySignProps"/>
    <!--    订单详情-->
    <dialogModifyBill :props="dialogModifyBillProps"/>

  </el-card>

</template>

<script setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {getCurrentInstance, onMounted} from '@vue/runtime-core'
import dialogModifySign from './component/modifySign'
import dialogModifyBill from './component/modifyBill'
import * as match from '@/apiPc/match'
import {ElMessage, ElMessageBox} from 'element-plus'
import _ from 'lodash'
import useUserStore from "@/store/modules/user";

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 myform = ref({})

const groupList = ref([])
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 payType = ref('')
const payPop = ref(false)
const showOrganizerInfo = ref(false)
const showResult = ref(false)
const myBalance = ref('')
const nowBill = ref({})
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 continueSign(n){
  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 getList() {
  console.log(query2.value)
  match.getMySignCptList(query2.value).then(res => {
    billList.value = res.rows
    total2.value = res.total
  })
}

function signRow(row) {
  _.assign(dialogModifySignProps.value, dialogPropsBase, {
    open: true,
    isView: true,
    title: '报项详情',
    data: {...row}
  })
}

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

function goPay(bill) {
  console.log(bill)
  payPop.value = true
  nowBill.value = bill
  // getMemberInfoByCptId(bill.cptId)
}

function payBill() {
  if (!payType.value) {
    ElMessage.error('请选择支付方式')
    return
  }
  match.payMatch({orderId: nowBill.value.id, payType: payType.value}).then(res => {
    if (payType.value == 2) {
      org.value = res.data.org
      showOrganizerInfo.value = true
    } else if (payType.value == 1) {
      // 微信
      proxy.$refs['wePayRef'].open(res.data)
    } else {
      showResult.value = true
    }
  })
}

function billDetail(bill) {
  _.assign(dialogModifyBillProps.value, dialogPropsBase, {
    open: true,
    isView: true,
    title: '订单详情',
    data: {...bill}
  })
}

function cancelBill(bill) {
  ElMessageBox.confirm('确定取消订单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    match.cancelMyUnPayedOrder(bill.id).then(Response => {
      console.log(Response.data)
      // 刷新数据
      getList()
    })
  })
}

function downloadVoucher(row) {
  proxy.download(
      `/ztx-match/pdf/getPayedOrderPdf/${row.id}/${row.groupId || 0}`, {}, '报项凭证.pdf'
  )
}
</script>

<style scoped lang="scss">
.matchItem {
  cursor: pointer;
  margin: 0 0 20px;
  padding: 0 0 20px;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-pink{background: #F740A6;}
    .bg-primary{background: var(--el-color-primary)}
  }
  &: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;}
}
.btnbox{text-align: right;}
</style>