<template>
  <page-head title="share-element"></page-head>
  <view class="main">
    <share-element class="share-element" share-key="left" :shuttle-on-pop="shuttleOnPopType"
      :transition-on-gesture="transitionOnGesture" :shuttle-on-push="shuttleOnPushType"  :easing-function="easingFunctionType" @tap="openPage()">
      <image style="width: 100px;height: 150px;"
        src="https://web-ext-storage.dcloud.net.cn/hello-uni-app-x/drop-card-1.jpg">
      </image>
    </share-element>
  </view>
  <button type="primary" @click="openPage" class="button">
    打开share-element页面
  </button>

  <scroll-view style="flex: 1">
    <view class="content">
      <boolean-data :defaultValue="transitionOnGesture" title="transition-on-gesture= true(仅iOS生效)"
        @change="changeTransitionOnGesture"></boolean-data>

      <text class="uni-common-mt choose-property-title">easing-function:</text>
      <radio-group class="choose-property-type-radio-group" @change="handleEasingFunction">
        <radio class="ml-10 uni-common-mt" v-for="item in easingFunctionTypeList" :key="item" :value="item"
          :checked="easingFunctionType == item">{{ item }}
        </radio>
      </radio-group>

      <text class="uni-common-mt choose-property-title">shuttle-on-push(仅iOS生效):</text>
      <radio-group class="choose-property-type-radio-group" @change="handleShuttleOnPushType">
        <radio class="ml-10 uni-common-mt" v-for="item in shuttleOnTypeList" :key="item" :value="item"
          :checked="shuttleOnPushType == item">{{ item }}
        </radio>
      </radio-group>

      <text class="uni-common-mt choose-property-title">shuttle-on-pop(仅iOS生效):</text>
      <radio-group class="choose-property-type-radio-group" @change="handleShuttleOnPopType">
        <radio class="ml-10 uni-common-mt" v-for="item in shuttleOnTypeList" :key="item" :value="item"
          :checked="shuttleOnPopType == item">{{ item }}
        </radio>
      </radio-group>

      <text class="uni-common-mt choose-property-title">animationType(页面动画降级):</text>
      <radio-group class="choose-property-type-radio-group" @change="handleOpenAnimationType">
        <radio class="ml-10 uni-common-mt" v-for="item in openAnimationTypeList" :key="item" :value="item"
          :checked="openAnimationType == item">{{ item }}
        </radio>
      </radio-group>
    </view>
  </scroll-view>
  <button  @click="gotoShareElementWithSwiper" class="button">
    打开share-element-with-swiper页面
  </button>
  <view style="height: 80px;"></view>
  <share-element class="bottomWrap" share-key="bottom" @tap="openPage()" transitionOnGesture=true>
    <view class="bottom">
      <text style="color: white;">share-element(底部固定)</text>
    </view>
  </share-element>
</template>
<script>
  type ShareElementOpenAnimationType =
    'auto' |
    'none' |
    'slide-in-right' |
    'slide-in-left' |
    'slide-in-top' |
    'slide-in-bottom' |
    'fade-in' |
    'pop-in' |
    'zoom-out' |
    'zoom-fade-out'

  type ShareElementEasingFunctionType =
    'ease' |
    'ease-in' |
    'ease-out' |
    'ease-in-out' |
    'linear'

  type ShuttleOnType =
    'from' |
    'to'

  import { ItemType } from '@/components/enum-data/enum-data-types'
  export default {
    data() {
      return {
        transitionOnGesture: true,
        shuttleOnPopType: 'to' as ShuttleOnType,
        shuttleOnPushType: 'to' as ShuttleOnType,
        shuttleOnTypeList: [
          'from',
          'to'
        ],
        openAnimationType: 'slide-in-right' as ShareElementOpenAnimationType,
        openAnimationTypeList: [
          'auto',
          'none',
          'slide-in-right',
          'slide-in-left',
          'slide-in-top',
          'slide-in-bottom',
          'fade-in',
          'pop-in',
          'zoom-out',
          'zoom-fade-out'
        ],
        easingFunctionType: 'ease' as ShareElementEasingFunctionType,
        easingFunctionTypeList: [
          'ease',
          'ease-in',
          'ease-out',
          'ease-in-out',
          'linear'
        ]
      }
    },
    methods: {
      openPage() {
        uni.navigateTo({
          animationType: this.openAnimationType,
          url: "/pages/component/share-element/share-element-to?shuttleOnPush=" + this.shuttleOnPushType + "&transitionOnGesture=" + this.transitionOnGesture
        })
      },
      gotoShareElementWithSwiper(){
        uni.navigateTo({
          url:'/pages/component/share-element/share-element-with-swiper'
        })
      },
      changeTransitionOnGesture(checked : boolean) {
        console.log(`changeTransitionOnGesture:${checked}`)
        this.transitionOnGesture = checked
      },
      handleOpenAnimationType(e : RadioGroupChangeEvent) {
        this.openAnimationType = e.detail.value as ShareElementOpenAnimationType
      },
      handleEasingFunction(e : RadioGroupChangeEvent) {
        this.easingFunctionType = e.detail.value as ShareElementEasingFunctionType
      },
      handleShuttleOnPopType(e : RadioGroupChangeEvent) {
        this.shuttleOnPopType = e.detail.value as ShuttleOnType
      },
      handleShuttleOnPushType(e : RadioGroupChangeEvent) {
        this.shuttleOnPushType = e.detail.value as ShuttleOnType
      },
    }
  }
</script>

<style>
  .ml-10 {
    margin-left: 10px;
  }

  .choose-property-title {
    font-weight: bold;
  }

  .choose-property-type-radio-group {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .bottomWrap {
    width: 100%;
    bottom: 0px;
    height: 80px;
    position: fixed;
  }

  .bottom {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background-color: #007aff;
  }

  .main {
    padding: 5px 0;
    align-items: center;
    justify-content: center;
  }
</style>