<template>
  <a-card :bordered="false" class="userDetails-page-info">
    <a-row :gutter="48">
      <a-col :span="24" class="item-cont">
        <p class="item-label" style="line-height: 37px;">头像：</p>
        <img v-if="page.headImageUrl" :src="page.headImageUrl" alt="" class="img">
        <p class="item-main" style="line-height: 37px;" v-else>--</p>
      </a-col>
      <a-col :span="24" class="item-cont">
        <p class="item-label">手机号码：</p>
        <p class="item-main">{{ page.mobile ? page.mobile : '--' }}</p>
        <a-icon
          type="edit"
          title="修改手机号码"
          style="font-size: 20px;color: #1890FF;padding: 0 10px;"
          @click="editPhone(page)"
          v-hasPermission="'B_user_userdetails_editPhone'" />
      </a-col>
      <a-col :span="24" class="item-cont">
        <p class="item-label">用户身份：</p>
        <p class="item-main">{{ page.customerRoleDictValue ? page.customerRoleDictValue : '--' }}</p>
        <a-icon
          type="edit"
          title="修改用户身份"
          style="font-size: 20px;color: #1890FF;padding: 0 10px;"
          @click="editUseridentity(page)"
          v-hasPermission="'B_user_userDetails_editUser'" />
      </a-col>
      <a-col :span="24" class="item-cont">
        <p class="item-label">收货地址：</p>
        <p class="item-main">{{ adderss ? adderss : '--' }}</p>
      </a-col>
      <a-col :span="24" class="item-cont">
        <p class="item-label">乐豆余额：</p>
        <p class="item-main">{{ page.currentGold ? page.currentGold : 0 }}</p>
        <a-icon
          type="edit"
          title="修改乐豆余额"
          style="font-size: 20px;color: #1890FF;padding: 0 10px;"
          @click="editLd(page)"
          v-hasPermission="'B_user_userDetails_editLdNum'" />
      </a-col>
      <a-col :span="24" class="item-cont">
        <p class="item-label">累计乐豆：</p>
        <p class="item-main">{{ page.totalGold ? page.totalGold :0 }}</p>
      </a-col>
      <a-col :span="24" class="item-cont">
        <p class="item-label">账户状态：</p>
        <p class="item-main">{{ page.state ==0 ? '禁用' : '启用' }}</p>
      </a-col>
      <a-col :span="24" class="item-cont">
        <p class="item-label">注册时间：</p>
        <p class="item-main">{{ page.registerTime ? page.registerTime : '--' }}</p>
      </a-col>
      <a-col :span="24" class="item-cont">
        <p class="item-label">用户注册方式：</p>
        <p class="item-main">{{ page.introTypeDictValue ? page.introTypeDictValue : '--' }}</p>
      </a-col>
      <a-col :span="24" class="item-cont">
        <p class="item-label">邀请人：</p>
        <p class="item-main">{{ page.userName ? page.userName +'-': '' }}{{ page.userPhone ? page.userPhone : '' }}</p>
        <p class="item-main" v-if="!page.userName && !page.userPhone">--</p>
      </a-col>
      <a-col :span="24" class="item-cont">
        <p class="item-label">最后登录时间：</p>
        <p class="item-main">{{ page.lastLoginTime ? page.lastLoginTime : '--' }}</p>
      </a-col>
      <a-col :span="24" class="item-cont">
        <p class="item-label">最后投递时间：</p>
        <p class="item-main">{{ page.lastDeliveryTime ? page.lastDeliveryTime : '--' }}</p>
      </a-col>
    </a-row>
    <div class="page-header" style="margin-top: 50px; color: #2D8CF0; text-align: center;">
      <a @click="goBack">返回列表</a>
    </div>
    <!-- 修改用户手机号码弹窗 -->
    <edit-user-phone-modal :userId="userId" :openUserPhoneMoadl="openUserPhoneMoadl" @close="openUserPhoneMoadl=false"></edit-user-phone-modal>
    <!-- 修改乐豆余额弹窗 -->
    <edit-ldNum-modal :customerNo="customerNo" :openLdNumModal="openLdNumModal" @close="openLdNumModal=false"></edit-ldNum-modal>
    <!-- 修改用户身份 -->
    <edit-useridentity-modal :userId="userId" :customerRoleDictValue="customerRoleDictValue" :openUseridentityMoadl="openUseridentityMoadl" @close="openUseridentityMoadl=false"></edit-useridentity-modal>
  </a-card>
</template>

<script>
import editUserPhoneModal from './editUserPhoneModal.vue'
import editLdNumModal from './editLdNumModal.vue'
import editUseridentityModal from './editUseridentityModal.vue'
import {
  customerDetails
} from '@/api/userInfo.js'
export default {
  name: 'UserDetails',
  components: {
    editUserPhoneModal,
    editLdNumModal,
    editUseridentityModal
  },
  data () {
    return {
      userId: '', // 用户id
      openUserPhoneMoadl: false, // 默认关闭手机号码弹窗
      customerNo: '', // 用户编号
      openLdNumModal: false, // 默认关闭乐豆余额弹窗
	  customerRoleDictValue: {}, // 用户身份
      openUseridentityMoadl: false, // 默认关闭用户身份弹窗
      page: {}, // 详情数据
      adderss: ''
    }
  },
  methods: {
    // 修改手机号码
    editPhone (page) {
      this.userId = this.page.id
      this.openUserPhoneMoadl = true
    },
    // 修改乐豆余额
    editLd (page) {
      this.customerNo = this.page.customerNo
      this.openLdNumModal = true
    },
    // 修改用户身份
    editUseridentity (page) {
      this.userId = this.page.id
	  this.customerRoleDictValue = this.page
      this.openUseridentityMoadl = true
    },
    // 返回列表
    goBack () {
      this.$router.push({
        path: `/userInfo/userManageList/list`
      })
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      const params = vm.$route.params
      if (params.id) {
        customerDetails({
          id: params.id
        }).then(res => {
          if (res.status == 200) {
            vm.page = res.data
            if (vm.page.receiveAddressList) {
              vm.adderss = vm.page.receiveAddressList[0].receiveAreasName.replace(/\,/g, '-') + '-' + vm.page.receiveAddressList[
                0].receiveAddress
            }
          }
        })
      }
    })
  }
}
</script>
<style lang="less">
	.userDetails-page-info{
		.item-cont {
			display: flex;
			margin: 10px 10px 10px 50px;
		}
		.img {
			width: 50px;
			border-radius: 50%;
		}
	}

</style>
