<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-11-11 14:42:46
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2024-01-03 11:29:32
 * @FilePath: \housekeeping-admin\src\views\order\lists\components\cancelOrderDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-dialog
        :model-value="visible"
        :title="title"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="handleCancel"
        :width="width"
    >
        <el-form :model="form" ref="formRef" :rules="rules" label-width="100">
            <template v-if="form.intervalTime">
                <el-form-item label="开始服务前">
                    <el-input v-model="form.intervalTime" disabled>
                        <template #append>分钟</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="扣款比例" prop="value">
                    <el-input v-model="form.value" @change="calcMoney">
                        <template #append>%</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="服务金额">
                    <el-input v-model="form.totalPayPrice" disabled>
                        <template #prepend>￥</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="扣款金额">
                    <el-input v-model="form.deductMoney" disabled>
                        <template #prepend>￥</template>
                    </el-input>
                </el-form-item>
            </template>
            <el-form-item label="" label-width="0">
                <el-input
                    v-model="form.refundReason"
                    placeholder="请输入取消订单原因"
                    autocomplete="off"
                    type="textarea"
                    show-word-limit
                    maxlength="255"
                    :autosize="{ minRows: 3, maxRows: 5 }"
                    :disabled="userCancel"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleConfirm">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { apiDispatchStaffScore } from '@/api/order/lists'
import type { FormInstance, FormRules } from 'element-plus'
import { reactive, ref } from 'vue'
import { validateValue } from '@/utils/validate'
import { retain } from '@/utils/util'

const props = defineProps({
    title: { type: String, default: '' },
    visible: { type: Boolean, default: true },
    width: { type: [Number, String], default: '50%' },
    onCancel: { type: Function, default: () => {} },
    onConfirm: { type: Function, default: () => {} },
    orderInfo: { type: Object, default: () => ({}) }
})
const formRef = ref<FormInstance>()
const form = reactive({
    orderId: props.orderInfo.id,
    refundReason: '',
    deductMoney: '',
    totalPayPrice: '',
    value: '',
    intervalTime: '',
    practicalDeductionRatio: ''
})
const rules = reactive<FormRules>({
    value: [
        { required: true, message: '请输入扣款比例', trigger: 'blur' },
        { validator: validateValue, trigger: 'blur' }
    ]
})

const userCancel = ref(false)
/**确认 */
const handleConfirm = () => {
    formRef.value?.validate(valid => {
        if (!valid) return
        props.onConfirm(form)
        handleCancel()
    })
}
const handleCancel = () => {
    props.onCancel()
}
/**获取扣款比例 */
const fetchRate = async () => {
    try {
        const data = {
            orderId: props.orderInfo.id
        }
        const res = await apiDispatchStaffScore(data)
        // for (const key in res) {
        //     form[key] = res[key]
        // }
        form.refundReason = res.refundReason
        form.totalPayPrice = res.totalPayPrice
        form.intervalTime = res.intervalTime
        form.practicalDeductionRatio = res.value
        userCancel.value = !!form.refundReason
    } catch (error) {}
}
const calcMoney = () => {
    formRef.value?.validate(valid => {
        if (valid) {
            form.deductMoney = retain((form.totalPayPrice * form.value) / 100, 2)
        }
    })
}
onMounted(fetchRate)
</script>
<style scoped></style>
