<template>
    <login-btn
        class="like-box"
        :style="{
            'font-size': iconSize,
        }"
        @onTapEndH5="likeClickH5"
        @onLoginSuccess="likeClick"
    >
        <c-icon
            :name="currHasLike ? 'like-solid' : 'like'"
            class="icon"
            :font-size="iconSize"
            :color="currHasLike ? '#FD503E' : '#858585'"
        />
        <text
            :class="[
                'text',
                currHasLike ? 'active' : '',
            ]"
        >{{ currLikeNums | filterLikeNums }}</text>
    </login-btn>
</template>
<script>
/**
 * 作者：zhangguobiao@baidu.com
 * 描述：点赞功能
*/
import * as conf from '@utils/conf';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {request} from '@utils/request';
import LoginBtn from './login-btn';
import * as login from '@utils/login';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        likeNums: {
            type: Number,
            default: 0,
        },
        hasLike: {
            type: Boolean,
            default: false,
        },
        path: {
            type: String,
            default: '',
        },
        id: {
            type: Number || String,
            default: 0,
        },
        iconSize: {
            type: String,
            default: '13px',
        }
    },
    components: {
        CIcon,
        LoginBtn,
    },
    data() {
        return {
            isUserHandleAction: 'add', // 当前用户下一步操作类型
            currLikeNums: 0,
            currHasLike: false,
        };
    },
    watch: {
        likeNums: {
            handler: function (newValue) {
                this.currLikeNums = newValue;
            },
            deep: true,
            immediate: true
        },
        hasLike: {
            handler: function (newValue) {
                this.isUserHandleAction = newValue ? 'cancel' : 'add';
                this.currHasLike = newValue;
            },
            deep: true,
            immediate: true
        }
    },
    filters: {
        filterLikeNums: function (nums) {
            if (nums === 0) {
                return '点赞';
            } else if (nums > 9999) {
                return '9999+';
            }
            return nums;

        }
    },
    methods: {
        likeClickH5(type) {
            if (!type) {
                this.likeClick();
            }
        },
        // 点赞/取消点赞
        likeClick() {
            let params = Object.assign({}, {
                id: this.id,
                action: this.isUserHandleAction,
            }, {fe_path: this.path});
            request({
                url: conf.goApiHost + '/harbor/doctor/pennantlike/applets',
                data: params,
                isNeedLogin: false,
                isFirstScreen: false,
            }).then(res => {
                if (res.data.status === 0) {
                    this.currLikeNums = this.isUserHandleAction === 'add' ? ++this.currLikeNums : --this.currLikeNums;
                    this.currHasLike = !this.currHasLike;
                    this.isUserHandleAction = this.isUserHandleAction === 'add' ? 'cancel' : 'add';
                } else if (res.status === 2) {
                    // 如果未登录，则跳转登录页
                    login.toH5LoginPage();
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.like-box {
    font-size: 13px;

    .text {
        margin-left: 5px;
        color: #858585;
    }

    .active {
        color: #fd503e;
    }
}
</style>
