<template>
    <div>
        <el-form ref="formRef" :model="formData">
            <el-form-item label="总价" prop="total_price">
                <el-input
                    v-model="formData.total_price"
                    clearable
                    placeholder="请输入总价"
                    :readonly="false"
                    style="width: 240px"
                />
            </el-form-item>
            <el-form-item label="商品" prop="store_id">
                <div class="flex-1 w-full">
                    <div class="mb-2">
                        <el-button type="primary" @click="showProduct = true">添加商品</el-button>
                    </div>
                    <el-table :data="productList">
                        <el-table-column label="商品ID" prop="id" show-overflow-tooltip />
                        <el-table-column label="商品图片" prop="image" min-width="80">
                            <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"
                            min-width="200"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="单位"
                            prop="unit_name"
                            min-width="80"
                            show-overflow-tooltip
                        />
                        <el-table-column label="数量">
                            <template #default="{ row }">
                                <el-input v-model="row.cart_num" @change="handleChange(row)" />
                            </template>
                        </el-table-column>
                        <el-table-column label="价格" prop="price" />
                        <el-table-column label="总价" prop="total_price" />
                        <el-table-column label="操作" width="120" fixed="right">
                            <template #default="{ row }">
                                <el-button type="danger" link @click="handleDeleteProdut(row.id)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-form-item>
            <el-form-item label="">
                <el-button @click="handleSubmit" type="primary" class="w-40">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-dialog v-model="showProduct" title="选择商品" width="70%">
        <refund-product-pop
            @onBindRefundProduct="onBindRefundProduct"
            :oid="props.id"
        ></refund-product-pop>
    </el-dialog>
</template>

<script lang="ts" setup name="refundOrderProduct">
import { ElMessage, type FormInstance } from 'element-plus'
import useMultipleTabs from '@/hooks/useMultipleTabs'
import { useRouter } from 'vue-router'
import { apiStoreOrderRefund } from '@/api/store_order'
const props = defineProps<{
    id: number | string
    order_id: number | string
}>()
// 表单数据
const formData = reactive({
    warehouse_id: '',
    supplier_id: '',
    code: '',
    total_price: 0,
    order_type: 1,
    mark: ''
})

const showProduct = ref(false) // 选择商品列表是否显示
// 商品列表
const productList = ref([])
// 删除已有商品
const handleDeleteProdut = (id: number) => {
    productList.value = productList.value.filter((item: any) => item.id !== id)
}
// 选择商品
const onBindRefundProduct = (e: any[]) => {
    e.forEach((item: any) => {
        if (!productList.value.find((t: any) => t.id == item.id)) {
            productList.value.push(item)
        }
    })
    showProduct.value = false
}
function handleChange(row) {
    row.total_price = (row.cart_num * row.price).toFixed(2)
    if (row.total_price > 0) {
        formData.total_price = (
            parseFloat(formData.total_price) + parseFloat(row.total_price)
        ).toFixed(2)
    }
}

const router = useRouter()
// 提交按钮
const handleSubmit = async () => {
    const product_arr = productList.value.map((item: any) => {
        return {
            product_id: item.product_id,
            cart_num: item.cart_num
        }
    })
    apiStoreOrderRefund({
        order_id: props.order_id,
        product_arr,
        refund_price: formData.total_price
    }).then((res) => {
        setTimeout(() => {
            location.reload()
        }, 2000)
    })
}
</script>
