<template>
    <div class="attest">
        <div class="step">
            <el-steps :active="active" align-center>
                <el-step description="注册"></el-step>
                <el-step description="企业认证"></el-step>
                <el-step description="资料审核"></el-step>
                <el-step description="完成"></el-step>
            </el-steps>
        </div>
        <div class="login_title">
            <span class="title">企业认证</span>
            <span style="color: #C8C9CC;cursor: pointer;" @click="$router.push({ name: 'home' })">返回首页</span>
        </div>
        <div class="content">
            <el-form :model="formData" :rules="rules" ref="form" label-width="170px" label-position="right">
                <el-form-item label="企业名称" prop="orgName">
                    <el-input v-model="formData.orgName" placeholder="请输入单位名称"></el-input>
                </el-form-item>
                <el-form-item label="单位性质">
                    <el-select v-model="formData.orgType" placeholder="请选择">
                        <el-option label="国家行政机构" value="1"></el-option>
                        <el-option label="公私合作企业" value="2"></el-option>
                        <el-option label="中外合资企业" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="单位性质" prop="orgType">
                    <el-input v-model="formData.orgType" placeholder="请输入"></el-input>
                </el-form-item> -->
                <el-form-item label="上市公司" prop="publicCompany">
                    <el-radio v-model="formData.publicCompany" :label="true">是</el-radio>
                    <el-radio v-model="formData.publicCompany" :label="false">否</el-radio>
                </el-form-item>
                <!-- <el-form-item label="隶属单位" prop="parentOrg">
                    <el-input v-model="formData.parentOrg" placeholder="请输入"></el-input>
                </el-form-item> -->
                <el-form-item label="所属行业">
                    <el-select v-model="formData.industry" placeholder="请选择">
                        <el-option label="水利水电" value="1"></el-option>
                        <el-option label="信息产业" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在地" prop="address">
                    <el-select placeholder="省" style="width:120px;margin-right:10px" v-model="shen" @change="Toshen()">
                        <el-option v-for="item in province" :label="item.name" :value="item.code" :key="item.code" />
                    </el-select>
                    <el-select placeholder="市" style="width:120px;margin-right:10px" v-model="shi" @change="Toshi()">
                        <el-option v-for="item in cities" :label="item.name" :value="item.code" :key="item.code" />
                    </el-select>
                    <el-select placeholder="区" style="width:100px" v-model="qv">
                        <el-option v-for="item in areas" :label="item.name" :value="item.code" :key="item.code" />
                    </el-select>
                </el-form-item>
                <el-form-item label="详细地址" prop="addressDetail">
                    <el-input v-model="formData.addressDetail" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item v-model="formData.intro" label="企业介绍" prop="intro">
                    <el-input
                        v-model="formData.intro"
                        placeholder="请输入企业介绍，不超过200字"
                        maxlength="500"
                        type="textarea"
                        :rows="5"
                        resize="none"
                        style="width:300px"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="logo" label="企业logo">
                    <single-upload v-model="formData.logo"></single-upload>
                    <span class="remind">请上传企业logo图片，格式JPG或PNG，尺寸500x500px，大小不超过1M</span>
                </el-form-item>
                <el-form-item label="营业执照" prop="license">
                    <single-upload v-model="formData.license"></single-upload>
                    <span class="remind">请上传清晰图片，格式JPG或PNG，大小不超过1M</span>
                </el-form-item>
                <el-form-item label="统一社会信用代码">
                    <el-input v-model="formData.uscc" placeholder="请输入18位统一社会信用代码"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="contactName">
                    <el-input v-model="formData.contactName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="contactIdNo">
                    <el-input v-model="formData.contactIdNo" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="contactEmail">
                    <el-input v-model="formData.contactEmail" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="信息报送承诺书扫描件" prop="attach">
                    <!-- <span style="font-size:14px;font-weight:normal;" slot="label">
                        信息报送承诺书扫描件
                    </span> -->
                    <file-upload v-model="formData.attach" single> </file-upload>
                    <div style="color:#C8C9CC;font-size:12px;margin-top:14px">请下载承诺书填好并加盖公章后上传</div>
                    <div style="color:#BF1616;font-szie:13px;cursor:pointer;text-decoration: underline;">
                        下载信息报送承诺书
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="medium" @click="submit" :loading="loading" class="sub"
                        >提交</el-button
                    >
                    <el-button size="medium" class="back" @click="$router.go(-1)">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import province from '@/mixins/provinces.json';
import cities from '@/mixins/cities.json';
import areas from '@/mixins/areas.json';
export default {
    mixins: [province, cities, areas],
    name: 'attest',
    data() {
        return {
            active: 1,
            formData: {
                publicCompany: false,
                user: {}
            },
            rules: {},
            loading: false,
            province: [],
            cities: [],
            areas: [],
            shen: '',
            shi: '',
            qv: ''
        };
    },
    methods: {
        Toshen() {
            this.cities = [];
            this.areas = [];
            this.shi = '';
            this.qv = '';
            for (let citiesKey of cities) {
                if (citiesKey.provinceCode == this.shen) {
                    this.cities.push(citiesKey);
                }
            }
        },
        Toshi() {
            this.areas = [];
            this.qv = '';
            for (let areasKey of areas) {
                if (areasKey.cityCode == this.shi) {
                    this.areas.push(areasKey);
                }
            }
        },
        onSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            this.formData.userId = this.$route.params.id;

            this.$http
                .post('/orgInfo/save', this.formData, { body: 'json' })
                .then(res => {
                    this.$message.success('成功');
                    this.$router.push('/attestResult');
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        }
    },
    created() {
        this.province = province;
    }
};
</script>
<style lang="less" scoped>
.attest {
    padding-bottom: 70px;
    .step {
        height: 120px;
        background: #6c594e;
        margin-bottom: 30px;
    }
    .login_title {
        margin: auto;
        width: 900px;
        height: 60px;
        line-height: 60px;
        border-left: 2px solid #bf1616;
        background: linear-gradient(90deg, #fbeeee 0%, #fff 100%);
        padding-left: 20px;

        .title {
            color: #bf1616;
            font-weight: 500;
            margin-right: 20px;
            padding-right: 20px;
            border-right: 1px solid rgba(0, 0, 0, 0.12);
        }
    }
    .content {
        padding-top: 20px;
        .el-form {
            position: relative;
            margin-left: 550px;
            // width: 400px;
        }
    }

    .sub {
        width: 110px;
        height: 36px;
        background: #bf1616;
        border-radius: 4px;
        color: #fff;
    }
    .back {
        width: 110px;
        height: 36px;
        background: #c4c7cc;
        border-radius: 4px;
        color: #fff;
    }
    .remind {
        // width: 500px !important;
        height: 22px;
        font-size: 13px;
        color: #c8c9cc;
        line-height: 22px;
    }
}
</style>

<style lang="less">
.el-input {
    width: 300px;
}
.step {
    display: flex;
    justify-content: center;
    align-items: center;
    .el-steps {
        width: 600px;
    }
    .el-step__icon.is-text {
        border-width: 0px;
        background-color: #b59988;
        color: #dfd3cc;
        &:nth-child(0) {
            background-color: #fff;
        }
    }

    .el-step__head.is-wait {
        font-size: 14px;
        font-weight: bold;
        color: #0f264d;
    }
    .el-step__head.is-process {
        // color: #6c594e;
        .el-step__icon.is-text {
            background-color: #fff;
        }
    }
    .el-step.is-horizontal .el-step__line {
        height: 1px;
        background-color: #85766d;
        border-color: #85766d;
    }

    .el-step__head.is-finish {
        color: #fff;
        .el-step__icon.is-text {
            background-color: #fff;
            color: #6c594e;
        }
        .el-step__line {
            background-color: #fff;
            border-color: #fff;
        }
    }
    // .el-step__line {
    //     height: 1px;
    // }

    .step .el-step__head.is-process .el-step__icon.is-text {
        background-color: #fff;
        color: #6c594e !important;
    }
    .el-step__description.is-process {
        color: #fff;
    }
    .el-step__description.is-finish {
        color: #fff;
    }

    .el-step__main {
        margin-top: 15px;
    }
}
</style>
