<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.description"
                    :name="list.name"
                    :time="list.createdAt"
                >
                </advisory-detail>
            </div>
            <div class="reply">
                <div class="header">
                    <div class="title">
                        <img src="../assets/icon_wenti.png" />
                        <span>问题答复</span>
                        <span style="margin-left:6px">({{ commentList.length }})</span>
                    </div>
                    <button @click="dialogVisible = true">
                        <img src="../assets/icon_edit.png" alt="" />
                        <span>我要回复</span>
                    </button>
                </div>
                <div class="main">
                    <div class="card" v-for="item in commentList" :key="item.id">
                        <div class="card_left">
                            <img src="../assets/publish_img.png" />
                        </div>
                        <div class="card_right">
                            <div class="card_info">
                                <span class="name">{{ item.user.username }}</span>
                                <span class="time">{{ item.createdAt }}</span>
                            </div>
                            <div class="card_content">
                                {{ item.description }}
                            </div>
                            <div class="card_icon">
                                <div class="up">
                                    <img :src="dianImg" @click="onUp" />
                                    <!-- <img src="../assets/icon_dian_active.png" /> -->
                                    <span>111</span>
                                </div>
                                <div class="low">
                                    <img :src="buImg" @click="onLow" />
                                    <!-- <img src="../assets/icon_bu_active.png" /> -->
                                    <span>222</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="回复" :model="formData" :visible.sync="dialogVisible" width="760px" center>
            <div style="padding-right:100px">
                <el-form label-width="120px" label-position="right">
                    <el-form-item prop="cont" label="回复内容">
                        <el-input
                            v-model="formData.cont"
                            placeholder="请输入您要回复的内容，1000字以内"
                            type="textarea"
                            :rows="10"
                            maxlength="1000"
                            style="width:526px;"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="img" label="图片附件">
                        <multi-upload v-model="formData.img"></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="dialogVisible = false" class="sub">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import advisoryDetail from '../components/advisoryDetail';
// import Reply from '../components/Reply';
export default {
    name: 'interactDetail',
    data() {
        return {
            name01: '标题',
            list: [],
            title: '问题详情',
            commentList: {},
            dialogVisible: false,
            formData: {
                cont: '',
                img: ''
            },
            dianImg: require('@/assets/icon_dian.png'),
            buImg: require('@/assets/icon_bu.png')
        };
    },
    created() {
        if (this.$route.query.id) {
            this.$http.get(`/topic/get/${this.$route.query.id}`).then(res => {
                this.list = res;
                this.commentList = this.list.commentList;
                console.log(this.commentList);
            });
        }
    },
    methods: {
        onUp() {
            this.dianImg = require('@/assets/icon_dian_active.png');
            this.buImg = require('@/assets/icon_bu.png');
        },

        onLow() {
            this.buImg = require('@/assets/icon_bu_active.png');
            this.dianImg = require('@/assets/icon_dian.png');
        }
    },

    components: {
        // Reply,
        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 {
        img {
            width: 16px;
            height: 16px;
        }
        span {
            color: #000;
            font-size: 16px;
            font-weight: 500;
        }
    }
    .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;
        }
    }
}
.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;
            }
            .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>
