search

<template>
    <div>
        <v-layout 

        style="height: 100%; width: 800px; margin: 0 auto;" class="search-all" column align-center>
            <div style="margin: 96px 0 48px 0; width: 100%">
                <v-layout align-start>
                    <h1>Лучшая работа - лучшим специалистам</h1>
                </v-layout>
            </div>
            <v-layout style="width: 100%" column>
                <v-layout class="mb-4" row justify-start>
                    <v-btn  @click.native="vacansy_search = true, company_search = false,
                    resume_search = false, candidate_search = false" 
                    :class="{'active_btn_search': vacansy_search, 'no_active_btn_search': !vacansy_search}" class="mr-4 ml-0 mb-0 mt-0">Вакансии</v-btn>
                    <v-btn @click.native="vacansy_search = false, company_search = true,
                    resume_search = false, candidate_search = false"
                    :class="{'active_btn_search': company_search, 'no_active_btn_search': !company_search}" class="mr-4 ml-0 mb-0 mt-0">Компании</v-btn>
                    <v-btn @click.native="vacansy_search = false, company_search = false,
                    resume_search = true, candidate_search = false, check_auth()"
                    :class="{'active_btn_search': resume_search, 'no_active_btn_search': !resume_search}" class="mr-4 ml-0 mb-0 mt-0">Резюме</v-btn>
                    <v-btn @click.native="vacansy_search = false, company_search = false,
                    resume_search = false, candidate_search = true, check_auth()"
                    :class="{'active_btn_search': candidate_search, 'no_active_btn_search': !candidate_search}" class="ma-0">Кандидат</v-btn>
                </v-layout>
                <v-layout v-if="vacansy_search"  class="mt-2" row>
                    <div style="width: 100%">
                        <v-text-field label="Введите компетенцию" style="width: 100%" hide-details prepend-icon="search"></v-text-field>
                    </div>
                    <div>
                        <v-btn>Поиск</v-btn>
                    </div>
                    <div>
                        <v-btn>Фильтра</v-btn>
                    </div>
                </v-layout>
                <v-layout v-if="company_search" class="mt-2" row>
                    <div style="width: 100%">
                        <v-text-field label="Введите наименование компании" style="width: 100%" hide-details prepend-icon="search"></v-text-field>
                    </div>
                    <div>
                        <v-btn>Поиск</v-btn>
                    </div>
                    <div>
                        <v-btn>Фильтра</v-btn>
                    </div>
                </v-layout>
                <v-layout v-if="resume_search" class="mt-2" column>
                    <div>
                        <span style=" font-size: 14px">Выберите Компанию, от лица которой будете производить поиск</span>
                        <v-select v-model="company" :items="companys"></v-select>
                    </div>
                    <v-layout row>
                        <div style="width: 100%"><v-text-field label="Введите компетенцию" style="width: 100%" hide-details prepend-icon="search"></v-text-field></div>
                        <div><v-btn>Поиск</v-btn></div>
                        <div><v-btn @click.native="drawer_right_menu = !drawer_right_menu, drawer_left_menu = false, blackout_right_menu = !blackout_right_menu">Фильтра</v-btn></div>
                    </v-layout>
                </v-layout>
                <v-layout v-if="candidate_search" class="mt-2" column>
                    <div>
                        <span style=" font-size: 14px">Выберите Компанию, от лица которой будете производить поиск</span>
                        <v-select v-model="company" :items="companys"></v-select>
                    </div>
                    <v-layout row>
                        <div style="width: 100%"><v-text-field label="Введите Фамилию Имя Отчество" style="width: 100%" hide-details prepend-icon="search"></v-text-field></div>
                        <div><v-btn>Поиск</v-btn></div>
                        <div><v-btn @click.native="drawer_right_menu = !drawer_right_menu, drawer_left_menu = false, blackout_right_menu = !blackout_right_menu">Фильтра</v-btn></div>
                    </v-layout>
                </v-layout>
            </v-layout>
        </v-layout>
    </div>
</template>

<script>
export default {
    data: () => ({
        companys: ["Pride", "Google", "Yandex"],
        company: null,

        vacansy_search: true,
        company_search: false,
        resume_search: false,
        candidate_search: false,

        amount_company: null,
        is_authorization: null,
    }),
    methods: {
        save_last_company(e) {
            
        },
        check_auth() {
            if (!this.is_authorization) {
                alert("Зарегистрируйтесь или войдите в учетную запись");
            }
            if (this.is_authorization && this.amount_company === 0) {
                alert("Создайте хотя бы одну компанию");
            }
        },

    },
    mounted() {
        this.company = "Google";
        this.is_authorization = false;
        this.amount_company = 1;
        console.log(new Date());
        setTimeout(() => {
           
        }, 100000);
        this.$emit('loaded'); 
    },
}
</script>

<style>
    .active_btn_search {
        background-color: #FFC400!important;
    }
    .no_active_btn_search {
        background-color: #f5f5f5!important;
    } 
</style>