<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="uni-list-cell-padding status-box">
      <view class="uni-title uni-common-mt">
        <text class="uni-title-text">分享内容：</text>
      </view>
      <textarea style="max-height: 100px;padding: 10px;background-color:aliceblue;border: 1px solid black;"
        :auto-height=" true" :value="shareContent"></textarea>
    </view>
    <view class="uni-list-cell-padding status-box">
      <view class="uni-title uni-common-mt">
        <text class="uni-title-text">分享图片：</text>
      </view>
      <view style="flex-wrap: wrap;">
        <image v-if="imageURL != null" style="width: 104px; height: 104px;" :src="imageURL" :data-src="imageURL">
        </image>
        <image v-else class="uni-uploader__input-box" @tap="chooseImage" src="/static/plus.png"></image>
      </view>
    </view>
    <view class="uni-list-cell-padding status-box">
      <view class="uni-title uni-common-mt">
        <text class="uni-title-text">分享类型：</text>
      </view>
      <radio-group class="uni-flex" @change="typeChange">
        <radio class="uni-common-mt" :value="0" :checked="true">
          图文
        </radio>
        <radio class="uni-common-mt" :value="1">纯文字</radio>
        <radio class="uni-common-mt" :value="2">纯图片</radio>
      </radio-group>
    </view>
    <view class="uni-list-cell-padding status-box">
      <view class="uni-title uni-common-mt">
        <text class="uni-title-text">分享到：</text>
      </view>
      <radio-group class="uni-flex" style="flex-wrap: wrap;" @change="sceneChange">
        <radio class="uni-common-mt" value="WXSceneSession" :checked="true">
          聊天界面
        </radio>
        <radio class="uni-common-mt" value="WXSceneTimeline">朋友圈</radio>
        <radio class="uni-common-mt" value="WXSceneFavorite" :disabled="true" style="color: gray;">微信收藏（暂不支持）</radio>
      </radio-group>
    </view>

    <view class="uni-padding-wrap uni-common-mt">
      <button type="primary" @click="share">分享</button>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup>
  const scene = ref('WXSceneSession')
  const type = ref(0)

  const typeChange = (e : UniRadioGroupChangeEvent) => {
    type.value = parseInt(e.detail.value)
  }
  const sceneChange = (e : UniRadioGroupChangeEvent) => {
    scene.value = e.detail.value
  }

  const title = ref('share')
  const shareContent = ref('uni-app x 可以分享内容到微信了！')
  const imageURL = ref<string | null>(null)

  function chooseImage() {
    uni.chooseImage({
      count: 1,
      success: (res) => {
        imageURL.value = res.tempFilePaths[0]
      },
      fail: (err) => {
        console.log("err: ", JSON.stringify(err));
        uni.showToast({
          title: "choose image error.code:" + err.errCode + ";message:" + err.errMsg,
          position: "bottom"
        })
      }
    })
  }

  function share() {
    uni.showLoading({
      title: "正在分享......"
    })
    console.log('scene.value: ', scene.value);
    uni.share({
      provider: 'weixin',
      title: '微信分享',
      scene: scene.value,
      type: type.value,
      href: "https://uniapp.dcloud.net.cn/api/plugins/share.html",
      summary: shareContent.value,
      imageUrl: imageURL.value,
      success(res) {
        uni.hideLoading()
        uni.showToast({
          title: '分享成功'
        })
      },
      fail(e) {
        uni.hideLoading()
        uni.showToast({
          title: e.errMsg
        })
      }
    })
  }
</script>

<style>
  .uni-uploader__input-box {
    margin: 5px;
    width: 104px;
    height: 104px;
    border: 1px solid #D9D9D9;
  }

  .status-box {
    background-color: #FFFFFF;
    margin: 0 20px;
  }
</style>