<template>
    <div>
        <div class="content-head">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <h3>保证金缴费</h3>
            <h5>{{ title }}保证金缴费信息</h5>
            <div class="flex state">
                <div>状态:{{ state }}</div>
                <div></div>
            </div>
        </div>
        <div class="othercontent">
            <el-form ref="ruleForm" :model="ruleForm" label-width="200px" class="demo-ruleForm">
                <div class="message">
                    <div>
                        <div class="describe">单位信息</div>
                        <div class="message-form">
                            <div>
                                <el-form-item label="单位名称" prop="companyName">
                                    <el-input v-model.trim="ruleForm.companyName" disabled></el-input>
                                </el-form-item>
                            </div>
                            <div class="flex-between">
                                <el-form-item label="联系人：">
                                    <el-input v-model.trim="ruleForm.contacts" disabled maxlength="30"></el-input>
                                </el-form-item>
                                <el-form-item label="固定电话：" prop="companyTel">
                                    <el-input v-model.trim="ruleForm.companyTel" disabled maxlength="30"></el-input>
                                </el-form-item>
                            </div>
                            <div class="flex-between">
                                <el-form-item label="手机：" prop="companyPhone">
                                    <el-input v-model.trim="ruleForm.companyPhone" disabled maxlength="30"></el-input>
                                </el-form-item>
                                <el-form-item label="传真：" prop="companyFacsimile">
                                    <el-input v-model.trim="ruleForm.companyFacsimile" disabled maxlength="30"></el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="邮箱：" prop="companyEmail">
                                    <el-input v-model.trim="ruleForm.companyEmail" disabled maxlength="30"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="describe">邮寄信息</div>
                        <div class="message-form">
                            <div class="flex-between">
                                <el-form-item label="收件人名称：">
                                    <el-input v-model.trim="ruleForm.recipientsName" disabled maxlength="30"></el-input>
                                </el-form-item>
                                <el-form-item label="收件人单位：">
                                    <el-input v-model.trim="ruleForm.recipientsCompany" disabled maxlength="30"></el-input>
                                </el-form-item>
                            </div>
                            <div class="flex-between">
                                <el-form-item label="联系方式：">
                                    <el-input v-model.trim="ruleForm.recipientsPhone" disabled maxlength="30"></el-input>
                                </el-form-item>
                                <el-form-item label="邮政编码：">
                                    <el-input v-model.trim="ruleForm.recipientsMail" disabled maxlength="30"></el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="邮寄地址：">
                                    <el-input v-model.trim="ruleForm.recipientsAddress" disabled maxlength="30"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="describe">缴费信息</div>
                        <div class="message-form">
                            <el-form-item label="付款方式：" prop="feeWay">
                                <el-input v-model.trim="ruleForm.feeWay" disabled maxlength="30"> </el-input>
                            </el-form-item>
                            <el-form-item label="备注：" prop="remark">
                                <el-input :rows="5" v-model.trim="ruleForm.remark" type="textarea" disabled maxlength="300"> </el-input>
                            </el-form-item>
                            <el-form-item label="上传缴费凭证：">
                                <ul >
                                    <li v-for="(item, index) in ruleForm.voucherList" :key="index">
                                        <a :href="item.fileUrl">{{ item.fileName }}</a>
                                    </li>
                                </ul>
                            </el-form-item>
                        </div>
                    </div>
                </div>
            </el-form>
        </div>
        <!-- 拒绝原因 -->
        <el-dialog title="审核拒绝" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="拒绝原因" label-width="100" prop="reason">
                    <el-input v-model="form.reason" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="refuse">确 定</el-button>
            </div>
        </el-dialog>
        <div class="bottomButton" v-if="type == 'see'">
            <el-button @click="back">返回</el-button>
        </div>
        <div class="bottomButton" v-else>
            <el-button @click="back">取消</el-button>
            <el-button type="primary" @click="dialogFormVisible = true">审核拒绝</el-button>
            <el-button type="primary" @click="adopt">审核通过</el-button>
        </div>
    </div>
</template>

<script>
import { earnestDetail, aduit } from '@api/purchaser/bid';
import dataBreadcrumb from '@components/dataBreadcrumb.vue';

export default {
    components: {
        dataBreadcrumb
    },
    data() {
        return {
            companyId:"",
            dialogFormVisible: false,
            state: '',
            breads: ['招标管理', '招标项目管理', '工作台'],
            ruleForm: {},
            form: {
                reason: ''
            },
            rules: {
                reason: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        async getearnestDetail() {
            // let message={}
            // message.feeId=this.feeId
            // message.projectId=localStorage.getItem("projectId")
            let feeId = this.feeId;
            try {
                const { data, code } = await earnestDetail(feeId);
                if (code == 200) {
                    this.ruleForm = data;
                }
            } catch (e) {
                console.log(e);
            }
        },
        // 审核拒绝
        async refuse() {
            try {
                const valid = await this.$refs['form'].validate();
                if (valid) {
                    let form = this.form;
                    form.aduit = 2;
                    form.id = this.feeId;
                    form.projectId = localStorage.getItem("projectId")
                    form.companyId=this.companyId
                    const { code, msg } = await aduit(form);
                    if (code === 200) {
                        this.$message({
                            message: msg,
                            type: 'success',
                            duration: 1500
                        });
                        setTimeout(() => {
                            this.$router.go(-1);
                        }, 1500);
                    } else {
                        this.$success.error(msg);
                    }
                }
            } catch (e) {
                console.log(e);
            }
        },
        //审核通过
        async adopt() {
            try {
                let form = {};
                form.aduit = 1;
                form.id = this.feeId;
                form.projectId = localStorage.getItem("projectId")
                form.companyId=this.companyId
                const { code, msg } = await aduit(form);
                if (code === 200) {
                    this.$message({
                        message: msg,
                        type: 'success',
                        duration: 1500
                    });
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 1500);
                } else {
                    this.$success.error(msg);
                }
            } catch (e) {
                console.log(e);
            }
        }
    },
    created() {
        this.state = this.$route.query.state;
        this.type = this.$route.query.type;
        if (this.type == 'examine') {
            this.title = '审核';
        } else {
            this.title = '查看';
        }
        let feeId = this.$route.query.feeId;
        this.companyId=this.$route.query.companyId;
        this.feeId = feeId;
        this.getearnestDetail();
    }
};
</script>


<style scoped>
.message {
}

.message > div {
    background: #fff;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.message-form {
    width: 70%;
    margin: 0 auto;
}
.content-head {
    position: relative;
}
.state {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
</style>
