<template>
  <el-dialog v-model="open" :title="title" width="1000px" append-to-body :close-on-click-modal="false">
    <h3 style="margin: 0;text-align: center">{{ billData.cpt?.name }}</h3>
    <el-descriptions title="订单基本信息" :column="2" border>
      <el-descriptions-item label="订单编号：">{{ order.id }}</el-descriptions-item>
      <el-descriptions-item label="下单时间：">{{ order.commitTime }}</el-descriptions-item>

      <el-descriptions-item v-if="order.groupName" label="报名参赛队：">{{ order.groupName }}</el-descriptions-item>
      <el-descriptions-item v-if="order.needPay!='0'" label="支付方式：">
        <span v-if="order.payType=='0'">会员卡支付</span>
        <span v-if="order.payType=='1'">微信支付</span>
        <span v-if="order.payType=='2'">线下支付</span>
      </el-descriptions-item>
      <el-descriptions-item v-if="order.needPay!='0'" label="订单状态：">
        <span v-if="order.payStatus=='0'">待支付</span>
        <span v-if="order.payStatus=='1'" class="green">线下支付</span>
        <span v-if="order.payStatus=='2'" class="green">付款中</span>
        <span v-if="order.payStatus=='3'" class="green">已支付</span>
        <span v-if="order.payStatus=='4'">退款中</span>
        <span v-if="order.payStatus=='5'">已退款</span>
        <span v-if="order.payStatus=='6'">退款核销中</span>
      </el-descriptions-item>
      <el-descriptions-item label="订单金额：">
        <el-tag v-if="order.needPay=='0'">免费订单</el-tag>
        <span v-else class="orange">{{ order.totalAmount }}元</span>
      </el-descriptions-item>
      <el-descriptions-item v-if="order.totalPayAmount" label="付款金额：">
        <span class="orange">{{ order.totalPayAmount }}元</span>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions v-if="order.payType == '2'" class="mt20" title="收款方" border>
      <el-descriptions-item label="收款账户：">{{ billData.orgBankAccount }}</el-descriptions-item>
      <el-descriptions-item label="开户银行：">{{ billData.orgBankName }}</el-descriptions-item>
      <el-descriptions-item label="开户账号：">{{ billData.orgBankAccountNum }}</el-descriptions-item>
    </el-descriptions>

    <h3 v-if="order.needPay !='0'" class="mt20">费用明细
      <div class="fr">
        合计：<span class="orange">¥{{ totalFee.totalFee }}</span>
      </div>
    </h3>

    <el-collapse v-if="order.needPay !='0'">
      <el-collapse-item v-if="cptRegistrationFee.totalFee>'0'" name="1">
        <template #title>
          {{ cptRegistrationFee.name }}
          <span class="ml20">{{ cptRegistrationFee.count }}人</span>
          <h3 class="orange ml20">{{ cptRegistrationFee.totalFee }}元</h3>
        </template>
        <el-table v-if="cptRegistrationFee.info.length>0" :data="cptRegistrationFee.info">
          <el-table-column type="index" label="序号" width="80" align="center" />
          <el-table-column prop="personInfo.realName" label="姓名" min-width="100" />
          <el-table-column label="性别" min-width="50">
            <template #default="scope">
              <span v-if="scope.row.personInfo.sex=='0'">女</span>
              <span v-else>男</span>
            </template>
          </el-table-column>
          <el-table-column prop="personalCptProjectName" label="个人项目" min-width="100" />
          <el-table-column prop="groupCptProjectName" label="团体项目" min-width="100" />
          <el-table-column prop="personInfo.idcCode" label="证件号" min-width="140" />
          <el-table-column label="出生日期" min-width="140">
            <template #default="scope">
              {{ scope.row.personInfo.birth.substring(0,10) }}
            </template>
          </el-table-column>
          <el-table-column prop="registrationFee" label="费用" min-width="100">
            <template #default="scope">
              <span class="orange">{{ scope.row.registrationFee }}元</span>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item v-if="cptDepositFee.totalFee>'0'" name="2">
        <template #title>
          {{ cptDepositFee.name }}
          <h3 class="orange ml20">{{ cptDepositFee.totalFee }}元</h3>
        </template>
      </el-collapse-item>
      <el-collapse-item v-if="cptCompatibleFee.totalFee>'0'" name="3">
        <template #title>
          {{ cptCompatibleFee.name }}
          <h3 class="orange ml20">{{ cptCompatibleFee.totalFee }}元</h3>
        </template>
      </el-collapse-item>
      <el-collapse-item v-if="cptInsuranceFee.totalFee>'0'" name="4">
        <template #title>
          {{ cptInsuranceFee.name }}
          <span class="ml20">{{ cptInsuranceFee.count }}人</span>
          <h3 class="orange ml20">{{ cptInsuranceFee.totalFee }}元</h3>
        </template>
        <el-table v-if="cptInsuranceFee.info.length>0" max-height="300px" :data="cptInsuranceFee.info">
          <el-table-column type="index" label="序号" width="80" align="center" />
          <el-table-column prop="personInfo.realName" label="姓名" min-width="100" />
          <el-table-column label="性别" min-width="100">
            <template #default="scope">
              <span v-if="scope.row.personInfo.sex=='0'">女</span>
              <span v-else>男</span>
            </template>
          </el-table-column>
          <el-table-column label="证件信息" min-width="160">
            <template #default="scope">
              <div v-if="scope.row.personInfo.idcType==0">身份证</div>
              <div v-if="scope.row.personInfo.idcType==1">护照</div>
              <div v-if="scope.row.personInfo.idcType==2">其他</div>
              <span>{{ scope.row.personInfo.idcCode }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="personInfo.phone" label="联系方式" min-width="150" />
          <el-table-column prop="insuranceFee" label="费用" min-width="100">
            <template #default="scope">
              <span>¥{{ scope.row.insuranceFee }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否购买" min-width="100" fixed="right">
            <template #default="scope">
              <span v-if="scope.row.buyFlag=='1'" class="green">已购买</span>
              <span v-else>未购买</span>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item v-if="teamFee.totalFee>'0'" name="5">
        <template #title>
          {{ teamFee.name }}
          <span class="ml20">{{ teamFee.count }}队</span>
          <h3 class="orange ml20">{{ teamFee.totalFee }}元</h3>
        </template>
        <el-table v-if="teamFee.info.length>0" :data="teamFee.info">
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column prop="groupName" label="参赛队名称" min-width="120" />
          <el-table-column prop="teamName" label="队伍名称" min-width="120" />
          <el-table-column prop="projectName" label="项目名称" min-width="120" />
          <el-table-column label="费用" min-width="100">
            <template #default="scope">
              <span>¥{{ scope.row.teamFee }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item v-if="otherFee.totalFee>'0'" name="5">
        <template #title>
          {{ otherFee.name }}
          <span class="ml20">{{ otherFee.count }}队</span>
          <h3 class="orange ml20">{{ otherFee.totalFee }}元</h3>
        </template>

        <el-table v-if="otherFee.info?.length>0" max-height="300px" :data="otherFee.info">
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column prop="personInfo.realName" label="姓名" min-width="100" />
          <el-table-column label="性别" min-width="100">
            <template #default="scope">
              <span v-if="scope.row.personInfo.sex=='0'">女</span>
              <span v-else>男</span>
            </template>
          </el-table-column>
          <el-table-column label="费用" min-width="100">
            <template #default="scope">
              <span v-if="scope.row.otherFee>0">¥{{ scope.row.otherFee }}</span>
              <span v-else>自备</span>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </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 { proxy } = getCurrentInstance()

const props = defineProps({
  props: {
    type: Object,
    default: () => ({
      open: false,
      isView: false,
      title: ''
    })
  }
})
const emit = defineEmits(['submitForm'])
const formBase = {}
const data = reactive({
  form: {
    ...formBase
  },
  billData: {},
  totalFee: {},
  teamFee: {},
  otherFee: {},
  cptInsuranceFee: {},
  cptDepositFee: {},
  cptCompatibleFee: {},
  cptRegistrationFee: {},
  order: {}
})
const { open, title, isView } = toRefs(props.props)
const { form, billData, totalFee, order, teamFee, otherFee, cptRegistrationFee, cptInsuranceFee, cptDepositFee, cptCompatibleFee } = toRefs(data)
watch(open, (val) => {
  if (val) {
    form.value = props.props.data || { ...formBase }
    getData(form.value.id)
  }
})

function getData(id) {
  match.getMyOrderDetail(id).then(res => {
    billData.value = res.data
    order.value = res.data.order
    totalFee.value = res.data.totalFee
    teamFee.value = res.data.totalFee.teamFee
    otherFee.value = res.data.totalFee.otherFee
    cptInsuranceFee.value = res.data.totalFee.cptInsuranceFee
    cptRegistrationFee.value = res.data.totalFee.cptRegistrationFee
    cptDepositFee.value = res.data.totalFee.cptDepositFee
    cptCompatibleFee.value = res.data.totalFee.cptCompatibleFee
  })
}

</script>

<style scoped>

</style>