<template>
    <div class="container" :style="{backgroundImage:'url('+require('../assetsPre/bg.jpg')+')'}">
        <img class="topImg" @click="showBoxEve(0)" src="../assetsPre/img_bioati.png" alt="">

        <div class="btns">
            <div @click="showBoxEve(1)" :style="{backgroundImage:'url('+require('../assetsPre/btu_xiao.png')+')'}" class="btn-item">4号馆</div>
            <div @click="showBoxEve(2)" :style="{backgroundImage:'url('+require('../assetsPre/btu_xiao.png')+')'}" class="btn-item">5号馆</div>
            <div @click="showBoxEve(3)" :style="{backgroundImage:'url('+require('../assetsPre/btu_xiao.png')+')'}" class="btn-item">6号馆</div>
            <div @click="showBoxEve(4)" :style="{backgroundImage:'url('+require('../assetsPre/btu_xiao.png')+')'}" class="btn-item">5A馆</div>
        </div>
        <audio ref='music' v-if="nowMessage==0" style="display:none" :src="message[0].voice" controls="controls">
        </audio>
        <audio ref='music' v-if="nowMessage==1" style="display:none" :src="message[1].voice" controls="controls">
        </audio>
        <audio ref='music' v-if="nowMessage==2" style="display:none" :src="message[2].voice" controls="controls">
        </audio>
        <audio ref='music' v-if="nowMessage==3" style="display:none" :src="message[3].voice" controls="controls">
        </audio>

        <div class="box" v-if="showBox" @click="showBox=!showBox">
        </div>
        <transition name="slide-up">

            <div class="box-content" v-if="showBox">

                <div class="title">
                    <div class="voice-btn" style="visibility:hidden"></div>
                    <div class="name">{{message[nowMessage].title}}介绍</div>
                    <div class="voice-btn" v-if="isVoice" @click="changeVoice(false)">
                        <img src="../assetsPre/icon_zanting.png" alt="">
                    </div>
                    <div class="voice-btn" v-else @click="changeVoice(true)">
                        <img src="../assetsPre/icon_bofang.png" alt="">
                    </div>

                </div>
                <div class="message">
                    {{message[nowMessage].content}}
                </div>

                <div class="showbtn" @click="goNext" v-if="nowMessage!=0">
                    查看参展企业列表
                </div>
            </div>

        </transition>

    </div>
</template>

<script>

export default {
    name: 'home',
    data() {
        return {
            showBox: false,
            // message: {
            //     '展馆': {
            //         title: '2018世界智能制造大会简介',
            //         content: '2018世界智能制造大会于10月11日至13日在南京国际博览中心召开，本次大会由江苏省人民政府、工业和信息化部、中国工程院、中国科学技术协会共同主办，主题为“赋能升级，智造未来”，汇聚了世界智能制造领先企业、权威机构、卓越领袖与前沿专家，探讨智能制造新图景，培育经济发展新动能，引领全球产业新发展，是全球智能制造领域一次大规模、国际性交流研讨的顶级峰会。大会期间同步举办智能制造展览会。本届智能制造展览会展览面积约5万平方米，有来自德国、美国、日本、韩国等多个国家和地区的500多家企业参展参会，其中既有博西、菲尼克斯、安川电机、中国中车等世界500强及智能制造领域领军企业，也有在工业软件、工业互联、云制造、人工智能等领域积极探索的新技术企业代表。',
            //         voice: 'http://oss.izouma.com/zhinengdahui/audio/2018-10-08-11-27-16-eoxqhm99.mp3'
            //     },
            //     '4号馆': {
            //         title: '赋能智造馆',
            //         content: '“赋能智造馆”，在4号展馆，重点展示为智能制造实践提供相关动能的内容和领域，如5G应用，工业互联、云制造，人工智能，工业软件，智能终端，传感器、智能芯片等。',
            //         voice: 'http://oss.izouma.com/zhinengdahui/audio/2018-10-09-10-36-53-4iej31bp.mp3'
            //     },
            //     '5号馆': {
            //         title: '生态智造馆',
            //         content: '“生态智造馆”。在5号展馆，重点展示围绕智能制造构建的政策、科技、人才、园区、平台、技术等生态支撑系统。',
            //         voice: 'http://oss.izouma.com/zhinengdahui/audio/2018-10-09-10-37-29-0zhfed3z.mp3'
            //     },
            //     '6号馆': {
            //         title: '国际及综合应用馆',
            //         content: '“国际及综合应用馆”。在6号馆，重点展示世界范围内智能制造领域的关键技术、核心产品、解决方案及相关行业应用等。',
            //         voice: 'http://oss.izouma.com/zhinengdahui/audio/2018-10-09-10-37-54-1og69577.mp3'
            //     },
            //     '5A馆': {
            //         title: '登陆厅',
            //         content: '“国际及综合应用馆”。在6号馆，重点展示世界范围内智能制造领域的关键技术、核心产品、解决方案及相关行业应用等。',
            //         voice: 'http://oss.izouma.com/zhinengdahui/audio/2018-10-08-11-27-16-eoxqhm99.mp3'
            //     }
            // },
            message: [{
                title: '2018世界智能制造大会简介',
                content: '2018世界智能制造大会于10月11日至13日在南京国际博览中心召开，本次大会由江苏省人民政府、工业和信息化部、中国工程院、中国科学技术协会共同主办，主题为“赋能升级，智造未来”，汇聚了世界智能制造领先企业、权威机构、卓越领袖与前沿专家，探讨智能制造新图景，培育经济发展新动能，引领全球产业新发展，是全球智能制造领域一次大规模、国际性交流研讨的顶级峰会。大会期间同步举办智能制造展览会。本届智能制造展览会展览面积约5万平方米，有来自德国、美国、日本、韩国等多个国家和地区的500多家企业参展参会，其中既有博西、菲尼克斯、安川电机、中国中车等世界500强及智能制造领域领军企业，也有在工业软件、工业互联、云制造、人工智能等领域积极探索的新技术企业代表。',
                voice: 'http://oss.izouma.com/zhinengdahui/audio/2018-10-10-03-36-00-yhlq63wf.mp3'
            }, {
                title: '赋能智造馆',
                content: '“赋能智造馆”，在4号展馆，重点展示为智能制造实践提供相关动能的内容和领域，如5G应用，工业互联、云制造，人工智能，工业软件，智能终端，传感器、智能芯片等。',
                voice: 'http://oss.izouma.com/zhinengdahui/audio/2018-10-10-03-36-46-7egiqun2.mp3'
            }, {
                title: '生态智造馆',
                content: '“生态智造馆”。在5号展馆，重点展示围绕智能制造构建的政策、科技、人才、园区、平台、技术等生态支撑系统。',
                voice: 'http://oss.izouma.com/zhinengdahui/audio/2018-10-10-03-38-21-52v84m0e.mp3'
            }, {
                title: '国际及综合应用馆',
                content: '“国际及综合应用馆”。在6号馆，重点展示世界范围内智能制造领域的关键技术、核心产品、解决方案及相关行业应用等。',
                voice: 'http://oss.izouma.com/zhinengdahui/audio/2018-10-10-03-37-19-he1npih2.mp3'
            }, {
                title: '登陆厅',
                content: '“国际及综合应用馆”。在6号馆，重点展示世界范围内智能制造领域的关键技术、核心产品、解决方案及相关行业应用等。',
                voice: 'http://oss.izouma.com/zhinengdahui/audio/2018-10-08-11-27-16-eoxqhm99.mp3'
            }],
            nowMessage: 4,
            isVoice: false
        }
    },
    watch: {
        showBox() {
            if (!this.showBox) {
                this.changeVoice(this.showBox)
            }

        }
    },
    mounted() {
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        showBoxEve(str) {
            this.nowMessage = str
            if (str == 4) {
                this.goNext()
                return
            }
            this.showBox = true
            this.changeVoice(true)

        },
        changeVoice(value) {
            if (this.$refs.music) {
                this.$refs.music.pause();
            }
            if (value) {
                setTimeout(() => {
                    this.$refs.music.play();
                }, 500)
                this.isVoice = true;
            }
            else {
                this.$refs.music.pause();
                this.isVoice = false;
            }
        },
        goNext() {
            var list = ['展馆', '4号馆', '5号馆', '6号馆', '5A馆']
            this.$router.push({
                name: 'list',
                query: {
                    title: list[this.nowMessage],
                    subTitle: this.message[this.nowMessage].title
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import '../styles/variables.less';
.container {
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 480px;

    .topImg {
        width: 100%;

        align-self: center;
    }

    .btns {
        padding: 34px 28px 90px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        overflow: hidden;
        height: 220px;
        min-height: 220px;
        .btn-item {
            width: 150px;
            height: 90px;
            background-size: 100% 100%;
            text-align: center;
            line-height: 90px;
            font-size: 30px;
            font-weight: 600;
            color: rgba(5, 20, 63, 1);
            letter-spacing: 1px;
            cursor: pointer;
            margin-top: 20px;
            position: relative;
        }
    }
}

.box {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.box-content {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 550;
    width: 100%;
    height: 400px;
    background-color: @bgColor;
    display: flex;
    flex-direction: column;

    .title {
        display: flex;
        align-items: center;
        padding: 15px;
        justify-content: space-between;
        .name {
            font-size: 18px;
            font-weight: 600;
            color: rgba(0, 0, 0, 1);
            line-height: 25px;
        }
        .voice-btn {
            width: 32px;
            height: 32px;
            background: linear-gradient(90deg, rgba(118, 183, 255, 1) 0%, rgba(124, 255, 248, 1) 100%);
            border-radius: 18px;
            text-align: center;
            line-height: 35px;
            img {
                width: 16px;
                height: 16px;
            }
        }
    }

    .message {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
        line-height: 20px;
        padding: 0 15px;
        flex-grow: 1;
        overflow: auto;
    }

    .showbtn {
        margin: 0 15px 15px;
        height: 44px;
        background: linear-gradient(90deg, rgba(118, 183, 255, 1) 0%, rgba(124, 255, 248, 1) 100%);
        text-align: center;
        line-height: 44px;
        font-size: 15px;
        font-weight: 500;
        color: rgba(29, 40, 73, 1);
    }
}

.slide-up-enter,
.slide-up-leave-active {
    height: 0;
}

.slide-up-enter-active,
.slide-up-leave-active {
    transition: all 0.3s;
}
</style>
