<template>
    <div>
        <div class="content-head">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <h3>{{ title }}</h3>
            <h5>{{ title }}购标信息、邮寄信息、发票信息、缴费信息</h5>
            <div class="flex state">
                <div style="margin-right: 30px">状态:{{ state }}</div>
                <div v-if="ruleForm.reason">拒绝原因:{{ ruleForm.reason }}</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="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" :disabled="isdisabled"></el-input>
                                </el-form-item>
                                <el-form-item label="固定电话：" prop="companyTel">
                                    <el-input v-model="ruleForm.companyTel" :disabled="isdisabled"></el-input>
                                </el-form-item>
                            </div>
                            <div class="flex-between">
                                <el-form-item label="手机：" prop="companyPhone">
                                    <el-input v-model="ruleForm.companyPhone" :disabled="isdisabled"></el-input>
                                </el-form-item>
                                <el-form-item label="传真：" prop="companyFacsimile">
                                    <el-input v-model="ruleForm.companyFacsimile" :disabled="isdisabled"></el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="邮箱：" prop="companyEmail">
                                    <el-input v-model="ruleForm.companyEmail" :disabled="isdisabled"></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" :disabled="isdisabled"></el-input>
                                </el-form-item>
                                <el-form-item label="收件人单位：">
                                    <el-input v-model="ruleForm.recipientsCompany" :disabled="isdisabled"></el-input>
                                </el-form-item>
                            </div>
                            <div class="flex-between">
                                <el-form-item label="联系方式：">
                                    <el-input v-model="ruleForm.recipientsPhone" :disabled="isdisabled"></el-input>
                                </el-form-item>
                                <el-form-item label="邮政编码：">
                                    <el-input v-model="ruleForm.recipientsMail" :disabled="isdisabled"></el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="邮寄地址：">
                                    <el-input v-model="ruleForm.recipientsAddress" :disabled="isdisabled" d></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="发票类型：" prop="invoiceType">
                                    <el-radio-group v-model="ruleForm.invoiceType" :disabled="isdisabled">
                                        <el-radio :label="1">增值税普通发票</el-radio>
                                        <el-radio :label="2">增值税专用发票</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="发票抬头：" prop="invoiceHead">
                                    <el-input v-model="ruleForm.invoiceHead" :disabled="isdisabled"></el-input>
                                </el-form-item>
                            </div>
                            <div class="flex-between">
                                <el-form-item label="纳税人识别号：" prop="invoiceTaxNumber ">
                                    <el-input v-model="ruleForm.invoiceTaxNumber" :disabled="isdisabled"></el-input>
                                </el-form-item>
                                <el-form-item label="地址：" prop="invoiceAddress">
                                    <el-input v-model="ruleForm.invoiceAddress" :disabled="isdisabled"></el-input>
                                </el-form-item>
                            </div>
                            <div class="flex-between">
                                <el-form-item label="电话：" prop="invoiceTel">
                                    <el-input v-model="ruleForm.invoiceTel" :disabled="isdisabled"></el-input>
                                </el-form-item>
                                <el-form-item label="开户行及账号：" prop="invoiceAccount">
                                    <el-input v-model="ruleForm.invoiceAccount" :disabled="isdisabled"></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" :disabled="isdisabled"> </el-input>
                            </el-form-item>
                            <el-form-item label="备注：" prop="remark">
                                <el-input :rows="5" v-model="ruleForm.remark" type="textarea" :disabled="isdisabled"> </el-input>
                            </el-form-item>
                            <el-form-item label="上传缴费凭证：" prop="voucherList">
                                <div v-if="ruleForm.auditStatus == 2">
                                    <Upload
                                        :limit="5"
                                        :max="10"
                                        tip="完成上传5份文件,每份不超过10M"
                                        :fileList="ruleForm.voucherList"
                                        @input="getfile"
                                    ></Upload>
                                </div>
                                <ul v-else>
                                    <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>

        <div class="bottomButton">
            <el-button @click="back">返回</el-button>
            <el-button type="primary" v-if="ruleForm.auditStatus == 2" @click="submitData">提交</el-button>
        </div>
    </div>
</template>

<script>
import { bidbookDetail, editBidBook } 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,
            title: '参看',
            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: 'blur'
                    }
                ]
            }
        };
    },
    methods: {
        getfile(val) {
            this.ruleForm.voucherList = val;
        },
        back() {
            this.$router.go(-1);
        },
        async getbidbookDetail() {
            let projectId = localStorage.getItem('projectId');
            try {
                const { data, code } = await bidbookDetail(projectId);
                if (code == 200) {
                    if (data.auditStatus == 2) {
                        this.isdisabled = false;
                        (this.title = '编辑'), (this.state = '审核拒绝');
                    } else if (data.auditStatus == 1) {
                        this.state = '审核通过';
                    } else {
                        this.state = '未审核';
                    }
                    for (let item of data.voucherList) {
                        item.name = item.fileName;
                        item.url = item.fileUrl;
                    }
                    this.ruleForm = data;
                }
            } catch (e) {
                console.log(e);
            }
        },
        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');
                    const { code, msg } = await editBidBook(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);
            }
        }
    },
    created() {
        this.getbidbookDetail();
    }
};
</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>
