<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>
        <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:
                        <span class="tag" :class="currentStatusClass">
                            {{ reviewModel.StatusStr
                            }}</span>
                    </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.Status">
                    <label class="btn btn-outline-primary btn-rounded mg-r-10" :for="'sts' + statusItem.Id"
                        :class="reviewModel.Status === statusItem.Id ? 'active' : ''">
                        {{ statusItem.Name }}
                    </label>
                </template>

            </div>

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

                    <textarea rows="12" 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>

//#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 candidateService from "@/services/candidateService";
//#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: 1, Name: 'Mới' },
    { Id: 2, Name: 'Liên hệ lại' },
    { Id: 3, Name: 'Phù hợp' },
    { Id: 4, Name: 'Hẹn phỏng vấn' },
    { Id: 5, Name: 'Gửi đề nghị' },
    { Id: 6, Name: 'Nhận việc' },
    { Id: 7, Name: 'Từ chối' }
]);


let reviewModel = reactive({
    Id: 0,
    Status: null,
    StatusStr: '',
    StatusContent: ''
});

//#endregion

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

});
//#endregion

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

    var result = await candidateService.getReviewModel(id);
    if (result.Id > 0) {
        reviewModel.Id = result.Id;
        reviewModel.Status = result.Status;
        reviewModel.StatusStr = result.StatusStr;
        reviewModel.StatusContent = result.StatusContent;
        currentStatusClass.value = getTagClass(reviewModel.Status);
    } else {

    }


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

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

//#region Utilities
function getTagClass(statusId) {
    switch (statusId) {
        case 1:
            return 'tag-info'

        case 2:
            return 'tag-warning';

        case 3:
            return 'tag-indigo';

        case 4:
            return 'tag-blue';
        case 5:
            return 'tag-lime';
        case 6:
            return 'tag-green';
        case 7:
            return 'tag-red';
        default:
            return 'tag-default';
    }
}
//#endregion

//#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>