<template>
    <div>

        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Thông tin khách hàng</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Trang chủ</a></li>
                    <li class="breadcrumb-item" aria-current="page">Quản lý khách hàng</li>
                    <li class="breadcrumb-item active" aria-current="page">Thông tin khách hàng</li>
                </ol>
            </div>
        </div>
        <div class="row row-sm">
            <div class="col-lg-12">
                <!-- <a href="/bai-viet" class="btn btn-link button-icon"><i class="fe fe-arrow-left me-2"></i>Danh sách bài viết </a> -->
                <router-link class="btn btn-link button-icon mb-2" :to="{ name: 'crm-customer' }">
                    <i class="fe fe-arrow-left me-2"></i>Danh sách khách hàng
                </router-link>
            </div>

        </div>
        <div class="row row-sm pt-3" style="position: relative;">
            <blockui v-if="loading"></blockui>
            <div class="col-xl-4">
                <General ref="generalRef" @reload="getById(id)"></General>
            </div>
            <div class="col-xl-8">

                <div class="card" style="min-height: 469px;">
                    <div class="card-body">
                        <div class="tabs-menu ">
                            <!-- Tabs -->
                            <ul class="nav nav-tabs profile navtab-custom panel-tabs">
                                <li class="">
                                    <a href="#sourceAddress" data-bs-toggle="tab" class="active" aria-expanded="true">
                                        <span class="visible-xs"><i class="fa fa-address-card tx-16 me-1"></i></span>
                                        <span class="hidden-xs">ĐỊA CHỈ GỬI</span> </a>
                                </li>
                                <li class="">
                                    <a href="#destAddress" data-bs-toggle="tab" aria-expanded="false" class=""> <span
                                            class="visible-xs"><i class="fa fa-address-book tx-15 me-1"></i></span>
                                        <span class="hidden-xs">ĐỊA CHỈ NHẬN</span> </a>
                                </li>
                                <li class="">
                                    <a href="#bankAccount" data-bs-toggle="tab" aria-expanded="false" class=""> <span
                                            class="visible-xs"><i class="fas fa-university tx-15 me-1"></i></span>
                                        <span class="hidden-xs">TÀI KHOẢN NGÂN HÀNG</span> </a>
                                </li>
                                <li class="">
                                    <a href="#vatInfo" data-bs-toggle="tab" aria-expanded="false" class=""> <span
                                            class="visible-xs"><i class="fas fa-file-invoice tx-15 me-1"></i></span>
                                        <span class="hidden-xs">THÔNG TIN VAT</span> </a>
                                </li>

                            </ul>
                        </div>
                        <div class="tab-content border border-top-0 p-4 br-dark">
                            <div class="tab-pane active" id="sourceAddress">
                                <cus-address :customerId="props.id" addType="1"></cus-address>

                            </div>
                            <div class="tab-pane" id="destAddress">
                                <cus-address :customerId="props.id" addType="2"></cus-address>
                            </div>
                            <div class="tab-pane" id="bankAccount">
                                <BankAccount :customerId="props.id" :customerName="customerModel.FullName">
                                </BankAccount>
                            </div>
                            <div class="tab-pane" id="vatInfo">
                                <VatInfo :customerId="props.id" :customerName="customerModel.FullName">
                                </VatInfo>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>

<script setup>

import { ref, onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

import { General, CusAddress, BankAccount, VatInfo } from './components';

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


//#region props
const props = defineProps({
    id: {
        type: String,
        default: ''
    }
});
//#endregion

//#region DATA
const loading = ref(false);

const generalRef = ref(null);


let customerModel = reactive({
    Id: 0,
    FullName: '',
    PhoneNumber: '',
    Address: '',
    Email: '',
    Status: 0,
    StatusStr: '',
    Manager: {
        Id: 0,
        UserName: '',
        FullName: '',
        IsLocked: false
    }
});
//#endregion

//#region Methods

async function getById(id) {
    var customerId = parseInt(id);
    var customerResult = await customerService.getById(customerId);

    customerModel.Id = customerResult.Id;
    customerModel.FullName = customerResult.FullName;
    customerModel.PhoneNumber = customerResult.PhoneNumber;
    customerModel.Address = customerResult.Address;
    customerModel.Email = customerResult.Email;
    customerModel.Status = customerResult.Status;
    customerModel.StatusStr = customerResult.StatusStr;
    customerModel.Manager = customerResult.Manager;
    customerModel.UserName = customerResult.UserName;
    customerModel.UserId = customerResult.UserId;
    generalRef.value.init(customerModel);
}

//#endregion



//#region Events
onMounted(async () => {
    loading.value = true;
    console.log(props.id);
    if (props.id > 0) {
        await getById(props.id);
        // customerModel.Id = props.id;
    }
    loading.value = false;
})
//#endregion



</script>

<style scoped>
.navtab-custom li a {
    padding: 13px 16px !important;
}

.profile.navtab-custom li a {
    padding: 13px 8px;
    color: #000;
    background: transparent;
    margin-inline-end: 7px;
    border-start-start-radius: 7px;
    border-start-end-radius: 7px;
    border-block-end: 0;
    font-size: 13px;
    border: none;
}

.profile.navtab-custom li a.active {
    border-bottom: 3px solid #ffcb05;
}
</style>