<template>
    <el-drawer v-model="showDialog" title="订单详情" :size="1000">
        <div class="flex items-center justify-between">
            <div>订单编号：{{ formData.order_id }}</div>
            <el-button v-perms="['store_order.store_order/refund']" @click="command(1)">
                立即退款
            </el-button>
            <el-button
                v-perms="['store_order.store_order/refund']"
                @click="refundProductShow = true"
            >
                部分退款
            </el-button>
            <el-button
                @click="dialogShop = true"
                v-perms="['store_order.store_order/one_outbound']"
            >
                一键生成出库单
            </el-button>
            <el-dropdown trigger="click">
                <el-button>•••</el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="xlsx(formData.id, formData.order_id)"
                            >导出</el-dropdown-item
                        >
                        <el-dropdown-item @click="xlsxTwo(formData.id, formData.system_store)"
                            >导出配送表格</el-dropdown-item
                        >
                        <el-dropdown-item @click="xlsx3(formData.id, formData.system_store)"
                            >导出商品标签</el-dropdown-item
                        >
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </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 ref="storeRef"></storeTable>
            </el-tab-pane>
        </el-tabs>
    </el-drawer>
    <el-dialog v-model="dialogShop" title="设置出库单信息" width="500">
        <el-form :model="formArr">
            <el-form-item label="门店">
                <el-input
                    v-model="formArr.store_name"
                    placeholder="请选择门店"
                    autocomplete="off"
                    @click="showStore = true"
                />
            </el-form-item>
            <el-form-item label="仓库">
                <el-select v-model="formArr.warehouse_id" style="width: 240px">
                    <el-option
                        v-for="item in warehouseList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="送货时间">
                <el-date-picker
                    :readonly="false"
                    class="flex-1 !flex"
                    v-model="formArr.delivery_time"
                    clearable
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="选择生产日期"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="formArr.mark" placeholder="请输入备注" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogShop = false">取消</el-button>
                <el-button type="primary" @click="create_outbound_order"> 确认 </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="showStore" title="选择门店" width="70%">
        <store-pop @onBindStore="onBindStore" :is_selection="0"></store-pop>
    </el-dialog>
    <el-dialog v-model="refundProductShow" title="退款商品设置" width="70%">
        <refundOrderProduct :id="formArr.id" :order_id="formData.order_id" />
    </el-dialog>
</template>

<script lang="ts" setup name="storeOrderDETAILS">
import { ElMessage, type FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiStoreOrderDetail, apiStoreOrderRefund } from '@/api/store_order'
import { timeFormat } from '@/utils/util'
import {
    apiStoreOrderCartInfo,
    apiStoreOrderExport,
    createOutboundOrder,
    apiStoreOrderExportTags
} from '@/api/store_order'
import moment from 'moment'
import orderInfo from './components/orderInfo.vue'
import storeTable from './components/storeTable.vue'
import refundOrderProduct from './components/refundOrderProduct.vue'
import { apiWarehouseLists } from '@/api/warehouse'

import type { PropType } from 'vue'
import feedback from '@/utils/feedback'
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const showDialog = ref(false)

const storeRef = ref(null)
const orderRef = ref(null)
const deliverRef = ref(null)
const dialogShop = ref(false)
const showStore = ref(false)
const refundProductShow = ref(false)

// 表单数据
const formData = ref({
    id: '',
    store_id: ''
})
// 表单数据
const formArr = ref({
    id: '',
    store_id: '',
    store_name: '',
    warehouse_id: '',
    delivery_time: '',
    mark: ''
})
// 选择门店
const onBindStore = (e: any[]) => {
    formArr.value.store_id = e.id
    formArr.value.store_name = e.name
    showStore.value = false
}
const create_outbound_order = () => {
    createOutboundOrder(formArr.value).then((res) => {
        dialogShop.value = false
    })
}
const warehouseList = ref([])
const warehouse = () => {
    apiWarehouseLists({}).then((res) => {
        warehouseList.value = res.lists
    })
}
// 获取详情
const setFormData = async (data: Record<any, any>) => {
    formArr.value.id = data.id
    formData.value = { ...data }
}

const getDetail = async (row: Record<string, any>) => {
    formData.value.id = row.id
    formData.value.store_id = row.store_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?.getList({ oid: formData.value.id, store_id: formData.value.store_id })
    else if (tab.paneName == 'third') orderRef.value?.getLists()
    else if (tab.paneName == 'fourth') deliverRef.value?.getLists()
}

const command = (type: any) => {
    if (type == 1) return refund()
}
const xlsx = (id, order_id) => {
    apiStoreOrderCartInfo({
        oid: id,
        page_type: 0,
        page_start: 1,
        page_end: 1,
        file_name: '订单' + order_id + '详情',
        page_size: 100,
        export: 2
    }).then((res) => {
        ElMessage.success('导出成功')
    })
}
const xlsxTwo = (id, system_store) => {
    apiStoreOrderExport({
        id: id,
        system_store: system_store
    }).then((res) => {
        window.open(res.url, '_blank')
        ElMessage.success('导出成功')
    })
}
/**
 * 导出标签
 */
const xlsx3 = (id, system_store) => {
    apiStoreOrderExportTags({
        id: id,
        system_store: system_store
    }).then((res) => {
        window.open(res.url, '_blank')
        ElMessage.success('导出成功')
    })
}
const refund = async () => {
    await feedback.confirm('确定要退款吗？')
    apiStoreOrderRefund({
        order_id: formData.value.order_id
    }).then((res) => {
        ElMessage.success('退款成功')
    })
}

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