<template>
    <div>
        <el-table :data="pager.lists" border style="width: 100%; margin-top: 10px">
            <el-table-column prop="id" label="ID" width="60" />
            <el-table-column label="商品图片" prop="image" width="120">
                <template #default="{ row }">
                    <el-image
                        style="width: 50px; height: 50px"
                        :src="row.image"
                        :preview-teleported="true"
                    />
                </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="store_name" show-overflow-tooltip />
            <el-table-column label="单位" prop="unit_name" show-overflow-tooltip />
            <el-table-column label="退库数量" prop="nums" show-overflow-tooltip />
            <el-table-column label="退库价" prop="price" 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="操作" fixed="right">
                <template #default="{ row }">
                    <el-button type="primary" link @click="returnWarehouseClick(row)"
                        >退供应商</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div class="flex mt-4 justify-end">
            <pagination v-if="pager.lists" v-model="pager" @change="getLists" />
        </div>
    </div>
    <el-dialog v-model="returnWarehouseShow" title="退货设置" width="600">
        <el-form :model="returnWarehouseData" label-width="90px">
            <el-form-item label="商品名称" prop="store_name">
                <el-input
                    v-model="returnWarehouseData.store_name"
                    clearable
                    :readonly="false"
                    disabled
                />
            </el-form-item>
            <el-form-item label="数量" prop="nums">
                <el-input
                    v-model="returnWarehouseData.nums"
                    clearable
                    :readonly="false"
                    placeholder="请输入数量"
                />
            </el-form-item>
            <el-form-item label="备注" prop="mark">
                <el-input
                    v-model="returnWarehouseData.mark"
                    clearable
                    :readonly="false"
                    placeholder="请输入备注"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="returnWarehouseShow = false">取消</el-button>
                <el-button type="primary" @click="returnWarehouseAdd"> 确认 </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup name="subOrder">
import { usePaging } from '@/hooks/usePaging'
import {
    apiWarehouseProductReturnLists,
    apiWarehouseProductReturnAdd
} from '@/api/warehouse_product_return'
const returnWarehouseShow = ref(false)
const returnWarehouseData = ref({
    id: '',
    nums: '',
    store_name: '',
    financial_pm: 0,
    return_type: 2,
    mark: ''
})
const queryParams = reactive({
    bhoid: '',
    return_type: 1
})
const returnWarehouseClick = (data: any) => {
    returnWarehouseShow.value = true
    returnWarehouseData.value.id = data.id
    returnWarehouseData.value.store_name = data.store_name
    returnWarehouseData.value.nums = data.nums
}
//请求退库
const returnWarehouseAdd = (data: any) => {
    returnWarehouseShow.value = false
    apiWarehouseProductReturnAdd(returnWarehouseData.value).then((res) => {})
}
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiWarehouseProductReturnLists,
    params: queryParams
})
function getList(order) {
    queryParams.bhoid = order.id
    getLists()
}
defineExpose({
    getList
})
</script>
