<template>
  <Container title="个人信息" class="container mt-24px">
    <a-table :columns="columns" :data="data" :pagination="false" class="mt-16px">
      <template #info="{ record }">
        <a-avatar :image-url="record.head_image" :size="32" />
        {{ record.name }}
        <icon-edit size="13" class="ml-8px" @click="openEditInfoModal" />
      </template>
      <template #mobile="{ record }">
        {{ record.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
        <icon-edit size="13" class="ml-8px" />
      </template>
    </a-table>
    <Modal v-model:visible="infoVisible" title="修改用户信息">
      <a-form :model="userInfoForm" @submit="handleSubmitUserInfo">
        <a-form-item field="head_image" label="头像">
          <a-avatar :image-url="userInfoForm.head_image" :size="48" />
          <a-upload action="/" />
          <a-button @click="openEditImageModal"><icon-upload />上传新头像</a-button>
        </a-form-item>
        <a-form-item field="name" label="昵称">
          <a-input v-model="userInfoForm.name" placeholder="请输入昵称" />
        </a-form-item>
      </a-form>
    </Modal>
    <Modal v-model:visible="imageVisible" title="头像裁剪">
      <VueCropper></VueCropper>
    </Modal>
  </Container>
</template>
<script setup lang="ts">
import Container from '@/components/container.vue';
import Modal from '@/components/modal.vue';
import { ref, reactive } from 'vue';
import 'vue-cropper/dist/index.css';
import { VueCropper }  from 'vue-cropper';

const userInfo = reactive({
  id: 1,
  name: 'Jane Doe',
  head_image: '',
  mobile: '13600000000',
});

const columns = [
  {
    title: '用户信息',
    slotName: 'info',
  },
  {
    title: '手机号',
    slotName: 'mobile',
  },
];
const data = reactive([userInfo]);
const infoVisible = ref(true);
const imageVisible = ref(false);

const userInfoForm = reactive({
  name: '',
  head_image: '',
});

function openEditInfoModal() {
  infoVisible.value = true;
}

function openEditImageModal() {
  imageVisible.value = true;
}

function handleSubmitUserInfo() {
  console.log(123);
}

</script>

<style scoped lang="less">

</style>
