<template>
    <div class="p-3">
        <div class="bg-fff flex1 ov-hd d-flex flex-cln">
            <div class="d-flex a-c pd-16">
                <div class="f-s-20 c-333 f-w-7 mr-10">订单详情</div>
                <el-button @click="router.go(-1)" type="primary" text>
                    <el-icon>
                        <Back />
                    </el-icon>
                    返回上一级
                </el-button>
            </div>
            <div class="border-botttom pl-20">
                <div class="d-flex">
                    <template v-for="(item, index) in tabs" :key="index">
                        <div class="tabs-item" @click="() => { activeName = item.value }" :class="{ checked: activeName === item.value }">{{ item.label }}</div>
                    </template>
                </div>
            </div>
            <template v-if="orderItem">
                <div v-show="activeName === '1'" class="flex1 ov-hd d-flex flex-cln">
                    <orderInfo :info="orderItem"></orderInfo>
                </div>
                <div v-show="activeName === '2'" class="flex1 over-auto">
                    <menuInfo :info="orderItem?.testOrderDetailList[0]"></menuInfo>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup name="orders-detail" lang="ts">
import { getTestOrderDetail } from '@/api/cdt/orders';
import { orderInfo, menuInfo } from '../../models';
const { query }:any = useRoute()
const router = useRouter();
const activeName = ref('1');
// 获取详细信息
const orderItem = ref<any>(null);
const getDetail = async () => {
    const res = await getTestOrderDetail(query?.orderId);
    if (!res || res.code !== 200) return;
    orderItem.value = res.data;
};
const tabs = ref([
    { label: '订单信息', value: '1' },
    { label: '套餐信息', value: '2' },
])
onMounted(() => {
    getDetail()
});
</script>
<style lang="scss" scoped>
.tabs-item {
    margin-right: 20px;
   padding: 8px 20px;
   font-size: 14px;
   border-color:  #d7d7d7;
   border-style: solid;
   border-width: 1px 1px 0 1px;
   cursor: pointer;
   user-select: none;

   &.checked {
    color: #fff;
    border-color: var(--el-color-primary);
    background-color: var(--el-color-primary);
   }
}
.border-botttom {
    border-bottom: 1px solid #d7d7d7;
}
</style>
