<template>
    <view class="feedback">
        <view
            :id="idx"
            class="feedback__icon"
            @tap.stop="feedbackTap"
        >
            <c-icon name="close"/></view>
        <view
            v-if="show"
            class="feedback__masking fadein"
            @touchmove.stop.prevent
            @tap.stop="masktap"
        >
            <view
                v-if="show"
                class="feedback__inner"
            >
                <view
                    :style="{
                        top: top + 40 + 'px',
                    }"
                    :class="{
                        'top': position === 'top',
                    }"
                    class="feedback__content"
                >
                    <view class="feedback__content__header">
                        <view v-if="feedback.title" class="feedback__content__header__title">{{ feedback.title }}</view>
                        <view
                            v-if="closeText"
                            class="feedback__content__header__button"
                            @tap="closetap"
                        >{{ closeText }}</view>
                    </view>
                    <view class="feedback__content__items" @tap.stop.prevent>
                        <view
                            v-for="(item, index) in feedback.list"
                            :key="index"
                            :class="{
                                'activitied': activities[item.id],
                            }"
                            class="feedback__content__items__item"
                            @tap="itemtap($event, item)"
                        >{{ item.text }}</view>
                    </view>
                    <view class="feedback__content__footer">
                        <navigate
                            url="https://ufosdk.baidu.com/ufosdk/postview/aC2K%2FzOUBZSnIuhYz7Y4zg%3D%3D/231793?uid=552220871&user=%E8%B5%B5%E9%BE%99joe&baiducuid=&healthySigns=healthySigns"
                            url-type="2"
                            :extra="{
                                mod: 'feedback-other',
                            }"
                        >
                            <view v-if="feedback.other" class="feedback__content__footer__other">
                                <c-icon name="write" font-size="18px"/>
                                <view>{{ feedback.other.text }}</view>
                            </view>
                        </navigate>
                    </view>
                    <view
                        :style="{
                            left: autoLeft ? left + 'px' : '103%',
                        }"
                        :class="{
                            'top': position === 'top',
                        }"
                        class="feedback__content__triangle"
                    />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 精选
 * @author yantingxi
*/
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import Navigate from '../../../components/common/navigate';
import {request} from './../../../utils/request';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import * as core from './../../../utils/core';
export default {
    config: {
        component: true
    },
    props: {
        feedback: {
            type: Object,
            default: () => {}
        },
        module: {
            type: String,
            default: 'feeds'
        },
        autoLeft: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // visibily: false,
            activities: {},
            windowHeight: 800,
            gap: 40,
            show: false,
            top: 300,
            left: 200,
            idx: 'btn_' + core.rand(5),
            closeText: '不感兴趣'
        };
    },
    computed: {
        position() {
            return this.top > this.windowHeight / 2 ? 'top' : 'bottom';
        }
    },
    components: {
        CIcon,
        Navigate
    },
    created() {
        const {windowHeight} = getSystemInfo();
        this.windowHeight = windowHeight;
        this.closeText = this.feedback.closeText;
    },
    mounted() {
    },
    methods: {
        itemtap(event, item) {
            this.$set(this.activities, item.id, !this.activities[item.id]);
            this.initCloseText(this.activities);
            event.stopPropagation && event.stopPropagation();
        },
        onTouchmove(e) {
            e.stopPropagation && e.stopPropagation();
        },
        masktap(e) {
            this.close(e);
        },
        closetap(e) {
            let list = [];
            this.activities && Object.keys(this.activities).forEach((k, index) => {
                if (this.activities[k]) {
                    list.push(this.feedback.list[index]);
                }
            });

            if (list.length > 0) {
                this.feedback.saveUrl && request({
                    url: this.feedback.saveUrl,
                    data: {
                        list: JSON.stringify(list)
                    },
                    isNeedLogin: false,
                    isFirstScreen: false
                });
            }
            this.close(e);
            this.$emit('feedbackSure');
            this.$api.showToast({title: '将为您减少推荐类似内容', icon: 'none'});
        },
        close(e) {
            this.show = false;
            this.$emit('close', e);
        },
        initActivities(list) {
            this.activities = list.reduce((res, c) => (res[c.id] = false, res), {});
        },
        initCloseText(list) {
            let flag = false;
            list && Object.keys(list).forEach(k => {
                if (this.activities[k]) {
                    flag = true;
                    return false;
                }
            });
            this.closeText = flag ? '确定' : '不感兴趣';
        },
        feedbackTap(e) {
            this.feedback && this.feedback.list && this.initActivities(this.feedback.list);
            this.$api.createSelectorQuery()
                .select(`#${this.idx}`)
                .boundingClientRect(rect => {
                    const {left, top} = rect || {};
                    [this.left, this.top] = [left, top];
                    this.show = true;
                }).exec();
        }
    }
};
</script>

<style lang="less" scoped>
.feedback {

    &__icon {
        color: #ddd;
    }

    &__inner {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    &__masking {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .2);
        z-index: 101;
        padding: 0 17px;
    }

    &__content {
        position: relative;
        width: calc(100% - 34px);
        margin: 0 auto;
        background: #FFFFFF;
        border-radius: 9px;
        z-index: 102;
        padding: 15px 17px;
        box-sizing: content-box;
        &.top {
            transform: translateY(calc(-100% - 17px - 40px));
        }

        &__triangle {
            position: absolute;
            left: 103%;
            top: -6px;
            display: inline-block;
            width: 22.3px;
            height: 22.3px;
            background: #FFF;
            transform: rotate(45deg) translate(-80%, 45%);
            &.top {
                top: auto;
                bottom: -17px;
            }
        }

        &__header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            &__title {
                font-size: .14rem;
                color: #555;
            }

            &__button {
                display: flex;
                background: #00C8C8;
                border-radius: 4px;
                font-size: .14rem;
                color: #FFF;
                align-items: center;
                justify-content: center;
                padding: 5px 22px;
            }
        }

        &__items {
            display: flex;
            flex-wrap: wrap;
            margin-top: 5px;
            &__item {
                margin-top: 10px;
                width: calc((100% - 10px) / 2);
                border: 1px solid #F1F1F1;
                border-radius: 4px;
                box-sizing: border-box;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: .14rem;
                color: #555;

                &:nth-child(2n) {
                    margin-left: 10px;
                }

                &.activitied {
                    color: #00C8C8;
                    border: 1px solid #00C8C8;
                }
            }
        }

        &__footer {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            &__other {
                display: flex;
                align-items: baseline;
                font-size: .14rem;
                color: #999;
            }

            &__more {
                display: flex;
                align-items: center;
                font-size: .14rem;
                color: #00C8C8;
            }
        }
    }
}
</style>
