<template>
    <div>
        <div class="scuess-root">

            <div class="book-intro" >
                <div class="book-intros" @click="bookIntro(id)">
                    <img :src="bookIntros.cover" class="intro-img">
                    <div class="intro">
                        <h3 class="intro-name">{{bookIntros.name}}</h3>
                        <div class="intro-autho">{{bookIntros.author}}</div>
                    </div>
                </div>
                
                <div class="user">
                    <div>
                        <div class="intro">
                            <div>
                                <div class="user-intro">
                                    <img :src="data.cover" class="user-headImg">
                                    <div class="user-name" style="margin-left: 10px;">
                                        {{data.wxName}}推荐
                                    </div>
                                    <svg viewBox="0 0 75 50" width="35" style="fill: rgba(170, 170, 170, 0.1); transform: scaleY(-1); position: absolute; top: 1em; right: 1em;"><path d="M58.4132,31.7594C70.0423,32.1141 75,25.8333 75,16.6667C75,7.5 67.35,0 58,0C48.65,0 41,7.5 41,16.6667C41,35.0833 56.215,50 75,50C75,50 64.1932,44.3427 58.4132,31.7594ZM34,16.6667C34,7.5 26.35,0 17,0C7.65,0 0,7.5 0,16.6667C0,35.0833 15.215,50 34,50C34,50 22.78,44.5206 17,31.9373C28.8051,32.2007 34,25.8333 34,16.6667Z"></path></svg>
                                </div>
                            </div>
                            <p class="book-pinglun">{{data.comment}}</p>
                            <div class="other">
                                <div class="share" >
                                    <svg @click="shareBook" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 17" style="color: rgb(170, 170, 170);"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-width="1.2" transform="translate(2 1)"><path d="M13 1L8 6M14 6L14 .87668517C14 .392545599 13.6070711 0 13.1237445 0L8 0M3.83953916 0C1.71931875 0 0 1.74525424 0 3.89745763L0 10.1025424C0 12.2547458 1.71931875 14 3.83953916 14L10.1604608 14C12.2806812 14 14 12.2547458 14 10.1025424L14 9.96491525"></path></g></svg>
                                    <span @click="shareBook" class="other-share">分享</span>
                                </div>
                                <div class="good"  > 
                                    <div class="dianzan" v-if="!data.applaud" @click="goodUpdate(data.id)">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 19 18"><g fill="none" fill-rule="evenodd" stroke="#AAA" stroke-width="1.2" transform="translate(1 1)"><path stroke-linecap="round" stroke-linejoin="round" d="M2.74290235,5.6549 L1.32674307,5.9209 C0.564288721,6.0539 2.27373675e-13,6.8189 2.27373675e-13,7.7199 L2.27373675e-13,11.9069 C2.27373675e-13,13.4389 0.575163664,14.7399 2.35502937,14.7399 L3.1924,14.7529"></path><path stroke-linecap="square" d="M3.5568,12.0065 L3.5568,5.5265 C3.5568,5.0625 3.66704045,4.6065 3.87715685,4.1995 L5.02667263,1.4615 C5.30368708,0.8025 6.22518415,0.2695 6.762253,0.7125 C7.33983756,1.1885 7.68751897,1.9135 7.71107462,2.6895 L7.71672798,2.9035 C7.74876366,3.9715 8.57321145,4.8195 9.58045109,4.8195 L15.0557266,4.8195 C16.6047462,4.8195 17.320838,6.4245 16.8638584,7.9955 L15.6361379,12.4075 C14.9680996,14.2355 13.3097818,15.4405 11.4630187,15.4405 L6.79240423,15.4405 C5.00500143,15.4405 3.5568,13.9025 3.5568,12.0065 Z"></path></g></svg>
                                        <div class="dianzancount" style="margin-left: 5px;margin-top: 3px;" > <!-- v-if="comments.commentNum > 0" -->
                                            {{data.applaudNum}}
                                        </div>
                                    </div>
                                    <div class="dianzanCount" v-else @click="goodUpdate(data.id)">
                                        <svg width="18" height="18" viewBox="0 0 19 16"><g fill="none" fill-rule="evenodd"><g transform="translate(0 4.39)"><mask id="zanle-b" fill="#fff"><polygon id="zanle-a" points="0 .941 3.5 .941 3.5 10.339 0 10.339"></polygon></mask><path fill="#D6BA8C" d="M3.4998,10.3395 L2.3548,10.3315 C0.5748,10.3315 -0.0002,9.0175 -0.0002,7.4695 L-0.0002,3.2405 C-0.0002,2.3295 0.5638,1.5575 1.3268,1.4225 L3.2778,0.9405 L3.4998,10.3395" mask="url(#zanle-b)"></path></g><path fill="#D6BA8C" d="M4.4665,11.7066 L4.4665,5.2266 C4.4665,4.7626 4.5765,4.3066 4.7865,3.8996 L5.9365,1.1616 C6.2135,0.5026 7.1345,-0.0304 7.6715,0.4126 C8.2495,0.8886 8.5975,1.6136 8.6205,2.3896 L8.6265,2.6036 C8.6585,3.6716 9.4825,4.5196 10.4905,4.5196 L15.9655,4.5196 C17.5145,4.5196 18.2305,6.1246 17.7735,7.6956 L16.5455,12.1076 C15.8775,13.9356 14.2195,15.1406 12.3725,15.1406 L7.7025,15.1406 C5.0625,15.1406 4.4665,13.6026 4.4665,11.7066"></path><path stroke="#D6BA8C" stroke-linecap="square" stroke-width=".5" d="M4.4665,11.7066 L4.4665,5.2266 C4.4665,4.7626 4.5765,4.3066 4.7865,3.8996 L5.9365,1.1616 C6.2135,0.5026 7.1345,-0.0304 7.6715,0.4126 C8.2495,0.8886 8.5975,1.6136 8.6205,2.3896 L8.6265,2.6036 C8.6585,3.6716 9.4825,4.5196 10.4905,4.5196 L15.9655,4.5196 C17.5145,4.5196 18.2305,6.1246 17.7735,7.6956 L16.5455,12.1076 C15.8775,13.9356 14.2195,15.1406 12.3725,15.1406 L7.7025,15.1406 C5.0625,15.1406 4.4665,13.6026 4.4665,11.7066 Z"></path></g></svg>
                                        <span class="count">{{data.applaudNum}}</span>
                                    </div>
                                    
                                </div>
                                <div v-if="data.userId == user.id">
                                    <div class="muchTime" > {{data.createDate | moment('YYYY-MM-DD')}}  ·</div> <!-- v-if="data.userId == user.id"  -->
                                    <div class="deleteButton"  @click="deleteCommentOne(data.id)" >删除</div>
                                </div>
                            </div>
                        </div>
                        <div class="leaveWord"  @click="dongtai" v-if="data.applaudNum > 0"> 
                            <div class="leave">
                                <div class="user-head" v-for="(header,id) in userInfo" :key="id">
                                    <div class="head-img"> <!--  v-for="(header,id) in userInfo" :key="id" -->
                                        <img  :src="header.cover" class="user-headImgs">
                                    </div>
                                </div>
                               
                                <div class="intering" >
                                    {{data.applaudNum}} 人觉得有趣
                                </div>
                                <i class="el-icon-arrow-right" style="position: absolute;right: 22px;font-size: 14px;"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="!comment" class="thanksIntro" style="margin-top: 78px;height: 30vh; text-align: center; font-size: 13px; color: rgb(170, 170, 170); line-height: 2;">
                    感谢你的投稿 
                    <br />
                    鱼编会选择有趣的推荐展示在书单里
                </div>
                <div class="comment-div" v-if="bookMessage.length > 0">
                    <div class="comment-count" >
                        {{bookMessage.length}} 条留言
                    </div>
                    <div class="comment-content">
                        <div>
                            <div class="cooment-body" v-for="(message,id) in bookMessage" :key="id">
                                
                                <div class="content">
                                    <div class="content-head"  > <!-- v-for="(header,id) in userInfo" :key="id" -->
                                        <div class="head-imgs" >
                                            <img :src="message.cover" alt="" style="display: block;width: 100%;">
                                        </div>
                                    </div>
                                    <div class="content-text">
                                        <div class="content-name" >
                                            {{ message.wxName || message.name }} 
                                        </div>
                                        <div :class=" conceal ? ' content-userContente ' : 'content-userContent' ">
                                            <div>
                                                {{message.message}}
                                            </div>
                                        </div>
                                        <div style="color:green" v-if="message.message.length > 78 && conceal " @click="updateUnfold(message.id)" > 
                                            展开<i class="el-icon-arrow-down" style="color: #18c3aa;font-size: 13px;margin-top: 3px;"></i> <!--  style="color: #18c3aa;font-size: 13px;margin-top: 3px;" -->
                                        </div>
                                        
                                        <div class="content-createTime">
                                            {{message.createDate | moment('YYYY-MM-DD')}}
                                        </div>  
                                    </div>
                                    <div  v-if="message.userId == user.id"> <!--v-if="message.userId == user.id"  -->
                                        <div class="content-delete" @click="deleteComment(message.id)">  
                                            <i class="el-icon-close"></i>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="nocomment" v-else>
                    <div class="noComment">
                        <div class="noComment-body">
                            <div>
                                <div class="noComment-leaveWord">还没有人留言</div>
                            </div>
                        </div>
                    </div>
                    <div class="test-stage">
                        <div class="BETA" style="width:20px">
                            BETA 
                        </div>
                        <div class="test-leaveWord">
                            功能在测试阶段，仅获邀用户和书单推荐入选用户可以留言
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="tabbar" v-if="data.replied">
            <router-link to="/">
            <span class="dzy-icon-index"></span>
            <div class="text">首页</div>
            </router-link>

            <router-link to="/selling">
            <span class="dzy-icon-sell"></span>
            <div class="text">卖书</div>
            </router-link>

            <router-link to="/shop">
            <span class="dzy-icon-cart"></span>
            <div class="text">购物车</div>
            </router-link>

            <router-link to="/my">
            <span class="dzy-icon-user"></span>
            <div class="text">我的</div>
            </router-link>
        </div>
        <div class="tabbar" v-else >
            <div class="leaveWords" @click="leaveSubmit">
                <div class="leaveWord-bodys">
                    <div class="leaves">留个言...</div>
                </div>
            </div>
        </div>
        <div class="popup" v-if="submit" >
            <div class="popup-body">
                <div class="popup-comment">
                    <div class="comment-body">
                        <div class="commente">
                            <div class="commente-content" >
                                <el-input
                                    class="body-content"
                                    name="reason"
                                    type="textarea"
                                    v-model="textarea"
                                    maxlength="200"
                                    show-word-limit
                                    placeholder="说说你和这本书的故事，鱼编会选择有趣的推荐展示在书单里"
                                    style="right: 15px; width: 88%;"
                                ></el-input>
                                <!-- style="height: 8em; background: transparent;" -->
                            </div>
                            <div class="commente-button">
                                <div class="commente-cancel"  @click="leaveSubmit" >取消</div>
                                <div class="commente-confirm" style="color: rgb(24, 195, 170);" @click="confirmComment(data.id,textarea)" >发送</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { truncate } from 'fs';
export default {
    data(){
        return{
            // goodCount : true,
            comment :true,
            bookIntros : [],
            data : [],
            bookMessage :[],
            userInfo :{}, 
            submit : false,
            textarea : '',
            applaud :true,
            conceal : true,
        }
    }, 
    created(){
        this.$http.get("/comment/message?commentId="+this.$route.query.commentId+"&bookId="+this.$route.query.bookId).then(res=>{
            console.info("res:",res)
            if(res.code == 0){
                this.bookIntros = res.data.bookInfo
                this.bookMessage = res.data.bookMessage
                this.userInfo = res.data.userInfo
                console.info("this.unerInfo",this.unerInfo)
                this.data = res.data
            }
        })
        this.confirmComment()
    },
    methods:{
        
        /* 提交的弹框 */
        leaveSubmit(){
            this.submit = !this.submit
        },

        /* 跳转到书籍详情页面 */
        bookIntro(id){
            if(id == null || id==''){
                console.info("ID为null或者为空")
            }else{
                this.$router.push({
                    name: "book",
                    params: {
                        id: id
                    }
                });
            }
        },
        /* 赞和不赞 */
        goodUpdate(id){
          //  this.applaud = !this.applaud;
            if(id != null && id != ''){
                this.$http.post("/comment/applaud?commentId="+id).then(res=>{
                    
                    this.$http.get("/comment/message?commentId="+this.$route.query.commentId+"&bookId="+this.$route.query.bookId).then(res=>{
                        if(res.code == 0){
                            this.bookIntros = res.data.bookInfo
                            this.bookMessage = res.data.bookMessage
                            this.userInfo = res.data.userInfo
                            console.info("this.unerInfo",this.unerInfo)
                            this.data = res.data
                        }
                    })
                   
                })
            }else{
                console.info("id == null & id == '' ")
            }
        },
        dongtai(){
            /* 点击跳转我的 动态 ，推荐成功数据添加到动态里面去 */
            // this.$message({
            //     message: "大爷，这个功能还没完成呢。别急。",
            //     type: "error"
            // });
        },
        shareBook(){
            // this.$message({
            //     message: "感谢大爷您的分享，欢迎下次常来玩儿啊。",
            //     type: "success"
            // });
        },
        /* 删除二级评论 */
        deleteComment(id){
            if(id != null && id !='' ){
                this.$http.delete("/comment/message?messageId=" + id).then(res=>{
                    this.$http.get("/comment/message?commentId="+this.$route.query.commentId+"&bookId="+this.$route.query.bookId).then(res=>{
                        if(res.code == 0){
                            this.bookIntros = res.data.bookInfo
                            this.bookMessage = res.data.bookMessage
                            this.userInfo = res.data.userInfo
                            console.info("this.unerInfo",this.unerInfo)
                            this.data = res.data
                        }
                    })
                })
            }else{
                console.info("id==null")
            }
        },
        /* 删除一级评论 */
        deleteCommentOne(id){
            if(id != null && id !=''){
                console.info("id:",id)
                this.$http.delete("/comment?commentId="+id).then(res=>{
                    
                    this.$router.push({
                        name: "book",
                        params: {
                            id: this.$route.query.bookId
                        }
                    });

                    this.$message({
                        message: "删除成功。大爷，记得常来玩玩啊",
                        type: "success"
                    });
                })
                
            }else{
                console.info("id==null")
            }
        },
        /* 添加二级评论 */
        confirmComment(id,textarea){
            if(id !=null && id != ''){
                this.$http.post("/comment/message?commentId="+id+"&message="+textarea).then(res=>{
                    this.textarea = ''
                    this.submit = !this.submit
                    this.$http.get("/comment/message?commentId="+this.$route.query.commentId+"&bookId="+this.$route.query.bookId).then(res=>{
                        if(res.code == 0){
                            this.bookIntros = res.data.bookInfo
                            this.bookMessage = res.data.bookMessage
                            this.userInfo = res.data.userInfo
                            console.info("this.unerInfo",this.unerInfo)
                            this.data = res.data
                        }
                    })
                })
                
                
            }else{
                console.info("id==null")
            }
        },
        /* 评论过多的时候点击展开 */
        updateUnfold(id){
            this.conceal = !this.conceal;
            
        }
    },
    computed: {
        ...mapGetters(["user"])
    },
}
</script>
<style lang="scss" scoped>
    .scuess-root{
        box-sizing: border-box;
        padding-bottom: 50px;
        min-height: 100vh;
        background-color: rgb(255, 255, 255);
        flex-direction: column;
        display: flex;
        .recoommend-img{
            height: 92px;
            padding: 0px 15px;
            color: white;
            font-size: 11px;
            background-image: linear-gradient(rgb(139, 184, 191) 29%, rgba(139, 184, 191, 0.8));
            background-size: cover;
            background-position: center top;
            align-items: center;
            justify-content: space-between;
            .recommend-root{
                flex-direction: column;
                display: flex;
                position: relative;
                .recommend-bookList{
                    .book-heng{
                        padding-right: .25em;
                        padding-left: .25em;
                    }
                    .recommend-bookName{
                        font-size: 18px;
                        font-weight: 500;
                        margin-bottom: 0px;
                    }
                }
                .recommend-book{
                    padding: 3.5px 7.5px;
                    border: 1px solid rgb(255, 255, 255);
                    border-radius: 4px;
                    position: absolute;
                    right: 0;
                    bottom: 4px;
                }
            }
        }
        .book-intro{
            margin-top: 25px;
            padding: 0px 15px;
            position: relative;
            .book-intros{
                margin-left: 16px;
                border-bottom: none;
                background: #fff;
                display: flex;
                .intro-img{
                    width: 90px;
                    height: 128px;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    display: block;
                }
                .intro{
                    display: block;     
                    margin-left: 6px;
                    margin-top: -22px;
                    .intro-name{
                        font-size: 18px;
                        font-weight: 400;
                        margin-bottom: 6px;
                    }
                    .intro-autho{
                        font-size: 14px;
                        color: rgb(170, 170, 170);
                    }
                }
            }
            .book-pinglun{
                font-size: 15px;
                line-height: 1.6;
                overflow-wrap: break-word;
                word-break: break-word;
                user-select: initial;
            }
            .user{
                position: relative;
                .intro{
                    padding: 16px;
                    border-bottom: 0.5px solid rgb(230, 230, 230);

                    .user-intro{
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;
                        .user-headImg{
                            color: inherit;
                            text-decoration: none;
                            height: 28px;
                            widows: 28px;
                            border-radius: 999px;
                            .user-name{
                                max-width: 60%;
                                color: inherit;
                                text-decoration: none;
                            }
                        }
                    }
                    .other{
                        margin-top: 1em;
                        font-size: 14px;
                        color: rgb(170, 170, 170);
                        position: relative;
                        .share{
                            align-items: center;
                            display: flex;
                            .other-share{
                                margin: 0px 24px 0px 4px;
                            }
                        }
                        .good{
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            font-size: 13px;
                            color: rgb(170, 170, 170);
                            position: absolute;
                            left: 74px;
                            bottom: 0px;
                            .dianzan{
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                font-size: 13px;
                                font-weight: normal;
                                line-height: 1.23;
                            }
                            .dianzanCount{
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                font-size: 13px;
                                font-weight: normal;
                                line-height: 1.23;
                                .count{
                                    margin-left: 6px;
                                }
                            }
                        }
                        .muchTime{
                            position: absolute;
                            right: 44px;
                            bottom: 0px;
                        }
                        .muchTimeDian{
                            padding: 0px 0.5em;
                        }
                        .deleteButton{
                            position: absolute;
                            right: 6px;
                            bottom: 0px;
                        }
                    }
                }
                .leaveWord{
                    color: inherit;
                    text-decoration: none;
                    background: transparent;
                    outline: none;
                    .leave{
                        color: rgb(170, 170, 170);
                        padding: 15px;
                        border-bottom: 0.5px solid rgb(230, 230, 230);
                        align-items: center;
                        display: flex;
                        position: relative;
                        .user-head{
                            // margin-right: 6px;
                            .head-img{
                                flex-flow: row-reverse;
                                margin-right: 0px;
                                display: block;
                                display: inline-block;
                                vertical-align: top;
                                box-sizing: border-box;
                                width: 30px;
                                height: 30px;
                                background: rgb(242, 242, 242);
                                border-width: 1px;
                                border-style: solid;
                                border-color: rgb(242, 242, 242);
                                border-image: initial;
                                border-radius: 99px;
                                overflow: hidden;
                                .user-headImgs{
                                    color: inherit;
                                    text-decoration: none;
                                    height: 28px;
                                    widows: 28px;
                                    border-radius: 999px;
                                }
                            }
                            .intering{
                                font-size: 14px;
                                flex-grow: 1;
                            }
                        }
                    }
                }
                
            }
            .comment-div{
                .comment-count{
                    color: rgb(170, 170, 170);
                    padding: 19px 0px 0px 15px;
                }
                .comment-content{
                    margin-top: 16px;
                    display: flex;
                    flex-direction: column;
                    flex: 1 1 0%;
                    .cooment-body{
                        padding-left: 15px;
                        .content{
                            margin-bottom: 19px;
                            display: flex;
                            position: relative;
                            .content-head{
                                height: 30px;
                                width: 30px;
                                .head-imgs{
                                    display: inline-block;
                                    vertical-align: top;
                                    box-sizing: border-box;
                                    width: 30px;
                                    height: 30px;
                                    background: rgb(242, 242, 242);
                                    border-width: 1px;
                                    border-style: solid;
                                    border-color: rgb(242, 242, 242);
                                    border-image: initial;
                                    border-radius: 99px;
                                    overflow: hidden;
                                }
                            }
                            .content-text{
                                flex-grow: 1;
                                font-size: 15px;
                                line-height: 22px;
                                margin-left: 10px;
                                padding-bottom: 17px;
                                padding-right: 15px;
                                border-bottom: 0.5px solid rgb(230, 230, 230);
                                .content-name{
                                    margin-bottom: 3px;
                                }
                                .content-userContent{
                                    margin: 0;
                                    font: inherit;
                                }
                                .content-userContente{
                                    margin: 0;
                                    font: inherit;

                                    overflow: hidden;
                                    -webkit-line-clamp: 4;
                                    text-overflow: ellipsis;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                }
                                .content-createTime{
                                    margin-top: 10px;
                                    font-size: 13px;
                                    color: rgb(170, 170, 170);
                                }
                            }
                        }
                    }
                }
            }
            .nocomment{
                .noComment{
                    margin-top: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: rgb(102, 102, 102);
                    flex-direction: column;
                    flex: 1 1 0%;
                    .noComment-body{
                        align-items: center;
                        font-size: inherit;
                        height: auto;
                        padding: 0px;
                        display: flex;
                        justify-content: center;
                        color: rgb(102, 102, 102);
                        line-height: 19px;
                        .noComment-leaveWord{
                            margin-top: 22px;
                            margin-bottom: 40px;
                            color: rgb(170, 170, 170);
                            font-size: 13px;
                        }
                    }
                }
                .test-stage{
                    padding: 14px 0px;
                    font-size: 11px;
                    line-height: 1;
                    border-top: 0.5px solid rgb(230, 230, 230);
                    align-items: center;
                    justify-content: center;
                    .BETA{
                        color: white;
                        padding: 3px;
                        border-radius: 2px;
                        background: rgb(170, 170, 170);
                        margin-right: 5.5px;
                        font-size: 9px;
                    }
                    .test-leaveWord{
                        color: rgb(170, 170, 170);
                        margin-left: 32px;
                        margin-top: -12px;
                    }
                }
            }
        }

    }
    .popup{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        background-color: rgba(0, 0, 0, .3);
        z-index: 10001;
        .popup-body{
            margin: 0px 2em;
            display: flex;
            height: 100%;
            flex-direction: column;
            pointer-events: none;
            .popup-comment{
                flex-grow: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                .comment-body{
                    position: relative;
                    box-sizing: border-box;
                    width: 100%;
                    max-width: 340px;
                    background: #fff;
                    border-radius: 10px;
                    overflow-x: hidden;
                    pointer-events: auto;
                    .commente{
                        padding: 0px;
                        margin: 0px;
                        font-size: 16px;
                        text-align: center;
                        white-space: pre-wrap;
                        .commente-content{
                            display: block;
                            height: 174px;
                            padding: 13px 21px;
                            width: 100%;
                            font-size: 15px;
                            background-color: white;
                            border: 0px none;
                            flex-grow: 1;
                        }
                        .commente-button{
                           display: flex;
                            // flex-direction: row;
                            border-top: 1px solid rgb(247, 247, 247);
                            
                            .commente-cancel{
                                // flex-grow: 1;
                                // flex-shrink: 0;
                                // flex-basis: 0px;
                                // height: 54px;
                                display: flex;
                                justify-content: center;
                                align-items: center;

                                flex-grow: 1;
                                flex-basis: 0px;
                                height: 54px;
                                text-align: center;
                                color: rgb(170, 170, 170);
                                border-right: 1px solid rgb(247, 247, 247);
                                margin-bottom: 10px;
                            }
                            .commente-confirm{
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                
                                margin-bottom: 10px;
                                color: rgb(24, 195, 170);
                                flex-grow: 1;
                                height: 54px;
                                text-align: center;
                                color: rgb(170, 170, 170);
                                border-right: 1px solid rgb(247, 247, 247);
                            }
                        }
                    }
                }
            }
        }
    }
    .tabbar {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    border-top: 0.5px solid rgb(223, 223, 223);
    .leaveWords{
        width: 100%;
        max-width: 600px;
        margin: 0px auto;
        .leaveWord-bodys{
            box-sizing: border-box;
            width: 100%;
            max-width: 600px;
            background-color: rgb(242, 242, 242);
            padding: 10px 15px;
            .leaves{
                flex-grow: 1;
                color: rgb(102, 102, 102);
                background-color: white;
                padding: 9px;
                border-radius: 8px;
            }
        }
    }

    a {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      color: #666;
      text-decoration: none;
      justify-content: center;
      align-items: center;
      height: 50px;

      [class*="dzy-icon-"] {
        width: 23px;
        height: 23px;
        display: inline-block;
        font-size: 23px;
      }

      .text {
        margin-top: 4px;
        font-size: 12px;
      }

      .count {
        position: absolute;
        top: -3px;
        left: 50%;
        margin-left: 5px;
        box-sizing: border-box;
        height: 18px;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        text-align: center;
        background: rgb(242, 129, 129);
        border-radius: 9px;
        transition: transform 0.2s;
        transform-origin: center;
        padding: 0 0.66em;
      }
      &.active {
        color: #18c3aa;
      }
    }
  }
</style>