<template>
    <div>
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Tra cứu cước phí</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Trang chủ</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Tra cứu cước phí</li>
                </ol>
            </div>
        </div>
        <div class="row row-sm mb-5">
            <div class="col-sm-12 col-md-9">
                <div class="card card-search shadow-none">
                    <Form v-if="!loading" @submit="onSubmit" :validation-schema="schema"
                        v-slot="{ errors, isSubmitting }" class="card-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <h5>Gửi từ</h5>
                            </div>
                            <div class="col-lg-12 mb-4">
                                <Address v-model:ward-id="checkFeeModel.SourceWardId"></Address>
                                <Field v-model="checkFeeModel.SourceWardId" name="SourceWardId" type="hidden" />
                                <ErrorMessage class="invalid-error" name="SourceWardId" />
                            </div>
                            <div class="col-lg-12">
                                <h5>Gửi đến</h5>
                            </div>
                            <div class="col-lg-12 mb-4">
                                <Address v-model:ward-id="checkFeeModel.DestWardId"></Address>
                                <Field v-model="checkFeeModel.DestWardId" name="DestWardId" type="hidden" />
                                <ErrorMessage class="invalid-error" name="DestWardId" />
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group mb-3">
                                    <label>Trọng lượng tính cước (kg)</label>
                                    <Field v-model="checkFeeModel.Weight" name="Weight" type="number"
                                        class="form-control" placeholder="trọng lượng tính cước"
                                        :class="{ 'is-invalid': errors.Weight }" />
                                    <div class="invalid-feedback">{{ errors.Weight }}</div>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-group mb-3">
                                    <label>Chiều dài (cm)</label>
                                    <Field v-model="checkFeeModel.Length" name="Length" type="number"
                                        class="form-control" placeholder="chiều dài"
                                        :class="{ 'is-invalid': errors.Length }" />
                                    <div class="invalid-feedback">{{ errors.Length }}</div>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-group mb-3">
                                    <label>Chiều rộng (cm)</label>
                                    <Field v-model="checkFeeModel.Width" name="Width" type="number" class="form-control"
                                        placeholder="chiều rộng" :class="{ 'is-invalid': errors.Width }" />
                                    <div class="invalid-feedback">{{ errors.Width }}</div>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-group mb-3">
                                    <label>Chiều cao (cm)</label>
                                    <Field v-model="checkFeeModel.Height" name="Height" type="number"
                                        class="form-control" placeholder="chiều cao"
                                        :class="{ 'is-invalid': errors.Height }" />
                                    <div class="invalid-feedback">{{ errors.Height }}</div>
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-main-primary" :disabled="isSubmitting">
                                    <span v-show="isSubmitting" class="spinner-border spinner-border-sm"></span>
                                    Tra cước
                                </button>

                            </div>
                        </div>


                    </Form>
                </div>
            </div>
            <div class="col-sm-12 col-md-3 grid-margin">
                <div class="card shadow-none">
                    <div class="card-body">
                        <table class="table table  border-0">
                            <tbody>
                                <tr class="border-none">
                                    <td class="text-right">Trọng lượng kích thước:</td>
                                    <td>
                                        {{ vueNumberFormat(weightBySize,
                                            { precision: 0, prefix: '', suffix: ' kg', decimal: ',', thousand: '.' }) }}
                                    </td>
                                </tr>
                                <tr class="border-none">
                                    <td class="text-right">Trọng lượng tính cước:</td>
                                    <td>
                                        {{ vueNumberFormat(weightBySize > checkFeeModel.Weight ? weightBySize :
                                            checkFeeModel.Weight,
                                            { precision: 0, prefix: '', suffix: ' kg', decimal: ',', thousand: '.' }) }}
                                    </td>
                                </tr>
                                <tr class="border-none">
                                    <td class="text-right">Cước vận chuyển:</td>
                                    <td>
                                        {{ vueNumberFormat(feeResult.Fee,
                                            { precision: 0, prefix: '', suffix: ' đ', decimal: ',', thousand: '.' }) }}
                                    </td>
                                </tr>
                                <tr class="border-none">
                                    <td class="border-none">Phụ phí:</td>
                                    <td>
                                        {{ vueNumberFormat(feeResult.SubFee,
                                            { precision: 0, prefix: '', suffix: ' đ', decimal: ',', thousand: '.' }) }}
                                    </td>
                                </tr>
                                <tr class="border-none">
                                    <td class="border-none">Tên tuyến:</td>
                                    <td>{{ feeResult.RouteName }}</td>
                                </tr>
                                <tr class="border-none">
                                    <td class="border-none">Tổng cước:</td>
                                    <td>{{ vueNumberFormat(feeResult.TotalFee,
                                        { precision: 0, prefix: '', suffix: ' đ', decimal: ',', thousand: '.' }) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


        </div>

    </div>
</template>

<script setup>
//#region Imports
import { ref, reactive, computed } from 'vue'
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as Yup from 'yup';
//#endregion

//#region Toast
import { useToast } from "vue-toastification";
const toast = useToast();
//#endregion

//#region Services
import priceService from "@/services/priceService";
//#endregion


//#region Components
import PlaceAutocomplete from "@/components/locations/PlaceAutocomplete.vue";
import Address from "@/components/locations/Address.vue";
//#endregion


//#region Validations
const schema = Yup.object().shape({
    SourceWardId: Yup.number().required('Chọn địa chỉ nguồn').min(1, 'Chọn địa chỉ nguồn'),
    DestWardId: Yup.number().required('Chọn địa chỉ đích').min(1, 'Chọn địa chỉ đích'),
    Weight: Yup.number().required('Vui lòng nhập trọng lượng').min(1, 'Vui lòng nhập trọng lượng'),
});
//#endregion


const loading = ref(false);



const checkFeeModel = reactive({
    SourceWardId: null,
    DestWardId: null,
    Weight: 0,
    Length: 0,
    Width: 0,
    Height: 0
});

const weightBySize = computed(() => {

    return Math.ceil(checkFeeModel.Width * checkFeeModel.Length * checkFeeModel.Height / 6000);
})

const feeResult = reactive({
    Fee: 0,
    SubFee: 0,
    Discount: 0,
    TotalFee: 0,
    RouteName: ''

});



const onSubmit = async () => {
    console.log('submit');
    var result = await priceService.checkFee(checkFeeModel);
    console.log(result);
    if (result.Result === 1) {
        feeResult.Fee = result.Fee;
        feeResult.RouteName = result.RouteName;
        feeResult.TotalFee = feeResult.Fee + feeResult.SubFee - feeResult.Discount;
    } else {
        toast.error('Thất bại: ' + result.Message);

    }
};

</script>
