<template>
    <el-drawer v-model="showDialog" title="订单详情" :size="700">
        <el-card class="mb-3" v-for="item in formData" :key="item.id">
            <div style="display: inline-block; margin-right: 20px">{{ item.title }}:</div>
            <div style="display: inline-block; margin-right: 20px">供货价:{{ item.purchase }}</div>
            <div style="display: inline-block; margin-right: 20px">
                计算方式:
                <el-select
                    v-model="item.price_type"
                    placeholder="请选择计算方式"
                    style="width: 80px"
                    @change="handleChange(item)"
                >
                    <el-option :value="1" label="加"></el-option>
                    <el-option :value="2" label="减"></el-option>
                    <el-option :value="3" label="乘"></el-option>
                </el-select>
            </div>
            <div style="display: inline-block; margin-right: 20px">
                加价值:<el-input
                    v-model="item.base_rate"
                    style="width: 80px"
                    @change="handleChange(item)"
                />
            </div>
            <div style="display: inline-block; margin-right: 20px">
                售价:<el-input v-model="item.price" style="width: 80px" />
            </div>
        </el-card>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
    </el-drawer>
</template>

<script lang="ts" setup name="storeProductGroupPriceDETAILS">
import type { FormInstance } from 'element-plus'
import {
    apiStoreProductGroupPriceDetail,
    apiStoreProductGroupPriceEdit
} from '@/api/store_product_group_price'
import { timeFormat } from '@/utils/util'
import type { PropType } from 'vue'
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const showDialog = ref(false)
function handleChange(row) {
    if (row.base_rate > 0 && row.purchase > 0) {
        if (row.price_type == 1) {
            row.price = (parseFloat(row.purchase) + parseFloat(row.base_rate)).toFixed(2)
        } else if (row.price_type == 2) {
            row.price = (parseFloat(row.purchase) - parseFloat(row.base_rate)).toFixed(2)
        } else if (row.price_type == 3) {
            row.price = (parseFloat(row.purchase) * parseFloat(row.base_rate) / 100).toFixed(2)
        }
    }
}

// 表单数据
const formData = ref([])

// 获取详情
const setFormData = async (data: Record<any, any>) => {
    formData.value = data
}

const getDetail = async (row: Record<string, any>) => {
    const data = await apiStoreProductGroupPriceDetail({
        product_id: row.id
    })
    setFormData(data)
}
const handleSubmit = () => {
    apiStoreProductGroupPriceEdit(formData.value).then(() => {
        emit('close')
    })
}
//打开弹窗
const open = () => {
    showDialog.value = true
}

// 关闭回调
const handleClose = () => {
    emit('close')
}

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