<template>
  <view
    style="
      padding: 0 0;
      font-size: 28rpx;
      background-color: #39b4a84d !important;
    "
    class="commonPage commonPageBox"
  >
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <view class="bg_top">
      <u-icon
        @click="goSetting"
        class="setIcon"
        labelColor="#fff"
        labelPos="bottom"
        label="设置"
        name="setting"
        :style="`top:${(10 + statusBarHeight) * 2}rpx`"
        color="#fff"
        size="28"
      ></u-icon>
    </view>

    <view class="mine_box" :style="`top:${(45 + statusBarHeight) * 2}rpx`">
      <view class="per_mes">
        <image
          @click="goUserInfo"
          :src="userMes.avatar"
          v-if="userMes.avatar != null"
          class="per_mes_img color_shandow"
        ></image>
        <view class="user_vip_box">
          <view v-if="userMes.vip == 1" class="user_vip super">超级VIP</view>
          <view v-if="userMes.vip == 2" class="user_vip">众妙之门VIP</view>
          <view v-if="userMes.vip == 3" class="user_vip">吴门医述VIP</view>
        </view>

        <image
          src="@/static/icon/home_icon_logo.png"
          v-if="userMes.avatar == null"
          class="per_mes_img color_shandow"
        ></image>

        <view class="userInfoBox" style="width: calc(100% - 220rpx)">
          <template>
            <view class="name"
              >昵称：{{ userMes.nickname ? userMes.nickname : "未设置" }}</view
            >
          </template>

          <template v-if="userMes.tel">
            <view class="phone">手机号：({{ userMes.tel }})</view>
          </template>
          <template v-if="userMes.email">
            <view class="phone email">邮箱({{ userMes.email }})</view>
          </template>

          <!-- <text class="tong">累计读书5本
					<span style="margin: 0 20upx;">|</span> 今日读50分钟
				</text> -->
        </view>
        <br clear="both" />
      </view>
      <!-- <view class="now_vip" v-if="userMes.vip==0">
			<text>
				<image src="../../static/icon/mine_p.png" style="height: 44rpx;"></image>
				开通会员畅享海量内容
			</text>
			<b class="kt_btn" @click="onPageJump('./opeVip')">开通VIP</b>
		</view> -->

      <!-- <view class="now_vip" v-if="userMes.vip==1">
			<text>
				<image src="../../static/icon/mine_v.png"></image>
				尊贵的VIP会员
				<font style="font-size: 14rpx;margin-left: 20rpx;">{{userMes.vipValidtime}}到期</font>
			</text>
			<b class="kt_btn" @click="onPageJump('./opeVip')">立即续费</b>
		</view> -->
      <view
        style="
          padding: 20rpx;
          height: 200rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <view class="chong_zhi boxShadow box_fillet chongzhi_box">
          <!-- <view
          class="zhanghu"
          @click="onPageJump('/pages/mine/wallet/index/index')"
        >
          我的账户
          <image src="@/static/icon/icon_right.png" class="rightArrow"></image>
        </view> -->
          <view class="chong_list">
            <view class="left">
              <view
                class="chong_list_item"
                style="
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                  justify-content: space-between;
                "
                @click="onPageJump('/pages/mine/wallet/index/index')"
              >
                <view class="pay_item_img">
                  天医币<u-icon
                    @click.native.stop="openInfo()"
                    name="question-circle"
                    style="float: right; margin: 0 6rpx"
                  ></u-icon>
                  <!-- <image
                  style="width: 100%; height: 100%"
                  src="@/static/icon/pay_3.png"
                  mode="aspectFil"
                >
                </image> -->
                </view>

                <view class="text" style="line-height: 40rpx; display: flex">{{
                  userMes.peanutCoin ? userMes.peanutCoin : 0
                }}</view>
              </view>

              <view
                class="chong_list_item"
                style="
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                  justify-content: space-between;
                "
                @click="onPageJump('/pages/mine/wallet/jf/index')"
              >
                <view class="pay_item_img">
                  积分
                  <!-- <image
                  style="width: 100%; height: 100%"
                  src="@/static/icon/jifen2.png"
                  mode="aspectFil"
                >
                </image> -->
                </view>

                <view class="text" style="line-height: 40rpx">{{
                  userMes.jf ? userMes.jf : 0
                }}</view>
              </view>
            </view>
            <view
              class="chong_list_item"
              style="
                display: flex;
                align-items: center;
                margin-right: 0;
                justify-content: center;
              "
            >
              <view
                class="chong_btn"
                v-if="iosHide"
                @click="onPageJump('/pages/mine/wallet/recharge/index')"
                >充 值</view
              ></view
            >
          </view>
        </view>
        <view
          class="chong_zhi boxShadow box_fillet vip_box"
        >
          <view v-if="!userMes.userVip" class="noVip">
            <view class="zhanghu PM_font" style="text-align: center">
              <image
                class="vip_image"
                src="@/static/icon/noquanyi.png"
                mode="aspectFit"
              >
              </image>
              <text style="color: #c4d3d4">VIP</text>
            </view>

            <swiper
              :autoplay="true"
              :interval="3000"
              :duration="1000"
              style="width: 100%; height: 60rpx"
            >
              <swiper-item
                v-for="(item, index) in swiperList"
                style="width: 100%; height: 100%"
              >
                <view
                  style="
                    background: linear-gradient(
                        130deg,
                        rgb(46, 103, 106) 0%,
                        rgb(114, 173, 146) 100%
                      )
                      text;
                    text-align: center;
                  "
                  :style="item.style"
                  v-html="item.name"
                ></view>
              </swiper-item>
            </swiper>
          </view>
          <view v-else class="noVip hasVip">
            <view class="zhanghu PM_font" style="text-align: center">
              <image
                class="vip_image"
                src="@/static/icon/quanyi.png"
                mode="aspectFit"
              >
              </image>
              <text style="">VIP</text>
            </view>

            <view class="time"
              >{{ userMes.userVip.endTime.split(" ")[0] }}到期</view
            >
          </view>
        </view>
      </view>

      <view class="list_box">
        <view class="xiugai boxShadow box_fillet">
          <common-list
            :dataList="pageList"
            @hancleClick="handleClickTab"
            label="name"
          >
            <template slot="rightSlot" slot-scope="slotProps">
              <text
                class="fdButtonBox aui-text-success"
                style="line-height: 40rpx"
                >{{ slotProps.row.content }}</text
              >

              <view> </view>
            </template>
          </common-list>
        </view>
      </view>
    </view>

    <u-modal
      :show="signShow"
      :content="signContent"
      :showCancelButton="true"
      @cancel="signShow = false"
      @confirm="signOut"
    >
    </u-modal>
    <!-- 分享弹窗 -->
    <uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
      <uni-popup-share @select="haveSelected"></uni-popup-share>
    </uni-popup>

    <u-popup :show="infoShow" mode="center" round="6" backgroundColor="#fff">
      <view class="popup_box">
        <view class="title">温馨提示</view>

        <view class="content">
          <view class="center">
            &nbsp;&nbsp;&nbsp;&nbsp;【天医币】仅为我平台支付使用币种 。
            一人民币=一天医币，仅为了方便用户支付使用。<br />【天医币】可以用于在我平台支付书籍或课程使用。
            <br />【天医币】这个名称是为适应我们平台的定位属性，所起名称。与区块链虚拟货币无任何关系。
          </view>

          <view class="bottom">
            <view
              class="button_box"
              style="
                align-items: center;

                justify-content: center;
              "
            >
              <!-- <u-button
               size="small"
               text="不同意"
               @click="protocolShow=false"
             ></u-button> -->
              <u-button
                style="width: 200rpx; float: center"
                :plain="true"
                text="知道啦"
                color="#9b9b9b"
                size="small"
                @click="infoShow = false"
              ></u-button>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- <u-modal :show="infoShow" title="提示信息" :content=""></u-modal> -->
    <music-play :playData="playData"></music-play>
    <z-navigation></z-navigation>
  </view>
</template>

<script>
import musicPlay from "@/components/music.vue";
import $http from "@/config/requestConfig.js";
// import appShare, { closeShare } from '@/uni_modules/zhouWei-APPshare/js_sdk/appShare';
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      swiperList: [
        { name: "开通会员畅享更多活动" },
        { name: "众妙之门视频" },
        {
          name: "吴门医述视频",
        },
        { name: "专属视频视听" },
        {
          name: "读书相关权益",
        },
        { name: "活动报名<text style='color:red'>(折扣价)</text>" },
      ],
      infoShow: false, // 显示电子书相关
      showEbook: false, // 显示电子书相关
      userMes: {},
      signShow: false,
      signContent: "是否要退出登录？",
      playData: {},
      platform: null, // 设备系统
      pageList: [
        {
          name: "我的订单",
          url: "/pages/bookShop/orderList?type=mine",

          type: "switchTab",
        },
        // {
        //   name: "购物车",
        //   url: "../peanut/shopping",
        //   type: "pageJump",
        // },
        {
          name: "个人资料",
          url: "/pages/mine/userInfo/persData",

          type: "pageJump",
        },
        {
          name: "地址管理",
          url: "/pages/component/commonComponents/address/index?type=mine",
          type: "pageJump",
        },

        {
          name: "分享APP",
          type: "share",
        },

        {
          name: "关于我们",
          url: "/pages/mine/aboutUs/index",
          type: "pageJump",
        },
        //{ name: "设置", url: "/pages/mine/set/index", type: "pageJump" },
        // { name: "退出登录", type: "quitLogin" },
        // { name: "注销帐号", type: "loginOut" },
      ],
    };
  },
  //第一次加载
  onLoad(e) {
    // 隐藏原生的tabbar
    // uni.hideTabBar();
    // #ifdef APP-PLUS
    this.platform = uni.getSystemInfoSync().platform;
    // #endif
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  //页面显示
  onShow() {
    console.log(this.userInfo, "11111111111111");
    // 隐藏原生的tabbar
    // uni.hideTabBar();
    this.getData();
  },
  async onTabItemTap() {
    this.getData();
  },
  components: {
    musicPlay,
  },
  //方法
  methods: {
    ...mapMutations(["setUserInfo"]),
    openInfo() {
      this.infoShow = true;
    },
    goSetting() {
      this.onPageJump("/pages/mine/set/index");
    },
    goUserInfo() {
      this.onPageJump("/pages/mine/userInfo/persData");
    },
    handleClickTab(v) {
      console.log("v at line 259:", v);
      switch (v.type) {
        case "pageJump":
          this.onPageJump(v.url);
          break;
        case "switchTab":
          this.switchTab(v.url);
          break;
        case "share":
          //分享
          this.newOnShare();
          break;
        case "quitLogin":
          //退出登录
          this.signShow = true;
          break;
        case "loginOut":
          //注销账号
          this.logout();
          break;
      }
    },
    haveSelected(data) {
      console.log(data, " 选择的是");
      if (data.index == 0) {
        // 分享到好友
        uni.share({
          provider: "weixin",
          scene: "WXSceneSession",
          type: 0,
          href: this.$apkUrl,
          title: "吴门医述",
          summary: "我正在使用吴门医述提升自己，赶紧跟我一起来体验吧！",
          imageUrl: "static/icon/home_icon_logo.png",
          success: function (res) {
            console.log("success:" + JSON.stringify(res));
          },
          fail: function (err) {
            console.log("fail:" + JSON.stringify(err));
          },
        });
      } else if (data.index == 1) {
        // 分享到朋友圈
        uni.share({
          provider: "weixin",
          scene: "WXSceneTimeline",
          type: 0,
          href: this.$apkUrl,
          title: "吴门医述",
          summary: "我正在使用吴门医述提升自己，赶紧跟我一起来体验吧！",
          imageUrl: "static/icon/home_icon_logo.png",
          success: function (res) {
            console.log("success:" + JSON.stringify(res));
          },
          fail: function (err) {
            console.log("fail:" + JSON.stringify(err));
          },
        });
      }
    },
    switchTab(url) {
      uni.switchTab({
        url: url,
      });
    },
    getData() {
      // 获取个人信息
      if (this.userInfo.id != undefined) {
        this.$http.post("common/user/getUserInfo").then((res) => {
          this.userMes = res.result;
          if (this.userMes.userVip) {
            // console.log(
            //   "this.userMes.vipValidtime at line 510:",
            //   this.userMes.vipValidtime
            // );
            // this.userMes.vipValidtime = this.userMes.vipValidtime.substring(
            //   0,
            //   this.userMes.vipValidtime.indexOf(" ")
            // );
          }
        });
      }
    },

    // 新写分享
    newOnShare() {
      this.$refs.share.open();
    },

    // 注销账户
    logout() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确定要注销当前账户吗？",
        success: function (res) {
          if (res.confirm) {
            uni.showModal({
              title: "提示",
              showCancel: false,
              content: `注销申请已提交成功,请联系客服进行后续操作：022-24142321`,
              success: function (res1) {
                if (res1.confirm) {
                  that.signOut();
                }
              },
            });
          } else if (res.cancel) {
            // 取消操作
          }
        },
      });
    },
    // 跳转
    onGoing() {
      uni.showToast({
        icon: "none",
        title: "开发中，敬请期待...",
      });
    },
    onPageJump(url) {
      console.log(url, "url");
      uni.navigateTo({
        url: url,
      });
    },

    // 退出登录
    signOut() {
      this.signShow = false;
      this.setUserInfo({
        token: null,
      });
      uni.reLaunch({
        url: "/pages/user/login/login",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";

.commonPage {
  
  position: relative;
}
.per_mes {
  position: relative;
  margin: 0rpx 40rpx 60rpx 40rpx;
  align-items: center;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .per_mes_img {
    // @include themeBorder(10rpx,10rpx,#4E79A3, #A6D8DC);
    width: 140rpx;
    height: 140rpx;
    // background-color: #fff;
    border-radius: 140rpx;
    margin: 0 0 0 0;
    float: left;
  }

  view {
    float: left;
    // margin-top: 20rpx;

    .name {
      width: 100%;
      // display: inline-block;
      font-weight: bold;
      font-size: 38upx;
      margin-bottom: 10rpx;
      color: #fff !important;
    }

    .phone {
      font-size: 28rpx;
      color: #fff;
    }

    .tong {
      color: #999;
      font-size: 25upx;
    }

    .per_user_img {
      display: inline-block;
      width: 40upx;
      height: 40upx;
      margin-left: 10rpx;
      vertical-align: super;
    }
  }
}

.now_vip {
  background-color: #fff;
  // border-radius: 20upx;
  margin: 0 0 30upx 0;
  padding: 0 30upx;
  height: 120upx;
  background-image: linear-gradient(90deg, #feeed6 0%, #f5ce99 100%);

  image {
    width: 46rpx;
    height: 50rpx;
    display: inline-block;
    vertical-align: text-bottom;
    margin: 0 10rpx 0 0;
  }

  text {
    font-size: 30upx;
    line-height: 120upx;
    color: #977749;
    font-weight: bold;
  }

  .kt_btn {
    font-size: 26upx;
    display: block;
    float: right;
    border-radius: 50rpx;
    color: #fffbf6;
    padding: 12rpx 26rpx;
    margin: 33rpx 0 0 0;
    background-image: linear-gradient(90deg, #dfa964 0%, #7f5218 100%);
  }
}
.commonPageBox {
  background-image: url("@/static/icon/mine_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // background-color: #d8f8e4 !important;
}
.chong_zhi {
  box-shadow: none;
  // border-bottom-left-radius: 0rpx !important;
  // border-bottom-right-radius: 0rpx !important;
  // background-color: #d8f8e4;
  // margin: 0 0 30upx 0;
  padding: 0 30upx;
  height: auto;

  .zhanghu {
    width: 100%;
    margin-bottom: 10rpx;

    // line-height: 80rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: $themeColor;
    font-weight: 700;
  }
  .noVip {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    .zhanghu {
      font-size: 40rpx;
      width: 120rpx;
      margin-top: 20rpx;
      margin-bottom: 0rpx;
      text-align: center;
      display: flex;
      align-items: center;
      // justify-content: space-around;
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  .hasVip {
    .time {
      padding: 4rpx 20rpx;
      font-size: 26rpx;
      border-radius: 20rpx;
      background: linear-gradient(
        to right,
        rgb(204, 229, 244) 0%,
        rgb(197, 227, 215) 100%
      ) !important;
    }
  }
  .chong_list {
    display: flex;

    align-items: center;
    justify-content: space-between;
    margin-bottom: 40rpx;
    .left {
      display: flex;
      align-items: center;
    }
    .chong_list_item {
      width: auto;
      height: 100rpx;
      margin-right: 60rpx;
      text-align: center;
      display: inline-block;
      color: $themeColor;

      .text {
        font-size: 28rpx;
        display: block;
        font-weight: 700;
        // margin: 0 0 10rpx 0;

        color: $themeColor !important;
      }
    }

    .chong_btn {
      position: absolute;
      font-size: 26rpx;
      display: block;
      top: 0px;
      right: 0px;
      float: right;
      border-radius: 50rpx;
      color: #fffbf6;
      padding: 10rpx 32rpx;
      // margin-top: -60rpx;
      // margin: 20rpx 0 0 0;
      background-image: linear-gradient(90deg, #258feb 0%, #d5ecdd 200%);
    }
  }
}

.xiugai {
  border-radius: 20rpx !important;
  margin: 0 20rpx;
  // padding:0 40rpx;
  background: #E2F5FA;

  .nav_list {
    background-color: #b7e0e2;
    padding: 15rpx 0 15rpx 10rpx;
    display: flex;
    align-items: center;
    font-size: 22rpx;
    position: relative;
    font-weight: bold;
    border-bottom: 1px solid #e5e5e5;

    &:active {
      background-color: #f5f5f5;
    }

    text {
      color: #333;
      margin-left: 10rpx;
    }

    &::after {
      content: "";
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 30rpx;
      height: 30rpx;
      background-image: url("@/static/icon/icon_right.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }

  .nav_list:nth-last-child(1) {
    border-bottom: 0;
  }
}

.box_fillet {
  border-radius: 40rpx;

  overflow: hidden;

  // background: #fff;
}

.chongzhi_box {
  position: relative;
  width: calc(100% - 320rpx);
  height: 100%;
  float: left;
  padding: 30rpx 20rpx 10rpx;
  background-color: #E2F5FA;
  border-radius: 20rpx;
}
.vip_box {
  padding: 0;

  float: right;
  position: relative;
  width: 300rpx;
  height: 100%;
  border-radius: 20rx;
  // background: rgba(255, 255, 255, 0.85);

  // padding: 30rpx 20rpx 10rpx;
  // background-color: $themeBgColor;
  // @include themeBorder(6rpx, 20rpx, #258feb, #a6d8dc);
  @include themeBorder(
    10rpx,
    20rpx,
    (
      linear-gradient(#E2F5FA, #E2F5FA),
      linear-gradient(to bottom left, #bed1b1, #a6d8dc)
    )
  );

  .zhanghu {
    font-size: 80rpx;
    text-align: center;
    line-height: 100%;
    margin-bottom: 0;
  }
}

/deep/.scroll-view-item:nth-child(2n-1) {
  background-color: transparent !important;
}

uni-page-body {
  // background: #d8f8e4 !important;
}

.bg_top {
  // background-position: center center;
  padding: 0 30rpx;

  height: 30vh;
  position: relative;

  .setIcon {
    position: absolute;
    right: 30rpx;
    // top: 30rpx;
  }
}

.mine_box {
  width: 100%;
  position: absolute;
  // top: 90rpx;
  left: 0;
  padding: 0 0rpx;
}

.list_box {
  // background: #d8f8e4 !important;
  padding: 20rpx 0;
  margin-top: -10rpx;
}
.pay_item_img {
  display: flex;
  color: #333;
  // color: #dac4b7;
  align-items: center;
  // width: 80rpx;
  // height: 80rpx;
  padding: 8rpx;
  box-sizing: border-box;
  font-weight: bold;
  // float: left;
  // margin-right: 20rpx;
  margin: 0 auto;
  margin-bottom: 10rpx;
  //margin-top:-10rpx;
}
.popup_box {
  padding-bottom: 20rpx;
  width: 88vw;
  overflow: hidden;
  position: relative;
  height: auto;
  .title {
    font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
    font-weight: normal;
    font-size: 46rpx;
    color: $themeColor;
    background-color: #f5f5f5;
    //   line-height: 46rpx;
    padding: 20rpx;
    //   border-leradius: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  .content {
    font-size: 26rpx;
    letter-spacing: 0.15rpx;
    padding: 20rpx;
    color: #3f3f3f;

    .top {
      margin: 30rpx 0;
    }

    .center {
      line-height: 40rpx;
      // padding:0 10rpx;
    }

    .bottom {
      width: 100%;
      margin-top: 60rpx;

      font-size: 24rpx;
      line-height: 26rpx;
      color: #b0b0b0;
    }
  }
  .button_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;

    .u-button {
      margin-left: 40rpx;
    }

    .u-button:nth-child(1) {
      margin-left: 0;
    }
  }
}
.user_vip_box {
  min-width: 130rpx;

  position: absolute;
  bottom: -20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user_vip {
  font-size: 24rpx;
  width: auto;
  padding: 4rpx 10rpx;
  font-weight: 800;
  border-radius: 20rpx;
  background: linear-gradient(
    to right,
    rgb(204, 229, 244) 0%,
    rgb(197, 227, 215) 100%
  );
}
.super {
  background: linear-gradient(to right, #5bc9c1 0%, #268798 100%);
  color: #f4f2e4;
}
</style>
