<template>
    <view class="interaction">
        <view data-show="interaction" class="interaction-wrapper SHOW_LOG_MODULE">
            <!-- 喜欢 -->
            <view
                v-if="like && like.likeUrl"
                :class="{
                    actived: isLike,
                    disabled: hasDislike && toastNo === 1,
                    'interaction-button-small': type === 'small'
                }"
                class="interaction-button interaction-like"
                @tap="onClickLike"
            >
                <view class="interaction-like-icons c-gap-right-small">
                    <c-icon :name="isLike ? 'like-solid' : 'like'" />
                </view>
                <text>{{ likeHistory === '0' ? TEXT.BUTTON_TEXT_LIKE : likeNo }}</text>
            </view>

            <!-- 不喜欢 -->
            <view
                v-if="like && like.likeUrl"
                :class="{
                    'interaction-button-small': type === 'small'
                }"
                class="interaction-button interaction-dislike"
                @tap="onClickDislike"
            >
                <view class="c-gap-right-small interaction-dislike-icon"><c-icon name="dislike" /></view>
                <text v-if="type !== 'small'" class="interaction-dislike-text">{{ TEXT.BUTTON_TEXT_DISLIKE }}</text>
            </view>

            <!-- 收藏 -->
            <login-btn
                v-if="favorite && favorite.url"
                :z-index="1"
                @onTapStart="onBtnTapStart"
                @onLoginSuccess="onClickStar"
            >
                <view
                    :class="{
                        'interaction-star--active': fav
                    }"
                    class="interaction-button interaction-star"
                >
                    <view class="c-gap-right-small"><c-icon :name="fav ? 'star-solid' : 'star'" /></view>
                    <text class="interaction-star-text">{{ TEXT.BUTTON_TEXT_STAR }}</text>
                </view>
            </login-btn>

            <!-- 分享 -->
            <view
                v-if="env === 'swan' && share && share.title"
                class="interaction-button interaction-share"
                @tap="onClickShare"
            >
                <view class="c-gap-right-small"><c-icon name="share" /></view>
                <text class="interaction-share-text">{{ TEXT.BUTTON_TEXT_SHARE }}</text>
            </view>
        </view>

        <c-popup
            :show="popupShow"
            z-index="1000"
            visibility-only-mask
            stop-scroll-through
            scroll-view
            class="interaction-mask"
            @masktap="onClickMask"
        >
            <view
                :style="{
                    visibility: popupShow ? 'visible' : 'hidden'
                }"
                class="interaction-mask-content"
            >
                <view class="interaction-mask-content-wrapper">
                    <view class="interaction-mask-content-inner">
                        <view class="interaction-mask-content-title">请选择不喜欢的原因</view>
                        <view v-if="dislikeReasons && dislikeReasons.length > 0" class="interaction-mask-content-texts">
                            <view
                                v-for="(reason, index) in dislikeReasons"
                                :key="index"
                                class="interaction-mask-content-texts-text c-line-clamp1"
                            >
                                <view
                                    :class="{
                                        actived: reason.select === '1'
                                    }"
                                    class="interaction-mask-content-texts-text-inner c-line-clamp1"
                                    @tap="onClickDislikeItem($event, index)"
                                >
                                    {{ reason.text }}
                                </view>
                            </view>
                        </view>
                        <view
                            :class="{
                                actived: hasDislike
                            }"
                            class="interaction-mask-content-footer swan-security-padding-bottom"
                            @tap="onClickSure"
                        >
                            {{ hasDislike ? TEXT.BUTTON_TEXT_SURE : TEXT.BUTTON_TEXT_CANCEL }}
                        </view>
                    </view>
                </view>
            </view>
        </c-popup>
    </view>
</template>

<script>
/**
 *  @file index.js
 *  @author yantingxi
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CPopup from '@baidu/med-ui/components/Popup/Popup';

import LoginBtn from './login-btn';
import {send} from '../../utils/log';
import {request} from '../../utils/request';
import {toLoginPage} from '../../utils/login';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        like: {
            type: Object,
            default: () => {}
        },
        favorite: {
            type: Object,
            default: () => {}
        },
        common: {
            type: Object,
            default: () => {}
        },
        share: {
            type: Object,
            default: () => {}
        },
        type: {
            type: String,
            default: 'normal'
        }
    },
    data() {
        return {
            hasDislike: false,
            timer: 0,
            toastNo: 0,
            TOAST_DURATION: 1000,
            likeEnableClick: false,
            popupShow: false,
            isLike: '0',
            likeNo: 0,
            likeHistory: [],
            fav: false,
            dislikeReasons: [],

            env: 'swan',

            TEXT: {
                BUTTON_TEXT_SURE: '确认',
                BUTTON_TEXT_CANCEL: '取消',
                BUTTON_TEXT_LIKE: '有帮助',
                BUTTON_TEXT_DISLIKE: '没帮助',
                BUTTON_TEXT_STAR: '收藏',
                BUTTON_TEXT_SHARE: '分享',
                BUTTON_TEXT_TOAST_HASH: ['感谢您的反馈！', '已收到您的反馈']
            },

            data: [
                {
                    type: 'ad'
                },
                {
                    type: 'recommend',
                    recommend: {}
                },
                {
                    type: 'rcmd',
                    data: {}
                },
                {
                    type: 'ad'
                }
            ],

            isLogin: true
        };
    },
    created() {
        this.isLogin = this.common.isLogin === 1;
        this.initData();
    },
    mounted() {
        this.fetchDislikeReasons();
    },
    methods: {
        initData() {
            Object.assign(this, {
                env: process.env.MARS_ENV,
                fav: this.favorite && this.favorite.status === '1',
                isLike: this.like && this.like.like === '1',
                likeNo: (this.like && this.like.likeNo) || 0,
                likeHistory: (this.like && this.like.likeHistory) || [],
                dislikeReasons: (this.like && this.like.dislikeReasons) || []
            });
        },
        onClickLike(event) {
            // 更新数据及状态
            this.isLike = !this.isLike;
            this.likeNo = this.isLike ? this.likeNo + 1 : this.likeNo - 1;
            this.likeHistory = '1';

            request({
                url: this.like.likeUrl,
                method: 'GET',
                data: {
                    like: String(Number(this.isLike)),
                    answerId: this.answerId
                }
            });

            send({
                type: 'o',
                action: 'click',
                extra: {
                    mod: 'interaction-like',
                    isLike: this.isLike
                }
            });
        },
        onClickDislike(event) {
            send({
                type: 'o',
                action: 'click',
                extra: {
                    mod: 'interaction-dislike'
                }
            });

            if (this.toastNo === 1 && this.hasDislike) {
                this.showToast();
                return;
            }

            this.popupShow = true;
        },
        onClickDislikeItem(event, index) {
            this.dislikeReasons[index].select = this.stringNegate(this.dislikeReasons[index].select);
            this.fetchDislikeReasons();
            this.toastNo = 0;
        },
        onClickMask() {
            this.popupShow = false;
        },
        onClickSure() {
            if (this.hasDislike) {
                if (this.isLike) {
                    this.isLike = false;
                    this.likeNo = this.likeNo - 1;
                }

                const dislikeReasonsHash = [];
                this.dislikeReasons.forEach((reason, index) => {
                    if (reason.select === '1') {
                        dislikeReasonsHash.push(index);
                    }
                });

                // 发送没帮助理由list
                request({
                    url: this.like.likeUrl,
                    method: 'GET',
                    data: {
                        dislikeReasons: dislikeReasonsHash.join('_'),
                        answerId: this.answerId
                    }
                });

                this.popupShow = false;
                this.showToast(1);
            } else {
                this.popupShow = false;
                this.resetDislikeReasons();
            }
        },
        fetchDislikeReasons() {
            this.hasDislike = false;
            this.dislikeReasons &&
                this.dislikeReasons.forEach(reason => {
                    if (reason.select === '1') {
                        this.hasDislike = true;
                        this.toastNo = 1;
                        return false;
                    }
                    return true;
                });
        },
        resetDislikeReasons() {
            this.dislikeReasons = this.dislikeReasons.map(reason => {
                reason.select = '0';
                return reason;
            });
            this.hasDislike = false;
        },
        stringNegate(flag) {
            return String(Number(!Number(flag)));
        },
        showToast(toastNo = 1) {
            this.$api.showToast({
                icon: 'none',
                title: this.TEXT.BUTTON_TEXT_TOAST_HASH[this.toastNo],
                duration: this.TOAST_DURATION
            });

            this.timer = setTimeout(() => {
                this.toastStatus = false;
                this.toastNo = toastNo;
            }, this.TOAST_DURATION);
        },
        onBtnTapStart() {
            if (process.env.MARS_ENV === 'h5') {
                if (this.common.isLogin !== 1) {
                    toLoginPage();
                }
                else {
                    this.onClickStar();
                }
            }
        },
        onClickStar() {
            this.fav = !this.fav;
            request({
                url: this.favorite.url,
                method: 'GET',
                data: {
                    deltag: this.fav ? '0' : '1'
                }
            }).then(res => {
                this.fav &&
                    this.$api.showToast({
                        icon: 'none',
                        title: '在百度健康我的收藏查看',
                        duration: this.TOAST_DURATION
                    });
            });
            send({
                type: 'o',
                action: 'click',
                extra: {
                    mod: 'interaction-star',
                    isLike: this.isLike
                }
            });
        },

        onClickShare() {
            this.$api.openShare(this.share);
            send({
                type: 'o',
                action: 'click',
                extra: {
                    mod: 'interaction-share',
                    isLike: this.isLike
                }
            });
        }
    },
    components: {
        CIcon,
        CPopup,
        LoginBtn
    }
};
</script>

<style lang="less" scoped>
.interaction {
    &-wrapper {
        display: flex;
        justify-content: space-around;
        font-size: 0.14rem;
        background: #fff;
        padding: 0;
    }

    &-like {
        display: flex;
        justify-content: center;
        align-items: baseline;

        &-icons {
            position: relative;
        }

        &.disabled {
            color: #ccc !important;
            pointer-events: none;
        }

        &.actived {
            color: #f08080;

            &::before {
                border: 1px solid #f08080;
            }
        }
    }

    &-button {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc((100vw - 0.34rem - 0.3rem) / 4);
        font-size: 0.12rem;
        padding: 0.02rem;
        margin: 0.15rem 0 0.2rem;
        box-sizing: border-box;
        flex: 0 0 auto;

        &:nth-child(n + 2) {
            margin-left: 0.1rem;
        }

        &::before {
            content: '';
            position: absolute;
            top: -50%;
            bottom: -50%;
            left: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
            border: 1px solid #ccc;
            box-sizing: border-box;
            border-radius: 40px;
        }

        &-small {
            padding: 0;
            margin: 0;
            font-size: 0.13rem;
            line-height: 0.13rem;
            width: auto;
            color: #777;

            &::before {
                border: none;
            }

            &.actived {
                &::before {
                    border: none !important;
                }
            }
        }
    }

    &-dislike {
        &-icon {
            padding-top: 0.02rem;
        }
    }

    &-star {
        height: 30px;

        &--active {
            color: #f08080;

            &::before {
                border: 1px solid #f08080;
            }
        }
    }

    &-mask {
        &-content {
            display: flex;

            &-wrapper {
                width: 100%;
            }

            &-inner {
                color: #555;
                background: #fff;
                border-radius: 15px;
            }

            &-title {
                font-size: 0.18rem;
                color: #333;
                line-height: 50px;
                text-align: center;
            }

            &-texts {
                padding: 0 0 0.1rem;
                display: flex;
                flex-flow: wrap;
                justify-content: space-around;

                &-text {
                    flex: 0 0 50%;

                    &:nth-child(2n) &-inner {
                        margin: 0.05rem 0 0.05rem 0.05rem;
                    }

                    &-inner {
                        padding: 0.06rem 0.05rem;
                        margin: 0.05rem 0.05rem 0.05rem 0;
                        border: 1px solid #eee;
                        box-sizing: border-box;
                        line-height: normal;
                        border-radius: 5px;
                        text-align: center;

                        &.actived {
                            border: 1px solid #38f;
                            color: #38f;
                        }
                    }
                }
            }

            &-footer {
                font-size: 0.18rem;
                line-height: 50px;
                text-align: center;

                &.actived {
                    color: #38f;
                }
            }
        }
    }
}
</style>
