<template>
  <!-- 个人账户管理 -->
  <div class="user-wrapper wrapper_1200">
    <div class="router-tips">
      <nuxt-link to="/">首页></nuxt-link>
      <nuxt-link :to="{ path: '/user', query: { types: 0 } }">个人中心></nuxt-link>
      <span>{{ userMenu[indexCur].title }}</span>
    </div>
    <div class="content clearfix">
      <div class="left-box">
        <div class="user-menu">
          <div class="svip">
            <div class="box">
              <img
                class="avatar"
                :src="imgUrl + userInfo.headimg"
                @click="upLoadHeadImgDialog"
                alt
                v-if="userInfo.headimg"
              />

              <img
                src="@/assets/images/default_headimg.png"
                alt
                v-else
                @click="upLoadHeadImgDialog"
              />
              <i class="el-icon-edit"></i>
            </div>
            <!-- <img src="~assets/images/svipSign.png" class="sign" > -->
          </div>
          <p class="name">{{ userInfo.nickname }}</p>
          <div
            @click="goPage(menu, index)"
            class="menu-item"
            v-for="(menu, index) in userMenu"
            :key="index"
            :class="{ active: menuCur == menu.key }"
          >
            {{ menu.title }}
          </div>
        </div>
      </div>
      <div class="right-box">
        <NuxtChild />
      </div>
    </div>

    <el-dialog
      :visible="headDialog"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="13%"
      title="头像上传"
      center
    >
      <div class="UPhead">
        <UploadImage1
          UploadImage1Url="/upload/headimg"
          @input="uploadSccess($event)"
          :value="headimg"
        >
          <template v-slot:upload>
            <div class="upload_BOX">
              <div class="upload">
                <img src="~assets/images/downloadIMG.png" alt />
                <span>上传图片</span>
              </div>
            </div>
          </template>
        </UploadImage1>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="headDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="headSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Setting from "~/setting";
export default {
  name: "user",
  auth: false,
  data() {
    return {
      imgUrl: Setting.uplodBaseURL,
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      userMenu: [
        {
          key: 0,
          link: "/user",
          title: "账户与安全",
        },
        {
          key: 3,
          title: "收货地址",
          link: "/user/address_list",
        },
        {
          key: 6,
          title: "我的收藏",
          link: "/user/collect",
        },
        {
          key: 5,
          title: "我的积分",
          link: "/user/integral",
        },
        {
          key: 1,
          title: "我的优惠券",
          link: "/user/myCoupon",
        },
        {
          key: 2,
          title: "账户余额",
          link: "/user/balance",
        },
        {
          key: 4,
          title: "我的发票",
          link: "/user/invoice",
        },
      ],
      menuCur: 0,
      indexCur: 0,
      headDialog: false,
      headimg: "",
    };
  },

  watch: {
    $route: {
      immediate: true,
      // 深度观察监听
      deep: true,
      handler: function (val, oldVal) {
        var reg1 = new RegExp("/", "g");
        this.userMenu.forEach((el, index) => {
          if (el.link.replace(reg1, "") == val.path.replace(reg1, "")) {
            this.menuCur = el.key;
            this.indexCur = index;
          }
        });
      },
    },
  },
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: "个人中心-" + this.$store.state.titleCon,
    };
  },
  mounted() {
    var reg1 = new RegExp("/", "g");
    if (this.$route.query.types) {
      this.indexCur = JSON.parse(this.$route.query.types);
      this.userMenu.forEach((el) => {
        if (el.link.replace(reg1, "") == this.$route.path.replace(reg1, "")) {
          this.menuCur = el.key;
        }
      });
    } else {
      this.indexCur = 0;
    }
    console.log(this.indexCur, `indexCur`);

    console.log(this.menuCur, `active`);
  },
  methods: {
    goPage(menu, index) {
      this.menuCur = menu.key;
      this.$router.push({
        path: `${menu.link}`,
        query: { types: `${index}` },
      });
    },
    upLoadHeadImgDialog() {
      this.headDialog = true;
    },

    uploadSccess(e) {
      this.headimg = e;
    },
    // 上传头像
    headSubmit() {
      let obj = {
        headimg: this.headimg,
      };
      this.$axios.post(`/member/modifyheadimg`, obj).then((res) => {
        console.log(res);
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getInfo();
        this.headDialog = false;
        // this.$router.go(0);
      });
    },
    getInfo() {
      this.$axios
        .post(`/member/info`)
        .then((res) => {
          this.userInfo = res.data;
          localStorage.setItem("userInfo", JSON.stringify(res.data));
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.user-wrapper {
  margin-bottom: 30px;
  .content {
    display: flex;
    justify-content: space-between;
  }
  .left-box {
    width: 193px;
    .user-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 170px;
      background: #fff;
      color: #282828;
      font-size: 14px;
      .svip {
        background: url("~assets/images/vipUser.png") center/cover no-repeat;
        width: 59px;
        height: 62px;
        position: relative;
        .sign {
          width: 32px;
          height: 14px;
          position: absolute;
          bottom: -12px;
          left: 50%;
          margin-left: -18px;
        }
      }
      img {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        margin: 9px 1px;
      }
      .name {
        margin-top: 10px;
        padding: 0 15px;
      }
    }
    .user-menu {
      padding: 20px 0;
      background: #fff;
      .svip {
        width: 42px;
        height: 42px;
        border-radius: 100%;
        overflow: hidden;
        margin: auto;
        position: relative;
        cursor: pointer;
        .avatar {
          width: 100%;
          height: 100%;
        }
        .box {
          width: 100%;
          height: 100%;
        }
        .box:hover {
          .el-icon-edit {
            width: 100%;
            background: rgba($color: #fff, $alpha: 0.5);
            color: var(--themeColor);
            // color: #aaa;
            position: absolute;
            bottom: 0;
          }
          .el-icon-edit:before {
            margin-left: 14px;
          }
        }
      }
      .name {
        font-size: 13px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        text-align: center;
        margin: 10px 0 39px;
      }
      .menu-item:last-child {
        margin-bottom: 0;
      }
      .menu-item {
        display: block;
        margin-bottom: 30px;
        padding-left: 36px;
        cursor: pointer;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        &.active {
          color: var(--themeColor);
          // background: url("~assets/images/left-icon.png") no-repeat left center;
        }
      }
    }
  }
  .right-box {
    width: calc(1200px - 213px);
    min-height: 330px;
    padding-bottom: 30px;
    margin-left: 20px;
    background: #fff;
  }
  /deep/.el-dialog {
    .el-dialog__header {
      padding: 10px 20px 10px;
    }
    .el-dialog__body {
      padding: 0px 28px 0px;
    }
  }
  .UPhead {
    .upload_BOX {
      width: 152px !important;
      height: 152px !important;
      border-radius: 4px;
      border: 1px solid #dddddd;
      text-align: center;

      .upload {
        color: #ccc;
        padding-top: 50px;
        img {
          margin: auto;
          width: 22px;
          height: 20px;
        }
      }
    }
  }
}

.router-tips {
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  a {
    color: #333;
  }
  span {
    color: #999999;
  }
}
</style>
