<template>
    <div>
        <!-- 弹窗 -->
        <el-dialog width="760px" :title="title" :visible.sync="outerVisible" append-to-body center>
            <div style="padding:0 40px">
                <h3>咨询须知</h3>
                1、请您自觉遵守中华人民共和国宪法和法律；<br /><br />
                2、您应对来信内容的真实性、客观性负责，信中不要含有猥亵、色情、造谣诽谤、人身攻击和反政府言论。否则，您将承担由此而引发的一切法律责任；<br /><br />
                3、不得发表未经证实的消息，亲身经历请注明；<br /><br />

                4、请勿发表与军民融合无关的留言，以及任何形式的广告和推介企业产品或服务等内容；<br /><br />
                5、请您真实、准确地填写您联系方式的信息，以便与您联系，我们将依法保护您的隐私权，保守您的联系方式等信息秘密；<br /><br />
                6、您联系方式的信息如不真实、不准确，留言将可予以删除；<br /><br />
                7、本平台拥有发布、编辑、删除网上留言的权利，凡不符合本须知规定的留言将予以删除；<br /><br />
                8、如在本平台留言，即表明已阅读并接受了上述各项条款。
            </div>
            <el-dialog width="760px" :title="title" :visible.sync="innerVisible" append-to-body center>
                <el-form :model="form" ref="form" :rules="rules" :label-width="formLabelWidth" key="0">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="form.name" placeholder="请输入单位名称"></el-input>
                    </el-form-item>
                    <el-form-item label="职业" prop="occupation">
                        <el-input v-model="form.profession" placeholder="请输入您的职业"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="phone">
                        <el-input v-model="form.phone" placeholder="请输入您的联系方式"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email" placeholder="请输入您的邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="证件类型" prop="papersType">
                        <el-select v-model="form.papersType" placeholder="请选择">
                            <el-option label="身份证" :value="'IDENTITY_CARDS'"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="证件编号" prop="num">
                        <el-input v-model="form.papersCode" placeholder="请输入证件编号"></el-input>
                    </el-form-item>
                    <el-form-item label="咨询标题" prop="title">
                        <el-input
                            v-model="form.title"
                            placeholder="请输入标题内容，30字以内"
                            maxlength="30"
                            show-word-limit
                            style="width:526px"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="正文详情" prop="content">
                        <el-input
                            v-model="form.content"
                            placeholder="请写明问题有关时间/地点/事实等相关信息，不超过1000字"
                            maxlength="1000"
                            show-word-limit
                            type="textarea"
                            style="width:526px;"
                            :rows="5"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="图片附件" prop="pic">
                        <multi-upload v-model="form.pics"> </multi-upload>
                    </el-form-item>
                    <el-form-item label="是否公开" prop="publicity" style="width:400px" v-if="dataType == 1">
                        <el-radio v-model="form.publicPost" :label="true">是</el-radio>
                        <el-radio v-model="form.publicPost" :label="false">否</el-radio>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="toShow()" class="back">取消</el-button>
                    <el-button type="primary" @click="add" class="sub">确定</el-button>
                </div>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
                <el-button @click="toShow()" class="back">取消</el-button>
                <el-button type="primary" @click="innerVisible = true" class="sub">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: '',
    props: ['outerVisible', 'dataType', 'title'],
    data() {
        return {
            innerVisible: false,
            dialogFormVisible: false,
            form: {},
            formLabelWidth: '80px',
            rules: {
                name: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
                phone: [{ required: true, message: '请输入您的联系方式', trigger: 'blur' }],
                title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                content: [{ required: true, message: '请输入正文详情', trigger: 'blur' }]
            }
        };
    },
    created() {},
    methods: {
        toShow() {
            this.innerVisible = false;
            this.$emit('toColse', false);
        },
        save(url, data) {
            // this.$http.post(url, this.form, { body: 'json' }).then(res => {
            //     this.toShow();
            // });
            this.$http
                .post(url, data, { body: 'json' })
                .then(res => {
                    if (res) {
                        this.$message.success('成功');
                        this.$refs['form'].resetFields();
                        this.toShow();
                    }
                })
                .catch(e => {
                    this.$message.error(e.error);
                });
        },
        add() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    if (this.dataType === 1) {
                        this.form.type = 'OFFICIAL';
                        this.save('/post/create', this.form);
                    } else if (this.dataType === 2) {
                        this.form.type = 'TOPIC';
                        this.save('/post/create', this.form);
                    } else if (this.dataType === 3) {
                        this.form.type = 'QA';
                        this.save('/post/create', this.form);
                    }
                } else {
                    return false;
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.content_title {
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-bottom: 20px;
    border-bottom: #f2f3f5 1px solid;
    > span {
        font-size: 16px;
        color: #000000;
        line-height: 30px;
        font-weight: 700;
    }
    button {
        width: 130px;
        height: 36px;
        background: #bf1616;
        border-radius: 4px;
        float: right;
        cursor: pointer;
        margin-top: 12px;
        display: flex;
        padding-left: 22px;
        align-items: center;
        img {
            width: 18px;
            height: 18px;
            margin-right: 6px;
        }
        span {
            color: #ffffff;
            font-size: 13px;
        }
    }
}

.content_list > ul {
    li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        cursor: pointer;

        // img {
        //     width: 18px;
        //     height: 18px;
        //     margin-right: 6px;
        // }
        i {
            font-style: normal;
            font-size: 11px;
            // width: 18px;
            height: 18px;
            line-height: 18px;
            background: #bf1616;
            border-radius: 2px;
            color: #fff;
            text-align: center;
            margin-right: 6px;
            padding: 0 3px;
            display: none;
            // overflow: hidden;
        }
        div {
            display: flex;
            align-items: center;
        }
        .show {
            display: block;
        }
        .list_con {
            width: 570px;
            font-size: 14px;
            color: #000000;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .time {
            font-size: 14px;
            color: #939599;
        }
        &:hover .list_con {
            color: #bf1616;
        }
    }
}
.pagination {
    margin-top: 40px;
    text-align: center;
}
</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 40px 40px 0;
    }

    .el-input {
        width: 200px;
    }
    .el-form {
        display: flex;
        flex-wrap: wrap;
        .el-form-item {
            margin-right: 46px;
        }
    }
}
.el-dialog--center .el-dialog__body {
    padding: 30px 40px;
}
</style>
