<template>
    <div :class="bem()">
        <div :class="bem('html')" v-html="content"/>
        <div :class="bem('footer')">
            <transition-group :name="bem('fade')" :class="bem('panel')">
                <span key="desc">{{decs}}</span>
                <Button
                    icon="praise"
                    key="praise"
                    round
                    :disabled="loading"
                    :type="isPraise ? 'primary' : null"
                    v-if="!isBlame"
                    @click="praise"
                >
                    有用
                </Button>
                <Button
                    key="blame"
                    icon="blame"
                    @click="blame"
                    round
                    :disabled="loading"
                    :type="isBlame ? 'primary' : null"
                    v-if="!isPraise"
                >
                    没用
                </Button>
            </transition-group>
            <Button type="text" target="_block" :href="link" v-if="link">
                了解更多
                <Icon name="double-right" />
            </Button>
        </div>
    </div>
</template>

<script>
import { createComponentName, componentMixin } from '../_utils/component';
import Button from '../Button';
import Icon from '../Icon';
import { REQUEST_URL } from '../_utils/constant';

const DESC_MAP = {
    'praise': '谢谢您的支持',
    'blame': '我们将继续改进',
};

export default {
    name: createComponentName('editor-help-content'),
    components: {
        Button,
        Icon
    },
    mixins: [componentMixin],
    model: {
        name: 'status',
        event: 'change',
    },
    props: {
        content: {
            type: String,
            default: null,
        },
        status: {
            // status: praise(👍) onpraise(👍...) blame(👎) onblame(👎...)
            type: String,
            default: null,
        },
        // 了解更多地址
        id: {
            type: Number,
            required: true,
        }
    },
    data() {
        return {
            lastStatus: this.status,
        };
    },
    computed: {
        link() {
            return REQUEST_URL + '/help/' + this.id;
        },
        decs() {
            if (this.error) return '加载失败，请重试!';
            const status = this.loading ? this.lastStatus : this.status;
            return DESC_MAP[status] || '这条帮助对您有帮助吗?';
        },
        loading() {
            return this.status && this.status.indexOf('on') > -1;
        },
        isPraise() {
            let status = this.error ? this.lastStatus : this.status;
            status = this.loading ? this.lastStatus : this.status;

            return status && status.indexOf('praise') > -1;
        },
        isBlame() {
            let status = this.error ? this.lastStatus : this.status;

            status = this.loading ? this.lastStatus : this.status;
            return status && status.indexOf('blame') > -1;
        },
        error() {
            return this.status && this.status.indexOf('error') > -1;
        }
    },
    watch: {
        status(value, old) {
            if (old === 'praise' || old === 'blame' || old === null) {
                this.lastStatus = old;
            }
        }
    },
    methods: {
        async praise() {
            this.$emit('clickPraise');
        },
        async blame() {
            this.$emit('clickBlame');
        }
    }
};
</script>

<style lang="less">
@import '../_styles/base.less';


.@{editor-help-content} {
    height: 100%;
    width:512px;

    background:rgba(245,245,245,1);
    .scrollbar();
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    overflow-x: hidden;

    & &__html {
        padding: 22px;
        flex:  1 1 auto;
        max-width: 510px;

        * {
            max-width: 464px;
            height: auto;
        }
    }

    & &__footer {
        background: #fff;
        width: 100%;
        color: #666666;
        padding: 0 26px;
        display: flex;
        flex: 0 0 64px;
        align-items: center;
        justify-content: space-between;

        .@{button} {
            font-size: 12px;
            height: 30px;;
            min-width: 64px;
        }

        .@{button}--disabled,
        .@{button}--normal {
            background:rgba(235,236,240,1);
            border: none;
            color: #666666;

            &:hover:not([disabled]) {
                background-color: @color-primary;
                color: #fff;
            }
        }

        .@{button}--loading {
            background-color: @color-primary;
            color: #fff;
        }

        .@{button}--text {
            font-size: 14px;
            padding: 0;
            margin: 0;

            .@{icon} {
                margin-left: 4px;
            }
        }
    }

    & &__panel {
        flex: 1 1 auto;
        overflow: hidden;
        & > * {
            transition: all .3s ease;
        }

        & > * + * {
            margin-left: 16px;
        }
    }

    & &__fade-enter {
        opacity: 0;
        transform: translateY(30px);
    }

    & &__fade-leave-to {
        transition: none;
    }
}
</style>
