<template>
  <div class="company_info_box" >

    <el-tabs v-model="activeName" @tab-click="handleClick" type="card" v-loading="loading">
      <el-tab-pane label="企业信息" name="first">
        <el-form :model="site_info" ref="site_info" :rules="site_info_rules" style="width: 400px" label-width="80px">
          <el-form-item label="公司logo" v-if="false">
            <div @click="company_img_show = true">
              <userImage class="user_img" :id="0" width="68px" height="68px" :img_url="profile.company_info.logo_url"
                 :user_name="profile.company_info.name"></userImage>
                <!-- <div class="company_img">
                  <img :src="profile.company_info.logo_url?profile.company_info.logo_url:'static/images/upload_defalut_logo.png'" width="100%" height="100%" alt="company_logo">
                </div> -->
                <div style="display:inline-block;vertical-align: middle;" v-show="!profile.company_info.logo_url">
                  <span style="display:block;font-size:12px;line-height:20px;color:#666;padding-left:10px;">点击上传LOGO</span>
                  <span style="display:block;font-size:12px;line-height:20px;color:#999;padding-left:2px;">（ 建议尺寸：至少300*300像素 ）</span>
                </div>
            </div>

            <image-cropper v-loading="company_img_loading" field="file" :width="300" :height="300" :url="'https://'+'integralsys.oss-cn-shenzhen.aliyuncs.com'"
              @close='company_img_show = false' @crop-upload-success="company_img_success" langType="zh" :key="imagecropperKey"
              v-show="company_img_show"></image-cropper>

          </el-form-item>
          <!-- <el-form-item label="公司名称" prop="name">
            <el-input v-model="site_info.name" autocomplete="off" placeholder="请输入公司名称"></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="所属行业">
            <el-select v-model="site_info.industry" clearable placeholder="选择所属行业" style="width: 100%;">
              <el-option v-for="item in industry" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="企业人数">
            <span><span :style="site_info.user_count_max == site_info.count?'color:red':'color:#199afb'">{{site_info.count}}</span> / <span style="color:#f56c6c">{{site_info.user_count_max}}</span> 人</span>

            <!-- <div class="openHtml" @click="openHtml">人数不够？升级系统</div> -->
            <div v-if="pastdueDate" style="color:#ff880e;">{{pastdueDate}}&nbsp;&nbsp;&nbsp;<a class="vtRenew" @click="innerVisible=true">立即续费>></a> </div>
          </el-form-item>

          <!-- <el-form-item label="文化墙">
            <image-cropper v-loading="company_img_loading" field="file" :width="750" :height="240" :url="'https://'+'integralsys.oss-cn-shenzhen.aliyuncs.com'"
              @close='company_img_bannerShow = false' @crop-upload-success="company_img_banner" langType="zh" :key="imagecropperKey" :noCircle="true"
              v-show="company_img_bannerShow"></image-cropper>
            <i slot="default" @click="uploadSectionFileClick" class="el-icon-plus elIconPlus"></i>
          </el-form-item>

          <el-form-item label="">
            <image-cropper v-loading="company_img_loading" field="file" :width="750" :height="240" :url="'https://'+'integralsys.oss-cn-shenzhen.aliyuncs.com'"
              @close='company_img_bannerAmendShow = false' @crop-upload-success="company_img_bannerAmend" langType="zh" :key="imagecropperKey" :noCircle="true"
              v-show="company_img_bannerAmendShow"></image-cropper>
            <div style="display:flex;">
              <div v-for="(item,index) in ad_url_list" :key="index" class="adUrlList" style="">
                  <img :src="item" class="ad_url_listImage" style="" @click.stop="amendFileClick(index)">
                  <i slot="default" @click.stop="deletead_url_list(index)" class="el-icon-close elIconCloseX" style=""></i>
              </div>
            </div>
          </el-form-item> -->

          <!-- <el-form-item>
            <el-button type="primary" @click="site_sub('site_info')">保存</el-button>
          </el-form-item> -->
        </el-form>
      </el-tab-pane>

      <!-- <el-tab-pane label="个人信息" name="second">
        <el-form :model="employee_info" ref="employee_info" :rules="employee_info_rules" style="width: 400px"
          label-width="80px">
          <el-form-item label="我的头像">
            <div @click="imagecropperShow = true" style="display:block;">
              <userImage class="user_img person_imghead" :id="profile.id" width="68px" height="68px" :img_url="profile.img_url" :user_name="profile.name"
                >
              </userImage>
              <span v-show="!profile.img_url" style="display:inline-block;font-size:12px;line-height:20px;color:#666;padding-left:10px;">点击上传LOGO</span>
            </div>
            <image-cropper v-loading="cropperloading" field="file" :width="300" :height="300" :url="'http://'+'integralsys.oss-cn-shenzhen.aliyuncs.com'"
              @close='imagecropperShow = false' @crop-upload-success="cropSuccess" langType="zh" :key="imagecropperKey"
              v-show="imagecropperShow"></image-cropper>

          </el-form-item>
          <el-form-item label="我的姓名" prop="name">
            <el-input v-model="employee_info.name" autocomplete="off" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <div>{{tel_hidden}}</div>
            <div style="color: #26A2FF;cursor: pointer;margin-top:-10px;" @click="edit_tel">更换手机号</div>
          </el-form-item>
          <el-form-item label="登录密码">
            <span>已设置，可通过账号密码登录</span>
            <div style="color: #26A2FF;cursor: pointer;margin-top:-10px;" @click="changePasw">更换登录密码</div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="employee_sub('employee_info')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane> -->
    </el-tabs>

    <el-dialog :title="popup_title" :visible.sync="edit_tel_show" width="480px" @close="close_edit_tel" custom-class="alert_tel_box">
      <el-form :model="formData" ref="formData" label-width="80px" v-show="!newTel_show">
        <el-form-item label="旧手机号">
          <el-input autocomplete="off" v-model="employee_info.tel" disabled placeholder="请输入当前账号绑定的手机号"></el-input>
        </el-form-item>
        <el-form-item :inline="true" label="验证码">
          <el-input autocomplete="off" style="width: 230px;" v-model="formData.origin_verify" placeholder="请输入验证码"></el-input>
          <el-button size="mini" @click="send_old_msg" :loading="sendcodeloading" :disabled="sended" style="line-height: 34px;padding: 0 22px;color:#606266">{{sendBtnText}}
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="next" :disabled="next_loading">下一步</el-button>
          <el-button @click="close_edit_tel">取消</el-button>
        </el-form-item>
      </el-form>

      <el-form :model="formData" ref="newTel" label-width="80px" v-show="newTel_show">
        <el-form-item label="新手机号">
          <el-input autocomplete="off" v-model="formData.tel" placeholder="请输入新的手机号"></el-input>
        </el-form-item>
        <el-form-item :inline="true" label="验证码">
          <el-input autocomplete="off" style="width: 230px;" v-model="formData.verify" placeholder="请输入验证码"></el-input>
          <el-button size="mini" @click="send_msg" :loading="sendcodeloading2" :disabled="sended2" style="line-height: 34px;padding: 0 22px;color:#606266">{{newSendBtnText}}
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="edit_tel_btn">确定</el-button>
          <el-button @click="close_edit_tel">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
    <el-dialog title="更换登录密码" :visible.sync="changePasw_show" width="480px" @close="close_changePasw('changePaswFormData')">
      <el-form :model="changePaswFormData" :rules="changePaswRules" ref="changePaswFormData" label-width="100px">
        <el-form-item label="原密码" prop="old_password">
          <el-input v-model="changePaswFormData.old_password" type="password" autocomplete="off" placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input v-model="changePaswFormData.password" type="password" autocomplete="off" placeholder="请输入新密码(6至20位字符)"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="password_confirmation">
          <el-input v-model="changePaswFormData.password_confirmation" type="password" autocomplete="off" placeholder="请在此输入新密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="edit_pasw('changePaswFormData')">完成</el-button>
          <el-button @click="close_changePasw('changePaswFormData')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
		<el-dialog :visible.sync="innerVisible" width="400px" append-to-body class="innerVisible">
        <p style="font-size:21px;">续费/升级</p>
        <p style="margin:0;">请在功道云积分服务群中联系客服顾问或微信扫码添加功道云客服进行续费</p>
        <img src="static/images/vtRemewService.png" style="width:100%">
        <p style="font-size:20px;">电话咨询：400-6877-880</p>
		</el-dialog>
  </div>
</template>
<script>

let PerformTheNumber = true;//五秒执行一次变量
  import {
    getJtoken,
    getToken
  } from '@/utils/auth'
  import {
    get_site_info
  } from '@/api/login'
  import {
    mapGetters,
    mapState
  } from 'vuex'
  import upload_oss from '@/views/upload_oss/upload'
  import ImageCropper from '@/components/ImageCropper'
  import axios_user from '@/utils/request-user'
  export default {
    data() {
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.changePaswFormData.password !== '') {
            this.$refs.changePaswFormData.validateField('password_confirmation');
          }
          callback();
        }
      };
      const validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.changePaswFormData.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ad_url_list: [],//预览列表
        cultureWallItem:0,//列表下标

        company_img_bannerAmendShow:false,
        company_img_bannerShow:false,

        cropperloading: false,
        company_img_loading: false,
        company_img_show: false,
        profile: this.$store.getters.user_info,
        imagecropperShow: false,
        imagecropperKey: 0,
        loading: false,
        activeName: 'first',
        next_loading: true,
        employee_info: {},
        employee_info_rules: {
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }, {
            max: 50,
            message: '不能大于50个字符',
            trigger: 'blur'
          }],
        },
        industry: ['酒店服务', '生产制造', '广告印刷', '教育培训', '互联网电商', '医院医疗', '其他'],
        popup_title: '验证旧手机号',
        value: '',
        tel_hidden: '',
        edit_tel_show: false,
        newTel_show: false,
        formData: {
          tel: '',
          verify: '',
          origin_verify: ''
        },
        changePasw_show: false,
        changePaswFormData: {
          old_password: '',
          password: '',
          password_confirmation: ''
        },
        changePaswRules: {
          old_password: [{
              required: true,
              message: '请输入原密码',
              trigger: 'blur'
            },
            {
              min: 6,
              message: '请输入原密码',
              trigger: 'blur'
            }
          ],
          password: [{
            validator: validatePass,
            trigger: 'blur'
          }, {
            required: true,
            message: '请输入新密码',
            trigger: 'blur'
          }],
          password_confirmation: [{
            validator: validatePass2,
            trigger: 'blur'
          }, {
            required: true,
            message: '请输入重新输入密码',
            trigger: 'blur'
          }],
        },
        site_info_rules: {
          name: [{
            required: true,
            message: '请输入公司名称',
            trigger: 'blur'
          }, {
            max: 50,
            message: '不能大于50个字符',
            trigger: 'blur'
          }],
        },
        sendBtnText: this.$t('login.verify_code_get'),
        sended: false,
        sendcodeloading: false,
        sendInt: 60,
        newSendBtnText: this.$t('login.verify_code_get'),
        sended2: false,
        sendcodeloading2: false,
        sendInt2: 60,
        proof_file_list: [],
        uploadProof: false,
        imagecropperShow: false,

        file_list: [],
        Xtoken: {
          'X-Token': getToken()
        },
        //保存基础设置的数据
        siteInfo:{},
        innerVisible:false,
        pastdueDate:null,
      };
    },
    created(){
      if(this.$route.params.activeName){
        this.activeName = this.$route.params.activeName
        this.get_account_info()
        return
      }
      this.bannerCultureWallList()
      localStorage.removeItem('site_info')
      this.$store.dispatch('get_site_info').then((res) => {
        if(JSON.parse(localStorage.getItem('site_info'))){
          this.site_infoTIme(JSON.parse(localStorage.getItem('site_info')).expire_time)
        }else{
          this.site_infoTIme(res.expire_time)
        }
      })
    },
    methods: {
      site_infoTIme(site_info){
        let moment = this.$moment
        let create_time = site_info
        let pastdueTime = moment(create_time.toString().length==10?create_time*1000:create_time).format('YYYY-MM-DD')
        let atpresentDate = moment().format('YYYY-MM-DD')
        let date = moment(pastdueTime).diff(moment(atpresentDate),'days')
        // console.log(pastdueTime)
        // console.log(date)
        if(date>=0){
          this.pastdueDate = '到期时间：'+pastdueTime
        }else if(date<0){
          this.pastdueDate = '已到期:'+pastdueTime+'，请及时续费以免影响使用'
        }else{
          this.pastdueDate = null
        }
      },
      deletead_url_list(index){//删除轮播某张
        this.$confirm('确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.ad_url_list.splice(index,1)
          this.httpBannerXG(3)//删除
        })
      },
      amendFileClick(index){//修改轮播图
        this.cultureWallItem = index
        this.company_img_bannerAmendShow = true
      },
      company_img_bannerAmend(resData){//修改后的图片
        console.log(resData)
        this.company_img_bannerAmendShow = false
        this.imagecropperKey = this.imagecropperKey + 1
        this.ad_url_list[this.cultureWallItem] = resData.url
        this.httpBannerXG(2)//修改
      },
      uploadSectionFileClick(){//点击 +
        if(this.ad_url_list.length<3){
          this.company_img_bannerShow = true
        }else{
          if(PerformTheNumber){//五秒弹出一次
            this.$message({
              message: '只能添加三张哦',
              duration:2000,
              type: 'warning'
            });
            PerformTheNumber = false;
            setTimeout(()=>{
              PerformTheNumber = true
            },5000)
          }
        }
      },
      bannerCultureWallList(){//进入请求数据
        this.$http('get','/api/integral/site/config').then((res)=>{
          if(res.data.code == 1){
            this.siteInfo=res.data.data;
            this.ad_url_list =res.data.data.bg
          }else{
            this.$message.error(res.data.msg);
          }
        }).catch((err)=>{
          console.log(err)
          // this.$message.error(err.data.msg);
        })
      },

      httpBannerXG(index){//发送图片
        var siteInfo=this.siteInfo;
        if(this.ad_url_list.length==0){
          siteInfo.bg="";
        }
        console.log(siteInfo)
        // return
        this.$http('post','/api/integral/site/config',siteInfo,'v2').then((res)=>{
          if(res.data.code == 1){
            this.$message({
              type: 'success',
              message: index==1?'添加成功!':index==2?'修改成功!':index==3?'删除成功!': res.data.msg
            });
          }else{
            this.$message.error(res.data.msg);
          }
        }).catch((err)=>{
          this.$message.error(err.data.msg);
        })
      },

      company_img_banner(resData){
        console.log(resData)
        this.company_img_bannerShow = false
        this.imagecropperKey = this.imagecropperKey + 1
        if(this.ad_url_list.length < 3){
          this.ad_url_list.push(resData.url)
          this.httpBannerXG(1)//添加
        }else{
          if(PerformTheNumber){//五秒弹出一次
            this.$message({
              message: '只能添加三张哦',
              duration:2000,
              type: 'warning'
            });
            PerformTheNumber = false;
            setTimeout(()=>{
              PerformTheNumber = true
            },5000)
          }
        }
      },

      cropSuccess(resData) {
        this.imagecropperShow = false
        this.imagecropperKey = this.imagecropperKey + 1
        this.image = resData.url
        this.$store.getters.user_info.img_url = this.image
        //更新头像
        this.sendAvatarRequest(this.$store.getters.user_info.img_url)
      },
      sendAvatarRequest(url) {
        const data = {
          name: this.$store.getters.user_info.name,
          img_url: url
        }
        axios_user({
          url: '/api/account/edit',
          method: 'post',
          data
        }).then(response => {
          if (response.status === 200) {
            this.$store.getters.user_info.img_url = url
            if(response.data.code == 1){
              this.$message({
                type: 'success',
                message: response.data.msg
              });
            }
          } else {}
        })
      },
      company_img_success(resData) {
        this.company_img_show = false
        this.imagecropperKey = this.imagecropperKey + 1
        this.image = resData.url
        this.$store.getters.user_info.company_info.logo_url = this.image
        //更新头像
        this.company_img_request(this.$store.getters.user_info.company_info.logo_url)
      },
      company_img_request(url) {
        const data = {
          name: this.$store.getters.user_info.company_info.name,
          logo_url: url
        }
        this.$http('post','/api/site/update',data).then(response => {
          if (response.status === 200) {
            this.$store.dispatch('get_site_info').then((res) => {})
            this.$store.getters.user_info.company_info.logo_url = url
          } else {}
        }).catch((error) => {
          console.log(error)
        })
      },
      onFilePreView(file) {
        // 点击时查看文件
        const $ext_list = ['doc', 'docx', 'pptx', 'xls', 'xlsx', 'ppt', 'txt']
        const $ext_name = file.name.split('.')[1]
        if ($ext_list.indexOf($ext_name) >= 0) {
          window.open(file.response.url, '_blank')
        }
        // 点击时查看图片
        const $ext_list1 = ['jpg', 'png', 'bmp', 'jpeg', 'JPG', 'PNG']
        const $ext_name1 = file.name.split('.')[1]
        if ($ext_list1.indexOf($ext_name1) >= 0) {
          let ii = 0
          for (const i in this.file_list) {
            if (
              ['jpg', 'png', 'bmp', 'jpeg', 'JPG', 'PNG'].indexOf(
                this.file_list[i].name.split('.')[1]
              ) >= 0
            ) {
              if (this.file_list[i].name == file.name) {
                this.openPhotoSwipe(ii, document.querySelectorAll('img[preview]'))
                return
              }
              ii++
            }
          }
        }
      },
      onFileRemove(file, fileList) {
        this.file_list.push(file)
      },
      handleFilesSuccess(response, file, fileList) {
        this.newApplicationForm.file_list = fileList
        this.$set(this.newApplicationForm, 'file_list', fileList)
      },
      beforeFilesUpload() {},

      openHtml() {
        window.open('http://p.qiao.baidu.com/cps/chat?siteId=10793815&userId=3040844','_blank');
        // https://www7.53kf.com/webCompany.php?kf_sign=DE5OTMTU5MQ2MzEwMjk5NzQ2MDM2MDAwNzIyMjA2Njk=&arg=10220669&style=1&kflist=off&kf=&zdkf_type=1&lnk_overflow=0&language=zh-cn&charset=GBK&username=&userinfo=&introurl=&lyurl=&lytype=0&copartner=&referer=https%3A%2F%2Fwww.g107.com%2F&keyword=&brief=&logo=&question=&uid=936d332da783c637077db48fd080dff5&tfrom=2&timeStamp=1590199547629&ucust_id=
      },
      handleClick(tab, event) {
        if (tab.name == "second") {
          this.get_account_info()
        }
      },
      company_save() {
        this.$message({
          message: '已设置企业信息',
          type: 'success'
        });
      },
      person_save() {
        this.$message({
          message: '已修改个人信息',
          type: 'success'
        });
      },
      get_account_info() {
        let self = this
        self.loading = true
        self.$http_user({
          url: '/api/account/info',
          method: 'post',
        }).then((res) => {
          if (res.data.code == 1) {
            self.employee_info = res.data.data
            self.tel_hidden = res.data.data.tel.substr(0, 3) + '****' + res.data.data.tel.substr(7);
          }
        }).catch((e) => {
          self.$message.error(e.data.msg)
        }).finally(() => {
          self.loading = false
        })
      },
      site_sub(form) {
        let self = this
        self.$refs[form].validate((valid) => {
          if (valid) {
            let data = {
              name: self.site_info.name,
              industry: self.site_info.industry
            }
            self.loading = true
            self.$http('post','/api/site/update',data).then((res) => {
              if (res.data.code == 1) {
                localStorage.removeItem('site_info')
                self.$message.success('修改成功')
              } else {
                self.$message.error(res.data.msg)
              }
            }).catch((e) => {
              self.$message.error(e.data.msg)
            }).finally(() => {
              self.loading = false
            })
          } else {
            return false;
          }
        });
      },

      employee_sub(form) {
        let self = this
        self.$refs[form].validate((valid) => {
          if (valid) {
            let data = {
              name: self.employee_info.name,
            }
            self.loading = true
            self.$http_user({
              url: '/api/account/edit',
              method: 'post',
              data: data
            }).then((res) => {
              if (res.data.code == 1) {
                self.$message.success(res.data.msg)
              } else {
                self.$message.error(res.data.msg)
              }
            }).catch((e) => {
              self.$message.error(e.data.msg)
            }).finally(() => {
              self.loading = false
            })
          } else {
            return false;
          }
        });
      },
      edit_tel() {
        this.edit_tel_show = true
      },
      edit_tel_btn() {
        let self = this
        if (!self.formData.tel) {
          self.$message.error("请输入新手机号!")
          return false;
        }
        if (!self.formData.verify) {
          self.$message.error("请输入验证码!");
          return false;
        }
        self.$http_user({
          url: '/api/account/replace',
          method: 'post',
          data: self.formData
        }).then((res) => {
          if (res.data.code == 1) {
            self.$message.success(res.data.msg)
            self.edit_tel_show = false;
          } else {
            self.$message.error(res.data.msg)
          }
        }).catch((e) => {
          self.$message.error(e.data.msg)
        }).finally(() => {
          self.loading = false
        })
      },
      next() {
        let self = this
        if (!self.formData.origin_verify) {
          this.$message.error("请输入验证码!");
          return false;
        }
        let data = {
          type: 3,
          tel: self.employee_info.tel,
          verify: self.formData.origin_verify
        }
        self.$http_user({
          url: '/api/verify/check',
          method: 'post',
          data: data
        }).then((res) => {
          if (res.data.code == 1) {
            self.newTel_show = true
            self.popup_title = '新手机号绑定'
            // self.$message.success(res.data.msg)
          } else {
            self.$message.error(res.data.msg)
          }
        }).catch((e) => {
          self.$message.error(e.data.msg)
        }).finally(() => {
          self.loading = false
        })
      },
      //获取旧手机验证码
      send_old_msg() {
        let self = this
        let data = {
          mobile: self.employee_info.tel,
          type: 3
        }
        self.$http_user({
          url: '/api/send-sms',
          method: 'post',
          data: data
        }).then((res) => {
          if (res.data.code == 1) {
            self.$message.success(res.data.data)
            self.next_loading = false
          } else {
            self.$message.error(res.data.msg)
          }
          self.sendedCount();
        }).catch((e) => {
          self.$message.error(e.data.msg)
        }).finally(() => {
          self.loading = false
        })
      },
      //验证码倒计时
      sendedCount() {
        const self = this
        if (this.sendInt == 0) {
          this.sendBtnText = this.$t('login.sendedCount')
          this.sended = false
        } else {
          this.sended = true
          this.sendBtnText = this.sendInt + this.$t('login.sendedCount_befor')
          this.sendInt--
          setTimeout(function() {
            self.sendedCount()
          }, 1000)
        }
      },
      //验证码倒计时
      sendedCount2() {
        const self = this
        if (this.sendInt2 == 0) {
          this.newSendBtnText = this.$t('login.sendedCount')
          this.sended2 = false
        } else {
          this.sended2 = true
          this.newSendBtnText = this.sendInt2 + this.$t('login.sendedCount_befor')
          this.sendInt2--
          setTimeout(function() {
            self.sendedCount2()
          }, 1000)
        }
      },
      //获取新手机验证码
      send_msg() {
        let self = this
        let data = {
          mobile: self.formData.tel,
          type: 1
        }
        self.$http_user({
          url: '/api/send-sms',
          method: 'post',
          data: data
        }).then((res) => {
          if (res.data.code == 1) {
            self.$message.success(res.data.data)
            // self.edit_tel_show = false
          } else {
            self.$message.error(res.data.msg)
          }
          self.sendedCount2()
        }).catch((e) => {
          self.$message.error(e.data.msg)
        }).finally(() => {
          self.loading = false
        })
      },

      close_edit_tel() {
        this.edit_tel_show = false
        this.popup_title = '验证旧手机号'
        this.newTel_show = false
        this.formData.tel = ''
        this.formData.verify = ''
        this.sendBtnText = this.$t('login.verify_code_get')
        this.sended = false
        this.sendcodeloading = false
        this.newSendBtnText = this.$t('login.verify_code_get')
        this.sended2 = false
        this.sendcodeloading2 = false
      },
      changePasw() {
        this.changePasw_show = true
      },
      close_changePasw(formName) {
        this.changePasw_show = false
        this.$refs[formName].resetFields()
      },
      edit_pasw(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let self = this
            self.$http_user({
              url: '/api/account/reset',
              method: 'post',
              data: self.changePaswFormData
            }).then((res) => {
              if (res.data.code == 1) {
                self.$message.success(this.$t("login.reset_password"));
                self.changePasw_show = false
                self.$confirm('成功修改密码,请重新登录', '提示', {
                  showClose: false,
                  confirmButtonText: '确定',
                  type: 'warning'
                }).then(() => {
                  self.$store.dispatch('LogOut');
                })
              } else {
                self.$message.error(res.data.msg)
              }
            }).catch((e) => {
              self.$message.error(e.data.msg)
            }).finally(() => {
              self.loading = false
            })
          }
        });
      },
      renew() {
        window.open(
          'https://www7.53kf.com/webCompany.php?kf_sign=DE5OTMTU5MQ2MzEwMjk5NzQ2MDM2MDAwNzIyMjA2Njk=&arg=10220669&style=1&kflist=off&kf=&zdkf_type=1&lnk_overflow=0&language=zh-cn&charset=GBK&username=&userinfo=&introurl=&lyurl=&lytype=0&copartner=&referer=https%3A%2F%2Fwww.g107.com%2F&keyword=&brief=&logo=&question=&uid=936d332da783c637077db48fd080dff5&tfrom=2&timeStamp=1590199547629&ucust_id=',
          '_blank')
      }
    },
    computed:{
     ...mapState({
       site_info: state => state.user.site_info
     }),
    },
    components: {
      upload_oss,
      ImageCropper
    }
  };
</script>
<style lang="scss" scoped>
  .company_info_box {
    padding: 20px;
    background-color: #fff;
    overflow: hidden;

    /deep/ .el-tabs__item.is-active {
      color: #26A2FF;
    }

    /deep/ .el-row {
      line-height: 36px;
      margin: 20px auto;
    }

    .avatar-uploader {
      width: 80px;
      height: 80px;
      background: #f8f8f8;
      overflow: hidden;
    }

    .el-upload {
      width: 80px;
      height: 80px;
    }

    .upload_font {
      position: absolute;
      display: block;
      text-align: center;
      bottom: 0;
      width: 80px;
      height: 80px;
      font-size: 12px;
      line-height: 80px;
      background: rgba(51, 51, 51, 0.1);
    }

    .chang_tel {
      color: #909399 !important;
      transition: 0.35s ease-in-out;
    }

    .chang_tel:hover {
      color: #26A2FF !important;
      transition: 0.35s ease-in-out;
    }
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  // .company_img{
  //   position:relative;
  //   display:inline-block;
  //   vertical-align: middle;
  //   width: 140px;
  //   height: 60px;
  //   padding:10px;
  //   background:transparent;
  //   border: 1px #efefef solid;
  // }
  .person_imghead{
    display:inline-block;
    width:68px;
    height:68px;
  }
  .person_imghead /deep/ .img_round{
    vertical-align: middle !important;
  }
  .openHtml{
    color: #26A2FF;
    margin-top:-10px;
    cursor: pointer;
  }

  .elIconPlus{
    padding:38px;
    border:1px solid #e5e7ec;
    cursor:pointer;
    color: #bdc4d6;
    display: inline-block;
    background-color: #fff;
    border-radius: 3px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
  }
  .elIconPlus:hover{
    border:1px solid #abb0be;
    color: #696d77;
    background-color: rgb(248, 248, 248);
    // box-shadow:0px 0px 10px rgb(226, 219, 219);
    box-shadow:2px 2px 5px rgb(170, 167, 167);
  }
  .ad_url_listImage{
    width:280px;
    height:88px;
    margin:2px;
    cursor:pointer;
    border-radius: 5px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
  }
  .adUrlList:hover .ad_url_listImage{
    width:282px;
    height:89px;
    // box-shadow:0px 0px 10px rgb(0, 0, 0);
    box-shadow:2px 2px 5px rgb(0, 0, 0);
  }
  .elIconCloseX{
    position: absolute;
    top:4px;
    right:8px;
    cursor:pointer;
    color:rgb(241, 241, 241);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;

    transition: All .5s ease-in-out;
    -webkit-transition: All .5s ease-in-out;
    -moz-transition: All .5s ease-in-out;
    -o-transition: All .5s ease-in-out;
  }
  .adUrlList:hover .elIconCloseX{
    // color:rgb(0, 0, 0);
    font-size:16px;
    box-shadow:0px 0px 10px #000;
    background-color: #000000;
    border-radius: 50%;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);

    //  -webkit-animation: haha1 2s linear infinite;//无限旋转
  }
//  @-webkit-keyframes haha1 {//无限旋转
//   0% {
//     -webkit-transform: rotate(0deg);
//   }

//   25% {
//     -webkit-transform: rotate(90deg);
//   }

//   50% {
//     -webkit-transform: rotate(180deg);
//   }

//   75% {
//     -webkit-transform: rotate(270deg);
//   }

//   100% {
//     -webkit-transform: rotate(360deg);
//   }
// }
  .adUrlList{
    position: relative;
    height:90px;
    width: 288px;
  }

  .vtRenew{
    color:#53b3f7
  }
  .innerVisible p{
    text-align: center;
  }
  /deep/ .el-dialog__body{
    padding: 0 80px 15px;
  }
</style>
