<!--
 * @Author: micky
 * @Date: 2024-08-10 20:38:23
 * @LastEditors: micky
 * @LastEditTime: 2024-10-19 21:59:33
 * @FilePath: \chargingpile-uniapp\src\components\widgets\cancel-material\cancel-material.vue
-->
<template>
    <root-portal>
        <u-popup
            :show="popupShow"
            round="10"
            :closeOnClickOverlay="true"
            :closeable="true"
            @close="popupHidden"
        >
            <view class="popup">
                <view class="h-[40px] leading-[40px] w-full text-center">取消领料原因</view>
                <u-textarea
                    v-model="cancelCause"
                    placeholder="请填写取消领料原因（必填）`"
                    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 { apiReturnMaterial } from '@/api/repair'

const props = defineProps({
    id: {
        type: [String, Number]
    },
    type: {
        type: Number
    },
    pageSource: {
        type: [String, Number]
    }
})
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('请输入取消领料原因')
    await apiReturnMaterial({
        id: props.id,
        repairOrderStepRemark: unref(cancelCause)
    })
    toast(`取消领料成功`)
    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>
