<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",
                },
            ],
      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>
