<template>
    <div class="page">
        <div class="message">
            <div class="message-top">
                <van-image round width="36" height="36" :src="userInfo.avatar" />
                <div class="message-user">
                    <div class="text1">{{ info.nickname }}</div>
                    <div class="text2">{{ info.createdAt }}</div>
                </div>
            </div>
            <div class="message-text">
                {{ info.detail }}
            </div>
            <div class="message-imgs" v-if="info.pic && info.pic.length > 0">
                <van-image
                    width="66"
                    height="66"
                    v-for="(item, index) in info.pic"
                    :key="index"
                    :src="item"
                    fit="cover"
                    radius="8"
                    @click="preview(index, info.pic)"
                />
            </div>
        </div>

        <div class="message" v-if="info.reply || (info.status && info.status !== 'PROCESSING')">
            <div class="message-top">
                <van-image round width="36" height="36" :src="require('@assets/icon_kefu.png')" />
                <div class="message-user">
                    <div class="text1">客服留言</div>
                    <div class="text2">{{ info.repliedAt }}</div>
                </div>
                <div class="status">{{ getLabelName(info.status, statusOptions) || (info.reply ? '已反馈' : '') }}</div>
            </div>
            <div class="message-text">
                {{ info.replyDetail }}
            </div>
            <div class="message-imgs" v-if="info.replyPic && info.replyPic.length > 0">
                <van-image
                    width="66"
                    height="66"
                    v-for="(item, index) in info.replyPic"
                    :key="index"
                    :src="item"
                    fit="cover"
                    radius="8"
                    @click="preview(index, info.replyPic)"
                />
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { ImagePreview } from 'vant';
export default {
    data() {
        return {
            id: 0,
            info: {},
            statusOptions: [
                { label: '已完成', value: 'COMPLETED' },
                { label: '处理中', value: 'PROCESSING' },
                { label: '已反馈', value: 'REPLIED' },
                { label: '未反馈', value: 'NO_REPLY' }
            ]
        };
    },
    computed: {
        ...mapState(['userInfo'])
    },
    mounted() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id;
        }
        this.getDetail();
    },
    methods: {
        getDetail() {
            this.$http.get('/message/get/' + this.id).then(res => {
                this.info = res;
            });
        },
        preview(index = 0, list = []) {
            ImagePreview({
                images: [...list],
                startPosition: index
            });
        }
    }
};
</script>

<style lang="less" scoped>
.page {
    background-color: @bg3;
    padding: 16px;
}

.message {
    background: #ffffff;
    border-radius: 8px;
    padding: 12px 10px;

    .message-top {
        position: relative;
        .flex();

        .message-user {
            margin-left: 6px;
            .text1 {
                font-size: 14px;
                color: #000000;
                line-height: 20px;
            }

            .text2 {
                font-size: 12px;
                color: #878d99;
                line-height: 17px;
            }
        }

        .status {
            font-size: 12px;
            color: #3ab200;
            line-height: 20px;
            background: rgba(58, 178, 0, 0.1);
            border-radius: 4px;
            position: absolute;
            right: 0;
            top: 0;
            padding: 0 10px;
        }
    }

    .message-text {
        font-size: 14px;
        color: #000000;
        line-height: 20px;
        margin-top: 10px;
    }

    .message-imgs {
        margin-top: 6px;
        .flex();
        .van-image + .van-image {
            margin-left: 16px;
        }
    }
}
.message + .message {
    margin-top: 16px;
}
</style>
