<template>
  <div class="left">
    <div class="top">
      <div class="headPortrait">
        <input type="file" ref="avatarInput" style="display: none" @change="uploadAvatar" accept="img/png img/jpg" />
        <img @click.native="selectAvatar" :src="this.avatar" title="更换头像" class="upAvatar" />
      </div>
      <div class="message">
        <h2>{{ this.nickName }}</h2>
        <div class="threebox">
          <div @click="changeIndex('0-1')">修改密码</div>
          &nbsp;
        </div>
      </div>
    </div>
    <el-row class="tac">
      <el-col :span="50">
        <el-menu default-active="1-1" class="el-menu-vertical-demo">
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Avatar />
              </el-icon>
              <span>家政人员信息 </span>
            </template>

            <el-menu-item @click="changeIndex('1-1')" class="second-menu" index="1-1">基础信息
            </el-menu-item>
            <el-menu-item @click="changeIndex('1-2')" class="second-menu" index="1-2">家政经历
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item @click="changeIndex('2')" index="2">
            <el-icon><icon-menu /></el-icon>
            <span>发布状态</span>
          </el-menu-item>
          <el-menu-item @click="changeIndex('3')" index="3">
            <el-icon>
              <document />
            </el-icon>
            <span>我的订单</span>
          </el-menu-item>
          <el-menu-item @click="changeIndex('4')" index="4">
            <el-icon>
              <ZoomOut />
            </el-icon>
            <span>我的评价</span>
          </el-menu-item>
          <el-menu-item @click="showHelp" index="5">
            <el-icon>
              <QuestionFilled />
            </el-icon>
            <span>帮助中心</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  Avatar,
  Document,
  Menu as IconMenu,
  Location,
  ZoomOut,
} from "@element-plus/icons-vue";
import { mapState } from "vuex";
import { mapMutations } from "vuex";
import { userInfo, avatarUp } from "@/api";
export default {
  name: "PerLeft",
  data() {
    return {
      nickName: "",
      avatar: "",
      default: '1-1',
    };
  },
  created() {
    this.default = this.defaultIndex
    this.init()
  },
  computed: {
    ...mapState("PerCent", ["showBasic", "showExperience", "defaultIndex"]),
    ...mapState("LoginStore", ["login_name"]),
  },
  components: {
    Avatar,
    Document,
    IconMenu,
    Location,
    ZoomOut,
  },

  methods: {
    ...mapMutations("PerCent", ["convertIndex"]),
    init() {
      userInfo().then((response) => {
        if ((response.data.code = 200)) {
          this.avatar = response.data.data.avatar;
          this.nickName = response.data.data.nickName;
        } else {
          alert("服务器出错了，请重试!");
        }
      });
    },
    selectAvatar() {
      if (confirm('确定要修改头像吗')) {
        // 用户点击了确定按钮
        this.$refs.avatarInput.click();
      } else { }
    },
    uploadAvatar(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('img', file);
      if (file !== undefined) {
        avatarUp(formData).then((response) => {
          if (response.data.code === 200) {
            this.init()
            alert("修改头像成功！");
          } else if (response.data.code == 507) {
            alert(response.data.msg);
          } else {
            alert("头像上传失败!");
          }
        });
      }
    },
    changeIndex(i) {
      this.convertIndex(i);
    },
    showHelp() {
      this.$router.push("/UserHelp");
    }
  },
};
</script>

<style scoped>
.left {
  position: absolute;
  top: 2rem;
  left: 4rem;
  border: 1px solid gray;
  border-radius: 10px;
  overflow: hidden;
}

.top {
  position: relative;
  width: 100%;
  height: 8rem;
  background-color: rgb(246, 248, 247);
  border-bottom: 1px solid gray;
}

.headPortrait {
  width: 80px;
  height: 80px;
  background-color: antiquewhite;
  border-radius: 40px;
  position: absolute;
  top: 1rem;
  left: 1rem;
  overflow: hidden;
}

.message {
  position: absolute;
  top: 0.5rem;
  left: 9rem;
}

.message h2 {
  font-size: 1.3rem;
  margin-left: -0.5rem;
}

.message div {
  border: 0.5px solid rgb(162, 160, 160);
  font-size: 0.7rem;
  margin-left: 0rem;
  display: inline-block;
  cursor: pointer;
}

.message .threebox {
  border: none;
  margin-left: 1em;
}

[class*="el-col-"] {
  box-sizing: border-box;
  width: 20rem;
}

.el-sub-menu .el-menu-item {
  height: var(--el-menu-sub-item-height);
  line-height: var(--el-menu-sub-item-height);
  margin-left: 2rem;
}

img {
  width: 100%;
  height: 100%;
}</style>
