<template>
  <a-card :bordered="false" class="orderDetail-goods-info">
    <a-row :gutter="48">
      <a-col :span="24" class="item-cont item-img">
        <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" v-hasPermission="'B_user_userdetails_editPhone'"/> -->
        <!-- <a style="margin-left: 100px; color: #2D8CF0;" @click="editPhone">修改手机号码</a> -->
      </a-col>
      <a-col :span="24" class="item-cont">
        <p class="item-label">收货地址：</p>
        <p class="item-main">{{ page.receiveAddressList ? page.receiveAddressList[0].receiveAddress : '--' }}</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 style="margin-left: 145px; color: #2D8CF0;" @click="editLd(page)">修改乐豆余额</a> -->
      </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.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 :userPhone="userPhone" :openUserPhoneMoadl="openUserPhoneMoadl" @close="openUserPhoneMoadl=false"></edit-user-phone-modal>
    <!-- 修改乐豆余额弹窗 -->
    <edit-ldNum-modal :customerNo="customerNo" :openLdNumModal="openLdNumModal" @close="openLdNumModal=false"></edit-ldNum-modal>
  </a-card>
</template>

<script>
import editUserPhoneModal from './editUserPhoneModal.vue'
import editLdNumModal from './editLdNumModal.vue'
import {
  customerDetails
} from '@/api/userInfo.js'
export default {
  name: 'UserDetails',
  components: {
    editUserPhoneModal,
    editLdNumModal
  },
  data () {
    return {
      userPhone: '', // 用户手机号码
      openUserPhoneMoadl: false, // 默认关闭手机号码弹窗
      customerNo: '', // 用户编号
      openLdNumModal: false, // 默认关闭乐豆余额弹窗
      page: {} // 详情数据
    }
  },
  methods: {
    // 详情
    editPhone () {
      // this.userPhone = record.userPhone
      this.openUserPhoneMoadl = true
      console.log('-----------修改手机号码')
    },
    editLd (page) {
      this.customerNo = this.page.customerNo
      console.log(this.customerNo, '------用户编号')
      this.openLdNumModal = true
      console.log('-----修改乐豆余额')
    },
    // 返回列表
    goBack () {
      this.$router.push({
        path: `/userInfo/userManageList/list`
      })
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      console.log(111)
      const params = vm.$route.params
      console.log(params)
      if (params.id) {
        customerDetails({
          id: params.id
        }).then(res => {
          console.log(res)
          if (res.status == 200) {
            vm.page = res.data
          }
        })
      }
    })
  }
}
</script>
<style lang="less">
	.item-cont {
		display: flex;
		margin: 10px 10px 10px 50px;
	}

		.img{
			width:50px;
			border-radius:50% ;
		}

</style>
