<template>
    <div>
        <div v-if="loading" class="row">
            <div class="col-12 tx-semibold text-center text-default">
                <span class="spinner-border spinner-border-sm"></span>
            </div>
        </div>
        <div v-if="!loading">
            Họ và tên: <b>{{ reviewModel.FullName }}</b><br />
            SĐT: <b>{{ reviewModel.PhoneNumber }}</b><br />
            Ngày tạo: <b>{{ reviewModel.CreatedTime }}</b><br />
            Nguồn:
            <b>
                <a :href="reviewModel.SourcePath" :title="reviewModel.SourcePath" :alt="reviewModel.SourcePath"
                    target="_blank">
                    Liên kết nguồn
                </a>
            </b>
        </div>
        <Form v-if="!loading" @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }"
            class="row">
            <div class="col-12">
                <div class="form-group mb-3">
                    <label>Trạng thái hiện tại:
                        <LeadStatus :value="reviewModel.LeadStatus" :name="reviewModel.LeadStatusStr">
                        </LeadStatus>
                    </label>
                </div>
            </div>
            <div class="col-12">
                <template v-for="statusItem in statuses">
                    <input type="radio" class="btn-check" name="reviewStatus" :id="'sts' + statusItem.Id"
                        autocomplete="off" :value="statusItem.Id" v-model="reviewModel.LeadStatus">
                    <label class="btn btn-outline-primary btn-rounded mg-r-10" :for="'sts' + statusItem.Id"
                        :class="reviewModel.LeadStatus === statusItem.Id ? 'active' : ''">
                        {{ statusItem.Name }}
                    </label>
                </template>

            </div>

            <div class="col-12">
                <div class="form-group mb-3">
                    <label>Ghi chú:</label>

                    <textarea rows="6" v-model="reviewModel.StatusContent" name="Note" class="form-control"
                        placeholder="ghi chú"></textarea>
                </div>
            </div>


            <div class="col-12 ">
                <div class="d-flex flex-row-reverse">
                    <button @click="cancel" type="button" class="btn btn-main-default mg-l-15">
                        Bỏ qua
                    </button>
                    <button type="submit" class="btn btn-main-primary" :disabled="isSubmitting">
                        <span v-show="isSubmitting" class="spinner-border spinner-border-sm"></span>
                        Xác nhận
                    </button>
                </div>
            </div>
        </Form>
    </div>
</template>
<script setup>


import LeadStatus from './leadStatus.vue';

//#region Imports....
import { ref, onMounted, reactive, watch } from 'vue';
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as Yup from 'yup';
import _ from 'lodash';
//#endregion

//#region Services
import leadService from "@/services/crm/leadService";
//#endregion


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


//#region props
const props = defineProps({
    id: Number
});
//#endregion




const emit = defineEmits(['cancel']);
const currentStatusClass = ref();

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


const statuses = reactive([
    { Id: 3, Name: 'Thành công' },
    { Id: 4, Name: 'Thất bại' },
]);


let reviewModel = reactive({
    Id: 0,
    FullName: '',
    PhoneNumber: '',
    SourcePath: '',
    Message: '',
    LeadStatus: null,
    LeadStatusStr: '',
    StatusContent: ''
});

//#endregion

//#region Validations
const schema = Yup.object().shape({

});
//#endregion

//#region Methods
async function getReviewModel(id) {

    var result = await leadService.getReviewModel(id);
    if (result.Id > 0) {
        reviewModel.Id = result.Id;
        reviewModel.LeadStatus = result.LeadStatus;
        reviewModel.LeadStatusStr = result.LeadStatusStr;
        reviewModel.StatusContent = result.StatusContent;
        reviewModel.FullName = result.FullName;
        reviewModel.PhoneNumber = result.PhoneNumber;
        reviewModel.Message = result.Message;
        reviewModel.SourcePath = result.SourcePath;
    } else {
        toast.error('Lỗi lấy thông tin lead, vui lòng thử lại sau');
        emit('cancel');
    }


}
async function onSubmit() {
    var paramModel = reviewModel;
    var result = await leadService.updateReview(paramModel);
    if (result != null && result.Result === 1) {
        toast.success('Thành công!');
        cancel();
    } else {
        toast.error('Thất bại: ' + result.Message);
    }
}

function cancel() {
    emit('cancel');
}


//#endregion



//#region Events
onMounted(async () => {

    if (props.id > 0) {
        loading.value = true;
        await getReviewModel(props.id);
        loading.value = false;
    }


})
//#endregion

</script>
<style scoped>
.btn-check+.btn {
    color: #303235;
    background: #f5f8fa;
    border-color: #d5d5d5;
}

.btn-check+.btn:hover {
    color: #fff;
    border-color: #fff;
}
</style>