<template>
  <page-head title="share-element"></page-head>
  <view class="main">
    <swiper circular="true">
      <swiper-item>
        <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>
      </swiper-item>
    </swiper>
  </view>
  <button type="primary" @click="openPage" class="button">
    打开share-element页面
  </button>

</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
        })
      }
    }
  }
</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>