<template>
    <div>
        <div class="content-head">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <h3>{{ type == 1 ? '编辑' : '发布' }}询价公告</h3>
            <h5>{{ type == 1 ? '编辑' : '发布' }}询价公告</h5>
            <div v-if="type == 1" class="abs">
                <div>拒绝原因：{{ ruleForm.reason }}</div>
            </div>
        </div>
        <div class="othercontent">
            <!-- 基本信息 -->
            <div>
                <div class="describe">基本信息</div>
                <div class="form">
                    <div class="flex-between" style="width: 100%; margin-bottom: 20px">
                        <div>项目编号:{{ projectCode }}</div>
                        <div>项目名称:{{ projectName }}</div>
                    </div>
                    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
                        <el-form-item label="询价公告名称" prop="title">
                            <el-input v-model.trim="ruleForm.title" placeholder="请输入" style="width: 50%" maxlength="30"></el-input>
                        </el-form-item>
                        <el-form-item label="询价所在地" prop="address">
                            <citySelect
                                @sendprovinceId="getprovinceId"
                                @sendcityId="getcityId"
                                @senddistrictId="getdistrictId"
                            ></citySelect>
                        </el-form-item>
                        <el-form-item label="项目优先级" prop="priority">
                            <el-radio-group v-model="ruleForm.priority">
                                <el-radio :label="0">普通</el-radio>
                                <el-radio :label="1">紧急</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <div class="flex-between" style="width: 60%">
                            <el-form-item label="询价单编号" prop="inquiryCode">
                                <el-input
                                    v-model.trim="ruleForm.inquiryCode"
                                    onkeyup="value=value.replace(/[^\d]/g,'')"
                                    placeholder="请输入"
                                    maxlength="30"
                                    style="width: 250px"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="采购目录" prop="purchaseCategory">
                                <el-input
                                    v-model.trim="ruleForm.purchaseCategory"
                                    placeholder="请输入"
                                    maxlength="30"
                                    style="width: 250px"
                                ></el-input>
                            </el-form-item>
                        </div>
                        <div class="flex-between" style="width: 60%">
                            <el-form-item label="报价开始时间" prop="startTime">
                                <el-date-picker
                                    v-model="ruleForm.startTime"
                                    type="datetime"
                                    placeholder="选择日期时间"
                                    disabled
                                    style="width: 250px"
                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="报价结束时间" prop="endTime">
                                <el-date-picker
                                    v-model="ruleForm.endTime"
                                    type="datetime"
                                    placeholder="选择日期时间"
                                    disabled
                                    style="width: 250px"
                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="采购单位" prop="purchaseAgent">
                                <el-input v-model.trim="ruleForm.purchaseAgent" disabled style="width: 250px"></el-input>
                            </el-form-item>
                        </div>
                        <div class="flex-between" style="width: 60%">
                            <el-form-item label="采购单位联系人" prop="contact">
                                <el-input v-model.trim="ruleForm.contact" disabled style="width: 250px"></el-input>
                            </el-form-item>
                            <el-form-item label="联系方式" prop="contactPhone">
                                <el-input v-model.trim="ruleForm.contactPhone" disabled style="width: 250px"></el-input>
                            </el-form-item>
                            <el-form-item label="传真号码">
                                <el-input
                                    v-model.trim="ruleForm.facsimile"
                                    placeholder="请输入"
                                    maxlength="30"
                                    style="width: 250px"
                                ></el-input>
                            </el-form-item>
                        </div>
                        <el-form-item label="预算总额(元)" prop="budget" style="width: 20%">
                            <el-input-number
                                v-model="ruleForm.budget"
                                :min="0"
                                :controls="false"
                                :precision="2"
                                placeholder="请输入"
                            ></el-input-number>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!-- 供应商要求 -->
            <div>
                <div class="describe">基本信息</div>
                <div class="form">
                    <div class="flex-between" style="width: 100%; margin-bottom: 20px">
                        <div>项目编号:{{ projectCode }}</div>
                        <div>项目名称:{{ projectName }}</div>
                    </div>
                    <el-form ref="ruleForm1" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm">
                        <el-form-item label="供应商规格要求" prop="supplierScale">
                            <el-input v-model.trim="ruleForm.supplierScale" placeholder="请输入" maxlength="30"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商资格要求" prop="supplierQualification">
                            <el-input v-model.trim="ruleForm.supplierQualification" placeholder="请输入" maxlength="30"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商区域范围要求" prop="supplierRegion">
                            <el-input v-model.trim="ruleForm.supplierRegion" placeholder="请输入" maxlength="30"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!-- 询价商品清单 -->
            <div>
                <div class="describe">询价商品清单</div>
                <div class="form">
                    <dataTable :table-data="tableData" :columns="columns" :is-pageobj="false"></dataTable>
                    <div class="flex" style="margin-top: 20px">
                        <div class="adjustment">上传文件</div>
                        <singleUpload :limit="1" tip="支持扩展名：.rar .zip .doc .docx .pdf .jpg..." @input="getfile"></singleUpload>
                    </div>
                </div>
            </div>
            <!-- 商务要求 -->
            <div>
                <div class="describe">商务要求</div>
                <div class="form">
                    <el-form ref="ruleForm2" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="商务要求" prop="commercialRequirements">
                            <el-input
                                v-model.trim="ruleForm.commercialRequirements"
                                :rows="4"
                                style="width: 60%"
                                placeholder="请输入"
                                type="textarea"
                                maxlength="300"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="bottomButton">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="submit1" v-if="type == 1">编辑</el-button>
                <el-button type="primary" @click="submit" v-else>提交审核</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { generateNumber, enquiryProjectId } from '@/api/common/list';
import dataTable from '@components/nopageTable.vue';
import dataBreadcrumb from '@components/dataBreadcrumb.vue';
import citySelect from '@components/citySelect/citySelect.vue';
import singleUpload from '@components/Upload/Upload.vue';
import { createEnquiry } from '@api/purchaser/bid';
import { getTime } from '@utils/time';
import { commoditylist, inqueryinfo } from '@api/common/list';

export default {
    components: {
        dataTable,
        dataBreadcrumb,
        citySelect,
        singleUpload
    },
    data() {
        // 测试省份
        let islocal = (rule, value, callback) => {
            if (!this.ruleForm.provinceId) {
                callback(new Error('请选择省份'));
            } else if (!this.ruleForm.cityId) {
                callback(new Error('请选择市'));
            } else if (!this.ruleForm.districtId) {
                callback(new Error('请选择区'));
            } else {
                callback();
            }
        };
        let checkfacsimile = async (rule, value, callback) => {
            const reg = /^(?:\d{3,4}-)?\d{7,8}(?:-\d{1,6})?$/;
            if (reg.test(value)) {
                callback();
            } else {
                return callback(new Error('请输入正确的传真号'));
            }
        };
        return {
            projectName: '',
            projectCode: '',
            breads: ['招标管理', ' 招标项目管理', '工作台'],
            tableData: [],
            columns: [
                {
                    label: '标的名称',
                    prop: 'bidName'
                },
                {
                    label: '数量',
                    prop: 'quantity'
                },
                {
                    label: '计量单位',
                    prop: 'unit'
                },
                {
                    label: '品牌',
                    prop: 'brand'
                },
                {
                    label: '规格型号',
                    prop: 'specification'
                },
                {
                    label: '标杆价(元)',
                    prop: 'price'
                },
                {
                    label: '备注',
                    prop: 'remark'
                }
            ],
            ruleForm: {
                title: '',
                projectId: '',
                cityId: '',
                districtId: '',
                inquiryCode: '',
                priority: '',
                startTime: '',
                endTime: '',
                purchaseAgent: '1',
                contact: '1',
                contactPhone: '1',
                facsimile: '',
                budget: undefined,
                supplierScale: '',
                supplierQualification: '',
                supplierRegion: '',
                commercialRequirements: '',
                accessoryPOList: [],
                purchaseCategory: ''
            },

            rules: {
                address: [
                    {
                        required: true,
                        validator: islocal,
                        trigger: 'change'
                    }
                ],
                budget: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                title: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                inquiryCode: [
                    {
                        required: true,
                        message: '请输入请输入',
                        trigger: 'blur'
                    }
                ],
                contact: [
                    {
                        required: true,
                        message: '请输入请输入',
                        trigger: 'blur'
                    }
                ],
                contactPhone: [
                    {
                        required: true,
                        message: '请输入请输入',
                        trigger: 'blur'
                    }
                ],
                startTime: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'change'
                    }
                ],
                endTime: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                purchaseAgent: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                facsimile: [
                    {
                        required: true,
                        validator: checkfacsimile,
                        trigger: 'blur'
                    }
                ],
                supplierScale: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                supplierQualification: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                supplierRegion: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                commercialRequirements: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ]
            },
            type: ''
        };
    },
    created() {
        let type = this.$route.query.type;
        this.type = type;
        if (type == 1) {
            this.getenquiryProjectId();
        } else {
            let userInfo = JSON.parse(localStorage.getItem('userInfo'));
            this.ruleForm.purchaseAgent = userInfo.companyName;
            this.ruleForm.contact = userInfo.name;
            this.ruleForm.contactPhone = userInfo.phone;
            this.ruleForm.startTime = getTime();
        }
        this.projectCode = localStorage.getItem('projectCode');
        this.projectName = localStorage.getItem('projectName');
        this.getcommoditylist();
        this.getinqueryinfo();
        this.getGenerateNumber();
    },
    methods: {
        // 获取详情
        async getenquiryProjectId() {
            let projectId = localStorage.getItem('projectId');
            const { data, code, msg } = await enquiryProjectId(projectId);
            if (code == 200) {
                for (let item of data.accessoryVOList) {
                    item.name = item.fileName;
                    item.url = item.accessoryUrl;
                }
                this.ruleForm = data;
                let userInfo = JSON.parse(localStorage.getItem('userInfo'));
                this.ruleForm.purchaseAgent = userInfo.companyName;
                this.ruleForm.contact = userInfo.name;
                this.ruleForm.contactPhone = userInfo.phone;
                this.ruleForm.startTime = getTime();
            }
        },
        // 获取上传文件
        getfile(val) {
            for (let item of val) {
                item.accessoryUrl = item.fileUrl;
            }
            this.ruleForm.accessoryPOList = val;
        },
        // 获取编号
        async getGenerateNumber() {
            const { data } = await generateNumber(3);
            this.ruleForm.inquiryCode = data;
        },
        // 获取市ID
        getprovinceId(val) {
            this.ruleForm.provinceId = val;
        },
        // 获取省ID
        getcityId(val) {
            this.ruleForm.cityId = val;
        },
        // 获取城ID
        getdistrictId(val) {
            this.ruleForm.districtId = val;
        },
        cancel() {
            this.$router.go(-1);
        },
        //提交表单
        async submit() {
            try {
                const valid = await this.$refs['ruleForm'].validate();
                const valid1 = await this.$refs['ruleForm1'].validate();
                const valid2 = await this.$refs['ruleForm2'].validate();
                console.log(valid);
                if (valid && valid1 && valid2) {
                    let ruleForm = this.ruleForm;
                    ruleForm.projectId = localStorage.getItem('projectId');
                    console.log('通过');
                    const { code, msg } = await createEnquiry(ruleForm);
                    if (code == 200) {
                        this.$message({
                            message: msg,
                            type: 'success',
                            duration: 1500
                        });
                        setTimeout(() => {
                            this.$router.go(-1);
                        }, 1500);
                    } else {
                        this.$message.error(msg);
                    }
                }
            } catch (err) {
                console.log(err);
            }
        },
        //提交表单
        async submit1() {
            try {
                const valid = await this.$refs['ruleForm'].validate();
                const valid1 = await this.$refs['ruleForm1'].validate();
                const valid2 = await this.$refs['ruleForm2'].validate();
                console.log(valid);
                if (valid && valid1 && valid2) {
                    let ruleForm = this.ruleForm;
                    ruleForm.projectId = localStorage.getItem('projectId');
                    console.log('通过');
                    const { code, msg } = await editEnquiry(ruleForm);
                    if (code == 200) {
                        this.$message({
                            message: msg,
                            type: 'success',
                            duration: 1500
                        });
                        setTimeout(() => {
                            this.$router.go(-1);
                        }, 1500);
                    } else {
                        this.$message.error(msg);
                    }
                }
            } catch (err) {
                console.log(err);
            }
        },
        // 获取列表
        async getcommoditylist() {
            let projectId = localStorage.getItem('projectId');
            const { data, code } = await commoditylist(projectId);
            this.tableData = data;
        },
        // 获取招标截止时间
        async getinqueryinfo() {
            let projectId = localStorage.getItem('projectId');
            const { data, code } = await inqueryinfo(projectId);
            this.ruleForm.endTime = data.endTime;
        }
    }
};
</script>

<style scoped>
.othercontent > div {
    background: #ffffff;
    margin-bottom: 20px;
}

.form {
    padding: 10px 20px 20px 20px;
}

.adjustment {
    margin-top: 5px;
    margin-right: 10px;
}
</style>
