<template>
  <a-tabs
    @change="changeTab"
    v-model:activeKey="activeKey"
  >
    <a-tab-pane
      key="1"
      tab="基本信息"
    >
      <BasicInformation
        v-if="show"
        :orderParams="orderParams"
      ></BasicInformation>
    </a-tab-pane>
    <a-tab-pane
      key="2"
      tab="订单记录"
    >
      <OrderInfo
        v-if="show"
        :orderParams="orderParams"
      ></OrderInfo>
    </a-tab-pane>
    <a-tab-pane
      key="3"
      tab="交易记录"
    >
      <TradeRecord
        v-if="show"
        :orderParams="orderParams"
      ></TradeRecord>
    </a-tab-pane>
    <a-tab-pane
      key="4"
      tab="骑行退款记录"
    >
      <CyclingRefundRecord
        v-if="show"
        :orderParams="orderParams"
      ></CyclingRefundRecord>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import BasicInformation from './BasicInformation.vue';
import OrderInfo from './OrderInfo.vue';
import TradeRecord from './TradeRecord.vue';
import CyclingRefundRecord from './CyclingRefundRecord.vue';

const props = defineProps({
  orderParams: {
    type: Object,
    required: true
  }
});
const show = ref(false)
const orderParams = ref({})
const activeKey = ref('1')

const openForm = (params = {}) => {
  if (params['phone']) {
    orderParams.value['phone'] = params['phone'];
  }
  show.value = true;
};

const changeTab = (key) => {
}


defineExpose({ openForm });
</script>