<!-- c端投票模块 -->
<template>
<section class="voteModule">
    <div class="vote-item mb44">
        <label class="vote-title">投票介绍</label>
        <div class="vote-intro" :class="showMoreIntro ? 'open':''"  ref="texthide">
            {{voteIntro}} <span  class="more" @click="showMore" v-if="info.vote_intro  && info.vote_intro.length > 55" v-text="showMoreIntro ? '收起':'展开'"></span>
        </div>
    </div>
    <div class="vote-item mb44">
        <label class="vote-title">投票名单</label>
        <div class="vote-content">
            <div class="vote-head">
                <div class="vote-nostart" v-if="info.vote_state == 0">
                    <span>投票将于{{info.start_time*1000 | formatDate}}开始</span>
                </div>
                <div class="vote-begin" v-if="info.vote_state == 1">
                    <div class="vote-type">
                        <span v-if="info.vote_option == 1">
                            单选
                        </span>
                        <span v-else>
                           多选(一人最多可投{{ info.vote_choose_num }}个选项)
                        </span>
                    </div>
                    <div class="all-num">
                        共{{info.count}}人参与投票
                    </div>
                </div>
                <div v-if="info.vote_state == 2">
                    <span>投票已结束</span>
                </div>
            </div>
            <div class="vote-list">
                <ul>
                    <li v-for="item in optionList" :key="item.id" >
                        <img v-if="item.pic" :src="item.pic" alt="" class="imgs">
                        <div class="vote-info">
                            <p class="vote-option">{{item.title}}</p>
                            <p class="votenum"><span>{{item.vote_num}}</span>票</p>
                        </div>
                        <button type="button" v-if="info.vote_state != 1" class="notallow">投票</button>
                        <button type="button" v-else-if="item.is_vote == 0" @click="voteItem(item)">投票</button>
                        <button type="button" v-else-if="item.is_vote == 1" class="voted">已投票</button>
                        <button type="button" v-else class="notallow">投票</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="vote-item" v-if="info.is_rank">
        <label class="vote-title">投票排名</label>
         <div class="vote-content">
             <div class="vote-list">
                <ul>
                    <li v-for="item in rankData" :key="item.id">
                        <div class="rank" :class="'rank'+item.rank">
                            <span>{{item.rank}}</span>
                        </div>
                        <img v-if="item.pic" :src="item.pic" alt="" class="imgs">
                        <div class="vote-info">
                            <p class="vote-option">{{item.title}}</p>
                            <p class="votenum"><span>{{item.vote_num}}</span>票</p>
                        </div>
                    </li>
                </ul>
            </div>
         </div>
    </div>
</section>
</template>
<script>
    import {getConfigDetails,setVote} from '@/plugins/API/apiVote'
    import UserAgent from '@/plugins/UserAgent/index'
    const navigatorType = process.client ? (!UserAgent.isMobile() ? 1 : UserAgent.isWx() ? 3 : 4) : undefined;
    
    export default {
        props: {
            include_id: {},
            id: {},
            type: {},
            user_id: {}
        },
        data () {
            return {
                info: {},
                optionList: [],
                showMoreIntro: false,
            }
        },
        computed: {
            voteIntro(){
                let intro = this.info.vote_intro || '';
                return this.showMoreIntro ? intro : intro.substring(0,55);
            },
            rankData(){
                let rank = 1;
                let optionList = [...this.optionList];
                let list = optionList.sort((a,b) => {
                    return b.vote_num - a.vote_num;
                })
                let rankList = list.map((item,index) => {
                    if(index == 0){
                        item.rank = 1;
                    }else if(item.vote_num < list[index-1].vote_num){
                        item.rank = index + 1;
                        rank = index + 1;
                    }else{
                        item.rank = rank;
                    }
                    return item;
                })
                return rankList;
            }
        },
        watch: {
            user_id(){
                this.getConfigDetails()
            },
        },
        mounted(){
            this.$Bus.$on('bus-voteEdit', this.resetInfo)
            this.$Bus.$on('bus-voteStatus', this.resetStatus)
            this.getConfigDetails()
        },
        methods: {
            resetStatus(data){
                if(data.voteId == this.id){
                    this.info.vote_state = data.status;
                    this.optionList.map((item)=>{
                        item.is_vote = 0;
                        return item;
                    })
                }
            },
            resetInfo(data){
                if(data.voteId == this.id){
                    this.getConfigDetails()
                }
            },
            async getConfigDetails(){
                const res = await getConfigDetails({include_id: this.include_id,type: this.type,voteId: this.id})
                if(res.code == 200 && res.errorCode == 0){
                    this.info = res.data;
                    this.optionList = res.data.list;
                    this.changeBtnState();
                }
            },
            showMore(){
                this.showMoreIntro = !this.showMoreIntro;
            },
            changeBtnState(){
                let num = 0;
                let vote_option = this.info.vote_option;
                let vote_choose_num = this.info.vote_choose_num;
                this.optionList.forEach((item)=>{
                    if(item.is_vote == 1){
                        num++;
                    }
                })
                if((vote_option == 1 && num >= 1) || num >= vote_choose_num){
                    this.optionList.map((item) => {
                        if(!item.is_vote){
                            item.is_vote = 2;
                        }
                        return item;
                    })
                }
            },
            async voteItem(obj){
                if(!this.user_id){
                    this.$layer.msg('请先登录！');
                    this.$Bus.$emit('bus-showLogin', true);
                    return false;
                }
                const res = await setVote({
                    id: obj.id,
                    vote_id: obj.vote_id,
                    type: this.type,
                    agentType: navigatorType,
                })
                if(res.code == 200 && res.errorCode == 0){
                    obj.is_vote = 1;
                    this.info.count = res.data.count;
                    obj.vote_num = res.data.row_total;
                    this.changeBtnState();
                }else{
                    this.$layer.msg(res.errorMessage);
                }
            },
            
        },
        beforeDestroy(){
            this.$Bus.$off('bus-voteEdit', this.resetInfo)
            this.$Bus.$off('bus-voteStatus', this.resetStatus)
        },
    }
</script>
<style lang="less" scoped>
.voteModule{
    background-color: #F0F1F3;
    width: 100%;
    // min-height: 100%;
    padding:10px 12px;
    // margin-bottom: 10px;
    .vote-item{
        &.mb44{
            margin-bottom: 22px;
        }
        .vote-title{
            color:#008DF6;
            position: relative;
            padding-left: 8px;
            font-size: 13px;
            height: 13px;
            line-height: 13px;
            display: inline-block;
            margin-bottom: 12px;
            &::before{
                content:'';
                position: absolute;
                width: 2px;
                height: 100%;
                left: 0;
                top: 0;
                background-color: #008DF6;
            }
        }
        .vote-intro{
            color: #666666;
            overflow : hidden;
            &.open{
                height: auto;
                display: block;
            }
        }
        .more{
            color:#008DF6;
            text-align: right;
        }
        .vote-content{
            background-color: #fff;
            .vote-head{
                height: 39px;
                line-height: 11px;
                padding: 14px 5px;
                border-bottom: 1px solid #EDEDED;
                font-size: 14px;
                
                .vote-type{
                    float: left;
                    color: #000;
                }
                .all-num{
                    float: right;
                    color: #7F7F7F;
                }
            }
            .vote-list{
                ul{
                    li{
                        padding: 14px 17px;
                        border-bottom: 1px solid #EDEDED;
                        display: flex;
                        &:last-child{
                            border-bottom:0;
                        }
                        .rank{
                            margin-right: 14px;
                            span{
                                display: block;
                                text-align: center;
                                margin-top: 18px;
                                width: 14px;
                                height: 14px;
                                font-weight: 700;
                                line-height: 14px;
                                font-size: 12px;
                                background: #EAEAEA;
                                color: #999999;
                            }
                            &.rank1{
                                span{
                                    background: #FEE1E1;
                                    color:#FA3838;
                                }
                            }
                            &.rank2{
                                span{
                                    background: #FEF1E1;
                                    color:#E8A41F;
                                }
                            }
                            &.rank3{
                                span{
                                    background: #E1F2FE;
                                    color:#008DF6;
                                }
                            }
                        }
                        .imgs{
                            width: 86px;
                            height: 50px;
                            line-height: 50px;
                            text-align: center;
                        }
                        .vote-info{
                            flex: 1px;
                            padding-left: 10px;
                            font-size: 12px;
                            line-height: 25px;
                            .vote-option{
                                word-break:break-word;
                                color:#333333;
                            }
                            .votenum{
                                color:#808080;
                                span{
                                    color:#008DF6;
                                    margin-right: 5px;
                                }
                            }
                        }
                        button{
                            display: inline-block;
                            margin-top: 13px;
                            width: 60px;
                            height: 25px;
                            line-height: 25px;
                            padding: 0;
                            border-radius:12px;
                            color:#fff;
                            background-color: #2db7f5;
                            border-color: #2db7f5;
                            outline: none;
                            border: 0;
                            &.voted{
                                background-color:#E8A41F;
                                color:#fff;
                                border-color:#E8A41F;
                            }
                            &.notallow{
                                background-color:#888E92;
                                color:#fff;
                                border-color:#888E92;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>