<template>
    <view class="m-vote">
        <view class="m-vote-title c-font-large c-color-333">{{vote.data.title}}</view>
        <view class="m-vote-cont">
            <view
                class="m-vote-yes"
                :style="{
                    // width: isCheck ? vote.data.yesPercent + '%' : '50%',
                    width: '50%',
                    background: vote.data.yesColor
                }"
                @tap.stop="onTap('yes')"
            >
                <text>{{vote.data.yesText}}</text>
                <text v-if="isCheck" class="c-gap-left-middle">{{vote.data.yesPercent}}%</text>
            </view>
            <view class="m-vote-triangle">
                <view class="m-vote-triangle-l" :style="{borderTopColor: vote.data.yesColor}"></view>
                <view class="m-vote-triangle-r" :style="{borderBottomColor: vote.data.noColor}"></view>
            </view>
            <view
                class="m-vote-no"
                :style="{
                    // width: isCheck ? vote.data.noPercent + '%' : '50%',
                    width: '50%',
                    background: vote.data.noColor
                }"
                @tap.stop="onTap('no')"
            >
                <text>{{vote.data.noText}}</text>
                <text v-if="isCheck" class="c-gap-left-middle">{{vote.data.noPercent}}%</text>
            </view>
        </view>
        <view @tap.stop="onJump(vote.data, 'vote-seeans')" class="m-vote-ans c-font-small" :style="{color: vote.moreTextColor}">{{isCheck ? '查看答案' : '选择后查看答案'}}</view>
    </view>
</template>

<script>
/**
* @file 投票模块
* @author chenshuo04
*/

import {request} from '../../../utils/request';
import * as conf from '../../../utils/conf';
import {send} from '../../../utils/log';
import {navigate, navToBdBoxH5} from '../../../utils/navigate';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        vote: {
            type: Object
        },
        topic: {
            type: String,
            default: 'none'
        }
    },
    data() {
        return {
            isCheck: false,
            api: {
                vote: '/api/vote/vote',
                load: '/api/vote/loadvoted'
            }
        };
    },
    created() {
        this.isCheck = this.vote.data.voted;
    },
    watch: {
        vote() {
            this.isCheck = this.vote.data.voted;
        }
    },
    methods: {
        onTap(type) {
            if (!this.isCheck) {
                this.onVote(type);
            }
        },
        onVote(type) {
            const {project, yesVoteName, noVoteName} = this.vote.data;
            request({
                url: conf.operateApihost + this.api.vote,
                data: {
                    project: project,
                    name: type === 'yes' ? yesVoteName : noVoteName
                },
                isNeedLogin: false,
                isFirstScreen: false
            }).then(res => {
                this.isCheck = true;
                send({
                    type: 'b',
                    action: 'navigate',
                    extra: {
                        type: 'vote-' + type,
                        topic: this.topic
                    }
                });
            });
        },
        onJump(data, log) {
            if (!this.isCheck) {
                return;
            }
            if (data.answerUrl || data.tcUrl) {
                send({
                    type: 'b',
                    action: 'navigate',
                    extra: {
                        type: log,
                        topic: this.topic
                    }
                });
                navToBdBoxH5(data.answerUrl || data.tcUrl);
            }
            else {
                navigate({
                    url: data.url,
                    extra: {
                        type: log,
                        topic: this.topic
                    }
                });
            }
        },
    }
};
</script>

<style lang="less" scoped>
.m-vote {
    position: relative;
    background: #fff;
    border-radius: 15px;
    padding: 15px 17px;
    text-align: center;
    &-title {
        font-weight: bold;
    }
    &-ans {
        text-decoration: underline;
    }
    &-cont {
        width: 100%;
        display: flex;
        margin: 15px 0;
        position: relative;
    }
    &-yes, &-no {
        height: 44px;
        line-height: 44px;
        text-align: center;
        color: #fff;
        font-size: 18px;
    }
    &-yes {
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
    }
    &-no {
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
    }
    &-triangle {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        &-l {
            position: absolute;
            width: 0;
            height: 0;
            border-top: 44px solid red;
            border-right: 10px solid transparent;
        }
        &-r {
            position: absolute;
            width: 0;
            height: 0;
            border-bottom: 44px solid green;
            border-left: 10px solid transparent;
        }
    }
}
</style>
