<template>
  <view class="uni-margin-wrap">
    <view class="flex">
      <text>搭配趋势</text>

      <img src="./arrow-icon.png" class="arrow-icon" />
    </view>
    <swiper
      @animationfinish="animationfinish"
      class="swiper"
      circular
      :indicator-dots="false"
      :autoplay="true"
    >
      <swiper-item v-for="item in props.items" :key="item.id">
        <view class="swiper-item">
          <view class="left" @click="toGoodsInfo(item[0])">
            <img :src="item[0].file_name" class="left-img" />
          </view>

          <div class="right">
            <view class="good-img">
              <div class="good-img-box good-img-top"></div>
              <div class="good-img-box good-img-bottom" @click="toGoodsInfo(item[4])">
                <img :src="item[4].file_name" class="good-img-detail" />
              </div>
            </view>

            <view class="btn" @click="toMini(item[4])">一键试穿</view>
          </div>
        </view>
      </swiper-item>
    </swiper>

    <view class="dots">
      <view
        class="dot"
        :class="{ active: index == current }"
        v-for="(item, index) in props.items"
        :key="item.id"
      >
      </view>
    </view>
  </view>
</template>

<script setup>
  import { defineProps, ref, watchEffect } from 'vue';

  const autoplay = ref(true);

  const props = defineProps({
    items: {
      type: Array,
      default: [],
    },
  });

  const current = ref(0);

  const animationfinish = (e) => {
    //   console.log('e: ', e.detail.current);
    current.value = e.detail.current;
  };

  // weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&query=id=
  const toMini = (item) => {
    console.log(wx, '微信miniProgram');
    wx.miniProgram.navigateTo({
      url: `/pages/fitRoom/index?id=${item.id}`,
      success: function () {
        // alert('成功')
      },
      fail(error) {
        // alert('错误', error)
        console.log('navigateTo error: ', error);
      },
    });
    /**小程序内跳转 */
    // uni.webView.navigateTo({ url: `/pages/fitRoom/index&id=${item.id}` });
    //   location.href = `weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&id=${item.id}`
  };
  const toGoodsInfo = (item) => {
    wx.miniProgram.navigateTo({
      url: '/pages/goods/goodsDetail/index?goods_id=' + item.goods_id,
    });
    //先去请求后端接口获取数据
    // uni.request({
    // 	url: "https://llshop.zglvling.com/soapi/text/ceshi1",
    // 	method: "POST",
    // 	data: {
    // 		id: 123
    // 	},
    // 	header: {
    // 		"Content-Type": "application/json"
    // 	},
    // 	success: (res) => {
    // 		const config = res.data;

    // 		// #ifdef H5
    // 		// 1. 检查是否在微信浏览器中
    // 		const isWechatBrowser = /MicroMessenger/i.test(navigator.userAgent);
    // 		console.log("是否在微信浏览器", isWechatBrowser);

    // 		if (!isWechatBrowser) {
    // 			uni.showToast({
    // 				title: "请在微信中打开",
    // 				icon: "none"
    // 			});
    // 		}
    // 		wx.config({
    // 			debug: true, // 调试模式
    // 			appId: config.appId,
    // 			timestamp: config.timestamp,
    // 			nonceStr: config.nonceStr,
    // 			signature: config.signature,
    // 			jsApiList: ["miniProgram"], // 需要用到的 API
    // 		});
    // 		wx.ready(() => {
    // 			wx.miniProgram.navigateTo({
    // 				path: "/pages/goods/goodsDetail/index",
    // 				success: () => console.log("跳转成功"),
    // 				fail: (err) => {
    // 					console.error("跳转失败:", err);
    // 					uni.showToast({
    // 						title: "跳转失败",
    // 						icon: "none"
    // 					});
    // 				},
    // 			});
    // 		});

    // 		// #endif
    // 	},
    // 	fail: (err) => {
    // 		console.error("请求失败:", err);
    // 		uni.showToast({
    // 			title: "网络错误",
    // 			icon: "none"
    // 		});
    // 	},
    // });

    // 初始化微信 JS-SDK
    // function initWechatSDK(config) {
    // 	console.log("阿拉啦啦", wx);
    // 	wx.config({
    // 		debug: true, // 调试模式
    // 		appId: config.appId,
    // 		timestamp: config.timestamp,
    // 		nonceStr: config.nonceStr,
    // 		signature: config.signature,
    // 		jsApiList: ["miniProgram"], // 需要用到的 API
    // 	});

    // 	wx.ready(() => {
    // 		wx.miniProgram.navigateTo({
    // 			path: "/pages/goods/goodsDetail/index",
    // 			success: () => console.log("跳转成功"),
    // 			fail: (err) => {
    // 				console.error("跳转失败:", err);
    // 				uni.showToast({
    // 					title: "跳转失败",
    // 					icon: "none"
    // 				});
    // 			},
    // 		});
    // 	});

    // 	wx.error((err) => {
    // 		console.error("微信 SDK 配置失败:", err);
    // 	});
    // }
    // 	uni.request({
    // 	  url: 'https://llshop.zglvling.com/soapi/text/ceshi1', // 接口地址
    // 	  method: 'POST', // 请求方式（GET/POST/PUT/DELETE）
    // 	  data: { id: 123 }, // 请求参数（GET 用 params，POST 用 data）
    // 	  header: {
    // 		'Content-Type': 'application/json', // 请求头
    // 	  },
    // 	  success: (res) => {
    // 		console.log('请求成功:', res.data);
    // 		 var  config =  res.data;

    // 		  const wx = window.wx;
    // 		    // 动态加载微信 JS-SDK
    // 		      if (typeof wx === 'undefined') {
    // 		        const script = document.createElement('script');
    // 		        script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
    // 		        script.onload = () => {
    // 		          initWechatSDK(config); // 加载完成后初始化
    // 		        };
    // 		        document.body.appendChild(script);
    // 		      } else {
    // 		        initWechatSDK(config); // 如果已存在，直接初始化
    // 		      }
    // 		       wx.config({
    // 		         debug: true, // 调试模式
    // 		         appId: config.appId,
    // 		         timestamp: config.timestamp,
    // 		         nonceStr: config.nonceStr,
    // 		         signature: config.signature,
    // 		         jsApiList: ['miniProgram'], // 需要用到的 API
    // 		       });
    // 	      // 4. 配置完成后跳转小程序
    // 	         wx.ready(() => {
    // 	           wx.miniProgram.navigateTo({
    // 	             path: '/pages/home/index?id=123', // 小程序路径 + 参数
    // 	             success: () => console.log('跳转成功'),
    // 	             fail: (err) => {
    // 	               console.error('跳转失败:', err);
    // 	               uni.showToast({ title: '跳转失败，请在微信中打开', icon: 'none' });
    // 	             },
    // 	           });
    // 	         });
    // 	  },
    // 	  fail: (err) => {
    // 		console.error('请求失败:', err);
    // 		uni.showToast({ title: '网络错误', icon: 'none' });
    // 	  },
    // 	  complete: () => {
    // 		console.log('请求完成');
    // 	  },
    // 	});

    // const appid = 'wx32d8423809b8d7d4';
    //   const path = `/pages/goods/goodsDetail/index`;
    //   const scheme = `weixin://dl/business/?appid=${appid}&path=${encodeURIComponent(path)}`;
    // console.log('地址: ', scheme);
    // // 方法1：动态创建 <a> 标签（兼容 iOS）
    //    const a = document.createElement('a');
    //    a.href = scheme;
    //    a.style.display = 'none';
    //    document.body.appendChild(a);
    //    a.click();
    //    document.body.removeChild(a);
    //   location.href = scheme;

    //   // 可添加失败回调（通过监听页面跳转失败）
    //   setTimeout(() => {
    //     alert('跳转失败，请手动打开小程序');
    //   }, 1000);

    // location.href = `weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&id=${item.id}`
  };

  // }
</script>

<style scoped>
  .uni-margin-wrap {
    width: 100%;
    /* height: 330px; */
    padding: 16px 8px;
    box-sizing: border-box;
    position: relative;
  }

  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #031c24;
    width: 336px;
    margin: 0 auto;
    margin-bottom: 16px;
  }

  .flex .arrow-icon {
    width: 24px;
  }

  .swiper {
    width: 336px;
    height: 330px;
    margin: 0 auto;
  }

  .swiper-item {
    width: 336px;
    height: 330px;
    display: flex;
    justify-content: space-between;
  }

  .swiper-item .left {
    width: 223px;
    height: 330px;
    overflow: hidden;
  }

  .swiper-item .left .left-img {
    height: 330px;
    /* width: 100%; */
    object-fit: scale-down;
  }

  .swiper-item .right {
    width: 102px;
    height: 330px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
  }

  .swiper-item .right .good-img {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 15px;
  }

  .swiper-item .right .good-img .good-img-box {
    height: 134px;
    overflow: hidden;
    /* background-color: red; */
  }

  .swiper-item .right .good-img .good-img-box .good-img-detail {
    height: 100%;
    object-fit: scale-down;
  }

  .swiper-item .right .btn {
    height: 24px;
    background-color: #031c24;
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dots {
    height: 22px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dots .dot {
    width: 5px;
    height: 2px;
    background-color: #edf0f0;
    margin-left: 5px;
  }

  .dots .dot:first-of-type {
    margin-left: 0;
  }

  .dots .active {
    width: 10px;
    background-color: #031c24;
  }
</style>
