<template>
  <div class="center">
    <page-layout>
      <a-row :gutter="[15, 15]">
        <a-col :lg="6" :md="6" :sm="24" :xs="24">
          <!--头像框-->
          <a-card style="position: relative">
            <a-avatar class="avatar" :size="64" :src="userInfo.avatar" />
            <div class="username">{{ userInfo.nickname }}</div>
            <div class="address">China</div>
            <a-divider />
            <div class="desc">{{ userInfo.sign }}</div>
          </a-card>
          <!--修改头像框-->
          <a-card style="position: relative">
          </a-card>

        </a-col>
        <a-col :lg="18" :md="18" :sm="24" :xs="24">
          <a-card>
            <a-tabs @change="callback">
              <a-tab-pane key="1" tab="基本信息">
                <br />
                <a-form :model="userInfo" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-form-item ref="username" label="账号" name="username">
                    <a-input v-model:value="userInfo.username" />
                  </a-form-item>
                  <a-form-item ref="nickname" label="名称" name="nickname">
                    <a-input v-model:value="userInfo.nickname" />
                  </a-form-item>
                  <a-form-item ref="email" label="邮箱" name="email">
                    <a-input v-model:value="userInfo.email" />
                  </a-form-item>

                  <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" @click="editInfo"> 保存 </a-button>
                    <a-button style="margin-left: 10px" @click="resetForm">
                      重置
                    </a-button>
                    <a-button style="margin-left: 10px" @click="showPassword">
                      修改密码
                    </a-button>
                  </a-form-item>
                </a-form>
              </a-tab-pane>
              <a-tab-pane key="2" tab="账号绑定" force-render> 空 </a-tab-pane>
              <a-tab-pane key="3" tab="修改头像">
                <CropperUpload :imageUrl="userInfo.avatar" :options="coverOptions" @avatarfn="coverUrlFn"
                  avatarTextTop="推荐使用174px*200px  JPG.PNG.JPEG格式 图片小于1M" avatarTextBottom="点击头像进行修改"></CropperUpload>
              </a-tab-pane>
            </a-tabs>
            <a-modal v-model:open="passwordState" title="修改密码" @ok="onSubmit" okText="确认" cancelText="取消">
              <a-form-item label="旧密码">
                <a-input v-model:value="password.oldPassword" placeholder="请输入旧密码" />
              </a-form-item>
              <a-form-item label="新密码">
                <a-input v-model:value="password.newPassword" placeholder="请输入新密码" />
              </a-form-item>
            </a-modal>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
  </div>
</template>
<script>
  import {
    upload
  } from "@/api/module/oss";

    import {
    message
  } from '@hwork/ant-design-vue';
  import {
    profile,
    editPassword,
    edit,
    resetAvatar
  } from "@/api/module/user";
  import {
    reactive,
    ref,
    toRaw,
    computed,
  } from "vue";
  import {
    useStore
  } from "vuex";
  import CropperUpload from "./modal/cropperUpload.vue";
  //import AvatarModal from "./modal/AvatarModal";

  export default {
    components: {
      CropperUpload,
      //AvatarModal
    },
    setup() {
      const {
        getters,
        commit,
        dispatch
      } = useStore();
      const localUserInfo = computed(() => getters.userInfo);
      const userInfo = reactive({});
      const password = reactive({});
      const passwordState = ref(false);
      //图片相关内容
      const coverOptions = reactive({
        autoCrop: true, //是否默认生成截图框
        autoCropWidth: 174, //默认生成截图框宽度
        autoCropHeight: 200, //默认生成截图框高度
        fixedBox: true, //是否固定截图框大小 不允许改变
        previewsCircle: false, //预览图是否是原圆形
        title: "修改图片",
      });
      const coverUrl = ref("");
      //const coverUrlFn = reactive("");

      profile({}).then((response) => {
        userInfo.id = response.data.id;
        userInfo.sign = response.data.sign;
        userInfo.email = response.data.email;
        userInfo.username = response.data.username;
        userInfo.nickname = response.data.nickname;
        userInfo.avatar = response.data.avatar;
      });

      const showPassword = function() {
        console.log("passwordState", passwordState)
        console.log("this.passwordState", passwordState)
        passwordState.value = true;
        password.newPassword = "";
        password.oldPassword = "";
        password.userId = userInfo.value.id;
      }

      //内部组件修改头像成功后，会传递静态文件的URL
      const coverUrlFn = function(data) {
        console.log("coverUrlFn", data)
        resetAvatar({
          id: userInfo.id,
          avatar: data
        }).then((response) => {
          console.log("resetAvatar", response)
          if (response.success) {
            message.success({
              content: '保存成功',
              duration: 1
            }).then(() => {
              coverUrl.value = data
              userInfo.avatar = data;
              passwordState.value = false;
              let currentUserrInfo = localUserInfo.value
              console.log("currentUserrInfo",currentUserrInfo)
              //跟新缓存信息中的头像信息
              currentUserrInfo.avatar = data;
              dispatch("user/refreshUserInfo",currentUserrInfo);
            });
          } else {
            message.error({
              content: '保存失败',
              duration: 1
            }).then(() => {
              passwordState.value = false;
            });
          }
        })
      }

      const resetForm = function() {
        passwordState.value = true;
        password.newPassword = "";
        password.oldPassword = "";
        password.userId = userInfo.value.id;
      }

      const onSubmit = function() {
        editPassword(password).then((response) => {
          if (response.success) {
            message.success({
              content: '保存成功',
              duration: 1
            }).then(() => {
              passwordState.value = false;
            });
          } else {
            message.error({
              content: '保存失败',
              duration: 1
            }).then(() => {
              passwordState.value = false;
            });
          }
        })
      }

      const editInfo = function() {
        edit(userInfo).then((response) => {
          if (response.success) {
            message.success({
              content: '保存成功',
              duration: 1
            });
          } else {
            message.error({
              content: '保存失败',
              duration: 1
            })
          }
        })
      }
      const callback = function() {

      }

      return {
        onSubmit,
        password,
        editInfo,
        showPassword,
        passwordState,
        resetForm,
        callback,
        labelCol: {
          span: 4
        },
        wrapperCol: {
          span: 12
        },
        userInfo,
        //头像裁剪相关
        coverUrl,
        coverUrlFn,
        coverOptions,
      };
    },
  };
</script>
<style lang="less">
  .center {
    .avatar {
      margin-left: 38%;
      margin-top: 40px;
    }

    .username {
      width: 100%;
      text-align: center;
      margin-top: 15px;
      font-size: 16px;
    }

    .address {
      width: 100%;
      text-align: center;
      font-size: 14px;
      margin-top: 10px;
    }

    .desc {
      width: 100%;
      text-align: center;
    }
  }
</style>
