<template>

  <div style="background-color: #f5f5f5;" class="user_setting_box">
    <van-nav-bar title="设置" left-text="返回" @click-left="$route_back" left-arrow>
    </van-nav-bar>
    <div class="user_index_scroller_com">

      <scroller>

        <van-cell-group class="user-group">
          <van-cell icon="user-circle-o" title="账号与安全" is-link to="/safe" />
        </van-cell-group>

        <van-cell-group class="user-group">
          <van-cell icon="comment-o" title="帮助与反馈" is-link to="/help" />
          <van-cell icon="setting-o" title="关于" is-link to="/about" />
        </van-cell-group>
        <van-cell-group class="user-group">
          <van-cell @click="clear_cache" icon="brush-o" title="清除缓存" is-link />
        </van-cell-group>

        <div style="padding:0.32rem;"><van-button size="large" @click="logout">退出登录</van-button></div>
      </scroller>

    </div>



  </div>

</template>

<script>

  import { removeToken } from '@/utils/auth'
  export default {

    methods:{
      clear_cache(){
        let self = this
        this.$dialog.confirm({
          title: '清除缓存',
          message: '您确定要清除缓存吗？'
        }).then(() => {
          self.$store.dispatch('clear_cache')
          self.$toast('清除成功')
        }).catch(() => {
          // on cancel
        });
      },
      logout(){
        let self = this
        this.$dialog.confirm({
          title: '退出登录',
          message: '您确定要退出吗？'
        }).then(() => {
          removeToken()
          if (window.plus) {
            plus.storage.removeItem('user_info')
          } else {
            localStorage.removeItem('user_info')
          }
          self.$store.dispatch('clear_cache')
          self.$router.push({name: 'login'})
        }).catch(() => {
          // on cancel
        });

      }
    },
    data(){
      return {
        userinfo: this.$store.getters.user_info
      }
    }
  }
</script>

<style scoped>
  .user_setting_box /deep/ .van-cell__left-icon{
    color:#323233;
  }
  .user-group{margin-top:0.16rem;}
  .user_index_scroller_com{height: 100%; position: relative;}
  .user_index_header_com{height: 3.5rem; position: relative; z-index:2; padding-top:0.6rem;}
  .header_avatar_com{padding:0.32rem;}
  .user_nickname_com{text-align: center; line-height: 2;}
  .user_index_header_com .header_avatar{width:1.5rem; display: block; margin:0 auto;
    height: 1.5rem;
    -webkit-border-radius: 2.5rem;
    -moz-border-radius: 2.5rem;
    border-radius: 2.5rem;}
  .user_index_header_bg{position: absolute; width:20rem;
    height: 20rem;
    -webkit-border-radius: 5rem;
    top:-16rem;
    left:50%;
    margin-left:-10rem;
    background-color: #b8cc70;
    -moz-border-radius: 10rem;
    border-radius: 10rem; z-index:1;}
</style>
