<template>
  <el-card style="margin-bottom:20px;">
    <div slot="header" class="clearfix">
      <span>{{ $t('common.aboutMe') }}</span>
    </div>
    <div class="user-profile">
      <div class="box-center">
        <pan-thumb :image="avatar" :height="'100px'" :width="'100px'" :hoverable="false">
          <el-link type="primary" class="change-avatar" @click="dialogVisible = true">{{ $t('common.changeAvatar') }}</el-link>
        </pan-thumb>
      </div>
      <div class="box-center">
        <div class="user-name text-center">{{ user.realname }}</div>
        <div class="user-role text-center text-muted">
          <span>{{ user.deptName ? user.deptName : $t('common.noDept') }}</span> · <span>{{ user.roleName ? user.roleName : $t('common.noRole') }}</span>
        </div>
      </div>
    </div>
    <div class="user-bio">
      <div class="user-education user-bio-section">
        <div class="user-bio-section-header"><el-icon class="el-icon-tickets" /><span>{{ $t('table.user.desc') }}</span></div>
        <div class="user-bio-section-body">
          <div class="text-muted">
            {{ user.description ? user.description: $t('tips.nothing') }}
          </div>
        </div>
      </div>
      <div class="user-education user-bio-section">
        <div class="user-bio-section-header"><el-icon class="el-icon-connection" /><span>{{ $t('table.user.social') }}</span></div>
        <div class="user-bio-section-body">
          <div class="text-muted">
            <template v-for="(l, index) in logo">
              <div :key="index" class="logo-wrapper">
                <img v-if="l.bind" :src="resolveLogo(l.img)" :class="{ 'radius': l.radius }" alt="" :title="$t('common.unbind')" @click="unbind(l.name)">
                <img v-else :src="resolveLogo(l.img)" :class="{ 'radius': l.radius }" alt="" :title="$t('common.bind')" class="unbind" @click="bind(l.name)">
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <avatar
      :dialog-visible="dialogVisible"
      @close="dialogVisible = false"
      @success="changeSuccess"
    />
  </el-card>
</template>

<script>
import PanThumb from '@/components/PanThumb'
import Avatar from './Avatar'
import { socialLoginUrl } from '@/settings'

export default {
  components: { PanThumb, Avatar },
  props: {
    user: {
      type: Object,
      default: () => {
        return {
        }
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      socialLoginUrl: socialLoginUrl,
      logo: [
        { img: 'gitee.png', name: 'gitee', bind: false, radius: true },
        { img: 'github.png', name: 'github', bind: false, radius: true },
        { img: 'tencent_cloud.png', name: 'tencent_cloud', bind: false, radius: true },
        { img: 'qq.png', name: 'qq', bind: false, radius: false },
        { img: 'dingtalk.png', name: 'dingtalk', bind: false, radius: true },
        { img: 'microsoft.png', name: 'microsoft', bind: false, radius: false }
      ],
      oauthType: '',
      page: {
        width: window.screen.width * 0.5,
        height: window.screen.height * 0.5
      }
    }
  },
  computed: {
    avatar() {
      return require(`@/assets/avatar/${this.user.avatar}`)
    }
  },
  mounted() {
    this.findUserConnections()
  },
  destroyed() {
    window.removeEventListener('message', this.resolveBindResult)
  },
  methods: {
    changeSuccess(avatar) {
      this.dialogVisible = false
      this.$message({
        message: this.$t('tips.updateSuccess'),
        type: 'success'
      })
      this.user.avatar = avatar
      this.$store.commit('account/setUser', this.user)
    },
    resolveLogo(logo) {
      return require(`@/assets/logo/${logo}`)
    },
    findUserConnections() {
      this.$get(`auth/social/connections/${this.user.username}`).then((r) => {
        const data = r.data.data
        data.forEach(d => {
          this.logo.forEach(l => {
            if (l.name === d.providerName.toLowerCase()) {
              l.bind = true
            }
          })
        })
      })
    },
    bind(name) {
      this.oauthType = name
      const url = `${this.socialLoginUrl}/${name}/bind`
      window.open(url, 'newWindow', `height=${this.page.height}, width=${this.page.width}, top=10%, left=10%, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no`)
      window.addEventListener('message', this.resolveBindResult, false)
    },
    resolveBindResult(e) {
      const data = e.data.data
      data.token = null
      this.$post('auth/social/bind', {
        ...data,
        bindUsername: this.user.username
      }).then((r) => {
        this.logo.forEach(l => {
          if (l.name === this.oauthType) {
            l.bind = true
          }
        })
        this.$message({
          message: this.$t('common.bindSuccess'),
          type: 'success'
        })
      })
    },
    unbind(name) {
      this.$confirm(this.$t('common.confirmUnbind'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        this.$delete('auth/social/unbind', {
          bindUsername: this.user.username,
          oauthType: name
        }).then(() => {
          this.logo.forEach(l => {
            if (l.name === name) {
              l.bind = false
            }
          })
          this.$message({
            message: this.$t('common.unbindSuccess'),
            type: 'success'
          })
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
 .box-center {
   margin: 0 auto;
   display: table;
 }

 .text-muted {
   color: #777;
 }

 .user-profile {
   .user-name {
     font-weight: bold;
   }

   .box-center {
     padding-top: 10px;
   }

   .user-role {
     padding-top: 10px;
     font-weight: 400;
     font-size: 14px;
   }

   .box-social {
     padding-top: 30px;

     .el-table {
       border-top: 1px solid #dfe6ec;
     }
   }

   .user-follow {
     padding-top: 20px;
   }
 }

 .user-bio {
   margin-top: 20px;
   color: #606266;

   span {
     padding-left: 4px;
   }
   .logo-wrapper {
     display: inline-block;
     margin: 10px 0;
     img {
       width: 1.4rem;
       display: inline-block;
       margin: 0 .6rem;
       cursor: pointer;
       &.unbind {
         -webkit-filter: grayscale(100%);
         -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
         filter: grayscale(100%);
       }
       &.radius {
         border-radius: 50%;
       }
     }
   }
   .user-bio-section {
     font-size: 14px;
     padding: 15px 0;

     .user-bio-section-header {
       border-bottom: 1px solid #dfe6ec;
       padding-bottom: 10px;
       margin-bottom: 10px;
       font-weight: bold;
     }
   }
 }
</style>
