<template>
    <layout-body class="product-search">
        <search-bar class="product-search-bar" @cancel="cancel" v-model="search"></search-bar>
        <div class="frames">
            <iframe :src="searchUrl" frameborder="0"></iframe>
        </div>
    </layout-body>
</template>

<script>
import SearchBar from 'components/search/search-bar';
export default {
    name: 'Search',
    data() {
        return {
            searchKey: '',
            search: ''
        };
    },
    beforeRouteUpdate(to, from, next) {
        this.searchKey = to.query.query;
        this.search = to.query.query;
        next();
    },
    created() {
        this.searchKey = this.$route.query.query;
        this.search = this.$route.query.query;
    },
    computed: {
        searchUrl() {
            return `/search?query=${this.searchKey}`;
        }
    },
    methods: {
        cancel() {
            this.$router.go(-1);
        }
    },
    components: {SearchBar}
};
</script>

<style lang="scss">
.product-search {
    display: flex;
    flex-direction: column;
}
.product-search-bar {
    height: 90px;
}
.frames {
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    bottom: 0;
    iframe {
        width: 100%;
        height: 100%;
    }
}
</style>