<template>
    <div>
        <div class="content-head">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <h3>保证金缴纳</h3>
            <h5>{{ type == 1 ? '编辑' : '提交' }}保证金缴纳信息</h5>
            <div class="abs" style="width:400px">
                <div v-if="type == 1">拒绝原因:{{ ruleForm.reason }}</div>
            </div>
        </div>
        <div class="othercontent">
            <el-form ref="ruleForm" :model="ruleForm" :rules="formrules" 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="ruleForm.companyName" disabled></el-input>
                                </el-form-item>
                            </div>
                            <div class="flex-between">
                                <el-form-item label="联系人：" prop="contacts">
                                    <el-input v-model="ruleForm.contacts" placeholder="请输入" maxlength="30"></el-input>
                                </el-form-item>
                                <el-form-item label="固定电话：" prop="companyTel">
                                    <el-input v-model="ruleForm.companyTel" placeholder="请输入" maxlength="30"></el-input>
                                </el-form-item>
                            </div>
                            <div class="flex-between">
                                <el-form-item label="手机：" prop="companyPhone">
                                    <el-input v-model="ruleForm.companyPhone" placeholder="请输入" maxlength="30"></el-input>
                                </el-form-item>
                                <el-form-item label="传真：" prop="companyFacsimile">
                                    <el-input v-model="ruleForm.companyFacsimile" placeholder="请输入" maxlength="30"></el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="邮箱：" prop="companyEmail">
                                    <el-input v-model="ruleForm.companyEmail" placeholder="请输入" 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="ruleForm.recipientsName" placeholder="请输入" maxlength="30"></el-input>
                                </el-form-item>
                                <el-form-item label="收件人单位：">
                                    <el-input v-model="ruleForm.recipientsCompany" placeholder="请输入" maxlength="30"></el-input>
                                </el-form-item>
                            </div>
                            <div class="flex-between">
                                <el-form-item label="联系方式：">
                                    <el-input v-model="ruleForm.recipientsPhone" placeholder="请输入" maxlength="30"></el-input>
                                </el-form-item>
                                <el-form-item label="邮政编码：">
                                    <el-input v-model="ruleForm.recipientsMail" placeholder="请输入" maxlength="10"></el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="邮寄地址：">
                                    <el-input v-model="ruleForm.recipientsAddress" placeholder="请输入" 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="ruleForm.feeWay" placeholder="请输入" maxlength="30"> </el-input>
                            </el-form-item>
                            <el-form-item label="备注：" prop="remark">
                                <el-input :rows="5" v-model="ruleForm.remark" type="textarea" placeholder="请输入内容" maxlength="300">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="上传缴费凭证：" prop="voucherList">
                                <Upload :limit="5" :max="5" tip="完成上传5份文件,每份不超过10M" @input="getfile" :fileList="ruleForm.voucherList"></Upload>
                            </el-form-item>
                        </div>
                    </div>
                </div>
            </el-form>
        </div>
        <div class="bottomButton">
            <el-button @click="back">取消</el-button>
            <el-button type="primary" @click="submitData">提交</el-button>
        </div>
    </div>
</template>

<script>
import { bidderEarnestpayment, earnestDetail, earnestEdit } from '@api/supply/bid';
import dataBreadcrumb from '@components/dataBreadcrumb.vue';
import Upload from '@components/Upload/Upload.vue';
export default {
    components: {
        dataBreadcrumb,
        Upload
    },
    data() {
        let checkPhone = async (rule, value, callback) => {
            if (!value) {
                return callback(new Error('手机号不能为空'));
            } else {
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
                console.log(reg.test(value));
                if (reg.test(value)) {
                    callback();
                } else {
                    return callback(new Error('请输入正确的手机号'));
                }
            }
        };
        // 测试图片
        let checkimg = (rule, value, callback) => {
            if (this.ruleForm.voucherList.length === 0) {
                callback(new Error('请上传凭证'));
            } else {
                callback();
            }
        };
        return {
            type: '',
            breads: ['投标管理', '我参与的项目', '工作台'],
            ruleForm: {
                companyName: '',
                companyTel: '',
                companyPhone: '',
                companyFacsimile: '',
                recipientsName: '',
                recipientsCompany: '',
                recipientsPhone: '',
                recipientsMail: '',
                recipientsAddress: '',
                feeWay: '',
                remark: '',
                companyEmail: '',
                voucherList: [],
                contacts: ''
            },
            formrules: {
                companyName: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                companyPhone: [
                    {
                        required: true,
                        validator: checkPhone,
                        trigger: 'blur'
                    }
                ],

                feeWay: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                voucherList: [
                    {
                        required: true,
                        validator: checkimg,
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    methods: {
        getfile(val) {
            this.ruleForm.voucherList = val;
        },
        back() {
            this.$router.go(-1);
        },
        async submitData() {
            try {
                const valid = await this.$refs['ruleForm'].validate();
                if (valid) {
                    let message = this.ruleForm;
                    message.companyId = localStorage.getItem('companyId');
                    message.projectId = localStorage.getItem('projectId');
                    let type = this.type;
                    if (type == 1) {
                        var { code, msg } = await earnestEdit(message);
                    } else {
                        var { code, msg } = await bidderEarnestpayment(message);
                    }
                    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 getearnestDetail() {
            let projectId = localStorage.getItem('projectId');
            try {
                const { data, code } = await earnestDetail(projectId);
                if (code == 200) {
                    data.companyName = JSON.parse(localStorage.getItem('userInfo')).companyName;
                    for (let item of data.voucherList) {
                        item.name = item.fileName;
                        item.url = item.fileUrl;
                    }
                    this.ruleForm = data;
                }
            } catch (e) {
                console.log(e);
            }
        }
    },
    created() {
        let type = this.$route.query.type;
        this.type = type;
        if (type == 1) {
            this.getearnestDetail();
        } else {
            this.ruleForm.companyName = JSON.parse(localStorage.getItem('userInfo')).companyName;
        }
    }
};
</script>


<style scoped>

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

.message-form {
    width: 70%;
    margin: 0 auto;
}
</style>