<template>
  <div>
    <!-- 头部标签 -->
    <van-sticky>
      <header class="header-wrap">我的</header>
    </van-sticky>

    <!-- 内容 -->
    <div class="con">
      <!-- 个人信息 -->
      <van-cell-group inset>
        <van-row gutter="20" class="user-box">
          <van-col span="6">
            <div>
              <van-image
                width="2rem"
                height="2rem"
                fit="fill"
                :src="userInfo.portrait"
              />
            </div>
          </van-col>
          <van-col span="18">
            <div class="user-info-wrap">
              <div class="user-name">{{ userInfo.name }}</div>
              <p>{{ userInfo.position }}</p>
              <div class="tag-wrap">
                <!-- <van-tag color="#cbcdfb">隐患上报人</van-tag>
                <van-tag color="#b5e2f1">隐患整改人</van-tag>
                <van-tag color="#bed9fd">检查专员</van-tag> -->
              </div>
            </div>
          </van-col>
        </van-row>
      </van-cell-group>

      <!-- 设置 -->
      <!-- <van-cell-group inset class="my-cell-group">
        <div class="set-wrap">
          <van-image
            width="0.613rem"
            height="0.613rem"
            fit="fill"
            :src="require('@/assets/myTerritory/set.png')"
          />
          <span>设置</span>
        </div>
      </van-cell-group> -->
      <van-cell-group inset class="my-cell-group">
        <div
          class="set-wrap"
          v-for="(item, key) in menus"
          :key="key"
          @click="$router.push({ name: item['name'] })"
        >
          <van-image
            width="0.613rem"
            height="0.613rem"
            fit="fill"
            :src="item['img']"
          />
          <span>{{ item["title"] }}</span>
        </div>
      </van-cell-group>
    </div>
    <!-- 退出系统 -->
    <footer class="sign-out">
      <van-button type="info" block @click="logout">退出系统</van-button>
    </footer>

    <!-- tanBar -->
    <tab-bar :index="2"></tab-bar>
  </div>
</template>

<script>
import tabBar from "@/components/TabBar";
import { removeToken } from "@/utils/auth"; // get token from cookie
import {
  getUserInfo,
  removeLocalUserInfo,
  removeUserInfo,
} from "@/utils/userInfo";
export default {
  components: {
    tabBar,
  },
  data() {
    return {
      menus: [
        // 菜单
        {
          title: "我的权限",
          img: require("@/assets/myTerritory/role.png"),
          name: "my-role",
        },
        {
          title: "修改密码",
          img: require("@/assets/myTerritory/set.png"),
          name: "my-reset-pas",
        },
        {
          title: "签到",
          img: require("@/assets/myTerritory/set.png"),
          name: "my-sign",
        },
      ],
      userInfo: {
        portrait: require("@/assets/myTerritory/touxiang.png"),
        name: getUserInfo() ? getUserInfo().userName : "xxx",
        position: getUserInfo() ? getUserInfo().deptName : "xxx部",
      },
    };
  },
  mounted() {},
  methods: {
    logout() {
      removeToken();
      // removeLocalUserInfo()
      removeUserInfo();
      sessionStorage.clear();
      this.$router.push("/login");
      // location.reload();
    },
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.header-wrap {
  width: 100%;
  height: 50px;
  background-color: #2980f7;
  font-size: 17px;
  line-height: 50px;
  color: white;
  text-align: center;
}
.con {
  // height: calc(100% - 110px);
  padding: 10px 0 50px 0;
  background-color: #f0f1f5;
  position: relative;
  .user-box {
    display: flex;
    align-items: center;
  }
  .user-info-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .user-name {
      font-size: 17px;
      font-weight: bold;
    }

    .tag-wrap {
      .van-tag {
        margin-right: 10px;
        margin-top: 3px;
        padding: 2px 4px;
      }
    }
  }

  // .my-cell-group {
  //   padding: 10px 10px !important;
  //   .set-wrap {
  //     height: 0.8rem;
  //     display: flex;
  //     align-items: center;
  //     span {
  //       margin-left: 0.2666rem;
  //       font-size: 15px;
  //       font-weight: bold;
  //     }
  //   }
  // }
  .my-cell-group {
    padding: 10px 10px !important;
    .set-wrap {
      height: 1.1rem;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e8e8e8;
      &:last-child {
        border-bottom: none;
      }
      span {
        margin-left: 0.2666rem;
        font-size: 13px;
        font-weight: none;
      }
    }
  }
}

.sign-out {
  width: 96%;
  position: fixed;
  bottom: 1.86667rem;
  left: 0px;
  right: 0;
  margin: auto;
  overflow: hidden;
  border-radius: 5px;
  button {
    font-size: 15px;
    font-weight: bold;
  }
}
.van-cell-group--inset {
  margin: 0 10px 10px;
  padding: 10px 10px 15px;
}
</style>
