<template>
  <view class="content">
    <view class="header-con" :style="{background:appTheme}">
      <view class="header" v-if="token">
        <image :src="user.headimg" class="headimage" />
        <text>{{user.name||user.name}}</text>
      </view>
      <view class="header2" v-else @click="handleLogin">
        <view class="text"><text>登录</text>查看更多信息</view>
      </view>
    </view>
    <!-- 列表 -->
    <view class="infolist">
      <view class="item borderRadius" @click="handleEditClick">
        <view class="left">
          性别
        </view>
        <view class="right"><text>{{user.sex==0?"未知":user.sex==1?'男':'女'}}</text>
          <icon class="t-icon t-icon-bianji3"></icon>
        </view>
      </view>
      <view class="item borderRadius" @click="handleEditClick">
        <view class="left">
          年龄(岁)
        </view>
        <view class="right"><text>{{user.age?user.age:user.mage?user.mage:0}}</text>
          <icon class="t-icon t-icon-bianji3"></icon>
        </view>
      </view>
      <view class="item borderRadius" @click="handleEditClick">
        <view class="left">
          身高(cm)
        </view>
        <view class="right"><text>{{user.height?user.height:0}}</text>
          <icon class="t-icon t-icon-bianji3"></icon>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="wxlist borderRadius">
      <view class="list" @tap="navTo('/pageTwo/me/manage')">
        <view class="item border-bottom">
          <view class="left">
            <i class="t-icon t-icon-shoucang"></i>
            <view class="name">成员管理</view>
          </view>
          <view class="right">
            <icon class="icon iconfont icon-arrow-right" color="#999"></icon>
          </view>
        </view>
      </view>
      <!--  -->
      <view class="list" @tap="navTo('/pageTwo/me/history')">
        <view class="item border-bottom">
          <view class="left">
            <i class="t-icon t-icon-gonglve"></i>
            <view class="name">历史记录</view>
          </view>
          <view class="right">
            <icon class="icon iconfont icon-arrow-right" color="#999"></icon>
          </view>
        </view>
      </view>
      <!--  -->
      <view class="list" @tap="navTo('/pageTwo/me/feedBack')">
        <view class="item border-bottom">
          <view class="left">
            <i class="t-icon t-icon-pinglun"></i>
            <view class="name">意见反馈</view>
          </view>
          <view class="right">
            <icon class="icon iconfont icon-arrow-right" color="#999"></icon>
          </view>
        </view>
      </view>
      <!--  -->
      <view class="list" @click="handleClick('device')">
        <view class="item border-bottom">
          <view class="left">
            <icon class="t-icon t-icon-shouhou"></icon>
            <view class="name">设备管理</view>
          </view>
          <view class="right">
            <icon class="icon iconfont icon-arrow-right" color="#999"></icon>
          </view>
        </view>
      </view>
      <!--  -->
      <view class="list" @click="handleClick('adult')">
        <view class="item border-bottom">
          <view class="left">
            <icon class="t-icon t-icon-hezuo"></icon>
            <view class="name">儿童测量</view>
          </view>
          <view class="right">
            <icon class="icon iconfont icon-arrow-right" color="#999"></icon>
          </view>
        </view>
      </view>
    </view>
    <view class="btn ml-15 mr-15" v-if="token" @click="handleOutLogin">退出登录</view>
    <SignUp></SignUp>
    <userPopup></userPopup>
  </view>
</template>
<script>
  import {
    mapState
  } from "vuex";
  import SignUp from '@/components/signup/signup.vue';
  import userPopup from '@/components/userLogin.vue'
  export default {
    data() {
      return {
        token: null,
      }
    },
    components: {
      userPopup,
      SignUp,
    },
    computed: {
      ...mapState(["user", "configBox", "appTheme"]),
    },
    onTabItemTap() {
      this.$store.commit("changeEdit", false);
    },
    onLoad() {
      // 导航栏颜色
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: this.appTheme,
      })
      // 
      this.token = uni.getStorageSync("token")
    },
    methods: {
      handleLogin() {
        if (!uni.getStorageSync('token')) {
          uni.redirectTo({
          	url: '/pageTwo/login/login'
          })
          // that.$store.commit("changeUserLogin", true)
          return
        }
      },
      handleOutLogin() {
        let that = this
        uni.showModal({
          title: '友情提示',
          content: '是否退出登录？',
          success: function(res) {
            if (res.confirm) {
              that.$model.getoutlogin({
                sessionid: uni.getStorageSync('sessionid')
              }).then((res) => {
                that.$tools.msg(res.message)
                if (res.code != 0) return
                console.log('确定退出', res)
                uni.clearStorageSync()
                uni.setStorageSync('sessionid', null)
                that.$store.commit("changeLogout", false);
                uni.reLaunch({
                  url: "/pages/index/index"
                })
              })
            } else if (res.cancel) {
              that.$tools.msg("您已取消操作！");
            }
          },
        })
      },
      handleClick(ind) {
        let that = this
        if (!uni.getStorageSync('token')) {
          uni.redirectTo({
          	url: '/pageTwo/login/login'
          })
          // that.$store.commit("changeUserLogin", true)
          return
        }
        if (ind == 'adult' && that.configBox.referappid) {
          console.log("跳转儿童小程序", uni.getStorageSync('userid'))
          uni.navigateToMiniProgram({
            appId: that.configBox.referappid,
            path: 'pages/index/index?userid=' + uni.getStorageSync('userid'),
            extraData: {},
          })
          return
        }
        if (ind == 'device' && that.configBox.businessappid) {
          uni.navigateToMiniProgram({
            appId: that.configBox.businessappid,
            path: 'pages/index/index',
            extraData: {},
          })
          return
        }
      },
      navTo(url) {
        if (!uni.getStorageSync('token')) {
          uni.redirectTo({
          	url: '/pageTwo/login/login'
          })
          // that.$store.commit("changeUserLogin", true)
          return
        }
        uni.navigateTo({
          url
        })
      },
      handleEditClick() {
        if (!uni.getStorageSync('token')) {
          uni.redirectTo({
          	url: '/pageTwo/login/login'
          })
          // that.$store.commit("changeUserLogin", true)
          return
        }
        this.$store.commit("changeEdit", true);
      },
    }
  }
</script>
<style scoped="scoped" lang="scss">
  .content {
    min-height: 100vh;
    margin-top: 110px;
  }

  .header-con {
    height: 95px !important;
  }

  .wxlist {
    height: auto;
    overflow: hidden;
    position: relative;
    margin: 0 15px;
    padding: 0 15px;
    background: #fff;
    border-radius: 10px;

    .item {
      width: auto;
      font-size: 14px;
      line-height: 55px;
      height: 55px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      // border-bottom: 1px solid #dfdfdf;

      .left {
        display: flex;

        .name {
          float: left;
          color: #333;
          position: absolute;
          left: 27px;
          top: 0;
        }
      }
    }
  }

  .infolist {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px;

    .item {
      width: 30%;
      padding: 10px 0;
      text-align: center;
      background: #fff;
      border-radius: 10px;
      position: relative;
    }

    .right {
      display: flex;
      justify-content: center;
      margin-top: 5px;

      text {
        display: inline-block;
        font-size: 16px;
        color: #666;
        font-weight: 700;
      }

      icon {
        position: absolute;
        right: 7px;
        bottom: 9px;
      }
    }
  }

  .btn {
    width: auto;
    margin-top: 50px;
  }

  /deep/ .header {
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0;
  }

  /deep/ .header text {
    background: inherit;
    border: none;
    width: 100%;
    display: block;
    color: #fff;
    text-align: center;
    margin-right: 0;
    font-size: 16px;
  }
</style>
