<template>
    <div>
        <div class="card mg-b-20">
            <div class="card-body">
                <div class="ps-0">
                    <div class="main-profile-overview">

                        <div class="d-flex justify-content-between mg-b-20">
                            <div>
                                <h5 class="main-profile-name">
                                    {{ customerModel.FullName }}
                                    <button @click="updateProp(1)" type="button" class="btn btn-sm button-icon float-end">
                                        <i class="fa fa-pen"></i></button>
                                </h5>

                                <!-- <p class="main-profile-name-text">Ngày đăng ký:</p> -->
                            </div>
                        </div>

                        <hr class="mg-y-30">
                        <label class="main-content-label tx-13 mg-b-20">Thông tin cá nhân</label>
                        <div class="main-profile-social-list">
                            <div class="media">
                                <div class="media-icon text-dark">
                                    <i class="fa fa-user-tie"></i>
                                </div>
                                <div class="media-body">
                                    <span>Sale quản lý:</span>
                                    <b> {{ customerModel.Manager.UserName }}</b>
                                    <!-- <a href="javascript:void(0);" class="btn btn-sm button-icon">
                                        <i class="fa fa-user-tag"></i>
                                        Gán sale quản lý
                                    </a> -->
                                </div>

                            </div>
                            <div class="media">
                                <div class="media-icon text-dark">
                                    <i class="fa fa-signal"></i>
                                </div>
                                <div class="media-body">
                                    <span>Trạng thái:</span>
                                    <template v-if="customerModel.Status === 1">
                                        <span class="tag bg-success" style="color: white;float: left;">
                                            {{ customerModel.StatusStr }}
                                        </span>
                                        <!-- <button type="button" class="btn btn-sm button-icon"><i class="fe fe-lock"></i>
                                            Khóa
                                        </button> -->
                                    </template>
                                    <template v-if="customerModel.Status === 2">
                                        <span class="tag bg-danger" style="color: white;float: left;">
                                            {{ customerModel.StatusStr }}
                                        </span>
                                        <!-- <button type="button" class="btn btn-sm button-icon"><i class="fe fe-unlock"></i>
                                            Mở khóa
                                        </button> -->
                                    </template>



                                </div>
                            </div>

                            <div class="media">
                                <div class="media-icon text-dark">
                                    <i class="fa fa-user"></i>
                                </div>
                                <div class="media-body">
                                    <span>Tài khoản</span>
                                    <a href="javascript:void(0);">
                                        {{ customerModel.UserName }}
                                    </a>
                                    <!-- <a href="javascript:void(0);" class="btn btn-sm button-icon">
                                        <i class="fe fe-user-plus"></i>
                                        Tạo
                                    </a> -->
                                </div>
                                <!-- <div class="action">
                                    <button type="button" class="btn btn-sm mg-t-15 button-icon float-end"><i
                                            class="fe fe-lock"></i>
                                        Tạo tài khoản
                                    </button>
                                    <button type="button" class="btn btn-sm mg-t-15 button-icon float-end"><i
                                            class="fe fe-unlock"></i>
                                        Đổi mật khẩu
                                    </button>
                                </div> -->
                            </div>
                            <div class="media">
                                <div class="media-icon text-dark">
                                    <i class="fa fa-phone"></i>
                                </div>
                                <div class="media-body">
                                    <span>Số điện thoại</span>
                                    <a href="javascript:void(0);">
                                        {{ customerModel.PhoneNumber }}

                                    </a>
                                    <button @click="updateProp(2)" type="button" class="btn btn-sm  button-icon"><i
                                            class="fa fa-pen"></i>

                                    </button>
                                </div>

                            </div>
                            <div class="media">
                                <div class="media-icon text-dark">
                                    <i class="fa fa-envelope"></i>
                                </div>
                                <div class="media-body">
                                    <span>Email</span>
                                    <a href="javascript:void(0);">
                                        {{ customerModel.Email }}
                                    </a>
                                    <button @click="updateProp(4)" type="button" class="btn btn-sm  button-icon"><i
                                            class="fa fa-pen"></i>

                                    </button>
                                </div>

                            </div>
                            <div class="media">
                                <div class="media-icon text-dark">
                                    <i class="fa fa-map"></i>
                                </div>
                                <div class="media-body">
                                    <span>Địa chỉ</span>
                                    <a href="javascript:void(0);">
                                        {{ customerModel.Address }}
                                    </a>
                                    <button @click="updateProp(3)" type="button" class="btn btn-sm  button-icon"><i
                                            class="fa fa-pen"></i>

                                    </button>
                                </div>

                            </div>
                        </div>

                        <!--skill bar-->
                    </div><!-- main-profile-overview -->
                </div>
            </div>
        </div>
        <LadaDialog :visible="modalControl.UpdateProp">
            <template #header>
                <div class="modal-header">
                    <h5 class="modal-title">{{ "Cập nhật " + selectedPropName + " khách hàng" }}</h5>
                    <button @click="closeModal" type="button" class="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </template>
            <template #body>
                <UpdateProp @cancel="closeModal" :id="customerModel.Id" :propType="selectedProp"
                    :propName="selectedPropName"></UpdateProp>
            </template>

        </LadaDialog>
    </div>
</template>
<script setup>

import { ref, onMounted, reactive, watch } from 'vue';
import { Actions } from '.';
import UpdateProp from './general/updateProp.vue';

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

//#region Modals
const modalControl = reactive({
    UpdateProp: false
});


function closeModal() {
    modalControl.UpdateProp = false;
    emit('reload');
}
//#endregion

const updatePropRef = ref(null);
const selectedProp = ref(null);
const selectedPropName = ref('');
const emit = defineEmits(['reload']);

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


const init = (initModel) => {
    Object.assign(customerModel, initModel);
    if (customerModel.Manager == null || customerModel.Manager == undefined) {
        customerModel.Manager = {
            Id: 0,
            UserName: '',
            FullName: '',
            IsLocked: false
        }
    }
};

const updateProp = (propType) => {
    var propModel = {
        Id: customerModel.Id,
        PropType: propType
    }
    selectedProp.value = propType;
    switch (propType) {
        case 1:
            selectedPropName.value = "Họ và tên"
            break;
        case 2:
            selectedPropName.value = "Số điện thoại"
            break;
        case 3:
            selectedPropName.value = "Địa chỉ"
            break;
        case 4:
            selectedPropName.value = "Email"
            break;
        default:
            selectedPropName.value = "Không xác định";
            break;
    }


    modalControl.UpdateProp = true;

};

defineExpose({
    init
})
</script>