<template>
    <div class="editInfo">
        <el-row>
            <div class="content_title">
                <span>编辑资料</span>
            </div>
        </el-row>
        <div class="avatar-wrapper">
            <!--  <img :src="avatar" /> -->
            <single-upload :value="(userInfo || {}).avatar" @input="changeAvatar"> </single-upload>
        </div>
        <el-form ref="form" :model="form" label-width="150px" :rules="rules" style="max-width: 600px;" size="small">
            <el-form-item label="企业名称" prop="orgName">
                <el-input v-model="form.orgName" placeholder="请输入单位名称"></el-input>
            </el-form-item>
            <el-form-item label="单位性质" prop="orgType">
                <auto-input
                    v-model="form.orgType"
                    placeholder="请输入单位性质"
                    :suggestions="[
                        '国家行政机构',
                        '公私合作企业',
                        '中外合资企业',
                        '国有企业',
                        '集体企业',
                        '股份合作企业',
                        '联营企业',
                        '有限责任公司',
                        '股份有限公司',
                        '私营企业',
                        '个体工商户',
                        '其他'
                    ]"
                ></auto-input>
            </el-form-item>
            <el-form-item label="上市公司" prop="publicCompany">
                <el-radio v-model="form.publicCompany" :label="true">是</el-radio>
                <el-radio v-model="form.publicCompany" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="所属行业" prop="industry">
                <el-input v-model="form.industry" placeholder="请输入所属行业"> </el-input>
            </el-form-item>
            <el-form-item label="所在地" prop="address">
                <el-select placeholder="省" style="width:125px;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:125px;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:130px" 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="form.addressDetail" placeholder="请选择"></el-input>
            </el-form-item>
            <el-form-item prop="description" label="企业简介">
                <el-input type="textarea" v-model="form.intro" placeholder="请填写企业简介"></el-input>
            </el-form-item>
            <el-form-item label="企业标志" prop="logo">
                <single-upload v-model="form.logo"></single-upload>
                <span class="remind">请上传企业标志图片，格式JPG或PNG，尺寸500x500px，大小不超过1M</span>
            </el-form-item>
            <el-form-item label="营业执照" prop="license">
                <single-upload v-model="form.license"></single-upload>
                <span class="remind">请上传清晰图片，格式JPG或PNG，大小不超过1M</span>
            </el-form-item>
            <el-form-item label="统一社会信用代码" prop="uscc">
                <el-input v-model="form.uscc" placeholder="请输入18位统一社会信用代码"></el-input>
            </el-form-item>
            <el-form-item label="联系人姓名" prop="contactName">
                <el-input v-model="form.contactName" placeholder="请输入联系人姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系人身份证号" prop="contactIdNo">
                <el-input v-model="form.contactIdNo" placeholder="请输入联系人身份证号"></el-input>
            </el-form-item>
            <el-form-item label="联系邮箱" prop="contactEmail">
                <el-input v-model="form.contactEmail" placeholder="请输入联系邮箱"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="submit" :loading="saving" type="primary" class="save">保存</el-button>
                <el-button @click="$router.go(-1)" class="back">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import resolveUrl from 'resolve-url';
import province from '@/mixins/provinces.json';
import cities from '@/mixins/cities.json';
import areas from '@/mixins/areas.json';
import { mapState } from 'vuex';

export default {
    name: 'editInfo',
    mixins: [province, cities, areas],
    data() {
        return {
            uploadUrl: '',
            form: {},
            rules: {
                orgName: [
                    { required: true, message: '请输入单位名称', trigger: 'blur' },
                    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                ],
                orgType: [{ required: true, message: '请输入单位性质', trigger: 'blur' }],
                publicCompany: [{ required: true, message: '请选择是否上市公司', trigger: 'blur' }],
                industry: [{ required: true, message: '请输入所属行业', trigger: 'blur' }],
                address: [
                    {
                        validator: (rule, value, callback) => {
                            if (this.shen === '' || this.shi === '' || this.qv === '') {
                                callback(new Error('请选择所在地'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                addressDetail: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
                license: [{ required: true, message: '请上传营业执照', trigger: 'blur' }],
                uscc: [
                    { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
                    { min: 18, max: 18, message: '长度为18个字符', trigger: 'blur' }
                ],
                contactName: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                ],
                contactIdNo: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' },
                    { min: 18, max: 18, message: '长度为18个字符', trigger: 'blur' }
                ],
                contactEmail: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                ]
            },
            avatar: '',
            saving: false,
            province: [],
            cities: [],
            areas: [],
            shen: '',
            shi: '',
            qv: '',
            avatarUploading: false
        };
    },
    methods: {
        submit() {
            if (
                this.$store.state.userInfo &&
                localStorage.getItem('token') != undefined &&
                localStorage.getItem('token') != null
            ) {
                this.$refs.form
                    .validate()
                    .then(() => {
                        this.form.address = this.shen + ',' + this.shi + ',' + this.qv;
                        this.saving = true;
                        this.$http
                            .post('/orgInfo/save', this.form, { body: 'json' })
                            .then(res => {
                                this.saving = false;
                                this.form = res;
                                this.$message.success('修改成功');
                            })
                            .catch(e => {
                                this.saving = false;
                                console.log(e);
                                this.$message.error(e.error);
                            });
                    })
                    .catch(e => {
                        this.$message.error('表单有误，请检查后重新提交');
                    });
            } else {
                this.$alert('用户未登录，请先进行登录?', '提示', {
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    this.$router.push({ name: 'login' });
                });
            }
        },
        changeAvatar(avatar) {
            this.$http.post('/user/updateProfile', { avatar }).then(res => {
                this.$message.success('修改成功');
                this.$http.get('/user/my').then(res => {
                    this.$store.commit('updateUserInfo', res);
                });
            });
        },
        beforeAvatarUpload(file) {
            if (file.size / 1024 / 1024 > 1) {
                this.$message.error('图片大小不能超过1MB!');
                this.avatarUploading = false;
                return false;
            }
            this.avatarUploading = true;
            return true;
        },
        handleAvatarError(err, file, fileList) {
            this.avatarUploading = false;
            this.$message.error('上传失败');
        },
        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);
                }
            }
        }
    },
    created() {
        this.province = province;
        this.uploadUrl = resolveUrl(this.$baseUrl, 'upload/file');
        this.$http
            .get('orgInfo/my')
            .then(res => {
                res.orgInfo = res.orgInfo || { userId: this.$store.state.userInfo.id, status: 'PENDING' };
                this.form = res.orgInfo;
                let list = res.orgInfo.address.split(',');
                this.shen = list[0];
                this.shi = list[1];
                this.qv = list[2];
                for (let citiesKey of cities) {
                    if (citiesKey.provinceCode === this.shen) {
                        this.cities.push(citiesKey);
                    }
                }
                for (let areasKey of areas) {
                    if (areasKey.cityCode === this.shi) {
                        this.areas.push(areasKey);
                    }
                }
                this.avatar = res.avatar;
            })
            .catch(e => {
                console.log(e);
                this.$message.error(e.error);
            });
    },
    computed: {
        ...mapState(['userInfo'])
    }
};
</script>
<style lang="less" scoped>
.content_title {
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-bottom: 20px;
    border-bottom: #f2f3f5 1px solid;
    > span {
        font-size: 16px;
        color: #000000;
        line-height: 30px;
        font-weight: 700;
    }
}
.avatar-wrapper {
    // width: auto;
    // height: auto;
    position: absolute;
    top: 80px;
    right: 80px;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    // justify-content: center;
    /deep/ .upload-image {
        width: 148px;
        height: 148px;
        border-radius: 74px;
        object-fit: cover;
    }
    /deep/ .single-uploader-icon {
        width: 148px;
        height: 148px;
        line-height: 148px;
        border-radius: 74px;
    }
}
.editInfo {
    position: relative;
}
.remind {
    // width: 500px !important;
    height: 22px;
    font-size: 13px;
    color: #c8c9cc;
    line-height: 22px;
}
.el-form {
    margin-top: 30px;
    // position: relative;
    .el-button {
        margin-top: 80px;
    }
    .save {
        width: 110px;
        height: 36px;
        background: #bf1616;
        border-radius: 4px;
    }
    .back {
        width: 110px;
        height: 36px;
        background: #c4c7cc;
        border-radius: 4px;
        color: #fff;
    }
}
</style>
