<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="zixun">
                <advisory-detail
                    :title="title"
                    :caption="list.title"
                    :content="list.content"
                    :name="list.nickname"
                    :time="list.createdAt"
                >
                </advisory-detail>
            </div>
            <div class="official">
                <div class="official_header">
                    <img src="../assets/icon_zixun.png" />
                    <span>官方答复</span>
                    <button @click="releaseGo" v-if="canReply">
                        <img src="../assets/icon_edit.png" alt="" />
                        <span>我要回复</span>
                    </button>
                </div>
                <div class="official_line"></div>
                <template v-if="commentList && commentList.length">
                    <div class="official_main" v-for="n in commentList" :key="n.id">
                        <img src="../assets/icon_hui.png" />
                        <div class="official_content" v-html="n.content">
                            {{ n.content }}
                        </div>
                    </div>
                </template>
                <div class="official_main" v-else>
                    <img src="../assets/icon_hui.png" />
                    <div class="official_content">
                        暂无答复
                    </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>
import advisoryDetail from '../components/advisoryDetail';
export default {
    name: 'interactDetail',
    data() {
        return {
            name01: '标题',
            list: [],
            title: '咨询详情',
            commentList: {},
            dialogVisible: false,
            rules: {
                content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
            },
            formData: {}
        };
    },
    created() {
        this.getData();
    },
    computed: {
        canReply() {
            return (
                this.$store.state.userInfo &&
                this.$store.state.userInfo.authorities &&
                this.$store.state.userInfo.authorities.find(i => i.name === 'ROLE_ADMIN' || i.name === 'ROLE_INTERACT')
            );
        }
    },
    methods: {
        getData() {
            if (this.$route.query.id) {
                this.$http.get(`/post/getDTO/${this.$route.query.id}`).then(res => {
                    this.list = res;
                    this.formData.postId = res.id;
                });
                // this.$http.get(`/comment/allDTO`).then(res => {
                //     this.commentList = res.content;
                //     let a = [...this.commentList].find(item => item.postId == this.$route.query.id);
                //     this.commentContent = a.content;
                // });
                this.$http.get('/comment/allDTO', { query: { postId: this.$route.query.id } }).then(res => {
                    this.commentList = res.content;
                    console.log(this.commentList);
                });
            }
        },
        releaseGo() {
            if (this.$store.state.userInfo) {
                this.dialogVisible = true;
            } else {
                this.$alert('用户未登录，请先进行登录', '提示', {
                    confirmButtonText: '确定',
                    type: 'warning'
                });
            }
        },
        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);
                });
        }
    },
    components: {
        advisoryDetail
    }
};
</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;
    }
}
.official {
    margin-top: 40px;
    .official_header {
        display: flex;
        align-items: center;
        img {
            width: 24px;
            height: 24px;
        }
        span {
            color: #000;
            font-size: 16px;
            font-weight: 500;
            margin-left: 5px;
            flex-grow: 1;
        }
        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;
            }
        }
    }
    .official_line {
        width: 900px;
        height: 1px;
        background: #f2f3f5;
        margin: 18px 0;
    }
    .official_main {
        display: flex;
        img {
            width: 44px;
            height: 44px;
            margin-right: 16px;
        }
        .official_content {
            width: 840px;
            padding: 20px;
            background: #f5f7fa;
            border-radius: 0px 16px 16px 16px;
            color: #000;
            line-height: 24px;
            font-size: 14px;
            margin-top: 16px;
        }
    }
}
</style>
