<template>
    <div class="interact_detail" style="background:#fff;padding-bottom:80px">
        <div class="container">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/interact' }">政民互动</el-breadcrumb-item>
                <el-breadcrumb-item>咨询详情</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="advisory_detail">
                <div class="official_header">
                    <img src="../assets/icon_reyi.png" />
                    <span>话题详情</span>
                </div>
                <el-row>
                    <el-col>
                        <div class="name">标题</div>
                        <div class="content1">{{ list.title }}</div>
                    </el-col>
                    <el-col>
                        <div class="name">正文</div>
                        <div class="content1" :v-html="list.content">
                            {{ list.content }}
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="reply">
                <div class="header">
                    <div class="title">
                        <img src="../assets/icon_reyi2.png" />
                        <span>热议回复 </span>
                        <span style="margin-left:6px">({{ list.commentNum }})</span>
                    </div>
                    <button @click="releaseGo">
                        <img src="../assets/icon_edit.png" alt="" />
                        <span>我要回复</span>
                    </button>
                </div>
                <div class="main">
                    <div class="card" v-for="item in replyList" :key="item.id">
                        <div class="card_left">
                            <img :src="item.avatar" />
                        </div>
                        <div class="card_right">
                            <div class="card_info">
                                <span class="name">{{ item.nickname }}</span>
                                <span class="time">{{ item.createdAt }}</span>
                            </div>
                            <div class="card_content">
                                <div>{{ item.content }}</div>
                                <div v-for="n in item.pics" :key="n.index">
                                    <img :src="n" />
                                </div>
                            </div>
                            <div class="card_icon">
                                <!-- <div class="up">
                                    <img :ref="item.id" :src="item.likeNum | to(userInfo)" @click="onUp(item.id)" />
                                    <span>{{ item.likeNum }}</span>
                                </div>
                                <div class="low">
                                    <img :ref="item.id" :src="item.dislikeNum | bu(userInfo)" @click="onLow(item.id)" />
                                    <span>{{ item.dislikeNum }}</span>
                                </div> -->
                                <div class="up">
                                    <img
                                        src="../assets/icon_dian_active.png"
                                        @click="onUp(item.id)"
                                        v-if="item.liked == true"
                                    />
                                    <img
                                        src="../assets/icon_dian.png"
                                        @click="onUp(item.id)"
                                        v-if="item.liked == false"
                                    />
                                    <span>{{ item.likeNum }}</span>
                                </div>
                                <div class="low">
                                    <img
                                        src="../assets/icon_bu_active.png"
                                        @click="onLow(item.id)"
                                        v-if="item.disliked == true"
                                    />
                                    <img
                                        src="../assets/icon_bu.png"
                                        @click="onLow(item.id)"
                                        v-if="item.disliked == false"
                                    />
                                    <span>{{ item.dislikeNum }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="回复" :visible.sync="dialogVisible" width="760px" center>
            <div style="padding-right:100px">
                <el-form :model="formData" label-width="120px" label-position="right" ref="formData" :rules="rules">
                    <!--       <el-form-item v-show="false" prop="id">
                        <el-input v-model="formData.id"></el-input>
                    </el-form-item> -->
                    <el-form-item prop="cont" label="回复内容">
                        <el-input
                            v-model="formData.content"
                            placeholder="请输入您要回复的内容，1000字以内"
                            type="textarea"
                            :rows="10"
                            maxlength="1000"
                            style="width:526px;"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="pic" label="图片附件">
                        <multi-upload v-model="formData.pics"></multi-upload>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" class="back">返回</el-button>
                <el-button type="primary" @click="add()" class="sub">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'interactDetail',
    computed: {
        userInfo() {
            return this.$store.state.userInfo;
        }
    },
    filters: {
        to: function(list, userInfo) {
            let pic;
            if (userInfo && list.length > 0) {
                list.forEach((item, index) => {
                    if (item.user.id === userInfo.id) {
                        pic = require('@/assets/icon_dian_active.png');
                        console.log(item.user.id === userInfo.id);
                    } else {
                        pic = require('@/assets/icon_dian.png');
                    }
                });
            } else {
                return (pic = require('@/assets/icon_dian.png'));
            }
            return pic;
        },

        bu: function(list, userInfo) {
            let pic;
            if (userInfo && list.length > 0) {
                list.forEach((item, index) => {
                    if (item.user.id === userInfo.id) {
                        pic = require('@/assets/icon_bu_active.png');
                    } else {
                        pic = require('@/assets/icon_bu.png');
                    }
                });
            } else {
                return (pic = require('@/assets/icon_bu.png'));
            }
            return pic;
        } /* ,
        negative: function(list) {
            let count = 0;
            list.forEach((item, index) => {
                if (item.type === 2) {
                    count++;
                }
            });
            return count;
        },

        good: function(list) {
            let count = 0;
            list.forEach((item, index) => {
                if (item.type === 1) {
                    count++;
                }
            });
            return count;
        } */
    },
    data() {
        return {
            name01: '标题',
            list: {},
            commentList: [],
            dialogVisible: false,
            formData: {},
            dianImg: require('@/assets/icon_dian.png'),
            buImg: require('@/assets/icon_bu.png'),
            rules: {
                content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
            },
            replyList: {}
        };
    },
    created() {
        this.getData();
    },
    methods: {
        add() {
            this.$refs['formData'].resetFields();
            this.$http
                .post('/comment/create', this.formData, { body: 'json' })
                .then(res => {
                    this.$message.success('成功');
                    this.getData();
                    this.dialogVisible = false;
                    this.$refs['formData'].resetFields();
                })
                .catch(e => {
                    dialogVisible = false;
                    this.$message.error(e.error);
                });
        },
        getData() {
            if (this.$route.query.id) {
                this.$http.get(`/post/getDTO/${this.$route.query.id}`).then(res => {
                    this.list = res;
                    // this.commentList = this.list.commentList;
                    this.formData.postId = res.id;
                    // console.log(this.commentList);
                });
                this.$http.get('/comment/allDTO', { query: { postId: this.$route.query.id } }).then(res => {
                    this.replyList = res.content;
                    console.log(this.replyList);
                });
            }
        },
        onUp(id) {
            this.$http
                .get('/comment/like', { commentId: id, dislike: false }, { body: 'json' })
                .then(res => {
                    console.log(res);
                })
                .catch(e => {
                    console.log(e);

                    this.$message.error(e.error);
                });
            window.location.reload();
            /* 添加赞样式 */
            if (this.$store.state.userInfo) {
                if (this.$refs[id][0].src === require('@/assets/icon_dian_active.png')) {
                    this.$refs[id][0].src = require('@/assets/icon_dian.png');
                    this.commentList.forEach((commen, index) => {
                        if (commen.id === id) {
                            commen.praiseList.forEach((item, index) => {
                                if (item.user.id === this.userInfo.id) {
                                    commen.praiseList.splice(index, 1);
                                }
                            });
                        }
                    });
                } else {
                    this.$refs[id][0].src = require('@/assets/icon_dian_active.png');
                    this.commentList.forEach((item, index) => {
                        if (item.id === id) {
                            item.praiseList.push({ user: this.userInfo });
                        }
                    });
                    /*
              如果有踩的数据删除
              */
                    if (this.$refs[id][1].src === require('@/assets/icon_bu_active.png')) {
                        this.commentList.forEach((commen, index) => {
                            if (commen.id === id) {
                                commen.differList.forEach((item, index) => {
                                    if (item.user.id === this.userInfo.id) {
                                        commen.differList.splice(index, 1);
                                    }
                                });
                            }
                        });
                        this.$refs[id][1].src === require('@/assets/icon_bu.png');
                    }
                }
            } else {
                this.$alert('用户未登录，请先进行登录?', '提示', {
                    confirmButtonText: '确定',
                    type: 'warning'
                });
            }
        },
        onLow(id) {
            this.$http
                .get('/comment/like', { commentId: id, dislike: true }, { body: 'json' })
                .then(res => {
                    /*  this.getData(); */
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
            window.location.reload();
            if (this.$store.state.userInfo) {
                if (this.$refs[id][1].src === require('@/assets/icon_bu_active.png')) {
                    this.$refs[id][1].src === require('@/assets/icon_bu.png');
                    this.commentList.forEach((commen, index) => {
                        if (commen.id === id) {
                            commen.differList.forEach((item, index) => {
                                if (item.user.id === this.userInfo.id) {
                                    commen.differList.splice(index, 1);
                                }
                            });
                        }
                    });
                } else {
                    /*
              如果有赞的数据删除
              */
                    if (this.$refs[id][0].src === require('@/assets/icon_dian_active.png')) {
                        this.commentList.forEach((commen, index) => {
                            if (commen.id === id) {
                                commen.praiseList.forEach((item, index) => {
                                    if (item.user.id === this.userInfo.id) {
                                        commen.praiseList.splice(index, 1);
                                    }
                                });
                            }
                        });
                        this.$refs[id][0].src === require('@/assets/icon_dian.png');
                    }
                    this.commentList.forEach((item, index) => {
                        if (item.id === id) {
                            item.differList.push({ user: this.userInfo });
                        }
                    });
                    this.$refs[id][1].src === require('@/assets/icon_bu_active.png');
                }
            } else {
                this.$alert('用户未登录，请先进行登录?', '提示', {
                    confirmButtonText: '确定',
                    type: 'warning'
                });
            }
        },
        releaseGo() {
            if (this.$store.state.userInfo) {
                this.dialogVisible = true;
            } else {
                this.$alert('用户未登录，请先进行登录?', '提示', {
                    confirmButtonText: '确定',
                    type: 'warning'
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    width: 900px;
    margin: auto;
}
.el-breadcrumb {
    height: 60px;
    line-height: 60px;
    /deep/.el-breadcrumb__inner {
        font-size: 12px;
        color: #000 !important;
    }
}
.advisory_detail {
    .official_header {
        width: 100%;
        height: 60px;
        line-height: 60px;
        display: flex;
        align-items: center;
        img {
            width: 24px;
            height: 24px;
        }
        span {
            color: #000;
            font-size: 16px;
            font-weight: 500;
            margin-left: 5px;
        }
    }
    .el-col {
        border: 1px solid #f2f3f5;
        display: flex;
        color: #000000;
        div {
            padding: 20px;
        }
        .name {
            width: 80px;
            line-height: 20px;
            border-right: 1px solid #f2f3f5;
            text-align: center;
        }

        .content {
            width: 821px;
            font-size: 14px;
            line-height: 24px;
            padding: 0 20px;
        }
        .content1 {
            font-size: 18px;
            width: 821px;
            font-size: 14px;
            line-height: 24px;
        }
    }
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f2f3f5;
    .title {
        display: flex;
        align-items: center;
        img {
            width: 24px;
            height: 24px;
            margin-right: 5px;
        }
    }
    button {
        cursor: pointer;
        display: flex;
        align-items: center;
        padding-left: 22px;
        width: 130px;
        height: 36px;
        background: #bf1616;
        border-radius: 4px;
        img {
            width: 18px;
            height: 18px;
            margin-right: 6px;
        }
        span {
            font-size: 13px;
            color: #fff;
        }
    }
}
.main {
    padding-bottom: 100px;
    .card {
        + .card {
            margin-top: 40px;
        }
        display: flex;
        .card_left {
            width: 44px;
            margin-right: 16px;
            img {
                width: 44px;
                height: 44px;
                border-radius: 50%;
            }
        }
        .card_right {
            .card_info {
                height: 24px;
                line-height: 24px;
                margin-bottom: 8px;
                .name {
                    font-size: 14px;
                    font-weight: 600;
                    color: #000;
                    margin-right: 30px;
                }
                .time {
                    color: #c8c9cc;
                    font-size: 14pxs;
                }
            }
            .card_content {
                background: #f5f7fa;
                border-radius: 0px 16px 16px 16px;
                padding: 20px;

                font-size: 14px;
                color: #000000;
                line-height: 24px;

                img {
                    width: 90px;
                    height: 90px;
                }
            }
            .card_icon {
                display: flex;
                padding-left: 23px;
                margin-top: 19px;
                img {
                    width: 24px;
                    height: 24px;
                    margin-right: 9px;
                }
                .up,
                .low {
                    display: flex;
                    align-items: center;
                    img {
                        cursor: pointer;
                    }
                }
                .low {
                    margin-left: 30px;
                }
            }
        }
    }
}
</style>
<style lang="less">
.el-dialog {
    overflow: hidden;
    .el-button {
        width: 100px;
        height: 36px;
        border-radius: 4px;
        font-size: 13px;
        color: #ffffff;
    }
    .back {
        background: #c4c7cc;
    }
    .sub {
        background: #bf1616;
    }
    .dialog-footer {
        float: right;
        padding: 0 100px 40px 0;
    }
}
</style>
