<template>
    <div class="container">
        <div class="list">
            <div class="item" v-for="(item,index) in message" @click="showBoxEve(index)">
                <div class="No">{{item.boothNo}}</div>
                <div class="name">{{item.companyName}}</div>
            </div>
        </div>

        <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="name">{{message[nowMessage].hall}} — {{subTitle}} {{message[nowMessage].boothNo}}</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="bigName">
                    {{message[nowMessage].companyName}}
                </div>
                <div class="message">
                    {{message[nowMessage].introduce}}
                </div>

                <div class="showbtn" @click="showBox=false">
                    返回
                </div>
            </div>

        </transition>
        <audio v-if="message[nowMessage]" style="display:none" ref='music' :src="message[nowMessage].voice" controls="controls">
        </audio>
    </div>
</template>

<script>

export default {
    name: 'home',
    data() {
        return {
            showBox: false,
            message: [],
            nowMessage: 0,
            isVoice: false,
            subTitle: ''
        }
    },
    watch: {
        showBox() {
            this.changeVoice(this.showBox)
        }
    },
    created() {
        this.subTitle = this.$route.query.subTitle
        this.$http.get({
            url: '/companyInfoDetail/all',
            data: {
                orderByStr: "booth_no_,asc",
                hall: this.$route.query.title
            }
        }).then(res => {
            if (res.success) {
                this.message = res.data
            }
        })
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        showBoxEve(str) {
            this.nowMessage = str
            this.showBox = true
            this.changeVoice(true)
        },
        changeVoice(value) {
            if (value) {
                setTimeout(() => {
                    this.$refs.music.play();
                })
                this.isVoice = true;
            }
            else {
                this.$refs.music.pause();
                this.isVoice = false;
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import '../styles/variables.less';
.container {
    background-color: #f2f4f5;
    padding-top: 18px;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    .item {
        margin: 0 15px 10px;
        height: 60px;
        background: rgba(255, 255, 255, 1);
        padding: 0 20px;
        display: flex;
        align-items: center;
        overflow: hidden;

        .No {
            font-size: 14px;
            font-weight: 500;
            color: rgba(9, 169, 255, 1);
            line-height: 20px;
        }

        .name {
            margin-left: 20px;
            flex-grow: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.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 15px 0;
        justify-content: space-between;
        .name {
            font-size: 15px;
            font-weight: 600;
            color: rgba(0, 0, 0, 1);
            line-height: 21px;
        }
        .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;
            }
        }
    }

    .bigName {
        padding: 0 15px 15px;
        font-size: 18px;
        font-weight: 600;
        color: rgba(0, 0, 0, 1);
        line-height: 25px;
    }

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

    .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>
