<template>
  <el-card>
    <div class="grid-content">
<!--      <el-tabs v-model="activeName">-->
<!--        <el-tab-pane label="报项" name="first">-->
          <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>
            <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>
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="订单" name="two">-->
<!--          <div class="pad20">-->
<!--            <el-form :model="query2" :inline="true">-->
<!--              <el-form-item label="订单状态">-->
<!--                <el-select v-model="query2.payStatus" @change="getBillList">-->
<!--                  <el-option value="" label="全部" />-->
<!--                  <el-option value="0" label="待支付" />-->
<!--                  <el-option value="3" label="已完成" />-->
<!--                  <el-option value="5" label="已退回" />-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="支付方式">-->
<!--                <el-select v-model="query2.payTypeParam" @change="getBillList">-->
<!--                  <el-option value="" label="全部">全部</el-option>-->
<!--                  <el-option value="0" label="线上支付">线上支付</el-option>-->
<!--                  <el-option value="1" label="线下支付">线下支付</el-option>-->
<!--                  <el-option value="2" label="会员卡支付">会员卡支付</el-option>-->
<!--                  <el-option value="3" label="微信支付">微信支付</el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="订单号">-->
<!--                <el-input v-model="query2.code" />-->
<!--              </el-form-item>-->
<!--              <el-form-item label="订单名称">-->
<!--                <el-input v-model="query2.cptName" style="width: 214px;" @change="getBillList" />-->
<!--              </el-form-item>-->
<!--              <el-form-item label="付款时间">-->
<!--                <el-date-picker-->
<!--                  v-model="payTimeArr"-->
<!--                  format="YYYY-MM-DD" type="daterange"-->
<!--                  value-format="YYYY-MM-DD" range-separator="至"-->
<!--                  start-placeholder="开始时间"-->
<!--                  end-placeholder="结束时间"-->
<!--                  @change="getBillList"-->
<!--                />-->
<!--              </el-form-item>-->
<!--              <el-form-item label="下单时间">-->
<!--                <el-date-picker-->
<!--                  v-model="commitTimeArr"-->
<!--                  format="YYYY-MM-DD" type="daterange"-->
<!--                  value-format="YYYY-MM-DD" range-separator="至"-->
<!--                  start-placeholder="开始时间"-->
<!--                  end-placeholder="结束时间"-->
<!--                  @change="getBillList"-->
<!--                />-->
<!--              </el-form-item>-->
<!--              <el-form-item>-->
<!--                <el-button type="primary" @click="getBillList">查询</el-button>-->
<!--                <el-button type="info" @click="reset(query2)">重置</el-button>-->
<!--              </el-form-item>-->

<!--            </el-form>-->

<!--            <el-table v-if="billList.length>0" :data="billList" style="width: 100%">-->
<!--              &lt;!&ndash;            <el-table-column type="selection" width="80" />&ndash;&gt;-->
<!--              <el-table-column prop="id" label="订单编号" min-width="200" />-->
<!--              <el-table-column prop="cptName" label="订单名称" min-width="200" />-->
<!--              <el-table-column prop="commitTime" label="下单时间" min-width="180" />-->
<!--              <el-table-column prop="payTime" label="付款时间" min-width="180" />-->
<!--              <el-table-column label="支付金额" min-width="120" align="center">-->
<!--                <template #default="scope">-->
<!--                  <span v-if="scope.row.needPay=='0'" class="green">免费订单</span>-->
<!--                  <span v-else>¥{{ scope.row.totalAmount }}</span>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              &lt;!&ndash;            <el-table-column label="已付金额" min-width="120" align="center">&ndash;&gt;-->
<!--              &lt;!&ndash;              <template #default="scope">&ndash;&gt;-->
<!--              &lt;!&ndash;                <span v-if="scope.row.needPay=='0'" class="green">免费订单</span>&ndash;&gt;-->
<!--              &lt;!&ndash;                <span v-else-if="scope.row.totalPayAmount" class="orange">¥{{ scope.row.totalPayAmount }}</span>&ndash;&gt;-->
<!--              &lt;!&ndash;                <span v-else>&#45;&#45;</span>&ndash;&gt;-->
<!--              &lt;!&ndash;              </template>&ndash;&gt;-->
<!--              &lt;!&ndash;            </el-table-column>&ndash;&gt;-->
<!--              <el-table-column label="付款方式" min-width="120" align="center">-->
<!--                <template #default="scope">-->
<!--                  <span v-if="scope.row.payType=='0'">会员卡支付</span>-->
<!--                  <span v-else-if="scope.row.payType=='1'">微信支付</span>-->
<!--                  <span v-else-if="scope.row.payType=='2'">线下支付</span>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="name" label="支付状态" min-width="120" align="center">-->
<!--                <template #default="scope">-->
<!--                  <span v-if="scope.row.needPay=='0'" class="green">免费订单</span>-->
<!--                  <div v-else>-->
<!--                    <span v-if="scope.row.payStatus=='0'">待支付</span>-->
<!--                    <span v-if="scope.row.payStatus=='1'">待核销</span>-->
<!--                    <span v-if="scope.row.payStatus=='2'">付款中</span>-->
<!--                    <span v-if="scope.row.payStatus=='3'" class="green">已完成</span>-->
<!--                    <span v-if="scope.row.payStatus=='4'">退款中</span>-->
<!--                    <span v-if="scope.row.payStatus=='5'" class="text-danger">已退回</span>-->
<!--                    <span v-if="scope.row.payStatus=='6'">退款核销中</span>-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="name" label="审核状态" min-width="120" align="center">-->
<!--                <template #default="scope">-->
<!--                  &lt;!&ndash; 待核销，待审核，审核拒绝，审核通过，已取消&ndash;&gt;-->
<!--                  <span v-if="scope.row.auditStatus=='1'" class="text-warning">审核中</span>-->
<!--                  <span v-if="scope.row.auditStatus=='2'" class="green">审核通过</span>-->
<!--                  <span v-if="scope.row.auditStatus=='3'" class="text-danger">审核拒绝</span>-->
<!--                  <span v-if="scope.row.auditStatus=='4'">已取消</span>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column label="操作" align="center" fixed="right" class-name="small-padding" width="150">-->
<!--                <template #default="scope">-->
<!--                  <el-button type="text" @click="billDetail(scope.row)">详情</el-button>-->
<!--                  <el-button-->
<!--                    v-if="scope.row.payType!='2'&&scope.row.payStatus=='0'&&scope.row.auditStatus=='0'" type="text"-->
<!--                    @click="goPay(scope.row)"-->
<!--                  >支付-->
<!--                  </el-button>-->
<!--                  <el-button-->
<!--                    v-if="scope.row.payStatus=='0'&&scope.row.auditStatus=='0'&&scope.row.payType!='2'" type="text"-->
<!--                    @click="cancelBill(scope.row)"-->
<!--                  >取消-->
<!--                  </el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--            </el-table>-->
<!--            <el-empty v-if="billList.length==0" description="暂无数据" />-->
<!--            <pagination-->
<!--              v-show="total > 0"-->
<!--              v-model:page="query2.pageNum"-->
<!--              v-model:limit="query2.pageSize"-->
<!--              :total="total2"-->
<!--              @pagination="getBillList"-->
<!--            />-->
<!--          </div>-->
<!--        </el-tab-pane>-->

<!--      </el-tabs>-->

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

      <el-dialog v-model="payPop" title="请选择支付方式" width="720px">

        <div class="centerPrice">
          ¥<span>{{ nowBill?.totalAmount }}</span>
        </div>
        <div style="margin: 40px">
          <el-radio-group v-model="payType">
            <el-radio v-if="myBalance>'0'" label="0" size="large" border><img
              src="@/assets/img/zf02.png"
              style="width: 30px;"
            >
              会员卡支付<span>(余额 <i class="orange">¥{{ myBalance }}</i>)</span>
            </el-radio>
            <el-radio label="1" size="large" border><img src="@/assets/img/zf_wx.png">微信</el-radio>
            <el-radio label="2" size="large" border><img src="@/assets/img/zf_xj.png">线下支付</el-radio>
          </el-radio-group>
        </div>
        <div class="panel-footer text-center">
          <el-button type="success" round @click="payBill">立即支付</el-button>
        </div>
      </el-dialog>
      <el-dialog v-model="showOrganizerInfo" title=" 线下支付" width="400px">
        <ul class="orgbox">
          <li>单位：{{ org.organizerName }}</li>
          <li>开户行：{{ org.organizerBank }}</li>
          <li>账户：{{ org.organizerAccount }}</li>
          <li>打款金额：<span class="orange">¥{{ org.organizerFee }}</span></li>
        </ul>
        <div class="text-center">
          <el-button type="success" round @click="payMationDone">我已复制</el-button>
        </div>
      </el-dialog>
      <el-dialog v-model="showResult">
        <el-result
          icon="success"
          title="支付成功"
        />
      </el-dialog>
      <we-pay ref="wePayRef" @close="wePayDone" />
    </div>
  </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([])
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(() => {
  getCountryList()
  getData()
  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 getData() {
  match.getMyPersonInfo().then(res => {
    myform.value = res.data
    myform.value.labelArr = myform.value.label?.split(',')
    groupList.value = myform.value.groups
  })
}

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 getCountryList() {
  match.countryList().then(res => {
    countryList.value = res.data
  })
}

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">
.centerPrice {
  text-align: center;
  font-size: 26px;
  margin: 20px;

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

.app-container {
  background: #F5F7F9;
}

.grid-content {
  background: #fff;
}

: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>