<template>
    <el-drawer v-model="showDialog" title="订单详情" :size="1200">
        <div class="flex items-center justify-between">
            <div>门店：{{ formData.system_store }}</div>
        </div>
        <div class="flex items-center justify-between mt-3">
            <div>订单编号：{{ formData.order_id }}</div>
        </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.storage_name }}</div>
            </div>
            <div class="flex flex-col">
                <div style="color: gray">实际支付</div>
                <div style="color: black">￥{{ formData.money }}</div>
            </div>
            <div class="flex flex-col flex-2">
                <div style="color: gray">时间</div>
                <div style="color: black">{{ formData.create_time }}</div>
            </div>
        </div>
        <el-tabs v-model="activeName" class="demo-tabs" type="border-card">
            <el-tab-pane label="订单信息" name="second">
                <div>
                    <div>
                        <el-table :data="pager.lists" v-loading="pager.loading">
                            <el-table-column
                                label="商品信息"
                                prop="store_name"
                                show-overflow-tooltip
                            >
                                <template #default="{ row }">
                                    <div class="flex items-center">
                                        <el-image
                                            :src="row.image"
                                            class="w-16 h-16 mr-2"
                                            :preview-teleported="true"
                                        ></el-image>
                                        <div>{{ row.store_name }}</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="规格" prop="store_info" show-overflow-tooltip />
                            <el-table-column label="库存" prop="stock" show-overflow-tooltip />
                            <el-table-column
                                label="需求数量"
                                prop="cart_num"
                                show-overflow-tooltip
                            />
                            <el-table-column
                                label="是否需采购"
                                prop="is_buyer"
                                show-overflow-tooltip
                                width="100"
                            >
                                <template #default="{ row }">
                                    <div v-if="row.is_buyer == 0">
                                        <el-button
                                            type="danger"
                                            round
                                            size="small"
                                            @click="handleBuyer(-1, row)"
                                            >否</el-button
                                        >
                                        <el-button
                                            type="success"
                                            round
                                            size="small"
                                            @click="handleBuyer(1, row)"
                                            >是</el-button
                                        >
                                    </div>
                                    <div v-else>
                                        <span>{{ row.is_buyer_name }}</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="采购数量"
                                prop="buyer_nums"
                                show-overflow-tooltip
                                width="100"
                            />

                            <el-table-column label="单价" prop="price" show-overflow-tooltip />
                            <el-table-column
                                label="合计"
                                prop="total_price"
                                show-overflow-tooltip
                            />
                        </el-table>
                    </div>
                    <div class="flex mt-4 justify-end" v-if="pager.lists.length < pager.count">
                        <pagination v-model="pager" @change="getLists" />
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </el-drawer>
    <el-dialog v-model="dialogBuyer" title="设置采购" width="600">
        <el-form ref="formRef" :model="updateInfo" label-width="90px">
            <el-form-item label="采购数量" prop="buyer_nums">
                <el-input
                    v-model="updateInfo.buyer_nums"
                    clearable
                    placeholder="请输入采购数量"
                    :readonly="false"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogBuyer = false">取消</el-button>
                <el-button type="primary" @click="goodsOfferUpdate"> 确认 </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup name="storeOrderDETAILS">
import { ElMessage, type FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiPurchaseOrderDetail, apiPurchaseOrderInfoLists } from '@/api/purchase_order'
import { apiPurchaseOrderInfoEdit } from '@/api/purchase_order_info'
import type { PropType } from 'vue'
import { usePaging } from '@/hooks/usePaging'
import { useRoute } from 'vue-router'
const route = useRoute()

defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})

const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const showDialog = ref(false)
const dialogBuyer = ref(false)
const activeName = ref('second')
const updateInfo = ref({
    id: '',
    oid: '',
    poid: '',
    product_id: '',
    cart_num: '',
    buyer_nums: '',
    is_buyer: '',
    type: ''
})

// 表单数据
const formData = ref({
    id: ''
})
const queryParams = reactive({
    oid: '',
    pay_type: ''
})
// 获取详情
const setFormData = async (data: Record<any, any>) => {
    formData.value = { ...data }
}
/**
 * 是否需采购
 * @param e
 */
const handleBuyer = (e, row) => {
    if (e == 1) {
        updateInfo.value.id = row.id
        updateInfo.value.oid = row.oid
        updateInfo.value.product_id = row.product_id
        updateInfo.value.cart_num = row.cart_num
        updateInfo.value.is_buyer = '1'
        updateInfo.value.type = 'buyer'
        dialogBuyer.value = true
    } else {
        apiPurchaseOrderInfoEdit({
            id: row.id,
            type: 'buyer',
            is_buyer: -1
        }).then((res) => {
            getLists()
        })
    }
}
const goodsOfferUpdate = () => {
    if (route.query.id == '') {
        ElMessage({
            message: '没有平台订单id',
            type: 'warning'
        })
        return
    }
    updateInfo.value.poid = route.query.id
    apiPurchaseOrderInfoEdit(updateInfo.value).then((res) => {
        getLists()
    })
}
const getDetail = async (row: Record<string, any>) => {
    formData.value.id = row.id
    queryParams.oid = row.id
    const data = await apiPurchaseOrderDetail({
        id: row.id
    })
    setFormData(data)
    getLists()
}

//打开弹窗
const open = () => {
    showDialog.value = true
}
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiPurchaseOrderInfoLists,
    params: queryParams
})

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