<template>
    <div class="editInfo">
        <el-row>
            <div class="content_title">
                <span>编辑资料</span>
            </div>
        </el-row>
        <div class="avatar">
            <!--  <img :src="avatar" /> -->
            <el-upload
                class="avatar"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
            >
                <img v-if="avatar" :src="avatar" />
                <i v-else class="avatar"></i>
            </el-upload>
            <div class="edit_avatar">点击头像修改</div>
        </div>
        <el-form ref="form" :model="form" label-width="150px" :rules="rules" style="max-width: 450px;" size="small">
            <el-form-item label="id" v-show="false">
                <el-input v-model="form.id"></el-input>
            </el-form-item>
            <el-form-item label="企业名称">
                <el-input v-model="form.orgName" placeholder="请输入单位名称"></el-input>
            </el-form-item>
            <el-form-item label="单位性质">
                <el-select v-model="form.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="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="所属行业">
                <el-select v-model="form.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="所在地">
                <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="详细地址">
                <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="请填写企业简介，不超过200字"></el-input>
            </el-form-item>
            <el-form-item prop="logo" label="企业logo">
                <single-upload v-model="form.logo"></single-upload>
                <span class="remind">请上传企业logo图片，格式JPG或PNG，尺寸500x500px，大小不超过1M</span>
            </el-form-item>
            <el-form-item prop="license" label="营业执照">
                <single-upload v-model="form.license"></single-upload>
                <span class="remind">请上传清晰图片，格式JPG或PNG，大小不超过1M</span>
            </el-form-item>
            <el-form-item label="统一社会信用代码">
                <el-input v-model="form.uscc" placeholder="请输入18位统一社会信用代码"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="form.contactName" placeholder="请输入您的真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="form.contactIdNo" placeholder="请输入您的身份证号"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="form.contactEmail" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="onSave" :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';

export default {
    name: 'editInfo',
    mixins: [province, cities, areas],
    data() {
        return {
            uploadUrl: '',
            form: {},
            rules: {},
            avatar: '',
            saving: false,
            province: [],
            cities: [],
            areas: [],
            shen: '',
            shi: '',
            qv: ''
        };
    },
    methods: {
        onSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            this.form.address = this.shen + ',' + this.shi + ',' + this.qv;
            this.form;
            this.$http
                .post('/orgInfo/save', this.form, { body: 'json' })
                .then(res => {
                    this.form = res;
                    this.$message.success('修改成功');
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        },
        handleAvatarSuccess(res, file) {
            this.avatar = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {},
        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 => {
                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: {}
};
</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 {
    // width: auto;
    // height: auto;
    position: absolute;
    top: 40px;
    right: 80px;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    // justify-content: center;
    .el-upload {
        img {
            width: 148px;
            height: 148px;
            border-radius: 74px;
        }
    }
    .edit_avatar {
        position: absolute;
        top: 188px;
        right: 105px;
        margin-top: 20px;
        width: 96px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
        color: #939599;
        font-size: 13px;
        border: 1px solid #dcdfe6;
    }
}
.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>
