<template>
  <div class="content-layer accountInfo min-h">
    <h3>{{$t('developer_info')}}</h3>
    <div class="content">
      <header class="header">
        <img :src="avatar">
        <span class="username">{{userProfile.username }}</span>
        <!-- 示例: 通过/account/accountSettings权限情况, 判断是否显示组件 -->
        <!-- 将权限状态保存在showAccess后 绑定组件判断显示隐藏-->
        <Button v-if="showAccess" @click="setInfo">{{$t('developer_info_alter')}} >></Button>
    </header>
      <Table
      :columns="columns1"
      :data="data1"
      :show-header=false
      width=660
      >
      </Table>

      <div class="wxbox">
      <h3>第三方登录</h3>
        <div class="bind-content">
        <div class="bind-info" v-for="(item, index) in bindList" :key="`bind_${index}`">
          <p style="font-size:16px">{{item.desc}}登录绑定：</p>
          <div class="wxbox_info" v-if="item.can_bing===0">
            <img :src="item.headimgurl" alt="" style="width:40px;height:40px;border-radius: 50%;margin-right:20px;">
            <p style="font-weight: bold;font-size:16px">{{item.nickname}}</p>
            <div style="padding-left:10px;color:#999;cursor:pointer" v-if="item.can_unbind===1" @click="handelUnBind(item.type)">解除绑定</div>
          </div>
          <div v-else>
            <a :href="item.can_bing_url" target="_blank" style="font-weight: bold;font-size:16px">直接绑定</a>
          </div>
        </div>
        </div><!-- content -->
      </div>
    </div>

  </div>
</template>

<script>
import headImg from '@/assets/images/headImg.jpg'
import {
  AuthorizationBindResult,
  AuthorizationUnBind } from '@/api/account'
import { mapState } from 'vuex'
// hasPermission方法判断是否有访问该路径的权限
import { getToken, hasPermission, getCookies, removeCookies } from '@/libs/util'

export default {
  name: 'accountInfo',
  data () {
    return {
      token: getToken(),
      columns1: [
        {
          title: 'Name',
          key: 'name',
          align: 'center',
          width: 250
        },
        {
          title: 'value',
          key: 'value'
        }
      ],
      data1: [],
      nickname: '',
      avatar: headImg,
      bindList: []
    }
  },
  computed: {
    ...mapState({
      userProfile: state => state.user.userProfile
    }),
    // 用计算属性保存hasPermission的状态值,用于组件v-if判断
    showAccess () {
      return hasPermission('/account/accountSettings')
    }
  },
  created () {
    this.handleCookies()
    this.getInfo()
    this.getThirdPartyBindInfo()
  },
  watch: {
    $route (to, from) {
      this.getInfo()
    }
  },
  methods: {
    // 获取第三方绑定信息
    async getThirdPartyBindInfo () {
      let res = await AuthorizationBindResult({ access_token: this.token })
      this.bindList = [...res.data]
      console.log('getThirdPartyBindInfo', this.bindList)
    },
    handelUnBind (type) {
      const _this = this
      this.$Modal.confirm({
        title: '提示',
        content: '<p>解除绑定后，将不能使用微信授权登录此账号，是否确认解绑?</p>',
        className: 'vertical-center-modal',
        onOk: async () => {
          let res = await AuthorizationUnBind({
            access_token: _this.token,
            type: type
          })
          if (res.ret == 200) {
            _this.$Message.success('操作成功')
            _this.updateInfo()
            await _this.getThirdPartyBindInfo()
          }
        },
        onCancel: () => {
          return false
        }
      })
    },
    setInfo () {
      this.$router.push({ path: '/account/accountSettings' })
    },
    getInfo () {
      const info = this.userProfile
      this.data1 = [
        {
          name: this.$t('member_type') + ':',
          value: info.member_level_name
        },
        {
          name: this.$t('name') + ':',
          value: info.nickname
        },
        {
          name: this.$t('tel') + ':',
          value: info.mobile || '-'
        },
        {
          name: this.$t('email') + ':',
          value: info.email || '-'
        }
      ]
      this.avatar = info.avatar || headImg
      this.nickname = info.nickname
    },
    // 更新数据
    updateInfo () {
      this.$store.dispatch('GetAccountData').then(() => {
        this.getInfo()
      })
    },
    // 绑定微信回调页面时处理cookies
    handleCookies () {
      let msg = getCookies('bing_wechat_result') || ''
      if (msg) {
        this.$Message.error(msg)
        removeCookies('bing_wechat_result')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.accountInfo {
  h3{
    font-size: 18px;
    padding-bottom: 20px;
  }
  .wxbox {
    display: flex;
    align-items: baseline;
    margin-top: 30px;
  }
  .wxbox_info {
    display: flex;
    align-items: center;
  }
  .bind-content {
    margin-left: 30px;
    display: flex;
    flex-flow: column;
    align-items: flex-start;

    .bind-info {
      display: flex;
      align-items: center;
    }
  }
}
.header {
  width: 660px;
  height: 140px;
  padding: 20px 30px;
  position: relative;
  border-bottom: rgb(175, 175, 175) 1px solid;
  background: rgb(247, 246, 245);

  img {
    width: 100px;
    height: 100px;
    float: left;
  }

  .username {
    font-size: 30px;
    margin-left: 15px;
    line-height: 100px;
    float: left;
  }

  button {
    position: absolute;
    left: 500px;
    bottom: 45px;
  }

}
.content {
  width: 660px;
  margin: 10px 40px;
}
</style>
