<template>
  <div class="mine_page p0-100">
    <div class="mine_l">
      <router-link :to="item.path" v-for="(item, i) in list" :key="i">
        <div
          :class="i == index ? 'active' : ''"
          @click="index = i"
          style="position: relative;"
        >
          {{ item.name }}
          <span
            v-if="item.flag"
            style="position: absolute;
              width: 10px;
              height: 10px;
              background-color: red;
              border-radius: 50%;
              top: 15px;
              margin-left: 10px;"
          ></span>
        </div>
      </router-link>
      <div @click="logout">退出登录</div>
    </div>
    <div class="mine_r">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { getMsgCount } from '@/api/home/news';
export default {
  data() {
    return {
      index: 0,
      list: [
        {
          path: '/mine/info',
          name: '基本信息'
        },
        {
          path: '/mine/account',
          name: '账户安全'
        },
        {
          path: '/mine/ollection',
          name: '我的收藏'
        },
        {
          path: '/mine/news',
          name: '消息通知',
          flag: null
        }
      ]
    };
  },
  watch: {
    $route(newVal, oldVal) {
      if (newVal.path === '/mine/info') {
        this.index = 0;
      }
    }
  },
  methods: {
    async logout() {
      this.$confirm('确定退出账号吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/';
        });
      });
    }
  },
  created() {
    getMsgCount().then(({ data }) => {
      this.list[3].flag = data;
    });
    let { path } = this.$route;
    this.index = this.list.findIndex(item => {
      return item.path == path;
    });
  }
};
</script>
<style lang="scss" scoped>
.mine_page {
  display: flex;
  .mine_l {
    width: 310px;
    max-height: 340px;
    background-color: #f8f8f8;
    margin-right: 10px;
    border-radius: 6px;
    padding: 20px 0;
    div {
      cursor: pointer;
      font-size: 20px;
      text-align: center;
      height: 60px;
      line-height: 60px;
    }
    // div:hover {
    //   color: #fff;
    //   font-weight: bold;
    //   background-color: #3394ff;
    // }
    .active {
      color: #fff;
      font-weight: bold;
      background-color: #3394ff;
    }
  }
  .mine_r {
    flex: 1;
    padding: 30px;
    background-color: #f8f8f8;
  }
}
</style>
