<template>
    <div class="othercontent">
        <div class="message1">
            <div >
                <div class="describe">基本信息</div>
                <div class="message-form">
                    <el-form ref="ruleForm" :model="ruleForm" label-width="200px" class="demo-ruleForm">
                        <el-form-item label="项目名称" prop="projectName">
                            <el-input v-model.trim="ruleForm.projectName" placeholder="请输入" maxlength="30" disabled></el-input>
                        </el-form-item>
                        <div class="flex-between">
                            <el-form-item label="项目编号：" prop="projectCode">
                                <el-input v-model.trim="ruleForm.projectCode" placeholder="请输入" maxlength="30" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="项目分类：" prop="classify">
                                <el-select v-model="ruleForm.classify" placeholder="请选择" disabled>
                                    <el-option v-for="item in projectTypes" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="flex-between">
                            <el-form-item label="采购单位：" prop="purchaseAgent">
                                <el-input v-model.trim="ruleForm.purchaseAgent" placeholder="请输入" maxlength="30" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="项目归属行业：" prop="industry">
                                <el-select v-model="ruleForm.industry" placeholder="请选择" disabled>
                                    <el-option v-for="item in belongTypes" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="flex-between">
                            <el-form-item label="项目归属地区：" prop="region">
                                <citySelect
                                    @sendprovinceId="getprovinceId"
                                    @sendcityId="getcityId"
                                    @senddistrictId="getdistrictId"
                                    :provinceId="ruleForm.provinceId"
                                    :cityId="ruleForm.cityId"
                                    :districtId="ruleForm.districtId"
                                    :type='true'
                                ></citySelect>
                            </el-form-item>
                            <el-form-item label="最小投标单位数：" prop="minTender" disabled>
                                <el-input
                                    v-model.trim="ruleForm.minTender"
                                    placeholder="请输入"
                                    onkeyup="value=value.replace(/[^\d]/g,'')"
                                    maxlength="30"
                                    :min="3"
                                    :max="20"
                                    disabled
                                ></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="项目经理：" prop="projectManager">
                                <el-select v-model="ruleForm.projectManager" placeholder="请选择" disabled>
                                    <el-option v-for="item in managers" :key="item.id" :label="item.userName" :value="item.id"> </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="flex-between">
                            <el-form-item label="招标联系人：" prop="contacts">
                                <el-input v-model.trim="ruleForm.contacts" placeholder="请输入" maxlength="30" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="联系方式：" prop="contactsWay">
                                <el-input v-model.trim="ruleForm.contactsWay" placeholder="请输入" maxlength="30" disabled></el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
            </div>
            <div>
                <div class="describe">标书费用信息</div>
                <div class="message-form" v-if="ruleForm.bidBookInfoPO">
                    <el-form ref="bidBookInfoPO" :model="ruleForm.bidBookInfoPO" :rules="formrules" label-width="200px" class="demo-ruleForm">
                        <div class="flex-between">
                            <el-form-item label="标书费结算账号：" prop="account">
                                <el-input v-model.trim="ruleForm.bidBookInfoPO.account" placeholder="请输入" maxlength="30" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="标书费结算开户行：" prop="bank">
                                <el-input v-model.trim="ruleForm.bidBookInfoPO.bank" placeholder="请输入" maxlength="30" disabled></el-input>
                            </el-form-item>
                        </div>
                        <div class="flex-between">
                            <el-form-item label="标书费结算账户名：" prop="accountName">
                                <el-input v-model.trim="ruleForm.bidBookInfoPO.accountName" placeholder="请输入" maxlength="30" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="标书费结算联系电话：" prop="phone">
                                <el-input v-model.trim="ruleForm.bidBookInfoPO.phone" placeholder="请输入" maxlength="30" disabled></el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
            </div>
            <div>
                <div class="describe">保证金费用信息</div>
                <div class="message-form">
                    <el-form ref="earnestInfoPO" :model="ruleForm.earnestInfoPO" :rules="formrules" label-width="200px" class="demo-ruleForm">
                        <div>
                            <el-form-item label="是否需要投标保证金：" prop="isNeedEarnest">
                                <el-radio-group v-model="ruleForm.isNeedEarnest" disabled>
                                    <el-radio :label="false">否</el-radio>
                                    <el-radio :label="true">是</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                        <div v-show="ruleForm.isNeedEarnest" v-if="ruleForm.earnestInfoPO">
                            <div>
                                <el-form-item label="投标保证金金额：" prop="money">
                                    <el-input-number
                                        v-model="ruleForm.earnestInfoPO.money"
                                        :min="0"
                                        :controls="false"
                                        :precision="2"
                                        placeholder="请输入"
                                        disabled
                                    ></el-input-number>
                                </el-form-item>
                            </div>
                            <div class="flex-between">
                                <el-form-item label="保证金结算账号：" prop="account">
                                    <el-input v-model.trim="ruleForm.earnestInfoPO.account" placeholder="请输入" maxlength="30" disabled></el-input>
                                </el-form-item>
                                <el-form-item label="保证金结算开户行：" prop="bank">
                                    <el-input v-model.trim="ruleForm.earnestInfoPO.bank" placeholder="请输入" maxlength="30" disabled></el-input>
                                </el-form-item>
                            </div>
                            <div class="flex-between">
                                <el-form-item label="保证金结算账户名：" prop="userName">
                                    <el-input v-model.trim="ruleForm.earnestInfoPO.userName" placeholder="请输入" maxlength="30" disabled></el-input>
                                </el-form-item>
                                <el-form-item label="保证金结算联系电话：" prop="phone">
                                    <el-input v-model.trim="ruleForm.earnestInfoPO.phone" placeholder="请输入" maxlength="30" disabled></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </el-form>
                </div>
            </div>
            <div>
                <div class="describe">招标方式</div>
                <div class="message-form">
                    <el-form ref="bidTypeForm" :model="ruleForm" :rules="formrules" label-width="130px" class="demo-ruleForm">
                        <el-form-item label="招标方式：" prop="bidType">
                            <el-radio-group v-model="ruleForm.bidType" disabled>
                                <el-radio :label="0">公开</el-radio>
                                <el-radio :label="1">邀请</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <div v-show="ruleForm.bidType == 1">
                        <dataTable
                            :table-data="ruleForm.companyVOList"
                            :columns="columns"
                            :page-obj="pageObj"
                            :margin-top="10"
                            :margin-bottom="0"
                            @sendSelection="getSelection"
                        >
                        </dataTable>
                    </div>
                </div>
            </div>
            <div>
                <div class="describe">流程设置</div>
                <div class="message-form flex-item">
                    <div class="bid">执行策略：线上招标</div>
                    <div>
                        <el-form ref="isPubForm" :model="ruleForm" :rules="formrules" label-width="200px" class="demo-ruleForm">
                            <el-form-item label="是否发布询价公告：" prop="isPublishAd">
                                <el-radio-group v-model="ruleForm.isPublishAd" disabled>
                                    <el-radio :label="false">否</el-radio>
                                    <el-radio :label="true">是</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
            <div>
                <div class="describe">项目内容</div>
                <div class="message-form">
                    <el-form ref="contentForm" :model="ruleForm" :rules="formrules" label-width="200px" class="demo-ruleForm">
                        <el-form-item label="项目内容：" prop="content">
                            <el-input
                                :rows="5"
                                v-model.trim="ruleForm.content"
                                type="textarea"
                                prop="content"
                                placeholder="请输入内容"
                                maxlength="300"
                                disabled
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item label="附件：" prop="file">
                            <ul v-if='ruleForm.accessoryDOList!==undefined && ruleForm.accessoryDOList.length>0'>
                                <li v-for="(item,i) in ruleForm.accessoryDOList" :key="i">
                                    <a :href="item.accessoryUrl">{{item.fileName}}</a>
                                </li>
                            </ul>
                            <div v-else>无</div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogFormVisible" title="选择邀请招标供应商">
            <dataTableList
                :columns="supplyColumns"
                :page-obj="pageObj"
                :margin-top="10"
                :margin-bottom="0"
                :checklist="checklist"
                url="/company/bidder/list"
            >
                <el-table-column slot="operate" label="操作" align="center" fixed="right" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="choice(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </dataTableList>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { userList, industryList, projectClassifyList, generateNumber } from '@/api/common/list';

import dataForm from '@components/dataForm.vue';
import dataTable from '@components/nopageTable.vue';
import dataTableList from '@components/dataTable.vue';
import upload from '@components/Upload/Upload.vue';
import changeNav from '@components/changeNav.vue';
import citySelect from '@components/citySelect/citySelect.vue';

// const bidMethods = [{
//   value: '公开',
//   label: '公开'
// }, {
//   value: '邀请',
//   label: '邀请'
// }]

export default {
    components: {
        dataForm,
        dataTable,
        upload,
        changeNav,
        citySelect,
        dataTableList
    },
    props: {
        ruleForm: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    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}$/;
                if (reg.test(value)) {
                    callback();
                } else {
                    return callback(new Error('请输入正确的手机号'));
                }
            }
        };
        let isMin = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入'));
            } else if (value < 3) {
                callback(new Error('最小值为3'));
            } else if (value > 20) {
                callback(new Error('最大值为20'));
            } else {
                callback();
            }
        };
        // 测试省份
        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();
            }
        };
        return {
            checklist: [
                {
                    title: '单位名称',
                    type: 'input',
                    model: 'companyName'
                }
            ],
            nav: ['供应商'],
            dialogFormVisible: false,
            tip:
                '请上传于招标项目相关的文件,如委托单,技术附件,招标方案,项目真是材料等(文件格式PDF,JPG,JPEG,ZIP,RAR,数量不超过20个,单个文件大小不超过25M)',
            managers: [],
            belongTypes: [],
            projectTypes: [],
            textarea: '',
            tableData: [],
            columns: [
                {
                    selection: true
                },
                {
                    label: '单位名称',
                    prop: 'companyName'
                },
                {
                    label: '联系人',
                    prop: 'userName'
                },
                {
                    label: '手机号',
                    prop: 'phonenumber'
                },

                {
                    label: '邮件',
                    prop: 'email'
                },
                {
                    slot: 'operate'
                }
            ],
            supplyColumns: [
                {
                    label: '单位名称',
                    prop: 'companyName'
                },
                {
                    label: '联系人',
                    prop: 'userName'
                },
                {
                    label: '手机号',
                    prop: 'phonenumber'
                },

                {
                    label: '邮件',
                    prop: 'email'
                },
                {
                    slot: 'operate'
                }
            ],
            pageObj: {
                size: 10,
                currentPage: 1,
                func: (currentPage) => {
                    this.pageTurning(currentPage);
                }
            },
            // 表单验证
            formrules: {
                content: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                account: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                bank: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                phone: [
                    {
                        required: true,
                        validator: checkPhone,
                        trigger: 'blur'
                    }
                ],
                money: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                accountName: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                userName: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                projectCode: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                projectName: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                classify: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                purchaseAgent: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'blur'
                    }
                ],
                industry: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                region: [
                    {
                        required: true,
                        validator: islocal,
                        trigger: 'change'
                    }
                ],
                minTender: [
                    {
                        required: true,
                        validator: isMin,
                        trigger: 'blur'
                    }
                ],
                projectManager: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                contacts: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'blur'
                    }
                ],
                contactsWay: [
                    {
                        required: true,
                        validator: checkPhone,
                        trigger: 'blur'
                    }
                ]
            },
            isNeedEarnest: false,
            bidBookInfoPO: {
                account: '',
                bank: '',
                accountName: '',
                phone: ''
            },
            earnestInfoPO: {
                money: undefined,
                account: '',
                bank: '',
                userName: '',
                phone: ''
            }
        };
    },
    // watch: {
    //     ruleForm (n, o) {
    //         console.log(this.ruleForm )
    //         console.log("新数据")
    //         console.log(n);
    //         this.ruleForm = n;
    //     }
    // },
    computed: {},
    created() {
        this.userList();
        this.industryList();
        this.projectClassifyList();
        // this.getGenerateNumber();
    },
    methods: {
        // 删除操作
        handleDelete(row, index) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.ruleForm.companyVOList.splice(index, 1);
                })
                .catch(() => {});
        },
        // 接受上传文件
        getfile(val) {
            for (let item of val) {
                item.accessoryUrl = item.fileUrll;
            }
            this.ruleForm.accessoryDOList = val;
        },
        // 获取邀请的供应商列表
        getSelection(val) {
            console.log(val);
            this.multipleSelection = val;
        },
        // 删除操作
        delAllSelection() {
            let val = this.multipleSelection;
            if (val.length > 0) {
                val.forEach((va, index) => {
                    this.ruleForm.companyVOList.forEach((v, i) => {
                        if (va.id === v.id) {
                            this.ruleForm.companyVOList.splice(i, 1);
                        }
                    });
                });
                this.$message.success('删除成功');
                this.multipleSelection = [];
            } else {
                this.$message.error('没有选择删除的项');
            }
        },
        // 到下一步
        async next() {
            const valid = await this.$refs['ruleForm'].validate();
            const valid1 = await this.$refs['bidBookInfoPO'].validate();
            let valid2 = '';
            if (this.ruleForm.isNeedEarnest) {
                valid2 = await this.$refs['earnestInfoPO'].validate();
            }
            const valid3 = await this.$refs['contentForm'].validate();
            let isNext = '';
            if (this.ruleForm.isNeedEarnest) {
                console.log(valid2);
                isNext = valid && valid1 && valid2 && valid3;
            } else {
                isNext = valid && valid1 && valid3;
            }
            return isNext;
        },
        // 邀请状态下选择供应商
        choice(row) {
            let list = [];
            if (this.ruleForm.companyVOList.length > 0) {
                for (let item of this.ruleForm.companyVOList) {
                    list.push(item.companyId);
                }
                let indexof = list.indexOf(row.companyId);
                if (indexof == -1) {
                    this.ruleForm.companyVOList.push(row);
                    // this.tableData..push(row)
                } else {
                    this.$message.error('请勿选择相同公司');
                }
            } else {
                this.ruleForm.companyVOList.push(row);
                // this.tableData.push(row)
            }
        },
        // NeedEarnest(val) {
        //   if (val === 0) {
        //     this.isNeedEarnest = false
        //   } else {
        //     this.isNeedEarnest = true
        //   }
        // },
        // 获取市ID
        getprovinceId(val) {
            this.ruleForm.provinceId = val;
        },
        // 获取省ID
        getcityId(val) {
            this.ruleForm.cityId = val;
        },
        // 获取城ID
        getdistrictId(val) {
            this.ruleForm.districtId = val;
        },

        // 获取项目经理
        async userList() {
            let id = localStorage.getItem('companyId');
            const { code, data } = await userList(id);
            if (code === 200) {
                this.managers = data;
            }
        },
        // 获取所属行业
        async industryList() {
            const res = await industryList();
            this.belongTypes = res;
        },
        // 获取项目分类
        async projectClassifyList() {
            const res = await projectClassifyList();
            this.projectTypes = res;
        },
        // 获取编号
        async getGenerateNumber() {
            const { data } = await generateNumber(1);
            this.ruleForm.projectCode = data;
        }
    }
};
</script>

<style scoped>
.message1 > div {
    background: #fff;
    margin-bottom: 30px;
}

.message-form {
    width: 80%;
    margin: 0 auto;
}

.message1 {
    background: #f0f2f5;
}

.button {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 20px;
    margin-right: 20px;
}

.bid {
    margin-bottom: 20px;
}
</style>
