<template>
    <div class="ajm-panel-content">
        <div class="ajm-panel-title">{{$t('message.Manager.companyInfo')}}</div>
        <div class="page-content">
            <div class="section"  v-if="!isEdit">
                <div class="section-left">
                    <div class="platform-info">
                        <p class="infotit"><a>{{$t('message.Manager.cnName')}} </a><span>{{company.cnName}}</span></p>
                        <el-input v-model="company.companyId" type="hidden"></el-input>
                        <p><a>{{$t('message.Manager.enName')}} </a>{{company.enName}}</p>
                        <p class="margin-top-12"><a style="padding-right: 38px;">{{$t('message.Manager.contactPerson')}} </a>{{company.contactPerson}}</p>
                        <p class="margin-top-12"><a>{{$t('message.Manager.contactPhone')}} </a>{{company.contactPhone}}</p>
                        <div class="infotext margin-top-12">
                            <a>{{$t('message.Manager.contactAddress')}} </a><span>{{company.contactAddress}}</span>
                        </div>
                    </div>
                </div>
                <div class="section-right">
                    <div class="right-wrap">
                        <!--<img src="../../../assets/image/about.png" v-if="!logoUrl">-->
                        <img :src="logoUrl">
                    </div>
                </div>
            </div>

            <!-- 编辑状态 -->
            <div class="section" v-else>
                <div class="section-left">
                    <div class="platform-info">
                        <el-form class="ajm-form" :model="company" :rules="companyRules" ref="company" label-width="70px">
                            <el-form-item :label="$t('message.Manager.cnName')" prop="cnName">
                                <el-input v-model="company.cnName" :maxlength="50" :placeholder="$t('message.Manager.confirmCnName')"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('message.Manager.enName')" prop="enName">
                                <el-input v-model="company.enName" :maxlength="50" :placeholder="$t('message.Manager.confirmEnName')"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('message.Manager.contactPerson')" prop="contactPerson">
                                <el-input v-model="company.contactPerson" :maxlength="50" :placeholder="$t('message.Manager.confirmPerson')"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('message.Manager.contactPhone')" prop="contactPhone">
                                <el-input v-model="company.contactPhone" :maxlength="14" :placeholder="$t('message.Manager.confirmPhone')"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('message.Manager.contactAddress')" prop="contactAddress">
                                <el-input v-model="company.contactAddress" :maxlength="200" :placeholder="$t('message.Manager.confirmAddress')"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="section-right">
                    <div class="right-wrap">
                        <div class="uploader">
                            <el-upload :action="uploadFileUrl" list-type="picture-card" :on-success="uploadFileSuccess" :headers="headers" :show-file-list="false">
                                <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar">
                                <i class="el-icon-plus" v-else></i>
                            </el-upload>
                            <div class="del" v-if="dialogImageUrl">
                                <i @click="removeIcon" class="el-icon-ajm-delete"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-footer" v-if="!isEdit">
            <el-button icon="edit" size="mediu" type="primary" @click="goEdit">{{$t('message.edit')}}</el-button>
        </div>
        <div class="page-footer" v-else>
            <el-button size="small" type="primary" @click="updateCompany">{{$t('message.save')}}</el-button>
            <el-button size="small" @click="doCancel">{{$t('message.cancel')}}</el-button>
        </div>
    </div>
</template>
<script>

    import companyService from "../services/companyService";
    import AjmConfig from 'ajm-framework/core/utils/ajm-config'
    //默认图片
    import companyImg from "@/assets/image/company.png";

    export default {
        data() {
            return {
                //服务器地址
                serverUrl : AjmConfig.getApiUrl(),
                //上传图片地址
                uploadFileUrl : AjmConfig.getApiUrl() + AjmConfig.get("BASE_CONTEXT_PATH") + "/api/file/uploadFile",
                //查看突变地址
                viewFileUrl :AjmConfig.get("BASE_CONTEXT_PATH") + '/api/file/viewFile/',
                //初始化图片
                logo:'',
                // 初始化图片 路径
                logoUrl : companyImg,
                //上传图片地址

                headers: {
                    Authorization: "Bearer " + this.$store.getters.tokenInfo.access_token,
                },
                dialogImageUrl: '',
                // 公司信息
                company : {
                    companyId:'',
                    cnName:'',
                    enName:'',
                    contactPerson:'',
                    contactPhone:'',
                    contactAddress:'',
                    companyLogo:''
                },
                //是否修改
                isEdit:false,
                /*companyRules:{
                    cnName: [
                    { required: true, validator: checkCompanyCnNameExist, trigger: "" }
                    ],
                    enName: [
                        { required: false, validator: checkCompanyEnNameExist, trigger: "" }
                    ],
                    contactPhone: [
                        { message: "请输入企业电话", trigger: "" },
                        { pattern: /^(0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8})|(400|800)([0-9\\-]{7,10})|(([0-9]{4}|[0-9]{3})(-| )?)?([0-9]{7,8})((-| |转)*([0-9]{1,4}))?$/, message: '联系电话格式不正确' }
                    ],
                    contactAddress: [
                        { message: "请输入企业地址", trigger: "" },
                    ],
                    contactPerson: [
                        { message: "请输入企业联系人", trigger: "" },
                    ]
                }*/
            };
        },
        computed:{
            companyRules(){
                var checkCompanyCnNameExist = (rule, value, callback) => {
                    var reg = /^\S{1,50}$/;
                    if (!value) {
                        return callback(new Error(this.$t('message.Manager.confirmCnName')));
                    }else if (reg.test(value)) {
                        let params = {
                            companyId: this.company.companyId,
                            cnName: value
                        };
                        companyService.checkCompanyCnNameExist(params).then(resp => {
                            if (resp) {
                                return new callback(new Error(this.$t('message.Manager.hasCnName')))
                            } else {
                                callback();
                            }
                        });
                    } else {
                        callback(new Error(this.$t('message.Manager.cnNameClue')));
                    }
                };
                var checkCompanyEnNameExist = (rule, value, callback) => {
                    if (!value) {
                        return callback();
                    }
                    // var reg = /^[a-zA-Z]{2,50}$/;
                    var reg = /^\S{1,50}$/;
                    if (reg.test(value)) {
                        let params = {
                            companyId: this.company.companyId,
                            enName: value
                        }
                        companyService.checkCompanyEnNameExist(params).then(resp => {
                            var result = resp;
                            if (result == true) {
                                return callback(new Error(this.$t('message.Manager.hasEnName')));
                            } else {
                                callback();
                            }
                        });
                    }
                    // else {
                    //     callback(new Error("企业简称仅允许1-50位字母"));
                    // }
                };
                return{
                    cnName: [
                        { required: true, validator: checkCompanyCnNameExist, trigger: "" }
                    ],
                    enName: [
                        { required: false, validator: checkCompanyEnNameExist, trigger: "" }
                    ],
                    contactPhone: [
                        { message: this.$t('message.Manager.confirmPhone'), trigger: "" },
                        { pattern: /^(0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8})|(400|800)([0-9\\-]{7,10})|(([0-9]{4}|[0-9]{3})(-| )?)?([0-9]{7,8})((-| |转)*([0-9]{1,4}))?$/, message: '联系电话格式不正确' }
                    ],
                    contactAddress: [
                        { message: this.$t('message.Manager.confirmAddress'), trigger: "" },
                    ],
                    contactPerson: [
                        { message: this.$t('message.Manager.confirmPerson'), trigger: "" },
                    ]
                }
            }
        },
        methods: {
            // 加载公司信息
            loadCompany(){
                companyService.getCompany().then(data => {
                    this.company = data;
                    if(data.companyLogo){
                        this.logo = data.companyLogo;
                        this.logoUrl = this.getImgUrl(data.companyLogo);
                    }
                });
            },
            //获取图片
            getImgUrl(filekey){
                if (filekey == null || filekey == '') {
                    return false;
                }
                return (
                    this.serverUrl + this.viewFileUrl + filekey + "?access_token=" + this.$store.getters.tokenInfo.access_token
                );
            },
            //修改公司信息
            goEdit(){
                this.isEdit = true
                if(this.logo){
                    this.dialogImageUrl = this.logoUrl;
                    this.company.companyLogo = this.logo
                }
            },
            //删除上传图片
            removeIcon(){
                this.company.companyLogo = '';
                this.dialogImageUrl = this.getImgUrl(this.company.companyLogo);
            },
            //上传文件成功
            uploadFileSuccess(data){
                this.company.companyLogo = data.fileKey;
                this.dialogImageUrl = this.getImgUrl(this.company.companyLogo);
            },
            //保存公司信息
            updateCompany(){
                let companyVO = {
                    cnName: this.company.cnName,
                    enName: this.company.enName,
                    contactPerson: this.company.contactPerson,
                    contactPhone: this.company.contactPhone,
                    contactAddress: this.company.contactAddress,
                    companyLogo: this.company.companyLogo
                };
                this.$refs['company'].validate(valid => {
                    if (valid) {
                        companyService.updateCompany(companyVO).then(resp => {
                            if (resp.status == 500) {
                                this.$message({
                                    type: 'error',
                                    message: resp.message
                                })
                                return;
                            }else{
                                this.isEdit = false
                                this.$message({
                                    message: this.$t('message.saveSuccess'),
                                    type: "success"
                                });
                                this.loadCompany();
                            }
                        });
                    }
                });
            },
            //取消保存
            doCancel(){
                this.isEdit = false
                this.dialogImageUrl = '';
                this.resetForm("company");
            },
            //重置表单
            resetForm(formName) {
                if (this.$refs[formName] !== undefined) {
                    this.$refs[formName].resetFields();
                }
            },

        },
        mounted() {
            // 加载公司信息
            this.loadCompany();
        },
    }

</script>
<style lang="less" scoped>
    .ajm-panel-content{
        width:100%;
        background-color: #fff;
        overflow: hidden;
        .ajm-panel-title{
            border-bottom: 1px solid #EBEDF0;
            height: 60px;
            line-height: 60px;
            padding-left: 30px;
            font-size: 14px;
            color: #45494C;
        }
        .page-footer{
            border-top: 1px solid #EBEDF0;
            height: 90px;
            line-height: 90px;
            padding-left: 200px;
            .el-button{
                width:72px;
            }
        }
    }


    .section{
        width:100%;
        height: 100%;
        display: flex;
        padding: 60px 0;

        a{
            padding-right: 25px;
        }
    }
    .section-left{
        flex:2;
        //text-align: center;
        position: relative;
    }
    .space{
        position: absolute;
        top:-50px;
        right:30px;

    }
    .margin-top-12{
        margin-top: 12px;
    }
    .top_space{
        width: 100%;
        height:200px;
    }
    .space .el-button{
        position: absolute;
        top:10%;
        right:20%;

    }
    .section-right img{
        width:146px;
        height:146px;
        max-width: 400px;
    }
    .uploader{
        width: 148px;
        height: 148px;
        position: absolute;
        overflow: hidden;
        top:0;
        .del{
            width: 100%;
            height: 148px;
            position: absolute;
            left: 0px;
            top: 0px;
            cursor: default;
            text-align: center;
            color: #fff;
            opacity: 0;
            font-size: 20px;
            background-color: rgba(0,0,0,.5);
            transition: opacity .3s;
            i{
                margin-top: 66px;
            }
        }
        .del:hover{
            opacity:1;
        }
    }
    .section-right{
        flex:2;
        position: relative;
        .right-wrap{
            padding: 0px 60px;
        }
    }
    .infotit{
        margin: 0;
    }
    .infotext .el-textarea{
        width: calc(100% - 81px);
        vertical-align: top;
    }
    .platform-info{
        padding: 0 60px 0 120px;
        border-right: 1px solid #DADEE2;
    }

</style>
