<template>
  <div class="account-wrap">
    <nav-bar title="设置"/>
    <van-cell-group>
      <!-- <van-cell class="bg10" title="个人资料" is-link @click="goNextPage('information')"/> -->
      <h4>账号绑定</h4>
      <van-cell
        class="line hasValue"
        :class="{noBind: !data.mobile}"
        title="手机号"
        :value="data.mobile || '未绑定'"
        :is-link='!data.mobile'
        @click="goNextPage('editMobile')"
      />
      <van-cell
        class="line hasValue email"
        :class="{noBind: !data.email}"
        title="邮箱"
        :value="data.email || '未绑定'"
        :is-link='!data.email'
        @click="goNextPage('editMail')"
      />
      <div class="flex_sb align-c bindAccount" v-show="false">
        <div class="title">
          <p>微信</p>
          <span v-if="data.wechat">{{data.wechat}}</span>
        </div>
        <div class="switch-wrap">
          <van-switch v-model="wechatChecked" />
        </div>
      </div>
      <div class="flex_sb align-c bindAccount" v-show="false">
        <div class="title">
          <p>微博</p>
          <span v-if="data.weibo">{{data.weibo}}</span>
        </div>
        <div class="switch-wrap">
          <van-switch v-model="weiboChecked" />
        </div>
      </div>
      <div class="flex_sb align-c bindAccount noline" v-show="false">
        <div class="title">
          <p>facebook</p>
          <span v-if="data.facebook">{{data.facebook}}</span>
        </div>
        <div class="switch-wrap">
          <van-switch v-model="facebookChecked" />
        </div>
      </div>
      <h4>安全设置</h4>
      <van-cell class="line hasValue" title="登录密码" value="修改" is-link @click="goNextPage('editPassword')"/>
    </van-cell-group>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";

export default {
  name: "Account",
  components: {
    NavBar
  },
  data() {
    return {
      wechatChecked: false,
      weiboChecked: false,
      facebookChecked: false,
      data: {}
    };
  },
  created() {
    this.getData();
    let loginUserInfo = this.$util.getLoginUserInfo();
    if (loginUserInfo) {
      this.data = JSON.parse(decodeURIComponent(loginUserInfo));
      if (this.data.wechat) this.wechatChecked = true;
      if (this.data.weibo) this.weiboChecked = true;
      if (this.data.facebook) this.facebookChecked = true;
    }
  },
  methods: {
    // 获取数据
    getData() {
      let params = {};
      params.url = this.$apis.api_user_info_get;
      this.$net.req(params, this).then(
        res => {
          this.data = res.data;
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 跳转个人中心页面
    goNextPage(val) {
      let lang = this.$store.state.langStr;
      if (val === "editMobile") {
        if (this.data.mobile) return;
      }
      if (val === "editMail") {
        if (this.data.email) return;
      }
      this.$router.push({
        path: "/" + lang + "/user/" + val
      });
    }
  }
};
</script>

<style scoped lang='less'>
.account-wrap {
  background: rgba(249, 249, 249, 1);
  min-height: 100vh;
  .van-hairline--top-bottom:after {
    border: 0;
  }
  .van-cell-group {
    > h4 {
      font-size: 20px;
      font-weight: 600;
      color: rgba(0, 0, 0, 1);
      line-height: 28px;
      margin: 16px 0 16px 20px;
    }
    .bindAccount {
      width: 100%;
      height: 60px;
      padding: 0 20px;
      background: rgba(255, 255, 255, 1);
      position: relative;
      .title {
        display: flex;
        align-items: center;
        p {
          font-size: 15px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          margin-right: 10px;
        }
        span {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 60px;
          height: 20px;
          background: rgba(255, 243, 224, 1);
          border-radius: 2px;
          font-size: 12px;
          font-weight: 400;
          color: rgba(255, 179, 85, 1);
        }
      }
    }
    .bindAccount:after {
      content: "";
      bottom: 0;
      position: absolute;
      left: 20px;
      right: 20px;
      height: 1px;
      background: #ddd;
    }
    .bindAccount.noline:after {
      height: 0;
    }
    .email:after {
      border: 0;
    }
  }
}
</style>
