<template>
    <el-dialog title="退款" v-model="showDialog" width="400px" @close="reset">
        <el-form ref="refundFormRef" :model="refundForm" :rules="refundFormRules" label-position="top">
            <el-form-item label="退单数" prop="num">
                <el-select v-model="refundForm.num" placeholder="请选择退单数" style="width: 100%;" @change="refundNumChange">
                    <el-option :label="item" :value="item" v-for="item in refundNumList" :key="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="退单金额">
                <el-input v-model="refundForm.refundAmount" disabled placeholder="请选择退单数"></el-input>
            </el-form-item>
            <el-form-item label="退款原因">
                <el-input v-model="refundForm.refundReason" type="textarea" placeholder="请输入退款原因"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showDialog = false" style="width: 100%;">取消</el-button>
            <el-button type="primary" :loading="refundLoading" @click="refundConfirm" style="width: 100%;">确
                定</el-button>
        </span>
    </el-dialog>
</template>

<script setup>
import { returnGpOrder } from '@/api/group'
import { ref, reactive } from 'vue'
import { ElMessage } from "element-plus";

const emits = defineEmits(["success"]);

const newRow = ref('')
const showDialog = ref(false)
const refundLoading = ref(false)
const refundFormRef = ref(null)
const refundForm = reactive({
    num: '',
    orderId: '',
    refundAmount: '',
    refundDesc: '',
    refundReason: ''
})

const refundFormRules = reactive({
    num: [
        {
            required: true,
            message: ' ',
            trigger: 'change'
        }
    ]
})

const refundNumList = ref([])

// 提交退单
function refundConfirm() {
    refundFormRef.value.validate(async valid => {
        if (valid) {
            try {
                refundLoading.value = true
                const res = await returnGpOrder(refundForm)
                ElMessage.success('退单成功')
                refundLoading.value = false
                showDialog.value = false
                emits('succcess')
            } catch (error) {
                console.log(error);
                refundLoading.value = false
            }
        }
    })
}

// 计算退单金额
function refundNumChange(e) {
    refundForm.refundAmount = Math.floor(newRow.value.orderAmount / newRow.value.number * e * 100) / 100
}

// 显示
function show(row) {
    showDialog.value = true;
    newRow.value = row
    let arr = []
    for (let i = 1; i <= row.number - row.refundNumber; i++) {
        arr.push(i)
    }
    refundNumList.value = arr
    refundForm.orderId = row.id
}

// 初始化
function reset() {
    newRow.value = ''
    refundNumList.value = []
    refundForm.orderId = ''
    for (let key in refundForm) {
        refundForm[key] = ''
    }
    refundFormRef.value.resetFields()
}

defineExpose({
    show
});
</script>

<style scoped lang="scss">
.dialog-footer {
    display: flex;
}
</style>