<template>
    <div>
        <div class="content-head">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <h3>查看流标公告</h3>
            <h5>查看流标公告</h5>
        </div>
        <div class="content">
            <div class="describe">流标公告</div>
            <div class="form">
                <el-form ref="ruleForm" :model="ruleForm" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="公告标题">
                        <div>{{ ruleForm.title }}</div>
                    </el-form-item>
                    <el-form-item label="上传附件" v-if="ruleForm.accessoryVOList">
                        <div v-if="ruleForm.accessoryVOList.length == 0">无</div>
                        <ul v-else>
                            <li v-for="(item, index) in ruleForm.accessoryVOList" :key="index" class="flex">
                                <div style="margin-right: 10px">{{ item.fileName }}</div>
                                <el-button size="mini" @click="open(item.accessoryUrl)">下载</el-button>
                            </li>
                        </ul>
                    </el-form-item>
                    <el-form-item label="公告内容">
                        <div v-html="ruleForm.content"></div>
                    </el-form-item>
                </el-form>
                <div class="button">
                    <el-button @click="cancle">返回</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { noticeAbortive } from '@api/purchaser/bid';
import { down } from '@utils/common';
import dataBreadcrumb from '@components/dataBreadcrumb.vue';
import multiUpload from '@components/Upload/multiUpload.vue';
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
    components: {
        dataBreadcrumb,
        multiUpload,
        quillEditor
    },
    data() {
        return {
            editorOption: {},
            breads: ['招标管理', '招标项目管理', '工作台'],
            ruleForm: {
                title: '',
                content: ''
            },
            rules: {
                title: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blue'
                    }
                ],
                release: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blue'
                    }
                ],
                file: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blue'
                    }
                ],
                content: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blue'
                    }
                ]
            }
        };
    },
    created() {
        let id = this.$route.query.id;
        this.abortiveDetail(id);
    },
    methods: {
         open(url){
		window.open(url)  
	  },
        cancle() {
            this.$router.go(-1);
        },
        async abortiveDetail(id) {
            try {
                const { data, code } = await noticeAbortive(id);
                if (code === 200) {
                    this.ruleForm = data;
                }
            } catch (e) {
                console.log(e);
            }
        }
    }
};
</script>


<style scoped>
.content {
    padding: 0;
    padding-bottom: 100px;
}

.button {
    width: 200px;
    margin: 150px auto 0;
}
</style>
