<template>
    <el-drawer v-model="showDialog" title="订单详情" :size="1000">
        <div class="flex items-center justify-between">
            <div>订单编号：{{formData.order_id}}</div>
            <!-- <el-button type="primary">发送货</el-button> -->
        </div>
        <div class="flex items-center justify-between m-4">
            <div class="flex flex-col">
                <div style="color: gray;">订单状态</div>
                <div style="color: black;">{{ formData.status_name }}</div>
            </div>
            <div class="flex flex-col">
                <div style="color: gray;">实际支付</div>
                <div style="color: black;">￥{{ formData.pay_price }}</div>
            </div>
            <div class="flex flex-col">
                <div style="color: gray;">支付方式</div>
                <div style="color: black;">
                    <dict-value :options="dictData.pay_type" :value="formData.pay_type"></dict-value>
                </div>
            </div>
            <div class="flex flex-col flex-2">
                <div style="color: gray;">支付时间</div>
                <div style="color: black;">{{ formData.pay_time }}</div>
            </div>
            
        </div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" type="border-card">
            <el-tab-pane label="订单信息" name="first">
                <orderInfo :datas="formData" :dictData="dictData"></orderInfo>
            </el-tab-pane>
            <el-tab-pane label="商品信息" name="second">
                <storeTable :oid="formData.id" ref="storeRef"></storeTable>
            </el-tab-pane>
            <!-- <el-tab-pane label="订单记录" name="third">
                <orderTable ref="orderRef"></orderTable>
            </el-tab-pane>
            <el-tab-pane label="发货记录" name="fourth">
                <deliverTable ref="deliverRef"></deliverTable>
            </el-tab-pane> -->
        </el-tabs>
    </el-drawer>
</template>

<script lang="ts" setup name="storeOrderDETAILS">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiStoreOrderAdd, apiStoreOrderEdit, apiStoreOrderDetail } from '@/api/store_order'
import { timeFormat } from '@/utils/util'
import moment from 'moment'
import orderInfo from './components/orderInfo.vue'
import storeTable from './components/storeTable.vue'
import orderTable from './components/orderTable.vue'
import deliverTable from './components/deliverTable.vue'
import type { PropType } from 'vue'
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const showDialog = ref(false)
const mode = ref('add')

const storeRef = ref(null);
const orderRef = ref(null);
const deliverRef = ref(null);

// 表单数据
const formData = ref({
    id: ''
})



// 获取详情
const setFormData = async (data: Record<any, any>) => {
    formData.value = {...data};

}

const getDetail = async (row: Record<string, any>) => {
    formData.value.id = row.id;
    handleClick({
        paneName:activeName.value
    });
    const data = await apiStoreOrderDetail({
        id: row.id
    })
    setFormData(data)
}

//打开弹窗
const open = () => {
    showDialog.value = true;
}

const activeName = ref('first')

const handleClick = (tab:any) => {
  if(tab.paneName == 'second') storeRef.value?.getLists();
  else if(tab.paneName == 'third') orderRef.value?.getLists();
  else if(tab.paneName == 'fourth') deliverRef.value?.getLists();
}


defineExpose({
    open,
    setFormData,
    getDetail
})
</script>
