<template>
  <view>
<!-- 	   <image v-for="(item, index) in src" :key="index" :src="item" @click="preview(item)" mode="aspectFill"  @error="imageError"></image> -->
	   	<htz-image-upload v-model="src" :max="9" :remove="false" :add="false"></htz-image-upload>
  </view>
</template>

<script setup>
import { reactive, ref, toRefs,nextTick,onMounted } from 'vue';
// import { useRoute } from 'vue-router';
import { onLoad, onShow } from '@dcloudio/uni-app'
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
const title = ref('图片预览');
const src = ref([]);
// const route = useRoute();
const picture = ref('');
const previewImage = ref(null);

const imageError = (event) => {
  console.error('Image load error:', event.detail.errMsg);
};
const preview = (url) => {

    // #ifdef MP-WEIXIN
    this.$nextTick(()=>{
         previewImage.value.open(url);
    })
    // #endif

    // #ifndef MP-WEIXIN
    previewImage.value.open(url);
    // #endif
};

const onLongpress = e =>{
    console.log('当前长按的图片是' + e);
    uni.showActionSheet({
        itemList: ['转发给朋友', '保存到手机'],
        success: function (res) {
            console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
        },
        fail: function (res) {
            console.log(res.errMsg);
        }
    });
}

onLoad( (options) => {
  picture.value = options.picture;
  console.log(picture.value)
  if (picture.value) {
    try {
      var fileUrlList = decodeURIComponent(picture.value);
      src.value = JSON.parse(fileUrlList);
	    console.log(src.value)
    } catch (error) {
      console.error('Error parsing picture data:', error);
    }
  }
})
// const previewImage = (index) => {
//   const urls = src.value.map(item => item.url);
//   uni.previewImage({
//     current: index,
//     urls: urls,
//     longPressActions: {
//       itemList: ['保存图片'],
//       success: (data) => {
//         saveImage(urls[data.index]);
//       },
//       fail: (err) => {
//         console.error(err);
//       }
//     }
//   });
// };

const saveImage = (url) => {
  uni.downloadFile({
    url: url,
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            uni.showToast({
              title: '图片保存成功',
              icon: 'success'
            });
          },
          fail: () => {
            uni.showToast({
              title: '图片保存失败',
              icon: 'none'
            });
          }
        });
      }
    }
  });
};
</script>

<style>
/* ... other styles ... */
.thumbnail-container {
  display: flex;
  flex-wrap: wrap;
  /* Other styles */
}
.thumbnail-wrapper {
  margin: 10px;
  /* Other styles */
}
.clickable-image {
  cursor: pointer;
}
</style>
