<template>
    <q-dialog v-model="openDialog" persistent :maximized="true" transition-show="slide-up" transition-hide="slide-down">
        <q-card>
            <q-card-section class="no-padding">
                <q-bar class="bg-primary text-white glossy">
                    <div>盘点操作</div>
                    <q-space />
                    <q-btn dense flat round icon="close" @click="openDialog = false" />
                </q-bar>
                <q-card-section :style="topStyle">
                    <div class="row q-col-gutter-md">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12" align="center">
                            <q-btn-toggle v-model="formData.status" no-caps rounded unelevated size="lg" push glossy
                                toggle-color="primary" :options="[
                                    { slot: 'balance', value: 1 },
                                    { slot: 'profit', value: 2 },
                                    { slot: 'loss', value: 3 }
                                ]">
                                <template v-slot:balance>
                                    <div class="items-center item">
                                        <q-icon name="check_circle_outline" color="positive" />
                                        盘平
                                    </div>
                                </template>
                                <template v-slot:profit>
                                    <div class="items-center item">
                                        <q-icon name="add_circle_outline" color="secondary" />
                                        盘盈
                                    </div>
                                </template>
                                <template v-slot:loss>
                                    <div class="items-center item">
                                        <q-icon name="remove_circle_outline" color="negative" />
                                        盘亏
                                    </div>
                                </template>
                            </q-btn-toggle>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12 "
                            v-show="Number(formData.status) == 2 || Number(formData.status) == 3">
                            <q-input class="text-h6" type="number" outlined clearable
                                :bg-color="Number(formData.inventoryQty) > 0 ? 'white' : ''" v-model="formData.inventoryQty"
                                :rules="[(val: number) => val >= 0 || '实盘数量不能小于0！']" label="实盘数量">
                                <template v-slot:append>
                                    <h6>
                                        {{ '库存数量：' + curObj.dynamicQty }}
                                    </h6>
                                </template>
                            </q-input>
                        </div>
                    </div>
                </q-card-section>
            </q-card-section>
            <q-separator />
            <q-card-section :style="{ height }" class="scroll">
                <div class="row q-col-gutter-md">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12">
                        <q-input class="text-h6" disable readonly standout label="物料名称" v-model="curObj.materialName" />
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12">
                        <q-input class="text-h6" disable readonly standout label="物料编码" v-model="curObj.materialCode" />
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12">
                        <q-input class="text-h6" disable readonly standout label="规格型号" v-model="curObj.specsName" />
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12"
                        v-show="Number(formData.status) == 0 || Number(formData.status) == 1">
                        <q-input class="text-h6" disable readonly standout label="库存数量" v-model="curObj.dynamicQty" />
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12">
                        <q-input class="text-h6" disable readonly standout label="库区名称" v-model="curObj.areaName" />
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12">
                        <q-input class="text-h6" disable readonly standout label="库位名称" v-model="curObj.binName" />
                    </div>
                    <!-- <div class="col-xl-6 col-lg-6 col-md-6 col-xs-12">
                        <q-btn-toggle v-model="formData.status" size="lg" push glossy toggle-color="primary" :options="[
                            { slot: 'balance', value: 1 },
                            { slot: 'profit', value: 2 },
                            { slot: 'loss', value: 3 }
                        ]">
                            <template v-slot:balance>
                                <div class="items-center" style="font-size: 18px;">
                                    <q-icon left name="check_circle_outline" />
                                    盘平
                                </div>
                            </template>
                            <template v-slot:profit>
                                <div class="items-center" style="font-size: 18px;">
                                    <q-icon name="add_circle_outline" />
                                    盘盈
                                </div>
                            </template>
                            <template v-slot:loss>
                                <div class="items-center" style="font-size: 18px;">
                                    <q-icon name="remove_circle_outline" />
                                    盘亏
                                </div>
                            </template>
                        </q-btn-toggle>
                    </div> -->
                </div>
            </q-card-section>
            <q-separator />
            <q-card-actions align="right">
                <q-btn glossy push rounded color="white" text-color="black" class="q-mr-sm" @click="openDialog = false">{{
                    $t('cancel')
                }}</q-btn>
                <q-btn glossy push rounded color="primary" v-if="!overReceivingFlag" @click="submitForm()">{{
                    $t('submit')
                }}</q-btn>
            </q-card-actions>
        </q-card>
    </q-dialog>
</template>

<script setup lang="ts">
import { Dialog, Notify, Screen } from 'quasar';
import { inventoryApi } from 'src/api/inventory/inventoryApi';
import { ref, watch } from 'vue';

const curObj = ref();
const height = ref(Screen.height - 170 + 'px');
const topStyle = ref({
    padding: '16px'
})
const formData = ref({
    inventoryDetailMaterialId: 0,
    status: 0,
    inventoryQty: ''
});

const emit = defineEmits(['refresh'])
const openDialog = ref(false);
const overReceivingFlag = ref(false);


const clearFormData = () => {
    formData.value.inventoryDetailMaterialId = 0
    formData.value.status = 0
    formData.value.inventoryQty = ''
};


const clickForm = (e?: any) => {
    clearFormData();
    curObj.value = e
    formData.value.inventoryDetailMaterialId = e.id
    // 状态：0待盘点，1正常，2盘盈，3盘亏
    // 盘点单状态：1：待盘点 2：已盘点 3：已更新库存
    if (e.inventoryStatus == 3) {
        Notify.create({
            message: '无法操作盘点',
            icon: 'close',
            color: 'negative',
        });
        return
    }
    openDialog.value = true;
};

// 提交收货
const submitForm = () => {
    if (formData.value.status == 0) {
        Notify.create({
            message: '请选择盘点状态！',
            icon: 'warning',
            color: 'warning',
            position: 'top'
        })
        return
    }
    Dialog.create({
        title: '系统提示',
        message: '是否提交?',
        class: 'text-h7 text-weight-bold',
        cancel: true,
        persistent: true
    }).onOk(() => {
        if (formData.value.status == 1) {
            formData.value.inventoryQty = curObj.value.dynamicQty
        }
        inventoryApi.check(formData.value).then(() => {
            openDialog.value = false;
            emit('refresh');
        });
    }).onCancel(() => { })
};

// 监听
watch(() => { return formData.value.status }, (value: any) => {
    if (value == 1 || value == 0) {
        height.value = Screen.height - 170 + 'px';
        topStyle.value.padding = '16px'
    } else {
        height.value = Screen.height - 246 + 'px';
        topStyle.value.padding = '16px 16px 0 16px'
    }
});

defineExpose({
    clickForm
})
</script>
<style scoped>
.item {
    font-size: 19px;
}
</style>