<template>
    <div class="brand-top-box" v-bind:style="{ 'background-image': `url(${brandIntro.brandBg})` }">
        <div class="brand-bottom">
            <img v-if="brandIntro.showBrandLogo" v-lazy="brandIntro.brandLogo" alt="{{ brandIntro.brandName }}">
            <div v-else class="brand-title">{{ brandIntro.brandName }}</div>
            <hr>
            <div v-show="showMore" transition="brand-intro" v-bind:class="{ 'brand-short': !showMore }">{{ brandIntro.brandIntro }}</div>
        </div>
        <div class="expand" @click="introTrans()"></div>
        <div class="collapse"></div>
    </div>
</template>
<style>
    .brand-top-box {
        width: 100%;
        height: 468px;
        color: #fff;
        background-color: #000;
        position: relative;

        .brand-bottom {
            width: 100%;
            position: absolute;
            bottom: 20px;

            .brand-title {
                margin-left: 5%;
                font-size: 32px;
            }

            hr {
                width: 90%;
                border: #fff solid 1px;
                border-top: none;
            }

            .brand-intro-transition {
                transition: all 0.3s ease;
                margin-left: 5%;
                font-size: 16px;
                line-height: 32px;
                width: 90%;
                height: 220px;
                overflow-y: auto;
            }

            .brand-intro-enter,
            .brand-intro-leave {
                height: 60px;
            }

            .brand-short {
                height: 60px !important;
                display: -webkit-box !important;
                margin-left: 5%;
                font-size: 16px;
                line-height: 32px;
                width: 82%;
                text-overflow: ellipsis;
                overflow-y: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }

        .expand {
            width: 60px;
            height: 60px;
            background: url("/channel/expand.png") no-repeat;
            position: absolute;
            bottom: 20px;
            right: 5%;
        }

        .collapse {
            width: 60px;
            height: 60px;
            background: url("/channel/collapse.png") no-repeat;
            position: absolute;
            bottom: 20px;
            right: 5%;
            display: none;
        }
    }

</style>
<script>
    const $ = require('yoho-jquery');
    const tip = require('common/tip');

    module.exports = {
        props: ['domain'],
        data() {
            return {
                brandIntro: {},
                showMore: false
            };
        },
        watch: {
            domain() {
                this.getShopIntro();
            }
        },
        methods: {
            getShopIntro() {
                let data = {
                    domain: this.domain
                };

                $.ajax({
                    url: '/get-brand-intro',
                    data: data
                }).then(result => {
                    this.brandIntro = result;
                }).fail(() => {
                    tip('网络错误');
                });
            },
            introTrans() {
                this.showMore = this.showMore !== true;
            }
        },
        created() {
            this.getShopIntro();
        }
    };
</script>