<template>
    <div>
        <div class="content">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <changeNav :navs="navs"></changeNav>
            <div class="message">
                <div class="flex-between" style="margin-bottom: 20px">
                    <div>项目编号：{{ projectCode }}</div>
                    <div>项目名称：{{ projectName }}</div>
                </div>
                <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="180px" class="demo-ruleForm">
                    <div class="flex-between">
                        <el-form-item label="合同名称:" prop="contractName">
                            <el-input v-model.trim="ruleForm.contractName" placeholder="请输入" maxlength="30"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="合同类型:" prop="contractType">
                            <el-radio v-model="ruleForm.contractType" label="1">项目合同</el-radio>
                            <el-radio v-model="ruleForm.contractType" label="2">应收账款合同</el-radio>
                        </el-form-item> -->
                    </div>
                    <div class="flex-between">
                        <el-form-item label="工期:" prop="timeLimit">
                            <el-input v-model.trim="ruleForm.timeLimit" placeholder="请输入" maxlength="30"></el-input>
                        </el-form-item>
                        <el-form-item label="总负责人名称:" prop="principalName" class="titlename">
                            <el-input
                                v-model.trim="ruleForm.principalName"
                                placeholder="请输入"
                                maxlength="30"
                                style="titleinput"
                            ></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex-between">
                        <el-form-item label="总负责人身份证号:" prop="principalIdNumber">
                            <el-input v-model.trim="ruleForm.principalIdNumber" placeholder="请输入" maxlength="30"></el-input>
                        </el-form-item>
                        <el-form-item label="承包单位名称:" prop="companyName">
                            <el-input v-model.trim="ruleForm.companyName" placeholder="请输入" maxlength="30"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex-between">
                        <el-form-item label="是否联合体投标:" prop="isAlliance">
                            <el-radio v-model="ruleForm.isAlliance" :label="true">是</el-radio>
                            <el-radio v-model="ruleForm.isAlliance" :label="false">否</el-radio>
                        </el-form-item>
                        <el-form-item label="合同总价（元）:" prop="contractPrice">
                            <el-input-number
                                v-model="ruleForm.contractPrice"
                                :min="0"
                                :controls="false"
                                :precision="2"
                                placeholder="请输入"
					  maxlength="30"
                            ></el-input-number>
                        </el-form-item>
                    </div>
                    <div class="flex-between">
                        <el-form-item label="合同有效期起止日期:" prop="validityTime">
                            <el-date-picker
                                v-model="ruleForm.validityTime"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="合同期限（天）:" prop="deadline">
                            <el-input
                                onkeyup="value=value.replace(/[^\d]/g,'')"
                                v-model.trim="ruleForm.deadline"
                                placeholder="请输入"
                                maxlength="30"
                            ></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item label="合同文件：">
                        <singleUpload
                            :limit="1"
                            :max="100"
                            tip="支持上传一个pdf格式文件,大小不超过100M"
                            @input="getfile"
                            :fileList="ruleForm.contractFileName"
                        ></singleUpload>
                    </el-form-item>
                    <el-form-item label="其他附件：">
                        <singleUpload
                            :limit="3"
                            :max="100"
                            tip="支持上传三份附件,大小不超过100M"
                            @input="getfile1"
                            :fileList="ruleForm.fileList"
                        ></singleUpload>
                    </el-form-item>
                    <el-form-item label="合同范围:" prop="remark">
                        <el-input v-model.trim="ruleForm.remark" placeholder="请输入" type="textarea" :rows="2" maxlength="300"></el-input>
                    </el-form-item>
                </el-form>
                <div class="button flex-center">
                    <el-button @click="out">返回</el-button>
                    <el-button type="primary" @click="submitData">保存</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { contract, contractDetails } from '@api/purchaser/bid';
import dataBreadcrumb from '@components/dataBreadcrumb.vue';
import changeNav from '@components/changeNav.vue';
import singleUpload from '@components/Upload/Upload.vue';
import multiUpload from '@components/Upload/multiUpload.vue';
export default {
    components: {
        dataBreadcrumb,
        changeNav,
        singleUpload,
        multiUpload
    },
    data() {
        return {
            projectCode: '',
            projectName: '',
            navs: ['合同管理'],
            breads: ['招标管理', '招标项目管理', '工作台'],
            ruleForm: {
                contractName: '',
                contractType: '',
                timeLimit: '',
                principalName: '',
                principalIdNumber: '',
                companyName: '',
                isAlliance: '',
                contractPrice: undefined,
                validityTime: '',
                deadline: '',
                /* FilePO: [], */
                remark: '',
                fileList: [],
                contractFileName: []
            },
            rules: {
                validityTime: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'blur'
                    }
                ],
                contractName: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    methods: {
        /* 返回 */
        out() {
            this.$router.go(-1);
        },
        examine() {
            this.$router.push('/admin/bid/bidingDetail');
        },
        getfile(val) {
            this.ruleForm.contractFileName = val;
        },
        getfile1(val) {
            this.ruleForm.fileList = val;
        },
        // 提交表单
        async submitData() {
            try {
                const valid = await this.$refs['ruleForm'].validate();
                if (valid) {
                    const { code, msg } = await contract(this.ruleForm);
                    if (code === 200) {
                        this.$message({
                            message: '成功',
                            type: 'success',
                            duration: 1500
                        });
                        setTimeout(() => {
                            this.$router.go(-1);
                        }, 1500);
                    } else {
                        this.$message.error(msg);
                    }
                }
            } catch (e) {
                console.log(e);
            }
        },
        async contractDetails() {
            const { data, code } = await contractDetails();
            if (code == 200) {
                this.ruleForm = data;
                for (let item in data.contractFileName) {
                    this.ruleForm.contractName = item;
                }
                for (let item1 in data.fileList) {
                    this.ruleForm.fileList = item1;
                }
            }
        }
    },
    created() {
        /* let type = this.$router.params.type
            if(type=='2'){
                this.contractDetails()
            } */
        this.projectCode = localStorage.getItem('projectCode');
        this.projectName = localStorage.getItem('projectName');
    }
};
</script>

<style scoped>
.message {
    width: 80%;
    margin: 0 auto;
}

.button {
    width: 100%;
    height: 100px;
}
</style>
