<template>
    <div>
        <div class="content-head">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <h3>查看</h3>
            <h5>查看保证金缴费信息</h5>
        </div>
        <div class="othercontent">
            <el-form ref="ruleForm" :model="ruleForm" label-width="200px" class="demo-ruleForm" :rules="formrules">
                <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="isdisabled" maxlength="30"></el-input>
                                </el-form-item>
                                <el-form-item label="固定电话：" prop="companyTel">
                                    <el-input v-model.trim="ruleForm.companyTel" :disabled="isdisabled" 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="isdisabled" maxlength="30"></el-input>
                                </el-form-item>
                                <el-form-item label="传真：" prop="companyFacsimile">
                                    <el-input v-model.trim="ruleForm.companyFacsimile" :disabled="isdisabled" maxlength="30"></el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="邮箱：" prop="companyEmail">
                                    <el-input v-model.trim="ruleForm.companyEmail" :disabled="isdisabled" 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="isdisabled" maxlength="30"></el-input>
                                </el-form-item>
                                <el-form-item label="收件人单位：">
                                    <el-input v-model.trim="ruleForm.recipientsCompany" :disabled="isdisabled" maxlength="30"></el-input>
                                </el-form-item>
                            </div>
                            <div class="flex-between">
                                <el-form-item label="联系方式：">
                                    <el-input v-model.trim="ruleForm.recipientsPhone" :disabled="isdisabled" maxlength="30"></el-input>
                                </el-form-item>
                                <el-form-item label="邮政编码：">
                                    <el-input v-model.trim="ruleForm.recipientsMail" :disabled="isdisabled" maxlength="30"></el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="邮寄地址：">
                                    <el-input v-model.trim="ruleForm.recipientsAddress" :disabled="isdisabled" 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="isdisabled" 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="isdisabled" maxlength="300">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="上传缴费凭证：" prop="voucherList">
                                <ul>
                                    <li v-for="(item, index) in ruleForm.voucherList" :key="index">
                                        <a  target="_blank" :href="item.fileUrl">{{ item.fileName }}</a>
                                    </li>
                                </ul>
                            </el-form-item>
                        </div>
                    </div>
                </div>
            </el-form>
        </div>
        <div class="bottomButton">
            <el-button @click="back">返回</el-button>
        </div>
    </div>
</template>

<script>
import { earnestDetail } 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 {
            isdisabled: true,
            state: '',
            breads: ['招标管理', '招标项目管理', '工作台'],
            ruleForm: {},
            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: 'change'
                    }
                ]
            }
        };
    },
    methods: {
        getfile(val) {
            this.ruleForm.voucherList = val;
        },
        back() {
            this.$router.go(-1);
        },
        async getearnestDetail() {
            let projectId = localStorage.getItem('projectId');
            try {
                const { data, code } = await earnestDetail(projectId);
                data.companyName = JSON.parse(localStorage.getItem('userInfo')).companyName;
                if (code == 200) {
                    for (let item of data.voucherList) {
                        item.name = item.fileName;
                        item.url = item.fileUrl;
                    }
                    this.ruleForm = data;
                }
            } catch (e) {
                console.log(e);
            }
        },
    },
    created() {
        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>
