<template>
  <div>
    <el-row class="demo-avatar demo-basic">
      <el-col :span="12">
        <div class="demo-basic--circle" style="float:left">
          <div class="block">
            <el-avatar :size="90" :src="circleUrl" />
          </div>
          <div v-for="size in sizeList" :key="size" class="block">
            <el-avatar :size="size" :src="circleUrl" />
          </div>
        </div>
        <div class="right-cont">
          <!-- <div class="right" style="font-size:2rem;">
            {{ deatailsInfo.loginName }} <i class="el-icon-edit edit-login-name" @click="handleEditName" />
          </div> -->
          <div class="right">手机号：{{ deatailsInfo.mobile }}</div>
          <div class="right">注册时间：{{ deatailsInfo.gmtCreate && deatailsInfo.gmtCreate.split(' ')[0] }}</div>
        </div>
      </el-col>
    </el-row>
    <cy-dialog ref="editDialog" title="编辑用户名">
      <div style="margin-bottom: 10px;">用户名：</div>
      <el-input v-model="editedUserName" placeholeder="请输入用户名称" />
      <div class="submit-btn" style="margin: 20px 0;">
        <el-button style="width: 150px;" @click="() => { $refs.editDialog.show = false }">取消</el-button>
        <el-button type="primary" style="width: 150px;" @click="handleCertain">确定</el-button>
      </div>
    </cy-dialog>
  </div>
</template>

<script>
import { editUserName } from '@/api/myAccount/myAccount'

export default {
  props: {
    deatilsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      circleUrl: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      sizeList: [],
      deatailsInfo: {
        loginName: '',
        mobile: '',
        id: '',
        registerDate: ''
      },
      editedUserName: '' // 编辑后的用户名称
    }
  },
  watch: {
    deatilsInfo: {
      handler(newV) {
        if (this.deatilsInfo && Object.keys(newV).length) {
          this.deatailsInfo = this.deatilsInfo
        }
      },
      immediate: true,
      deep: true
    }
  },
  // created() {
  //   this.getInfo()
  // },
  methods: {
    // 编辑用户名
    handleEditName() {
      this.$refs.editDialog.show = true
    },
    // 用户名称弹窗确认点击
    handleCertain() {
      if (!this.editedUserName) {
        this.$message.warning('请输入编辑后的用户名称')
        return
      }
      const reg = /^(?:[\u4E00-\u9FA5]|[a-zA-Z0-9]){1,20}$/
      if (!reg.test(this.editedUserName)) {
        this.$message.warning('请输入符合格式的用户名称：包含数字字母汉字，最多20位')
        return
      }
      editUserName({ username: this.editedUserName }).then(() => {
        this.$message.success('用户名称修改成功')
        this.$refs.editDialog.show = false
        this.$router.go(0)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-avatar {
  margin: 30px 0px 30px 20px;
}
.right-cont {
  display: inline-block;
  margin-top: 22px;
}
.right {
  margin-bottom: 10px;
  .edit-login-name {
    cursor: pointer;
    transform: scale(.8);
  }
}
</style>
