<!--
 * @Author: micky
 * @Date: 2024-08-10 20:38:23
 * @LastEditors: micky
 * @LastEditTime: 2024-10-31 20:05:02
 * @FilePath: \chargingpile-uniapp\src\components\widgets\cancel-order\cancel-order.vue
-->
<template>
    <root-portal>
        <u-popup
            :show="popupShow"
            round="10"
            :closeOnClickOverlay="true"
            :closeable="true"
            @close="popupHidden"
        >
            <view class="popup">
                <view class="h-[80rpx] leading-[80rpx] w-full text-center">{{ showText }}原因</view>
                <u-textarea
                    v-model="cancelCause"
                    :placeholder="`请填写${showText}原因（必填）`"
                    maxlength="250"
                    count
                    height="150"
                    border="none"
                ></u-textarea>
                <view class="btn-wrapper">
                    <u-button
                        class="btn"
                        text="提交"
                        color="#2759FF"
                        shape="circle"
                        size="middle"
                        @click="handleSubmit"
                    ></u-button>
                </view>
            </view>
        </u-popup>
    </root-portal>
</template>

<script setup lang="ts">
import { ref, unref, inject } from 'vue'
import { toast } from '@/utils/util'
import { apiOverhaulBackOrder, apiInspectBackOrder } from '@/api/overhaul'
import { apiReassignment } from '@/api/repair'
import { WorkOrderTypeEnum } from '@/enums/businessEnums'

const props = defineProps({
    id: {
        type: [String, Number]
    },
    type: {
        type: Number
    },
    pageSource: {
        type: [String, Number]
    },
    showText: {
        type: String,
        default: '退单'
    }
})
const parentNode = inject('pool')
const emit = defineEmits(['refresh'])
const popupShow = ref(false)
const cancelCause = ref('')
const showPopup = () => {
    popupShow.value = true
}
const popupHidden = () => {
    popupShow.value = false
    cancelCause.value = ''
}

const handleSubmit = async () => {
    if (!unref(cancelCause)) return toast(`请输入${props.showText}原因`)
    const api =
        props.type == WorkOrderTypeEnum.INSPECTION
            ? apiInspectBackOrder
            : props.type == WorkOrderTypeEnum.OVERHAUL
            ? apiOverhaulBackOrder
            : apiReassignment
    await api({
        id: props.id,
        cancelCause: unref(cancelCause),
        isClient: props.pageSource
    })
    const text = props.showText == '改派' ? '已提交，等待维修主管审核' : `${props.showText}成功`
    toast(text)
    popupShow.value = false
    parentNode?.refreshPage()
    emit('refresh')
}

defineExpose({
    showPopup
})
</script>

<style lang="scss" scoped>
.popup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .btn-wrapper {
        padding: 0 32rpx;
        height: 120rpx;
        @include flex-align;
        border-top: 1px solid $gray-3;
        .btn {
            width: 100%;
        }
    }
}
</style>
