<!-- 页面  -->
<template>
  <view>
    <view class="ss-flex flex-wrap">
      <view class="goods-box" v-for="item in pagination?.data" :key="item.id">
        <view @click="sheep.$router.go('/pages/goods/index', { id: item.id })">
          <view class="goods-img">
            <image class="goods-img" :src="sheep.$url.cdn(item.image)" mode="aspectFit"></image>
          </view>
          <view class="goods-content">
            <view class="goods-title ss-line-1 ss-m-b-28">{{ item.title }}</view>
            <view class="goods-price" v-if="isLogin == true">￥{{ item.price[0] }}</view>
			<view class="goods-price" v-else @click.stop="toLogin">登录查看价格</view>
          </view>
        </view>
      </view>
    </view>
	<su-popup :show="showLogin == true" type="center" round="10"
		@close="showLogin = false" @open="showLogin = true">
		<view class="popup">
	
			<button class="texbut" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<!-- <image style="width: 100%;height: 136rpx;" src="https://mall.jiangxiaoxian.hschool.com.cn/loginBtnTwo.png"></image> -->
				<!-- 授权登录 -->
			</button>
		</view>
	</su-popup>
  </view>
  
  
</template>

<script setup>
  import sheep from '@/sheep';
  import {
  	computed,
  	ref,
  	reactive,
  } from 'vue';
  import third from '@/sheep/api/third';
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    activeMenu: [Number, String],
    pagination: Object,
  });
  const isLogin = computed(() => sheep.$store('user').isLogin);
  const showLogin = ref(false);
  const iv = ref('');
  const wxCode = ref('');
  const encryptedData = ref('');
  
  // 打开登录的弹框
  function toLogin() {
  	console.log('toLogin——打开登录的弹框：', showLogin.value);
  	showLogin.value = true;
  	console.log('showLogin', showLogin.value);
  }
  // 关闭登录弹框
  function closeLogin() {
  	console.log('closeLogin');
  	showLogin.value = false;
  }
  // 打开登录的弹框
  function openLogin() {
  	console.log('openLogin');
  	showLogin.value = true;
  }
  // 使用微信手机号
  async function getPhoneNumber(e) {
  	console.log('获取手机号', e, e.detail.errMsg);
  	if (e.detail.errMsg !== 'getPhoneNumber:ok') {} else {
  		encryptedData.value = e.detail.encryptedData // 用于解密
  		iv.value = e.detail.iv // 用于解密
  		getCode()
  		//    let result = await sheep.$platform.useProvider().bindUserPhoneNumber(e.detail);
  		// console.log('result', result);
  		//    if (result) {
  		//      sheep.$store('user').getInfo();
  		//      // closeAuthModal();
  		//   closeLogin();
  		//    }
  	}
  }
  // 获取code和sessionId
  function getCode() {
  	uni.login({
  		provider: 'weixin',
  		success: (res) => {
  			wxCode.value = res.code
  			// loginResult.value = res
  			// getSessionId();
  			Login();
  		}
  	})
  }
  // 登录接口
  function Login() {
  	const session_id = uni.getStorageSync('sessionId')
  	console.log('session_id', session_id);
  	return new Promise(async (resolve, reject) => {
  		const {
  			code
  		} = await third.wechat.wxLogin({
  			platform: 'miniProgram',
  			payload: encodeURIComponent(
  				JSON.stringify({
  					sessionId: session_id,
  					iv: iv.value,
  					encryptedData: encryptedData.value,
  					code: wxCode.code,
  				}),
  			),
  		});
  		if (code === 1) {
  			resolve(true);
  			showLogin.value = false;
  		}
  		resolve(false);
  	});
  }
  
</script>

<style lang="scss" scoped>
  .goods-box {
    width: calc((100% - 20rpx) / 2);
    margin-bottom: 20rpx;

    .goods-img {
      width: 246rpx;
      height: 246rpx;
      border-radius: 10rpx 10rpx 0px 0px;
    }

    .goods-content {
      width: 100%;
      background: #ffffff;
      box-shadow: 0px 0px 20rpx 4rpx rgba(199, 199, 199, 0.22);
      padding: 20rpx 0 32rpx 16rpx;
      box-sizing: border-box;
      border-radius: 0 0 10rpx 10rpx;

      .goods-title {
        font-size: 26rpx;
        font-weight: bold;
        color: #333333;
      }

      .goods-price {
        font-size: 24rpx;
        font-family: OPPOSANS;
        font-weight: 500;
        color: #e1212b;
      }
    }

    &:nth-child(2n + 1) {
      margin-right: 20rpx;
    }
  }
  
  .popup {
  	background-image: url('https://mall.jiangxiaoxian.hschool.com.cn/loginBack.png');
  	background-size: 100%;
  	width: 540rpx;
  	height: 640rpx;
  	display: flex;
  	padding-bottom: 44rpx;
  	flex-direction: column;
  	align-items: baseline;
  	justify-content: flex-end;
  	padding-left: 73rpx;
  	padding-right: 73rpx;
  
  	.img_shouquan {
  		position: absolute;
  		width: 680rpx;
  		height: 857rpx;
  		left: -25rpx;
  		top: -390rpx;
  	}
  
  
  	#txt2 {
  		text-align: center;
  		margin-top: 200rpx;
  		font-size: 28rpx;
  		color: #525252;
  		margin-bottom: 60rpx;
  		position: relative;
  		font-weight: 500;
  	}
  
  	.texbut {
  		width: 507rpx;
  		height: 93rpx;
  		border-radius: 16rpx;
  		// background: #ffbd25;
  		background-image: url('https://mall.jiangxiaoxian.hschool.com.cn/loginBtnTwo.png');
  		background-size: 100%;
  		font-size: 34rpx;
  		color: #3d3d3d;
  		font-weight: bold;
  		display: flex;
  		justify-content: center;
  		align-items: center;
  		margin-top: 30rpx;
  		// margin: 0 auto;
  	}
  }
</style>
