<template>
  <view v-if="template">
    <SelectPic v-if="!imageUrl" @onChange="onChange" />
    <view v-if="imageUrl" class="clothes-box">
      <image
        class="clothes"
        mode="aspectFill"
        :src="imageUrl"
        @click="uploadFile"
      ></image>
    </view>

    <view class="warp">
      <view class="container">
        <view class="title">分类：</view>
        <uv-radio-group v-model="fittingRoomStore.selectClothesType">
          <template v-for="(item, index) in fittingRoomStore.tabs">
            <uv-radio
              shape="square"
              :customStyle="{margin: '12rpx'}"
              v-if="index !== 0 && index !== 5"
              :key="index"
              :label="item"
              size="26rpx"
              iconSize="20rpx"
              activeColor="#606060"
              :name="index">
            </uv-radio>
          </template>
        </uv-radio-group>
      </view>
    </view>
    <view class="warp">
      <view class="container">
        <view class="title">长度：</view>
        <uv-radio-group v-model="fittingRoomStore.selectPattern">
            <uv-radio
              v-for="(item, index) in pattern"
              shape="square"
              :customStyle="{margin: '12rpx'}"
              :key="index"
              :label="item.label"
              size="26rpx"
              iconSize="20rpx"
              activeColor="#606060"
              :name="item.value">
            </uv-radio>
        </uv-radio-group>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import SelectPic from '@/pages/uploadClothes/SelectPic.vue';
  import { pattern } from '@/sheep/store/fittingRoom';

  const fittingRoomStore = sheep.$store('fittingRoom');

  const imageUrl = ref('https://picsum.photos/600/300?random=3')
function selectColthesType(val) {
  console.log("🚀 ~ selectColthesType ~ val: ", val);
}
  // 隐藏原生tabBar
  uni.hideTabBar({
    fail: () => {},
  });

  function onChange(e) {
    console.log(e, 12345);
    imageUrl.value = e[0].tempFilePaths[0]
  }

  const template = computed(() => sheep.$store('app').template?.home);

  onLoad((options) => {
    // #ifdef MP
    // 小程序识别二维码
    if (options.scene) {
      const sceneParams = decodeURIComponent(options.scene).split('=');
      console.log('sceneParams=>', sceneParams);
      options[sceneParams[0]] = sceneParams[1];
    }
    // #endif

    // 预览模板
    if (options.templateId) {
      sheep.$store('app').init(options.templateId);
    }

    // 解析分享信息
    if (options.spm) {
      $share.decryptSpm(options.spm);
    }

    // 进入指定页面(完整页面路径)
    if (options.page) {
      sheep.$router.go(decodeURIComponent(options.page));
    }
  });

  // 下拉刷新
  onPullDownRefresh(() => {
    sheep.$store('app').init();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onPageScroll(() => {});
</script>

<style lang="scss" scoped>
  .warp {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title {
    font-size: 28rpx;
  }
  .container {
    width: 323*2rpx;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .selectCheckbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .clothes-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
.clothes {
  width: 480rpx;
  height: 700rpx;
  background: #000;
  border: 0.5px solid #000;
  margin-top: 50rpx;
}
</style>
