<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">
            <el-form-item label="当前服务评分：">
                {{ serviceComment }}
                <span class="ml-1">分</span>
            </el-form-item>
            <el-form-item label="修改当前服务评分为：">
                <el-select v-model="form.customerServiceAppraise" placeholder="请选择" @change="fetchStaffScore(form.customerServiceAppraise)">
                    <el-option v-for="(option, index) in 5" :key="index" :value="option">{{ option }}</el-option>
                </el-select>
                <span class="ml-2">分</span>
            </el-form-item>
            <el-form-item label="修改后师傅评分为：">
                <span class="text-error font-bold text-lg">{{ staffScore }}</span>
                <span class="ml-1">分</span>
            </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 { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { apiStaffScore } from '@/api/service/evaluate'

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: () => {} },
    originScore: { type: Number, default: 5 },
    // staffScore: { type: String, default: '' },
    serviceComment: { type: String, default: '' },
    id: { type: [Number, String], default: '' },
    staffId: { type: [Number, String], default: '' }
})
const formRef = ref<FormInstance>()
const form = reactive({
    customerServiceAppraise: props.originScore
})
/**确认 */
const handleConfirm = () => {
    formRef.value?.validate(valid => {
        if (!valid) return
        props.onConfirm(form)
        handleCancel()
    })
}
const handleCancel = () => {
    props.onCancel()
}

const staffScore = ref(0)
const fetchStaffScore = async (score?: number) => {
    const { id, staffId, serviceComment } = props
    const data = {
        id,
        staffId,
        score: score ?? serviceComment
    }
    try {
        staffScore.value = await apiStaffScore(data)
    } catch {
        handleCancel()
    }
}

fetchStaffScore()
</script>
<style scoped></style>
