<template>
    <div>
        <div style="width:500px;margin: auto;margin-top: 30px;">
            <div style="margin-left: -50px; font-size: 14px;font-weight: 700;color: #666;padding: 4px 10px;border-left: 2px solid #666;">{{$t('common.UnitInformation')}}</div>
            <div style="height: 100px;position: relative;">
                <span style="position: absolute;left: 23%;top: 50%;transform: translate(-50%,-50%);font-size: 14px;color: #606266;">{{$t('common.Logo')}}</span>
                <img :src="'api/file/pub/'+ form.photo" alt="" style="width: 100px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);"/>
            </div>
           
    </div>
    <div style="width: 100%;">
        <el-form ref="form" :model="form" label-width="140px" class="demo-ruleForm" :rules="rules" style="margin-left: 250px;margin-top: 20px;">
            <el-form-item :label="$t('common.NameOfEnterprise')" prop='name'>
                <el-input v-model="form.unitName" disabled></el-input>
            </el-form-item>
            <el-form-item :label="$t('common.Continent')">
                <el-input v-model="form.are" disabled></el-input>
            </el-form-item>
            <el-form-item :label="$t('common.UCountry')">
                <el-input  v-model="form.unitCountry" disabled></el-input>
            </el-form-item>
            <el-form-item :label="$t('common.Nature')">
                <el-input v-model="form.enterpriseProperty" disabled></el-input>
            </el-form-item>
            <el-form-item :label="$t('common.UIndustry')">
                <el-input v-model="form.industry" disabled></el-input>
            </el-form-item>
            <el-form-item :label="$t('common.UScope')">
                <el-input v-model="form.unitScope" disabled></el-input>
            </el-form-item>
            <el-form-item :label="$t('common.RegisteredCapital')">
                <el-input v-model="form.registerMoney" disabled></el-input>
            </el-form-item>
            <el-form-item :label="$t('common.EstablishmentTime')">
                <el-input v-model="form.setUpDate" disabled></el-input>
            </el-form-item>
            <el-form-item :label="$t('common.Website')">
                <el-input v-model="form.officialWebsitePath" disabled></el-input>
            </el-form-item>
            <el-form-item :label="$t('common.UIntroduction')">
                <el-input type="textarea" :rows="2"  v-html="form.unitIntrodution" disabled></el-input>
            </el-form-item>
          </el-form>
          
    </div>
    <div style="clear: both;"></div>
    <div v-if="this.isUnitPersonnel== true" style="height: 200px;">
        <div style="margin-top: 100px;">
            <el-button type="primary"  @click="confirm" style="margin-left: 300px;">{{$t('common.Confirm')}}</el-button>
            <el-button style="margin-left: 30px;">{{$t('common.Reset')}}</el-button>
        </div>
    </div>
    </div>
</template>
<script>
    import {getUnitInfo,addUnit} from "@/api/userCenter/unitPersonnel";
    import { formatDate } from "@/utils/formatUtils";

    export default {
        name: 'userCenterUnitInformation',
        data () {
            return {
                informationsClass:'1',
                dialogVisible: false,
                ifDiaslog:'',
                title:'',
                isUnitPersonnel:false,
                preferredMobile:'',
                email:'',
                form: {
                    unitName: '',
                    unitCode: '',
                    registerMoney: '',
                    unitCountry: '',
                    unitCountryDict: '',
                    unitProvince: '',
                    unitProvinceDict: '',
                    unitCity: '',
                    unitCityDict: '',
                    unitRegion: '',
                    setUpDate: '',
                    corporateName: '',
                    corporateIdCard: '',
                    corporateDuty: '',
                    officialWebsitePath: '',
                    unitAddress: '',
                    dynamic: '',
                    dynamicDict: '',
                    unitsSystem: '',
                    unitsSystemDict: '',
                    councilMembers: '',
                    councilMembersDict: '',
                    are: '',
                    industry: '',
                    industryDict: '',
                    areDict: '',
                    unitLabel: '',
                    unitIntrodution: '',
                    status: '',
                    statusDict: '',
                    language: '',
                    enterpriseProperty: '',
                    photo: '/def/enterpriseDefault.png',
                    enterprisePropertyDict: '',
                    baseEntityId:'',
                },
                show: true,
                count: '',
                timer: null,
                rules: {
                    name: [
                        { required: true, message: '请输入昵称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                   
                },
                rulesEn: {
                    name: [
                        { required: true, message: 'Please enter your nickname', trigger: 'blur' },
                        { min: 3, max: 5, message: 'The length is between 3 and 5 characters', trigger: 'blur' }
                    ],

                }
            }
        },
         watch: {
             "$i18n.locale"() {
                 this.getInformation();
             },
         },
         mounted () {
             this.getInformation();
         },
        methods:{
            getInformation(){
                //根据用户的手机或者邮箱查询
                if(this.$i18n.locale.toUpperCase()=="EN"){
                    this.rules = this.rulesEn
                }
                var users=localStorage.getItem('user');
                var user = JSON.parse(users);
                var baseEntityId  = user.umsUser.unitEntityId;
                this.preferredMobile = user.umsUser.userPreferredMobile;
                this.email = user.umsUser.userEmail;
                var params ={};
                params.baseEntityId = baseEntityId;
                params.language = this.$i18n.locale;
                if(!baseEntityId){
                    this.isUnitPersonnel = true;
                    params.preferredMobile=this.preferredMobile;
                    params.email=this.email;
                }
                getUnitInfo(params).then(result => {
                    if(result.data){
                        this.form = result.data;
                        this.form.setUpDate = this.form.setUpDate
                            ? formatDate(this.form.setUpDate, "YYYY-MM-DD HH:mm:ss")
                            : "";
                        if(!this.form.photo){
                            this.form.photo = "/def/enterpriseDefault.png";
                        }
                    }
                }).catch((error) => {
                    this.$message({
                        message: error.msg,
                        type: 'error'
                    });
                })

            },
            confirm() {
                if(this.form.baseEntityId == "" || this.form.baseEntityId == null){
                    this.$message({
                        message: "您未被邀请加入单位!",
                        type: 'success'
                    });
                    return ;
                }
                var status = "已确认";
                var statusDict="1";
                var unitPersonnelInformation ={};
                unitPersonnelInformation.statusDict = statusDict;
                unitPersonnelInformation.status =status;
                unitPersonnelInformation.preferredMobile = this.preferredMobile;
                unitPersonnelInformation.email=this.email;
                unitPersonnelInformation.baseEntityId=this.form.baseEntityId;
                this.$confirm('确认加入该单位, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    addUnit(unitPersonnelInformation).then(res=>{
                        this.isUnitPersonnel=false;
                        var umsUser = this.$store.state.user.user.umsUser;
                        umsUser.unitEntityId = unitPersonnelInformation.baseEntityId;
                        this.$store.state.user.user.umsUser = umsUser;
                        localStorage.setItem('user', JSON.stringify(this.$store.state.user.user));
                        this.$message({
                            message: "加入成功!",
                            type: 'success'
                        });
                    }).catch((error) => {
                        this.$message.error(error.msg);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消加入'
                    });
                });
            },
        }
    }
</script>
<style scoped>
     
    .box1:after{
        display:block;
        clear:both;
        content:"";
        visibility:hidden;
        height:0
    }
    .el-input {
        width: 75%;
    }
    .el-form {
        width: 500px !important;
    }
    .el-button {
        width: 200px;
        height: 45px;
    }
</style>