<template>
  <el-dialog v-model="dialogVisible" destroy-on-close title="确认订单" width="900">
    <el-row :gutter="8">
      <el-col class="textLabel" :span="6">
        人数合计：<span class="orange">{{ form.all ?? 0 }}</span>
      </el-col>
      <el-col class="textLabel" :span="6">
        新会员合计：<span class="orange">{{ form.new ?? 0 }}</span>
      </el-col>
      <el-col class="textLabel" :span="6">
        续费会员合计：<span class="orange">{{ form.old ?? old }}</span>
      </el-col>
      <el-col class="textLabel" :span="6">
        总费用：<span class="orange">{{ form.price ?? 0 }}</span>
      </el-col>
    </el-row>
    <div style="height: 70px;" />
    <el-row justify="center">
      <el-button class="largeBtn" type="" @click="handelClose">取消</el-button>
      <el-button class="largeBtn" type="primary" @click="handelPay">去付款</el-button>
    </el-row>
    <div style="height: 30px;" />
  
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'

const emit = defineEmits(['handelPayment'])
const dialogVisible = ref(false)
const form = ref({})
const { proxy } = getCurrentInstance()

function open(row) {
  form.value = row
  dialogVisible.value = true
}

function handelPay() {
  emit('handelPayment')
  dialogVisible.value = false
}

function handelClose() {
  dialogVisible.value = false
}

defineExpose({
  open
})
</script>

<style scoped lang="scss">
.textLabel {
  font-size: 20px;
  color: #000;
  
  .orange {
    color: orange;
    font-weight: bold;
  }
}


</style>