<template>
  <div class="bg-grey personal-con">
    <div class="personal-list">
      <item-info
        label="用户头像"
        :icon="true"
        @click.native="accountPopup('headUrl')"
      >
        <template slot="valueWrap">
          <div class="m-icon head-portrait">
            <img  :src="accountInfo.headUrl" mode="" class="img-box" />
          </div>
        </template>
      </item-info>
      <item-info label="登录账户" :value="accountInfo.inviteCode" />
      <item-info
        label="用户昵称"
        :icon="true"
        :value="accountInfo.nickName"
        @click.native="accountPopup('nickName')"
      />
      <item-info
        label="用户性别"
        :icon="true"
        :value="getSixText"
        @click.native="accountPopup('sex')"
      />
      <item-info
        label="出生年月"
        :icon="true"
        :value="getBirthdayText"
        @click.native="accountPopup('birthday')"
      />
      <component
        :is="isType"
        v-model="dialogVisible"
        ref="accountComponent"
        @getImgSrc="getImgSrc"
        :componentData="accountInfo[objectKey]"
        :accountInfo="accountInfo"
        @change="changeInfo"
      />
    </div>
  </div>
</template>

<script>
import itemInfo from "../components/item-info.vue";
import { mapState, mapMutations } from "vuex";
const AvatarPopup = () => import("./avatar-popup.vue");
const NicknamePopup = () => import("./nickname-popup.vue");
const GenderPopup = () => import("./gender-popup.vue");
const BirthdayPopup = () => import("./birthday-popup.vue");
import { uploadImgUrl } from "@/api/apiconfig/upload";
import { deepCopy } from "@/utils/common";
export default {
  components: {
    itemInfo,
    AvatarPopup,
  },
  data() {
    return {
      isType: AvatarPopup,
      dialogVisible: false,
      imgSrc: "",
      isShowImg: false,
      objectKey: "",
      imgName: "",
    };
  },
  computed: {
    ...mapState(["accountInfo"]),
    getSixText() {
      const arr = ["男", "女", "保密"];
      let index = this.accountInfo.sex - 1;
      return arr[index];
    },
    getBirthdayText() {
      if (this.accountInfo.birthday) {
        return this.accountInfo.birthday.substring(0, 7);
      }
      return "";
    },
  },
  methods: {
    ...mapMutations(["setAccountInfo"]),
    changeInfo(val) {
      let accountInfo = {
        headUrl: this.accountInfo.headUrl,
        nickName: this.accountInfo.nickName,
        sex: 0,
        birthday: this.accountInfo.birthday,
      };
      accountInfo[this.objectKey] = val;
      this.$showLoading();
      this.$api({
        apiName: "updateInfo",
        postData: accountInfo,
        success: (res) => {
          let setaccountInfo = deepCopy(this.accountInfo);
          setaccountInfo[this.objectKey] = val;
          this.setAccountInfo(setaccountInfo);
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
    getImgSrc(file, name) {
      this.dialogVisible = false;
      this.$showLoading();
      this.$api({
        apiName: "uploadImg",
        postData: file,
        success: (res) => {
          this.changeInfo(res);
        },
        complete: this.$hideLoading,
      });
    },
    accountPopup(type) {
      this.objectKey = type;
      switch (type) {
        case "headUrl":
          this.isType = AvatarPopup;
          break;
        case "nickName":
          this.isType = NicknamePopup;
          break;
        case "sex":
          this.isType = GenderPopup;
          break;
        case "birthday":
          this.isType = BirthdayPopup;
          break;
      }
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="less">
.personal-con {
  height: 100%;

  .personal-list {
    padding: 0 16px 0;
    background-color: #ffffff;

    .item-info-con {
      align-items: center;

      &:last-child {
        border: 0;
      }

      .label {
        padding: 0;
      }

      .value-con {
        padding: 0;
        align-items: center;

        .more {
          margin-top: 0;
        }
      }
    }

    .head-portrait {
      width: 100%;
      flex: 1;

      .img-box {
        width: 47px;
        height: 47px;
        border-radius: 50%;
        background-image: url(~@/assets/img/default-head.png);
        background-size: 100%;
        float: right;
      }
    }
  }
}
</style>
