<template>
  <sail-page type="loading-view" title="设置" isHead>
    <div slot="content">
      <div id="setUpPage">
        <div class="setUpPage_content">
          <router-link class="link" to="/userProtocol">
          <div class="van-cell__title set__margin">
            <div class="setUpPage-main-icon">
             <div class="setUpPage-main-icon_left">
               <div class="setUpPage-main_content">用户协议</div>
             </div> 
            </div>
            <div class="setUpPage-main-icon_right">
              <div class="setUpPage-main-right_icon">
                <svg class="icon nav-right_icon" aria-hidden="true">
                  <use xlink:href="#icon-qianjin"/>
                </svg>
              </div>
            </div>
          </div>
        </router-link>
        <router-link class="link" to="/copyright">
          <div class="van-cell__title">
            <div class="setUpPage-main-icon">
             <div class="setUpPage-main-icon_left">
               <div class="setUpPage-main_content">版权信息</div>
             </div> 
            </div>
            <div class="setUpPage-main-icon_right">
              <div class="setUpPage-main-right_icon">
                <svg class="icon nav-right_icon" aria-hidden="true">
                  <use xlink:href="#icon-qianjin"/>
                </svg>
              </div>
            </div>
          </div>
        </router-link>
        <!-- <router-link class="link" to="####">
          <div class='van-cell__title'>
            <div  class="setUpPage-main-icon">
             <div class="setUpPage-main-icon_left">
               <div class="setUpPage-main_content">去评价</div>
             </div> 
            </div>
            <div class="setUpPage-main-icon_right">
              <div class="setUpPage-main-right_icon">
                <svg class="icon nav-right_icon" aria-hidden="true">
                  <use xlink:href="#icon-qianjin"></use>
                </svg>
              </div>
            </div>
          </div>
          </router-link> -->
        </div>
        <div class="setUpPage_footer" v-show="loginInfo.phone">
          <!-- <router-link class="link" to="/MyPage"> -->
          <div class="van-cell__title" @click="handleLogout">
            <div class="setUpPage-main-icon">
             <div class="setUpPage-main-icon_left">
               <div class="setUpPage-main_content" >退出登录</div>
             </div> 
            </div>
            <div class="setUpPage-main-icon_right">
              <div class="setUpPage-main-right_icon">
                <svg class="icon nav-right_icon" aria-hidden="true">
                  <use xlink:href="#icon-qianjin"/>
                </svg>
              </div>
            </div>
          </div>
        <!-- </router-link> -->
        </div>
        
      </div>
    </div>
  </sail-page>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import store from "@/utils/store";
import sailPage from "@/components/sail-page.vue";
import { mapState } from "vuex";

export default {
  components: {
    sailPage
  },
  computed: {
    ...mapState({
      loginInfo: state => state.loginModule.loginInfo,
    })
  },
  data: function(){
    return {

    }; 
  },
  methods: {
    handleLogout(){
      Dialog.confirm({
        message: "确定要退出登录吗？"
      }).then(() => {
        // on confirm
        this.$store.dispatch("loginModule/sendLogout",).then(res => {
          
          if (res) {
            this.$store.commit("loginModule/CLEAR_LOGIN_INFO");
            store("hasLogout", true);
            Toast.success({
              duration: 1000,
              message: "退出成功"
            });
            setTimeout(() => {
              location.href = "/wx/index.html#/MyPage";
            }, 1000);
            //
          }
        });
      }).catch(() => {
        // on cancel
      });
        
    }
  }
};
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
  @bgWhite:#Fff;
  @portraitSize:50px;
  @fontSize:16px;
  @curSour:pointer;
    #setUpPage {
      width: 100%;
      .set__margin{
        margin-top: 13px;
      }
      .van-cell__title {
        border-bottom: 1px solid #F4F4F4;
          padding-top: 5px;
          display: flex;
          justify-content: space-between;
          .setUpPage-main-icon_right {
            display: flex;
          }
          .setUpPage-main-icon_left {
            display: flex;
          }
      }
      .nav-left_icon {
        font-size: 30px;
        color: #AFAFAF;
        margin-left: 10px;
      }
      .setUpPage-main_content {
        margin-left: 21px;
        height: 50px;
        line-height: 50px;
        color:#323232;
        font-size: @fontSize;
      }
      .nav-right_icon {
        font-size: 14px;
        color: #AFAFAF;
        line-height: 50px;
        height: 50px;
        margin-right: 10px;
      }
      .setUpPage-main-right_words {
        font-size: 14px;
        height: 50px;
        color: #ccc;
        line-height: 50px;
      }
      .portrait-img_status {
        display: flex;
        width: @portraitSize;
        height: @portraitSize;
        border-radius: 50%;
      }
      .setUpPage_footer {
        margin-top: 44px;
        background: #fff;
      }
      .setUpPage_content {
        background: #fff;
      }
    }
</style>