<template>
    <div>
        <el-card class="!border-none mb-4" shadow="never">
            <el-form class="mb-[-16px]" :model="queryParams" inline>
                <el-form-item label="订单号" prop="order_id">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.order_id"
                        clearable
                        placeholder="请输入订单号"
                    />
                </el-form-item>
                <el-form-item label="日期" prop="create_time">
                    <el-date-picker
                        v-model="startEndTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        unlink-panels
                        @change="changeStartEndTime"
                    />
                </el-form-item>
                <el-form-item label="门店名称" prop="store_id">
                    <div class="flex items-center mr-4">
                        <el-select
                            v-model="queryParams.store_id"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="输入门店名称搜索"
                            remote-show-suffix
                            :remote-method="remoteMethod"
                            :loading="storeloading"
                            style="width: 240px"
                            @change="get_lists"
                        >
                            <el-option
                                v-for="item in storeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            />
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item label="支付订单号" prop="order_sn">
                    <el-input
                        class="w-[200px]"
                        v-model="queryParams.order_sn"
                        clearable
                        placeholder="请输入订单号"
                    />
                </el-form-item>
                <el-form-item label="入库单号" prop="order_rk">
                    <el-input
                        class="w-[200px]"
                        v-model="queryParams.order_rk"
                        clearable
                        placeholder="请输入入库单号"
                    />
                </el-form-item>
                <el-form-item label="出库单号" prop="order_ck">
                    <el-input
                        class="w-[200px]"
                        v-model="queryParams.order_ck"
                        clearable
                        placeholder="请输入出库单号"
                    />
                </el-form-item>
                <el-form-item label="备注" prop="mark">
                    <el-input
                        class="w-[200px]"
                        v-model="queryParams.mark"
                        clearable
                        placeholder="请输入备注"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="storeOrderList"> 门店 </el-button>
                    <el-button type="primary" @click="get_lists">查询</el-button>
                    <el-button @click="getResetParams">重置</el-button>
                    <export-data
                        class="ml-2.5"
                        :fetch-fun="apiBeforehandOrderLists"
                        :params="queryParams"
                        :page-size="pager.size"
                    />
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
            <router-link
                :to="{
                    path: 'beforehand_order_add'
                }"
                class="ml-4"
            >
                <el-button type="primary"> 添加 </el-button>
            </router-link>
            <router-link
                :to="{
                    path: 'beforehand_order_cart_info'
                }"
                class="ml-4"
            >
                <el-button type="primary"> 商品列表 </el-button>
            </router-link>
            <el-tabs v-model="activeName" class="demo-tabs mt-2" @tab-change="handleClick">
                <el-tab-pane label="全部" name="all"></el-tab-pane>
                <el-tab-pane
                    :label="`铺货订单(${statisticsCount.order_type_1})`"
                    name="1"
                ></el-tab-pane>
                <el-tab-pane
                    :label="`摊贩订单(${statisticsCount.order_type_2})`"
                    name="2"
                ></el-tab-pane>
                <el-tab-pane
                    :label="`一条龙订单(${statisticsCount.order_type_3})`"
                    name="3"
                ></el-tab-pane>
                <el-tab-pane
                    :label="`线上订单(${statisticsCount.order_type_4})`"
                    name="4"
                ></el-tab-pane>
                <el-tab-pane
                    :label="`仓库补货(${statisticsCount.order_type_5})`"
                    name="5"
                ></el-tab-pane>
                <el-tab-pane
                    :label="`采购订单(${statisticsCount.order_type_7})`"
                    name="7"
                ></el-tab-pane>
                <el-tab-pane
                    :label="`其他订单(${statisticsCount.order_type_8})`"
                    name="8"
                ></el-tab-pane>
            </el-tabs>
            <el-tabs v-model="activeName2" @tab-change="handleClick2">
                <el-tab-pane label="全部" name="all"></el-tab-pane>
                <el-tab-pane
                    :label="`未出库(${statisticsCount.outbound_0})`"
                    name="1"
                ></el-tab-pane>
                <el-tab-pane
                    :label="`已出库(${statisticsCount.outbound_1})`"
                    name="2"
                ></el-tab-pane>
                <el-tab-pane
                    :label="`未入库(${statisticsCount.warehousing_0})`"
                    name="3"
                ></el-tab-pane>
                <el-tab-pane
                    :label="`已入库(${statisticsCount.warehousing_1})`"
                    name="4"
                ></el-tab-pane>
            </el-tabs>
            <div class="mt-4">
                <el-table :data="pager.lists" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="id" prop="id" show-overflow-tooltip width="55" />
                    <el-table-column
                        label="操作时间/人员"
                        prop="create_time"
                        show-overflow-tooltip
                        width="150"
                    >
                        <template #default="{ row }">
                            <div>{{ row.admin_name }}</div>
                            <div>{{ row.create_time }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="单号" prop="order_id" show-overflow-tooltip width="180">
                        <template #default="{ row }">
                            <div>{{ row.order_id }}</div>
                            <div>{{ row.order_sn }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="订单类型"
                        prop="order_type_name"
                        show-overflow-tooltip
                    />
                    <!-- <el-table-column label="状态" prop="financial_pm_name" show-overflow-tooltip /> -->
                    <el-table-column label="门店" prop="system_store" show-overflow-tooltip />
                    <el-table-column label="入库" prop="warehousing" show-overflow-tooltip />
                    <el-table-column label="出库" prop="outbound" show-overflow-tooltip />
                    <el-table-column label="总价格" prop="total_price" show-overflow-tooltip />
                    <el-table-column label="内部备注" prop="mark" show-overflow-tooltip />
                    <el-table-column
                        label="代购备注"
                        prop="other_data.store_mark"
                        show-overflow-tooltip
                    />
                    <el-table-column label="通知" prop="msg" show-overflow-tooltip />
                    <!-- <el-table-column label="文件" prop="file" show-overflow-tooltip>
                        <template #default="{ row }">
                            <el-image
                                style="width: 50px; height: 50px"
                                :src="row.file"
                                :preview-teleported="true"
                            />
                        </template>
                    </el-table-column> -->
                    <el-table-column label="结算状态" prop="audit_status" show-overflow-tooltip>
                        <template #default="{ row }">
                            {{ row.audit_status == 1 ? '已结算' : '未结算' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120" fixed="right">
                        <template #default="{ row }">
                            <el-button v-if="row.order_type == 1" link @click="showCopyPop(row)">
                                一键复制
                            </el-button>
                            <el-button type="danger" link @click="handleDrawer(row)">
                                流程
                            </el-button>
                            <router-link
                                :to="{
                                    path: 'beforehand_order_details',
                                    query: {
                                        id: row.id
                                    }
                                }"
                                class="ml-4"
                            >
                                详情
                            </router-link>
                            <el-button
                                link
                                @click="handleEdit(row)"
                                v-perms="['beforehand_order.beforehand_order/edit']"
                            >
                                编辑
                            </el-button>
                            <el-button
                                v-perms="['beforehand_order.beforehand_order/delete']"
                                type="danger"
                                link
                                @click="handleDelete(row.id)"
                            >
                                删除
                            </el-button>
                            <el-button
                                @click="xlsx7(row.id)"
                                v-perms="['beforehand_order.beforehand_order/supply_order']"
                                link
                            >
                                打印供货单
                            </el-button>
                            <el-button
                                v-if="row.uid > 0"
                                @click="xlsx8(row.id)"
                                v-perms="['beforehand_order.beforehand_order/supply_order']"
                                link
                            >
                                打印会员单
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex mt-4 justify-end">
                <pagination v-model="pager" @change="get_lists" />
            </div>
        </el-card>
        <edit-popup
            v-if="showEdit"
            ref="editRef"
            :dict-data="dictData"
            @success="getLists"
            @close="showEdit = false"
        />
        <!-- <details-popup
            v-if="showDetails"
            ref="detailsRef"
            @success="getLists"
            @close="showDetails = false"
            :dictData="dictData"
        /> -->
        <edit-popup v-if="showEdit" ref="editRef" @success="get_lists" @close="showEdit = false" />
        <DrawerPop v-model="showDrawer" ref="drawerRef" @close="showDrawer = false" />
        <CopyPop v-model="showCopy" ref="copyRef" @success="get_lists" @close="showCopy = false" />
    </div>
</template>

<script lang="ts" setup name="warehouseOrderLists">
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import moment from 'moment'
import {
    apiBeforehandOrderLists,
    apiBeforehandOrderDelete,
    apiBeforehandOrderSettle,
    apiPurchaseOrderOrderOutbound,
    apiPurchaseOrderOrderOutbound3,
    apiBeforehandOrderCopy,
    apiBeforehandOrderStatisticsCount
} from '@/api/beforehand_order'
import { apiSystemStoreLists } from '@/api/system_store'
import DrawerPop from './component/drawer.vue'
import EditPopup from './edit.vue'
import CopyPop from './component/copyPop.vue'
import { useRoute } from 'vue-router'
const route = useRoute()

// 是否显示编辑框
const showEdit = ref(false)
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const copyRef = shallowRef<InstanceType<typeof EditPopup>>()

const showDrawer = ref(false)
const statisticsCount = ref([])
const drawerRef = ref(null)
const drawerData = ref([])
const showCopy = ref(false)

const activeName = ref('all')
const handleClick = (e) => {
    if (activeName.value == 'all') {
        queryParams.order_type = ''
    } else {
        queryParams.order_type = activeName.value
    }
    get_lists()
}
const activeName2 = ref('all')
const handleClick2 = (e) => {
    if (activeName2.value == 'all') {
        queryParams.warehouse_type = ''
    } else {
        queryParams.warehouse_type = activeName2.value
    }
    get_lists()
}
const showCopyPop = async (data: any) => {
    showCopy.value = true
    await nextTick()
    copyRef.value?.open(data.id)
}
const handleDrawer = (data: any) => {
    showDrawer.value = true
    drawerRef.value?.open(data.id)
}
// 查询条件
const queryParams = reactive({
    is_store: route.query.is_store ? route.query.is_store : 0,
    order_id: '',
    product_name: '',
    financial_pm: 1,
    store_id: '',
    start_time: '',
    end_time: '',
    supplier_id: '',
    order_sn: '',
    order_ck: '',
    order_rk: '',
    order_type: '',
    warehouse_type: '',
    mark: '',
    is_store: ''
})

const storeOrderList = () => {
    queryParams.is_store = 1
    get_lists()
}
// 选中数据
const selectData = ref<any[]>([])

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
    selectData.value = val.map(({ id }) => id)
}

// 详情
const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.setFormData(data)
}

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiBeforehandOrderLists,
    params: queryParams
})

// 删除
const handleDelete = async (id: number | any[]) => {
    await feedback.confirm('确定要删除？')
    await apiBeforehandOrderDelete({ id })
    get_lists()
}

// 结算
const handleSettle = async (id) => {
    await apiBeforehandOrderSettle({ id })
    get_lists()
}

const startEndTime = ref([])

const changeStartEndTime = () => {
    if (startEndTime.value[0] && startEndTime.value[1]) {
        queryParams.start_time = moment(startEndTime.value[0]).format('YYYY-MM-DD') + ' 00:00:00'
        queryParams.end_time = moment(startEndTime.value[1]).format('YYYY-MM-DD') + ' 23:59:59'
    } else {
        queryParams.start_time = ''
        queryParams.end_time = ''
    }
    get_lists()
}
const xlsx7 = (id) => {
    apiPurchaseOrderOrderOutbound({
        id: id,
        type: 2
    }).then((res) => {
        window.open(res.url, '_blank')
        ElMessage.success('导出成功')
    })
}
const xlsx8 = (id) => {
    apiPurchaseOrderOrderOutbound3({
        id: id
    }).then((res) => {
        window.open(res.url, '_blank')
        ElMessage.success('导出成功')
    })
}
const storeloading = ref(false)
const storeList = ref([])
const remoteMethod = (e = '') => {
    storeloading.value = true
    apiSystemStoreLists({
        name: e,
        page_size: 50
    })
        .then((res) => {
            storeList.value = res.lists
            setTimeout(() => {
                storeloading.value = false
            }, 300)
        })
        .catch((err) => {
            setTimeout(() => {
                storeloading.value = false
            }, 300)
        })
}
const statistics_count = () => {
    apiBeforehandOrderStatisticsCount(queryParams).then((res) => {
        statisticsCount.value = res
    })
}
const get_lists = () => {
    getLists()
    statistics_count()
}
const getResetParams = () => {
    queryParams.order_id = ''
    queryParams.product_name = ''
    queryParams.financial_pm = 1
    queryParams.store_id = ''
    queryParams.start_time = ''
    queryParams.end_time = ''
    queryParams.supplier_id = ''
    queryParams.order_sn = ''
    queryParams.order_ck = ''
    queryParams.order_rk = ''
    queryParams.order_type = ''
    queryParams.warehouse_type = ''
    queryParams.mark = ''
    resetParams()
}
onMounted(() => {
    get_lists()
})
</script>
