<template>
    <el-drawer title="建议详情" :visible.sync="visible" :direction="'rtl'" size="45%">
        <template slot="title">
            <h1 style="color: #000;">建议详情</h1>
        </template>
        <div class="drawer-content">
            <div class="top card">
                <div class="f1">
                    <div class="left">
                        <el-image style="width: 40px;height: 40px;"
                            :src="minioPath+ orderItem.avatar" fit="contain"
                            :preview-src-list="[minioPath+orderItem.avatar]">
                            <div slot="error" class="image-slot">
                                <el-image style="width: 40px;height: 40px;"
                                    :src="minioPath+ 'prod/userAvatar/avatar.png'"
                                    fit="contain"></el-image>
                            </div>
                        </el-image>
                        <span class="name">{{ orderItem.createUserName }}</span>
                        <div class="right"
                            :style="{ color: orderItem.state.color, marginLeft: '10px' }">
                            {{ orderItem.state.label }}</div>
                    </div>
                    <div class="right" style="color: #000;">
                        {{ getDate(orderItem.createDate) }}</div>

                </div>
                <div class="content">
                    <div class=" button" v-for="(item, index) in orderItem.type"
                        :style="{ color: item.color, backgroundColor: item.color + '20' }"
                        :key="index">
                        {{ item.label }}</div>
                    <div style="font-size: 18px;fonweight: bold">{{ orderItem.content }}</div>
                </div>
                <div class="image-item" v-if="orderItem.imgUrl">
                    <el-image style="width: 100px;height: 100px;" :src="minioPath + item"
                        :preview-src-list="srcList"
                        @click="showImage(item, orderItem.imgUrl.split(','))"
                        v-for="(item, index) in orderItem.imgUrl.split(',')" :key="index"
                        fit="contain">
                        <div slot="error" class="image-slot">
                            <el-image style="width: 40px;height: 40px;"
                                :src="minioPath+ 'prod/userAvatar/avatar.png'"
                                fit="contain"></el-image>
                        </div>
                    </el-image>
                </div>
                <div class="foot">
                    <div class="left"></div>
                    <div class="right"></div>
                </div>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane :label="'点赞('+ orderItem.likeList.length + ')' " name="like">
                    <div class="likes-card card">
                        <div class="images" v-if="orderItem.likeList.length">
                            <el-image style="width: 40px;height: 40px;" v-if="index < 4"
                                v-for="(item, index) in orderItem.likeList" :key="index"
                                :src="minioPath+ item.avatar" fit="contain"
                                :preview-src-list="[minioPath+item.avatar]"
                                :class="index > 0 ? 'avatar-ml' : ''">
                                <div slot="error" class="image-slot">
                                    <el-image style="width: 40px;height: 40px;"
                                        :src="minioPath+ 'prod/userAvatar/avatar.png'"
                                        fit="contain"></el-image>
                                </div>
                            </el-image>
                            <image v-if="orderItem.likeList.length > 4"
                                src="@/static/images/suggestions/more.png"
                                style="width: 30px; height: 30px; margin-left: 10px"></image>
                        </div>
                        <el-empty v-else description="暂无数据"></el-empty>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="'评论('+ orderItem.replyCount +')' " name="pinglun">
                    <div class="pinglun-card card">
                        <div class="content" v-if="orderItem.replyList != 0">
                            <div class="comment-item" v-for="(item, index) in orderItem.replyList"
                                :key="index">
                                <el-image style="width: 40px;height: 40px;"
                                    :src="minioPath+ item.avatar" fit="contain"
                                    :preview-src-list="[minioPath+item.avatar]">
                                    <div slot="error" class="image-slot">
                                        <el-image style="width: 40px;height: 40px;"
                                            :src="minioPath+ 'prod/userAvatar/avatar.png'"
                                            fit="contain"></el-image>
                                    </div>
                                </el-image>
                                <div class="center">
                                    <div class="name">{{ item.replyUserName }}</div>
                                    <div class="text">
                                        {{ item.replyContent }}
                                        <img style="width: 15px; height: 15px"
                                            @click="startReply('in',item)"
                                            src="@/assets/images/suggestion/pinglun.png" alt="">
                                        <img v-if="!item.liked" style="width: 15px; height: 15px"
                                            src="@/assets/images/suggestion/dianzan.png" alt=""
                                            @click="beLike(item)">
                                        <img v-else style="width: 15px; height: 15px"
                                            src="@/assets/images/suggestion/yidianzan.png" alt=""
                                            @click="dLike(item)">

                                    </div>
                                    <div class="time">{{ getDate(item.replyDate) }}</div>
                                </div>
                                <div class="children-list" v-if="item.children.length">
                                    <div class="child" v-for="(child, cindex) in item.children"
                                        :key="cindex">
                                        <el-image style="width: 40px;height: 40px;"
                                            :src="minioPath+ child.avatar" fit="contain"
                                            :preview-src-list="[minioPath+child.avatar]">
                                            <div slot="error" class="image-slot">
                                                <el-image style="width: 40px;height: 40px;"
                                                    :src="minioPath+ 'prod/userAvatar/avatar.png'"
                                                    fit="contain"></el-image>
                                            </div>
                                        </el-image>
                                        <div class="center">
                                            <div class="name">{{ child.replyUserName }}</div>
                                            <div class="text">
                                                {{ child.replyContent }}
                                                <img style="width: 15px; height: 15px"
                                                    @click="startReply('in',child)"
                                                    src="@/assets/images/suggestion/pinglun.png"
                                                    alt="">
                                                <img v-if="!child.liked"
                                                    style="width: 15px; height: 15px"
                                                    src="@/assets/images/suggestion/dianzan.png"
                                                    alt="" @click="beLike(child)">
                                                <img v-else style="width: 15px; height: 15px"
                                                    src="@/assets/images/suggestion/yidianzan.png"
                                                    alt="" @click="dLike(child)">
                                            </div>
                                            <div class="time">{{ getDate(child.replyDate) }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <el-empty v-else description="暂无数据"></el-empty>

                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="drawer-footer">
            <div class="left">
                <el-image style="width: 40px;height: 40px;" :src="minioPath+ user.userIcon"
                    fit="contain">
                    <div slot="error" class="image-slot">
                        <el-image style="width: 40px;height: 40px;"
                            :src="minioPath+ 'prod/userAvatar/avatar.png'" fit="contain"></el-image>
                    </div>
                </el-image>
                <span style="color: #2697ff;" @click="startReply('out')">点此发表评论</span>
            </div>
            <div class="right">
                <img v-if="!orderItem.liked" src="@/assets/images/suggestion/dianzan.png" alt=""
                    @click.stop="beLike(orderItem, true)">
                <img v-else src="@/assets/images/suggestion/yidianzan.png" alt=""
                    @click.stop="dLike(orderItem, true)">
            </div>

        </div>
        <el-dialog title=" 评论" :visible.sync="dialogVisible" width="50%" :modal="false"
            :before-close="handleClose">
            <el-input type="textarea" :rows="8" placeholder="请输入评论内容" v-model="reply">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="saveReply()">发表</el-button>
            </span>
        </el-dialog>
    </el-drawer>
</template>
<script>
import dayjs from 'dayjs'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import { processUploadPreview } from '@/api/governmentCloud/entryAndExitRegis/entryAndExitRegis'
import { minioPath } from '@/utils/apiUrl'
import { getSysUser } from '@/api/permission/userSetting'


import {
    getListById, addReply, addLike, delLike
} from "@/api/governmentCloud/suggestions/suggestions";

export default {
    components: {},
    props: [],
    data() {
        return {
            minioPath: minioPath,
            visible: false,
            orderItem: null,
            activeName: 'like',
            srcList: [],
            user: null,
            statusList: null,
            typeList: null,
            dialogVisible: false,
            reply: '',
            replyType: null,
            detailId: null,
            nowItem: null
        }
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() { },
    methods: {
        // 点击tab
        handleClick(tab, event) {

        },
        // 获取用户信息
        getInfo() {
            return new Promise((resolve, reject) => {
                getSysUser().then(res => {
                    this.user = res.data
                    resolve(true)
                })
            })
        },
        // 发起评论前回调
        startReply(type, item) {
            this.replyType = type
            if (item) {
                this.nowItem = item;
            }
            this.dialogVisible = true
        },
        //发表评论
        saveReply() {
            if (this.reply) {
                let params = {};
                if (this.replyType == 'out') {
                    params = {
                        complainId: this.orderItem.id,
                        replyContent: this.reply,
                        repliedId: '',
                        repliedUserId: this.orderItem.createUserId,
                        repliedUserName: this.orderItem.createUserName,
                        firstReplyId: ''
                    };
                } else {
                    params = {
                        complainId: this.nowItem.complainId,
                        replyContent: this.reply,
                        repliedId: this.nowItem.id,
                        repliedUserId: this.nowItem.replyUserId,
                        repliedUserName: this.nowItem.repliedUserName,
                        firstReplyId: this.nowItem.firstReplyId
                    };
                }

                addReply(params).then((res) => {
                    if (res.code == 200) {
                        this.$message({
                            message: '评论成功',
                            type: 'success'
                        });
                        this.getDataList();
                        this.reply = null;
                        this.dialogVisible = false
                    } else {
                        this.$message({
                            message: '评论失败，请稍后再试',
                            type: 'error'
                        });
                        setTimeout(() => {
                            this.reply = null;
                        }, 1000);
                    }
                });
            } else {
                this.$message({
                    message: '评论内容不能为空',
                    type: 'warning'
                });
            }
        },
        //点赞
        beLike(item, isComplaint) {
            let params;
            if (isComplaint) {
                params = {
                    complainId: item.id
                };
            } else {
                params = {
                    complainId: item.complainId,
                    complainReplyId: item.id
                };
            }
            addLike(params).then((res) => {
                if (res.code == 200) {
                    item.liked = true;
                    item.likeCount++;
                    this.$message({
                        message: '点赞成功',
                        type: 'success'
                    });
                } else {

                    this.$message({
                        message: '点赞失败,请稍后再试',
                        type: 'warning'
                    });
                }
            });
        },
        //取消点赞
        dLike(item, isComplaint) {
            let params;
            if (isComplaint) {
                params = {
                    complainId: item.id
                };
            } else {
                params = {
                    complainId: item.complainId,
                    complainReplyId: item.id
                };
            }
            delLike(params).then((res) => {
                if (res.code == 200) {
                    item.liked = false;
                    item.likeCount--;
                    this.$message({
                        message: '取消点赞成功',
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: '取消点赞失败,请稍后再试',
                        type: 'warning'
                    });
                }
            });
        },
        handleClose() {
            this.dialogVisible = false
            this.reply = ''
        },
        getTypeList() {
            return new Promise((resolve, reject) => {
                getDictionaryDataSelector('530731173714858629').then(res => {
                    this.typeList = res.data.list
                    resolve(true)
                })
            })

        },
        getStatusList() {
            return new Promise((resolve, reject) => {
                getDictionaryDataSelector('530731285270762117').then(res => {
                    this.statusList = res.data.list
                    resolve(true)
                })
            })
        },
        getMinioPath(item) {
            let getImageMinioPathList = [];
            let getFileMinioPathList = [];
            // 获取图片minioPath
            getImageMinioPathList = this.getMinio(item.result.imageList);
            getFileMinioPathList = this.getMinio(item.result.fileList);

            Promise.all(getImageMinioPathList).then((res) => {
                Promise.all(getFileMinioPathList).then((res) => {
                    this.loading = false
                });
            });
        },
        getMinio(list) {
            let requestList = [];
            list.map((item) => {
                requestList.push(
                    new Promise((resolve, reject) => {
                        let params = {
                            itsmFileId: item.id
                        };
                        processUploadPreview(params).then((res) => {
                            if (res.data) {
                                item.minioPath = minioPath + res.data.fileUrl;
                                resolve(minioPath + res.data.fileUrl);
                            } else {
                                this.$message.error(`附件：${item.name}寻找失败`);
                                resolve(null);
                            }
                        });
                    })
                );
            });

            return requestList;
        },
        getDate(time) {
            let str = time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '无数据'
            return str
        },
        pcDownloadFile(url, name) {
            console.log(url)
            //保存到本地
            try {
                const x = new window.XMLHttpRequest();
                x.open('GET', url, true);
                x.responseType = 'blob';
                x.onload = () => {
                    const url = window.URL.createObjectURL(x.response);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = name;
                    a.click();
                };
                x.send();


                this.$message({
                    message: '下载成功',
                    type: 'success',
                    duration: 1000,
                })
            } catch (error) {
                this.$message({
                    message: '下载失败',
                    type: 'warning',
                    duration: 1000,
                })
            }
        },
        getStatus(value) {
            let obj = {};
            this.statusList.map((item) => {
                if (item.enCode.split(',')[0] == value) {
                    obj.label = item.fullName;
                    obj.color = item.enCode.split(',')[1];
                }
            });
            return obj;
        },
        getType(value) {
            let obj = {};
            this.typeList.map((item) => {
                if (item.enCode.split(',')[0] == value) {
                    obj.label = item.fullName;
                    obj.color = item.enCode.split(',')[1];
                }
            });
            return obj;
        },
        getDataList() {
            console.log('发起');
            let params = {
                id: this.detailId
            };
            getListById(params).then((res) => {
                this.orderItem = res.data;
                let stateColor = this.getStatus(this.orderItem.state).color;
                let stateLabel = this.getStatus(this.orderItem.state).label;
                this.orderItem.state = {
                    color: stateColor,
                    label: stateLabel
                };

                let list = [];
                list = this.orderItem.type.split(',');
                this.orderItem.typeLength = list.length;
                this.orderItem.type = [];
                list.map((t) => {
                    let label = this.getType(t).label;
                    let color = this.getType(t).color;
                    this.orderItem.type.push({
                        label: label,
                        value: t,
                        color: color
                    });
                });

                this.srcList = []
                this.orderItem.imgUrl.split(',').map((item) => {
                    this.srcList.push(minioPath + item)
                })

                this.visible = true
                console.log(this.orderItem)
            });
        },
        async init(id) {
            this.detailId = id
            if (!this.typeList) {
                await this.getTypeList();
            }
            if (!this.statusList) {
                await this.getStatusList();
            }
            if (!this.user) {
                await this.getInfo()
            }
            this.getDataList()
        },
    },
};
</script>


<style scoped lang="scss">
.jnpf-code-box {
    background: #848484;
    padding: 15px;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
}
.title {
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 18px;
    color: #000;
}
::v-deep .el-drawer__header {
    margin-bottom: 10px;
}
.drawer-content {
    padding: 0 20px;
    max-height: calc(100% - 60px);
    overflow-y: auto;

    .top {
        height: 30%;
        margin-bottom: 20px;
        .f1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 10px;
            border-bottom: 1px solid #dddddd99;
            margin-bottom: 15px;
            .left {
                display: flex;
                align-items: center;
                .name {
                    margin-left: 10px;
                    font-size: 15px;
                    color: #000000;
                }
            }
            .right {
                font-size: 15px;
                font-family: PingFang SC;
                color: #1dcaac;
            }
        }
        .content {
            margin-bottom: 10px;
            display: inline-block;
            max-width: 100%;
            .button {
                padding: 0px 10px;
                border-radius: 5px;
                background-color: #e3eefd;
                color: #1c77f2;
                margin-right: 10px;
                height: 30px;
                line-height: 30px;
                display: inline-block;
                margin-bottom: 10px;
            }
            span {
                line-height: 30px;
                font-size: 15px;
                color: #000;
                max-width: 100%;
            }
        }
    }
    .likes-card {
        .avatar-ml {
            margin-left: 10px;
        }
    }
    .pinglun-card {
        max-height: 70%;
        padding-bottom: 20px;
        margin-bottom: 0;
        img {
            cursor: pointer;
            margin-left: 10px;
        }
        .content {
            height: 100%;
            .comment-item {
                display: flex;
                margin-bottom: 20px;
                flex-wrap: wrap;
                .center {
                    flex: 1;
                    margin-left: 8px;
                    .name {
                        font-size: 14px;
                        font-weight: bold;
                        color: #000000;
                        margin-bottom: 10px;
                        line-height: 40px;
                    }
                    .text {
                        font-size: 14px;
                        color: #000000;
                        margin-bottom: 10px;
                        display: flex;
                        align-items: center;
                    }
                    .time {
                        font-size: 14px;
                        color: #000000;
                        opacity: 0.7;
                    }
                }
                .right {
                    flex: 0;
                    display: flex;
                    align-items: center;
                    height: 30px;
                    .like-num {
                        margin-right: 10px;
                        font-size: 14px;
                        color: #000000;
                        opacity: 0.6;
                    }
                }
                .children-list {
                    width: 100%;
                    margin-top: 15px;
                    padding-left: 35px;
                    .child {
                        display: flex;
                        margin-bottom: 10px;
                    }
                    :last-child {
                        margin-bottom: 0;
                    }
                }
            }
            :last-child {
                margin-bottom: 0;
            }
        }
    }
}
.drawer-footer {
    height: 61px;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 45%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    .left {
        display: flex;
        align-items: center;
        span {
            margin-left: 10px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            user-select: none;
        }
    }
    .right {
        img {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
    }
}
</style>
