<template>
  <view class="wrap">
    <!-- 弹窗 -->
    <uni-popup
      ref="popup"
      type="center"
    >
      <!-- 给一个左边弹窗的样式 -->
      <!-- 关闭弹窗按钮 -->
      <view
        class="closeBtn"
        @tap="this.$refs.popup.close()"
      >x</view>
      <view
        class="popUpWrap"
        v-if="whichTap==0"
      >
        <text>这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入驻。</text>

        <!-- 左 -->
        <!-- <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image> -->
        <!-- 右 -->
        <!-- <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image> -->
      </view>
      <view
        class="popUpWrap"
        v-if="whichTap==1"
      >
        <text>本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号。</text>
      </view>
      <view
        class="popUpWrap"
        v-if="whichTap==2"
      >
        <button @tap="chatOur(1)">客服1</button>
        <button @tap="chatOur(2)">客服2</button>
      </view>
    </uni-popup>
    <!-- 	<scroll-view
	  enable-flex
	  @scrolltolower="handleScrolltolower"
	  scroll-y
	  style="height: 1000px;"
	> -->
    <view
      v-if="isAuth"
      class="content"
    >
      <view class="userInfo">
        <view class="info">
          <image
            :src="headerphoto"
            mode="aspectFill"
          ></image>
          <view class="infoText">
            <text class="userName">{{nickName}}</text>
          </view>
        </view>
        <!-- <view class="service">
          <image src="../../static/serviceLogo.png" mode="aspectFill"></image>
        </view> -->
      </view>
      <view
        class="myOpticsData"
        @tap="toOpticsData"
      >
        <view class="left">
          <image
            src="../../static/img/user/dataWrite.png"
            mode="aspectFit"
          ></image>
          <text>验光数据</text>
        </view>
        <image
          src="../../static/right.png"
          mode="aspectFit"
        ></image>
      </view>
      <view class="myOrder">
        <view class="orderHeader">
          <text>我的订单</text>
          <view
            class="btn"
            @click="toMyOrder('10')"
          >
            全部
            <image
              src="../../static/right.png"
              mode="aspectFit"
            ></image>
          </view>
        </view>
        <view class="orderBody">
          <view
            class="item waitPay"
            @click="toMyOrder('0')"
          >
            <image
              src="../../static/img/user/waitDeliver.png"
              mode="aspectFit"
            ></image>
            <text>待付款</text>
          </view>
          <view
            class="item waitDeliver"
            @click="toMyOrder('1')"
          >
            <image
              src="../../static/img/user/waitPay.png"
              mode="aspectFit"
            ></image>
            <text>待收货</text>
          </view>
          <view
            class="item waitReceive"
            @click="toMyOrder('2')"
          >
            <image
              src="../../static/img/user/waitReceive.png"
              mode="aspectFit"
            ></image>
            <text>已完成</text>
          </view>
          <!-- <view class="item service" @click="toMyOrder('3')">
            <image src="../../static/img/user/refound.png" mode="aspectFit"></image>
            <text>已评价</text>
          </view> -->
        </view>
      </view>
      <view class="someItem">
        <!-- <view class="item">
          <view class="left">
            <image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>
            <text>推广记录与收益</text>
          </view>
          <image src="../../static/right.png" mode="aspectFit"></image>
        </view> -->
        <view
          @tap="toAddress"
          class="item"
        >
          <image
            src="../../static/address-icon.png"
            mode="aspectFit"
          ></image>
          <view class="left">
            <text>地址管理</text>
            <image
              class="image2"
              src="../../static/right.png"
              mode="aspectFit"
            ></image>
          </view>

        </view>
        <view
          @tap="introduce"
          class="item"
        >
          <image
            src="../../static/img/user/introduce.png"
            mode="aspectFit"
          ></image>
          <view class="left">
            <text>系统介绍</text>
            <image
              src="../../static/right.png"
              mode="aspectFit"
            ></image>
          </view>
        </view>
        <view
          @tap="joinUs"
          class="item"
        >
          <image
            src="../../static/img/user/joinUs.png"
            mode="aspectFit"
          ></image>
          <view class="left">
            <text>加入我们</text>
            <image
              src="../../static/right.png"
              mode="aspectFit"
            ></image>
          </view>
        </view>
        <view class="item">
          <image
            src="../../static/img/user/service.png"
            mode="aspectFit"
          ></image>
          <view class="left lastLeft">
            <text>联系客服</text>
            <image
              src="../../static/right.png"
              mode="aspectFit"
            ></image>
          </view>
        </view>
      </view>
      <view class="recommend">
        <view class="title">
          <view class="line"></view>
          <view class="text">精选推荐</view>
          <view class="line"></view>
        </view>
        <!-- 商品列表 -->
        <view class="goods-list">
          <!--          <scroll-view
            enable-flex
            @scrolltolower="handleScrolltolower"
            scroll-y
            class="product-list"
          > -->
          <view class="product-list">
            <view
              class="product"
              v-for="(item, index) in userRecommandList"
              :key="index"
            >
              <Card
                :goods="item"
                :scrollTop="scrollTop"
                :viewHeight="viewHeight"
              ></Card>
            </view>
          </view>
          <!-- </scroll-view> -->
          <view class="loading-text">{{loadingText}}</view>
        </view>
      </view>
    </view>
    <view
      v-else
      class="auth"
    >
      <view class="icon"></view>
      <view class="divider"></view>
      <view class="title">申请获取以下权限</view>
      <view class="text">获得您的公开信息(昵称、头像等)</view>
      <button
        type="primary"
        open-type="getUserInfo"
        @getuserinfo="onGotUserInfo"
      >授权登陆</button>
    </view>
    <!-- </scroll-view> -->
  </view>
</template>

<script>
import Card from '@/components/CommodityCard/CommodityCard.vue'
import store from '@/store'
import UniPopup from '@/components/UniPopup/uni-popup.vue'

export default {
  components: {
    Card,
    UniPopup,
  },
  data() {
    return {
      isAuth: true, // 是否显示授权页面,
      pagesnum: 1, // 分页请求初始值
      whichTap: 0, // 弹窗渲染选择条件
	  loadingText: '到底了',
	  scrollTop: 0,
	  viewHeight: uni.getSystemInfoSync().windowHeight,
    }
  },
  onPageScroll({ scrollTop }) {
  	  // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
  	  this.scrollTop = scrollTop
  },
  onLoad() {
    const that = this
    // 判断是否授权
    uni.getSetting({
      success(res) {
        console.log('authSetting', res.authSetting)
        if (res.authSetting['scope.userInfo'] === true) {
          that.isAuth = true
        } else {
          that.isAuth = false
        }
      },
    })
    store.dispatch('userRecommand/getRecommandList', {
      uid: that.$store.state.user.userInfo.uid,
      openid: that.$store.state.user.userInfo.openid,
      page: that.pagesnum,
    })
  },
  onReachBottom() {
    // console.log('usr-my',this.$store.state.user.userInfo)
    this.pagesnum++
    store.dispatch('userRecommand/getRecommandList', {
	  uid: this.$store.state.user.userInfo.uid,
	  openid: this.$store.state.user.userInfo.openid,
	  page: this.pagesnum,
    })
  },
  computed: {
    nickName() {
      return this.$store.state.user.userInfo.nickName
    },
    headerphoto() {
      return this.$store.state.user.userInfo.headerphoto
    },
    userRecommandList() {
	  console.log('userRecommandList=====>', this.$store.state.userRecommand.recommandList)
      return this.$store.state.userRecommand.recommandList
    },
  },
  methods: {
    // 弹窗
    changeTap(item) {
      this.whichTap = item
      this.$refs.popup.open()
    },
    chatOur(item) {
      if (item === 1) {
        uni.makePhoneCall({
          phoneNumber: 13376189297, // 客服1 电话
        })
      } else {
        uni.makePhoneCall({
          phoneNumber: 18014995101, // 客服2 电话
        })
      }
    },
    // 授权
    onGotUserInfo(e) {
      if (e.detail.errMsg === 'getUserInfo:ok') {
        const { fromInfo } = this.$store.state.user
        // 用户授权成功
        store.dispatch('user/getUserInfo', fromInfo)
        this.isAuth = true
      }
    },
    toAddress() {
      uni.navigateTo({
        url: '../address/addressList',
        success: res => {},
        fail: () => {},
        complete: () => {},
      })
    },
    introduce() {
      uni.showModal({
        content: '这是一款眼镜及周边产品的销售平台，我们将帮您进行建立全球销售网络，欢迎入住。',
        showCancel: false,
      })
    },
    joinUs() {
      uni.showModal({
        content: '本平台欢迎全国各地的眼镜工厂、品牌、眼镜店加入。请联系我们申请注册账号',
        showCancel: false,
      })
    },
    toMyOrder(status) {
      uni.navigateTo({
        url: `../myOrder/myOrder?status=${status}`,
        success: res => {},
        fail: () => {},
        complete: () => {},
      })
    },
    toOpticsData() {
      uni.navigateTo({
        url: '../addOpticsData/addOpticsData',
      })
    },
  },
}
</script>

<style lang="scss">
.warp {
  font-size: 24rpx;
  background-color: #f2f2f2;
  height: 100vh;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f2f2f2;
}
.userInfo {
  background-image: linear-gradient(270deg, #f79067 0%, #ff5f3b 66%);
  width: 100%;
  height: 240rpx;
  color: #ffffff;
  padding: 60rpx 82rpx 80rpx 44rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  .info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    image {
      border-radius: 50rpx;
      height: 100rpx;
      width: 100rpx;
      margin-right: 40rpx;
    }
    .infoText {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-scetart;
      .userName {
        font-size: 18px;
        color: #ffffff;
        margin-bottom: 8rpx;
      }
      .nickName {
        font-size: 12px;
        color: #ffffff;
      }
    }
  }
  // .service {
  //   margin-top: 20rpx;
  //   image {
  //     height: 36rpx;
  //     width: 36rpx;
  //   }
  // }
}
.myOpticsData {
  width: 670rpx;
  height: 120rpx;
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 1px 1px 7px 0 rgba(133, 107, 107, 0.1);
  position: relative;
  bottom: 44rpx;
  padding: 40rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    font-size: 14px;
    color: #333333;
    display: flex;
    align-items: center;
    image {
      margin-right: 32rpx;
      width: 40rpx;
      height: 44rpx;
    }
  }
  image {
    height: 16px;
    width: 8px;
  }
}
.myOrder {
  width: 100%;
  height: 296rpx;
  // margin-top: 116rpx;
  margin-bottom: 20rpx;
  padding: 0 40rpx;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
  border-radius: 6px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  .orderHeader {
    width: 100%;
    height: 100rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    font-weight: bold;
    font-size: 18px;
    color: #333333;
    .btn {
      font-size: 12px;
      color: #999999;
      display: flex;
      align-items: center;
      image {
        margin-left: 20rpx;
        height: 32rpx;
        width: 16rpx;
      }
    }
  }
  .orderBody {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      image {
        width: 62rpx;
        height: 46rpx;
      }
      text {
        margin-top: 24rpx;
        font-size: 12px;
        color: #333333;
      }
    }
  }
}
.someItem {
  width: 100%;
  height: 336rpx;
  background: #ffffff;
  box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
  border-radius: 6px;
  border-radius: 6px;
  margin-bottom: 18rpx;
  box-sizing: border-box;
  padding: 21rpx 48rpx 21rpx 42rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .item {
    display: grid;
    grid-template-columns: 10% 90%;
    align-items: center;
    height: 72rpx;
    width: 100%;
    .left {
      font-size: 14px;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72rpx;
      border-bottom: 1px solid #f2f2f2;
      image {
        margin-right: 0;
        height: 16px;
        width: 8px;
      }
    }
    image {
      margin-right: 32rpx;
      width: 40rpx;
      height: 44rpx;
    }
    .lastLeft {
      border-bottom: none;
    }
  }
}
.recommend {
  background: #ffffff;
  box-shadow: 0 0 4px 0 rgba(133, 107, 107, 0.1);
  border-radius: 6px;
  border-radius: 6px;
  width: 100%;
  .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 40rpx;
    .line {
      width: 264rpx;
      height: 1rpx;
      border-bottom: 1px solid #eaeaea;
    }
    .text {
      font-family: PingFangSC-Medium;
      font-size: 14px;
      color: #333333;
      letter-spacing: -0.26px;
      text-align: justify;
      line-height: 24px;
    }
  }
  .goods-list {
    .loading-text {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      color: #979797;
      font-size: 12px;
    }
    .product-list {
      width: 92%;
      padding: 0 4% 3vw 4%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .product {
        width: 48%;
        margin: 0 0 20rpx 0;
        background: #ffffff;
        border: 1px solid #f2f2f2;
      }
    }
  }
}
.auth {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  .icon {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    margin-top: 100rpx;
    background-color: grey;
  }
  .divider {
    height: 1rpx;
    width: 600rpx;
    margin-top: 80rpx;
    background-color: #e6e3e3;
  }
  .title {
    width: 600rpx;
    margin-top: 50rpx;
    text-align: left;
  }
  .text {
    width: 600rpx;
    margin-top: 30rpx;
    text-align: left;
    color: #e6e3e3;
  }
  button {
    width: 450rpx;
    height: 80rpx;
    line-height: 80rpx;
    margin-top: 80rpx;
    border-radius: 30rpx;
  }
}
.closeBtn {
  height: 28rpx;
  width: 28rpx;
  // border: 1px solid red;
  position: absolute;
  top: 20rpx;
  right: 10rpx;
}
</style>