<template>
    <div>
        <div class="content-head">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <h3>{{ title }}中标公告</h3>
            <h5>{{ title }}中标公告</h5>
            <div v-if="type == 1" class="abs" style="width:400px">
                <div>拒绝原因：{{ ruleForm.reason }}</div>
            </div>
        </div>
        <winNotice v-if="type == 2"></winNotice>
        <div class="content" v-else>
            <div class="message form">
                <div class="flex-between">
                    <div>项目编号：{{ projectCode }}</div>
                    <div>项目名称：{{ projectName }}</div>
                </div>
                <div class="flex-between">
                    <div class="flex">  
                        <div class="adjustment">上传附件：</div>
                        <singleUpload :limit="1" tip="支持上传1个附件,不超过20M" @input="getfile" :fileList="ruleForm.accessoryPOList"></singleUpload>
                    </div>
                    <div>发布媒体：捷安采官网</div>
                </div>
                <!-- <div class="flex-item">
                    <div style="width: 50px">备注：{{ remark}}</div>
                    <el-input :rows="4" v-model.trim="remark" type="remark" placeholder="请输入备注" maxlength="300"> </el-input>
                </div> -->
            </div>
            <div class="form">
                <h3>中标人列表</h3>
                <dataTable :table-data="tableData" :columns="columns" :is-pageobj="false">
                    <el-table-column slot="operate" label="操作" align="center" fixed="right" width="200">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="edit(scope.row)">输入中标价</el-button>
                        </template>
                    </el-table-column>
                </dataTable>
                <h3 style="margin-top: 30px">中标公告内容</h3>
                <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="公告标题" prop="title">
                        <el-input v-model.trim="ruleForm.title" maxlength="30"></el-input>
                    </el-form-item>
                    <el-form-item label="公告内容" prop="content">
                        <quill-editor ref="text" v-model.trim="ruleForm.content" :options="editorOption" class="myQuillEditor" />
                    </el-form-item>
                </el-form>
            </div>
            <div class="bottomButton flex-center">
                <el-button @click="back">返回</el-button>
                <el-button type="primary" @click="submitData" v-if="type!== 2">提交审批</el-button>
            </div>
        </div>
        <el-dialog :visible.sync="dialogFormVisible" title="中标价格" width="30%">
            <el-form :model="form">
                <el-form-item label-width="120px" label="输入中标价">
                    <el-input-number v-model="form.price" :min="0" :controls="false" :precision="2" placeholder="输入"></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { noticeWin } from '@api/supply/bid';
import { createwin, winPersonInfo, editwin } from '@api/purchaser/bid';
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import dataTable from '@components/nopageTable.vue';
import dataBreadcrumb from '@components/dataBreadcrumb.vue';
import singleUpload from '@components/Upload/Upload.vue';
import winNotice from '@components/detail/winNotice.vue';


export default {
    components: {
        dataTable,
        dataBreadcrumb,
        singleUpload,
        quillEditor,
        winNotice
    },
    data() {
        return {
            type: '',
            projectCode: '',
            projectName: '',
            editorOption: {},
            ruleForm: {
                title: '',
                content: '',
                accessoryPOList: []
            },
            rules: {
                title: [
                    {
                        required: true,
                        message: '请填写标题',
                        trigger: 'blue'
                    }
                ],
                content: [
                    {
                        required: true,
                        message: '请填写内容',
                        trigger: 'blue'
                    }
                ]
            },
            form: {
                price: undefined
            },
            dialogFormVisible: false,
            remark: '',
            breads: ['招标管理', '招标项目管理', '工作台'],
            tableData: [],
            columns: [
                {
                    label: '中标人',
                    prop: 'companyName'
                },
                {
                    label: '中标价(元)',
                    prop: 'price'
                },
                {
                    slot: 'operate'
                }
            ] //
        };
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        getfile(val) {
            this.ruleForm.accessoryPOList = val;
        },
        edit(row) {
            this.dialogFormVisible = true;
            this.form = row;
        },
        // 中标人列表
        async getwinPersonInfo() {
            try {
                let projectId = localStorage.getItem('projectId');
                const { data, code } = await winPersonInfo(projectId);
                this.tableData.push(data);
            } catch (e) {
                console.log(e);
            }
        },
        async submitData() {
            try {
                const valid = await this.$refs['ruleForm'].validate();
                if (valid) {
                    let ruleForm = this.ruleForm;
                    ruleForm.projectId = localStorage.getItem('projectId');
                    ruleForm.price = this.tableData[0].price;
                    ruleForm.winCompanyId = this.tableData[0].companyId;
                    if (this.type == 1) {
                        var { code, msg } = await editwin(ruleForm);
                    } else {
                        var { code, msg } = await createwin(ruleForm);
                    }
                    if (code == 200) {
                        this.$message({
                            message: msg,
                            type: 'success',
                            duration: 1500
                        });
                        setTimeout(() => {
                            this.$router.go(-1);
                        }, 1500);
                    } else {
                        this.$message.error(msg);
                    }
                }
            } catch (e) {
                console.log(e);
            }
        },
        //   获取详情
        async getnoticeWin() {
            try {
                let projectId = localStorage.getItem('projectId');
                const { data, code } = await noticeWin(projectId);
                if (code == 200) {
                   for (let item of data.accessoryDOList) {
                    item.name = item.fileName;
                    item.url = item.accessoryUrl;
                }
                data.accessoryPOList=data.accessoryDOList
                    this.ruleForm = data;
                    
                }
            } catch (err) {
                console.log(err);
            }
        }
    },
    created() {
        this.projectCode = localStorage.getItem('projectCode');
        this.projectName = localStorage.getItem('projectName');
        this.getwinPersonInfo();
        let type = this.$route.query.type;
        this.type = type;
        if (type == 1) {
            this.getnoticeWin();
            this.title = '编辑';
        } else if (type == 2) {
            this.title = '查看';
        } else {
            this.title = '发布';
        }
    }
};
</script>


<style scoped>
.message {
    width: 80%;
    margin: 0 auto;
}

.message > div {
    margin-bottom: 20px;
}

.form > h3 {
    font-weight: bold;
    margin-bottom: 30px;
}

.button {
    width: 100%;
    height: 50px;
    margin-top: 100px;
}
</style>
