<template>
  <div class="bg-grey setup-con">
    <div class="setup-list">
      <!-- <item-info label="登录密码" icon></item-info> -->
      <item-info label="支付密码" icon @click.native="goToUpdatePwd" />
      <!-- <item-info label="实名认证" icon @click.native="goTo('authentication')" /> -->
      <item-info
        v-if="isApp"
        label="检查更新"
        icon
        :value="`当前版本: ${appVersion}`"
        @click.native="appUpdateApp"
      />

      <!-- <item-info label="隐私协议" icon></item-info> -->
      <item-info
        label="关于"
        icon
        @click.native="goToAboutUs('about-us')"
      ></item-info>
    </div>
    <div class="login-out" @click="handleLogout">退出登录</div>
  </div>
</template>

<script>
import itemInfo from "../../components/item-info.vue";
import { mapState, mapMutations } from "vuex";
export default {
  components: { itemInfo },
  data() {
    return {};
  },
  computed: {
    ...mapState(["appVersion", "accountInfo", "appPlatform"]),
    isApp() {
      return this.appPlatform === "mall-ym";
    },
  },
  methods: {
    ...mapMutations(["clearAccountInfo"]),
    handleLogout() {
      this.clearAccountInfo();
      this.goHome();
    },
    goTo(name) {
      this.$router.push({ name });
    },
    goToAboutUs(name) {
      this.$router.push({ name });
    },
    appUpdateApp() {
      this.updateApp();
    },
    goToUpdatePwd() {
      let query = {};
      if (!this.accountInfo.isPayPassword) {
        query = { first: true, setup: 1 };
      }
      this.$router.push({ name: "update-pay-pwd", query });
    },
  },
};
</script>

<style lang="less">
.setup-con {
  height: 100%;
  .setup-list {
    padding: 0 16px;
    background-color: #ffffff;
    .item-info-con {
      &:last-child {
        border: 0;
      }
    }
  }
  .login-out {
    height: 50px;
    line-height: 50px;
    background-color: #ffffff;
    margin-top: 40px;
    font-size: 16px;
    color: #140603;
    text-align: center;
  }
}
</style>
