<template>
  <div class="grid-content">
    <el-card class="mt30">
      <el-tabs v-model="activeName">
        <el-tab-pane label="培训" name="first">
          <train-component ref="firstRef" @show-train="goTrainDetail" @show-sign="showSignInfo" />
        </el-tab-pane>
        <el-tab-pane label="订单" name="second">
          <order-component ref="secondRef" @show-train="goTrainDetail" @show-sign="showSignInfo" />
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 详情弹框 -->
    <el-dialog v-model="show" title="报名信息" append-to-body width="800">
      <div>
        <h3 class="train-h3" style="margin-top: 0">培训费</h3>
        <el-table :data="signInfo.trainList">
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="培训科目" align="center" prop="name" />
          <el-table-column label="价格" align="center" prop="price">
            <template #default="scope">
              ￥{{ scope.row.price }}
            </template>
          </el-table-column>
        </el-table>
        <div v-if="signInfo.trainList && signInfo.trainList.length>0">
          <span>共计报名{{ signInfo.trainCount }}项</span><span>合计：{{ signInfo.trainFee }}</span>
        </div>
      </div>
      <div>
        <h3 class="train-h3">考试费</h3>
        <el-table :data="signInfo.examList">
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="考试科目" align="center" prop="name" />
          <el-table-column label="价格" align="center" prop="price">
            <template #default="scope">
              ￥{{ scope.row.price }}
            </template>
          </el-table-column>
        </el-table>
        <div v-if="signInfo.examList && signInfo.examList.length>0">
          <span>共计报名{{ signInfo.examCount }}项</span><span>合计：{{ signInfo.examFee }}</span>
        </div>
      </div>
      <div class="flexpriceline">
        <div>培训费：<span>{{ signInfo.trainFee }}元</span></div>
        <div>考试费：<span>{{ signInfo.examFee }}元</span></div>
        <div>合计：<span class="text-danger">{{ signInfo.totalFee }}元</span></div>
      </div>
      <template #footer>
        <div v-if="signInfo.receivingInfo" class="dialog-footer text-center">
          <el-button type="primary" @click="showPay">去支付</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import TrainComponent from './component/train/train'
import OrderComponent from './component/train/order'
import { getSignInfo } from '@/apiPc/train'

const router = useRouter()
const { proxy } = getCurrentInstance()


const activeName = ref('first')
const show = ref(false)
const signInfo = ref({})

onMounted(() => {
  watch(activeName, (val) => {
    proxy.$refs[`${val}Ref`].init()
  }, { immediate: true })
})

function goTrainDetail(id) {
  const routeLocation = router.resolve({
    name: 'trainDetail',
    params: {
      id: id
    }
  })
  window.open(routeLocation.href, '_blank')
}

function showSignInfo(params) {
  getSignInfo({
    activityId: params.id
  }).then((res) => {
    signInfo.value = res.data
    signInfo.value.receivingInfo = params.receivingInfo

    show.value = true
  })
}

function showPay() {
  show.value = false
  proxy.$refs['secondRef'].showPay({
    receivingInfo: signInfo.value.receivingInfo
  })
}

</script>

<style scoped lang="scss">
  .flexpriceline{display: flex;font-size: 16px;padding: 10px 0 0;margin-top: 20px;
    div{margin-right: 30px}
    span{font-weight:bold;}
  }
</style>