<template>
  <div class="">
    <div class="">
      <div class="user-icon flex items-center mb-5">
        <div class="box mr-5 cursor-pointer" @click="upload">
          <img v-if="infos.icon" :src="infos.icon" />
          <i v-else class="iconfont iconpaishe"></i>
        </div>
        <div
          v-if="infos.icon"
          class="blue-button cursor-pointer"
          @click="upload"
        >
          修改头像
        </div>
        <div v-else class="blue-button cursor-pointer" @click="upload">
          上传头像
        </div>
      </div>
      <div>
        <div class="flex w-full mb-7 mt-[22px]">
          <div class="label w-[119px]">姓名</div>
          <div class="flex-grow content">{{ infos.user }}</div>
          <div
            class="modifyBtn flex-shrink-0"
            @click="
              changeNameDialogVisible = true;
              name = infos.user;
            "
          >
            修改
          </div>
        </div>
        <div class="flex w-full mb-7 mt-[22px]">
          <div class="label w-[119px]">密码</div>
          <div class="flex-grow content">
            {{ (__status as any).status ? "已设置" : "未设置" }}
          </div>
          <div class="modifyBtn flex-shrink-0" @click="__setType('security')">
            {{ (__status as any).status ? "更换" : "去设置" }}
          </div>
        </div>
        <div class="flex w-full mb-7 mt-[22px]">
          <div class="label w-[119px]">手机号</div>
          <div class="flex-grow content">
            {{ infos.phone }}
          </div>
          <div class="modifyBtn flex-shrink-0" @click="__setType('security')">
            {{ infos.phone === "" ? "去绑定" : "更换" }}
          </div>
        </div>
        <div class="flex w-full mb-7 mt-[22px]">
          <div class="label w-[119px]">邮箱</div>
          <div class="flex-grow content">
            {{ infos.email === "" ? "未设置" : infos.email }}
          </div>
          <div class="modifyBtn flex-shrink-0" @click="__setType('security')">
            {{ infos.email === "" ? "去绑定" : "更换" }}
          </div>
        </div>
      </div>
      <div style="height: 1px; background-color: #e8e8e8"></div>
      <div>
        <div class="flex w-full mb-7 mt-[22px]">
          <div class="label w-[119px]">UID</div>
          <div class="flex-grow content">{{ infos.user_id }}</div>
        </div>
        <div class="flex w-full mb-7 mt-[22px]">
          <div class="label w-[119px]">存证地址</div>
          <div class="flex-grow content flex items-center">
            {{ infos.addr }}
            <div
              class="modifyBtn ml-4"
              @click="
                copyText(infos.addr);
                syMessage.success('复制成功');
              "
            >
              复制
            </div>
          </div>
        </div>
      </div>
    </div>
    <common-dialog
      @closePopup="UploadPicturesShow = false"
      showMask
      type="element"
      :visible="UploadPicturesShow"
      :elementDialogProps="{
        title: '上传头像',
        width: '600px',
      }"
      :noPadding="true"
      :btnConfig="{
        type: 'noBorder',
        btns,
        btnFunctions: [
          {
            name: '取消',
            click: async () => {
              return callDialogMethod('headPortrait', 'cancel');
            },
          },
          {
            name: '确定',
            click: async () => {
              return callDialogMethod('headPortrait', 'Confirm');
            },
          },
        ],
      }"
    >
      <head-portrait
        v-if="UploadPicturesShow"
        ref="headPortrait"
        @close="UploadPicturesShow = false"
        @logoUrl="logoUrl"
      ></head-portrait>
    </common-dialog>
    <common-dialog
      @closePopup="changeNameDialogVisible = false"
      showMask
      type="element"
      :visible="changeNameDialogVisible"
      :elementDialogProps="{
        title: '修改姓名',
      }"
      :btnConfig="{
        btns,
        type: 'noBorder',
        btnFunctions: [
          {
            name: '取消',
            click: async () => {
              return true;
            },
          },
          {
            name: '确定',
            click: async () => {
              await changeUserName(name);
              return true;
            },
          },
        ],
      }"
    >
      <syDialogInput v-model:value="name"></syDialogInput>
    </common-dialog>
  </div>
</template>

<script lang="ts">
import { btns } from "@/config/btns";
import { $ajax } from "@/service";
import {
  syCommonDialog,
  GO_URLS,
  copyText,
  syMessage,
  syDialogInput,
} from "cqk-sy-ui";
import { ElMessage } from "element-plus";
import { defineComponent } from "vue";
import HeadPortrait from "./HeadPortrait.vue";

export default defineComponent({
  inject: ["passwordStatus", "setType"],
  components: {
    CommonDialog: syCommonDialog,
    HeadPortrait,
    syDialogInput,
  },
  props: ["infos"],
  data() {
    return {
      UploadPicturesShow: false,
      changeNameDialogVisible: false,
      name: "",
      btns,
    };
  },
  computed: {
    __status() {
      return (this as any).passwordStatus;
    },
    __setType() {
      return (this as any).setType;
    },
    getuid() {
      return JSON.parse(String(sessionStorage.getItem("user"))).id;
    },
    syMessage() {
      return syMessage;
    },
  },
  methods: {
    copyText,
    async changeUserName(name: string) {
      const res = await $ajax({
        type: "patch",
        url: GO_URLS.user + `/` + this.getuid,
        params: { user: name },
      });
      if (res) {
        this.$emit("ToUpdate");
        ElMessage.success("修改成功");
      }
    },
    async callDialogMethod(refName: string, methodName: string) {
      return (this.$refs as any)[refName][methodName]();
    },
    // 显示图片上传组件
    upload() {
      this.UploadPicturesShow = true;
    },
    async logoUrl(data: any) {
      const res = await $ajax({
        type: "patch",
        url: GO_URLS.user + `/` + this.getuid,
        params: { icon: (data || {}).url },
      });
      if (res) {
        this.$emit("ToUpdate");
        ElMessage({
          message: "头像上传成功",
          type: "success",
        });
      }
    },
  },
});
</script>

<style scoped lang="scss">
.user-icon {
  .box {
    width: 46px;
    height: 46px;
    background: rgba(242, 244, 246, 1);
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    line-height: 46px;
    img {
      width: 100%;
      height: 100%;
    }
    i {
      font-size: 28px;
      color: #bfbfbf;
    }
  }
  p {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: rgba(121, 125, 132, 1);
    line-height: 35px;
    margin: 0;
  }
}

.label,
.content {
  font-size: 14px;
  font-weight: 400;
  color: var(--sy-gray);
}

.modifyBtn {
  font-size: 14px;
  font-weight: 400;
  color: var(--sy-blue);
  cursor: pointer;
}
</style>
