<template>
  <el-card class="mb20">
    <div class="pad20">
      <el-form :model="query" :inline="true">
        <el-form-item label="赛事名称">
          <el-input v-model="query.name" style="width: 214px;" @change="getList"/>
        </el-form-item>
        <el-form-item label="赛事时间">
          <el-date-picker
              v-model="cptPeriodArr"
              format="YYYY-MM-DD" type="daterange"
              value-format="YYYY-MM-DD" range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="getList"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button type="info" @click="reset(query)">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="pd20">
        <div class="matchItem" v-for="n in tableData" :key="n.id" @click="goDetail(n.id)">
          <el-row :gutter="15">
            <el-col :lg="6" :md="8" :xl="10">
              <img class="mauto" :src="fillImgUrl(n.coverUrl)">
            </el-col>
            <el-col :lg="18" :md="16" :xl="14">
              <div class="info">
                <h3>{{ n.name }}</h3>
                <p class="ppl"><label>比赛时间：</label>{{ n.beginTime?.slice(0, 10) }} 至 {{ n.endTime?.slice(0, 10) }}
                </p>
                <p class="ppl"><label>地&ensp;&ensp;&ensp;&ensp;点：</label>{{ n.address }}</p>
                <p class="ppl"><label>报名截止：</label>{{ n.signEndTime?.slice(0, 10) }}</p>

                <p class="ppl"><label>联系人员：</label>{{ n.contactPerson }}</p>
                <p class="ppl"><label>联系电话：</label>{{ n.contactTelno }}</p>
                <p class="ppl"><label>邮&ensp;&ensp;&ensp;&ensp;箱：</label>{{ n.contactEmail }}</p>

              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" align="center"/>
        <el-table-column label="赛事名称" min-width="260">
          <template #default="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="参赛队" min-width="260">
          <template #default="scope">
            <span v-if="scope.row.groupName">{{ scope.row.groupName }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="赛事开始时间" min-width="120">
          <template #default="scope">{{ scope.row.beginTime.substring(0, 10) }}</template>
        </el-table-column>
        <el-table-column label="赛事结束时间" min-width="120">
          <template #default="scope">{{ scope.row.endTime.substring(0, 10) }}</template>
        </el-table-column>
        <el-table-column label="审批状态" min-width="100" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.auditStatus=='1'" type="info">已提交</el-tag>
            <el-tag v-if="scope.row.auditStatus=='2'" type="success">审核通过</el-tag>
            <el-tag v-if="scope.row.auditStatus=='3'" type="danger">未通过</el-tag>
            <el-tag v-if="scope.row.auditStatus=='4'" type="warning">已取消</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding" width="180">
          <template #default="scope">
            <el-button v-if="scope.row.auditStatus!='0'" type="text" @click="downloadVoucher(scope.row)">
              下载报名凭证
            </el-button>
            <el-button type="text" @click="signRow(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

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

    <!--    报项详情-->
    <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'

const router = useRouter()
const {proxy} = getCurrentInstance()
const total = ref(0)
const total2 = ref(0)
const payMationDone = () => {
  showOrganizerInfo.value = false
  payPop.value = false
}
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({})

onMounted(() => {
  getList()
  getBillList()
})
const reset = (form) => {
  query.value = {
    pageNum: 1,
    pageSize: 10
  }
  query2.value = {
    pageNum: 1,
    pageSize: 10
  }
  cptPeriodArr.value = []
  payTimeArr.value = []
  commitTimeArr.value = []
  getBillList()
  getList()
}


function wePayDone() {
  payPop.value = false
  getBillList()
  getList()
}

function getList() {
  if (cptPeriodArr.value) {
    query.value.cptPeriod = cptPeriodArr.value.toString()
  }
  // match.getMySignCptList(query.value).then(res => {
  //   tableData.value = res.rows
  //   total.value = res.total
  // })
}

function getBillList() {
  query2.value.payTimeRange = payTimeArr.value.toString()
  query2.value.createTimeRange = commitTimeArr.value.toString()
  console.log(query2.value)
  match.getMyOrderList(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)
      // 刷新数据
      getBillList()
      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: #FFFFFF;
  border-bottom: 1px solid #e5e5e5;
  position: relative;

  &: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;
}
</style>