<template>
    <view v-if="isFollow !== -1" @tap.stop="onTap">
        <view
            v-if="(displayType || showType) === 1"
            class="follow-btn c-font-13"
            :class="{'follow-btn-done': isFollow}"
            :style="followStyle"
        >
            {{ showText ? (isFollow ? followedText : text) : '' }}
        </view>
        <view 
            v-else-if="(displayType || showType) === 2" 
            :style="followStyle" 
            class="collect-btn c-font-small"
        >
            <view class="collect-btn__star-wrapper" :style="{width: iconSize}">
                <view 
                    :style="followedStyle"
                    class="collect-btn__star-wrapper__star--follow"
                    :class="[isFollow ? 'active' : 'leave']"
                >
                    <c-icon
                        name="star-solid"
                        :font-size="iconSize"
                    />
                </view>
                <c-icon 
                    :style="{
                        'visibility': isFollow ? 'hidden' : 'unset',
                    }"
                    name="star"
                    :font-size="iconSize"
                />
            </view>
            {{ showText ? (isFollow ? '已收藏' : '收藏') : '' }}
        </view>
    </view>
</template>

<script>
/**
 * @author chenshuo04
 * @file 关注 button
 * @categories 业务组件
 * @tags [component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {request} from '../../utils/request';
import * as conf from '../../utils/conf';

export default {
    config: {
        component: true
    },
    components: {
        CIcon
    },
    props: {
        /* 关注 */
        follow: {
            type: Number,
            default: 0
        },
        /* 类型  1=关注，2=收藏, 3=推荐标签 */
        showType: {
            type: Number,
            default: 1
        },
        /* 展示类型 */
        displayType: {
            type: Number,
            default: 0
        },
        /* 1=医生、2=医院、3=药店、4=内容、5=药品，6=推荐, 11=疫苗店铺 */
        type: {
            type: [Number, String],
            default: 1
        },
        /* 关联id */
        relationId: {
            type: String,
            default: '0'
        },
        /* 关注id */
        favoriteId: {
            type: [Number, String],
            default: 0
        },
        /* 是否是套餐 */
        isCombine: {
            type: Number,
            default: 0
        },
        /* 回传数据 */
        content: {
            type: Object,
            default: () => ({})
        },
        /* 自定义样式 */
        customStyle: {
            type: Object,
            default: () => ({})
        },
        // 星星大小
        iconSize: {
            type: String,
            default: '13px'
        },
        /**
         * 未选中状态样式
         */
        normalStyle: {
            type: Object,
            default: () => ({})
        },
        /**
         * 已选中状态样式
         */
        followedStyle: {
            type: Object,
            default: () => ({})
        },
        /* 未关注文案 */
        text: {
            type: String,
            default: '+ 关注'
        },
        /* 已关注文案 */
        followedText: {
            type: String,
            default: '已关注'
        },
        /* 展示文字 */
        showText: {
            type: Boolean,
            default: true
        },
        /**
         * 提示modal
         */
        tipsModal: {
            type: String,
            default: ''
        },
        /**
         * tab点击索引
         */
        selectedIndex: {
            type: Number,
            default: 0
        },
        /**
         * 医院参数集合
         */
        hospitalItem:{
            type: Object,
            default: () => ({})
        },
        /**
         * 疫苗店铺需要的字段
         */
        focusVaccinesContent: {
            type: String,
            default: ''
        },
        /**
         * 当前页面为医院的状态
         */
        centralConcernHospital: {
            type: Boolean,
            default: false
        },
        /**
         * 当前页面为医生的状态
         */
        centralConcernDoctor: {
            type: Boolean,
            default: false
        },
        /**
         * 当前页面为店铺的状态
         */
        centralConcernShop: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isFollow: -1,
            // 定义一个路径变量
            textPath:''
        };
    },
    computed: {
        followStyle() {
            return Object.assign({}, this.customStyle, this.isFollow ? this.followedStyle : this.normalStyle);
        }
    },
    created() {
        this.isFollow = this.follow;
    },
    watch:{
        follow(newVal){
            this.isFollow = newVal;
        }
    },
    methods: {
        onTap() {
            //  type: 1=医生、2=医院、3=药店、4=内容、5=药品，6=推荐
            // id: 需要删除的 id
            // func_type 1=关注，2=收藏，3=推荐标签
            let data = {
                vn: 'med',
                act: 'favoriteaction',
                type: this.type,
                relationId: this.relationId,
                id: this.favoriteId,
                action: this.favoriteId ? 'update' : 'add',
                funcType: this.showType,
                deltag: this.isFollow ? 1 : 0
            };
            this.isCombine === 1 && (data.isCombine = 1);
            if (this.selectedIndex === 2){
                data = Object.assign({}, data, this.hospitalItem);
                
            }
            else {
                if (parseInt(this.type) === 11){
                    let content = this.focusVaccinesContent;
                    data.content = content;
                }
                else {
                    this.content && (data = Object.assign({}, data, this.content));
                }
                
            }
            
            /* eslint-disable max-len */
            if (parseInt(data.funcType) === 1 && (this.centralConcernDoctor || this.centralConcernShop || this.centralConcernHospital)){
                this.textPath = '/harbor/focus/operate';
            } else {
                this.textPath = '/med/api/favoriteaction';
            }

            request({
                url: conf.apiHost + this.textPath,
                data,
                isNeedLogin: true,
                isFirstScreen: false
            }).then(res => {
                if (res.data.status) {
                    const title = `${this.isFollow ? '取消' : ''}${this.showType === 1 ? '关注' : '收藏'}成功!`;
                    this.isFollow = !this.isFollow;
                    if (this.tipsModal && this.isFollow) {
                        this.$api.showModal({
                            title,
                            content: this.tipsModal,
                            showCancel: false,
                            confirmColor: '#fd503e',
                            confirmText: '知道了'
                        });
                    }
                    else {
                        this.$api.showToast({title, icon: 'none'});
                    }
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.follow-btn {
    padding: 2px 8px;
    border: 1px solid #555;
    border-radius: 15px;
    color: #555;
    width: 42px;
    min-width: 42px;
    box-sizing: content-box;
    &-done {
        border: 1px solid #f5f5f5;
        background: #f5f5f5;
        color: #999;
    }
}
.collect-btn {
    color: #555;
    &__star-wrapper {
        position: relative;
        &__star--follow{
            position: absolute;
            top: 0;
            left: 0;
            &.active{
                animation: follow 553ms linear;
            }
            &.leave{
                opacity: 0;
                transition: all 240ms linear;
            }
        }
    }
}

@keyframes follow {
    0% {
        opacity: 0;
        transform: scale(1, 1);
    }

    20% {
        opacity: 0.33;
        transform: scale(1.15, 1.15);
    }

    40% {
        opacity: 0.66;
        transform: scale(1.24, 1.24);
    }

    60% {
        opacity: 1;
        transform: scale(1.32, 1.32);
    }

    80% {
        opacity: 1;
        transform: scale(1.24, 1.24);
    }

    to {
        opacity: 1;
        transform: scale(1, 1);
    }
}
</style>
