<template>
  <div class="Clipping">
    <div class="photo-wrapper">
      <!-- <image mode="widthFix" :src="img" /> -->
      <kspCropper mode="free" ref="Cropper" :url="img" @ok="onOk"></kspCropper>
    </div>
    <div class="photo-footer">
      <div class="title">
        <span @click="back">返回</span>
        <h2>裁剪</h2>
        <span class="save-btn" @click="save">保存</span>
      </div>
      <scroll-view class="photo-bottom" scroll-x v-if="false">
        <div class="clipping-item" @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">
          <image src="./images/clipping/yuantu.png" />
          <span>原图</span>
        </div>
        <div class="clipping-item" @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">
          <image src="./images/clipping/clipping5.png" />
          <span>自由</span>
        </div>
        <div class="clipping-item" @click="currIndex = 2" :class="[currIndex === 2 ? 'active' : '']">
          <image src="./images/clipping/clipping4.png" />
          <span>正方形</span>
        </div>
        <div class="clipping-item" @click="currIndex = 3" :class="[currIndex === 3 ? 'active' : '']">
          <image src="./images/clipping/clipping3.png" />
          <span>2:3</span>
        </div>
        <div class="clipping-item" @click="currIndex = 4" :class="[currIndex === 4 ? 'active' : '']">
          <image src="./images/clipping/clipping2.png" />
          <span>3:2</span>
        </div>
        <div class="clipping-item" @click="currIndex = 5" :class="[currIndex === 5 ? 'active' : '']">
          <image src="./images/clipping/clipping1.png" />
          <span>3:4</span>
        </div>
      </scroll-view>
    </div>
  </div>
</template>

<script>
  import kspCropper from './components/ksp-cropper.vue'
  export default {
    name: 'Clipping',

    appName: '图片剪裁',

    components: {
      kspCropper
    },

    data () {
      return {
        img: '',
        currIndex: 0
      }
    },

    onLoad (query) {
      this.img = decodeURIComponent(query.url)
      this.type = query.type
    },

    methods: {
      back () {
        uni.navigateBack({
          delta: 1
        })
      },

      save () {
        this.$refs.Cropper.cropAppH5().then(res => {
          console.log(res)
        })
      },

      onOk (e) {
        uni.$emit('cropper', e.path)

        this.back()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .Clipping {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background: #000;

    * {
      box-sizing: border-box;
    }

    .photo-footer {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 1;
      width: 100%;
      background: #FFFFFF;
      border-radius: 32px 32px 0px 0px;
      border: 1px solid #DDDDDD;

      .title {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        height: 96px;

        span {
          position: absolute;
          top: 50%;
          left: 32px;
          z-index: 1;
          color: #222;
          font-size: 32px;
          font-weight: 600;
          transform: translateY(-50%);
        }

        .save-btn {
          left: initial;
          right: 32px;
        }

        h2 {
          color: #333;
          font-size: 28px;
          font-weight: 600;
        }
      }

      .photo-bottom {
        padding: 48px 48px;
        font-size: 0;
        white-space: nowrap;

        .clipping-item {
          display: inline-block;
          margin-right: 48px;
          text-align: center;

          &:last-child {
            margin-right: 0;
          }

          span {
            display: block;
            color: #333;
            font-size: 28px;
          }

          image {
            width: 80px;
            height: 80px;
          }

          &.active {
            span {
              color: #3975C6;
            }
          }
        }
      }
    }

    .photo-wrapper {
      display: flex;
      align-items: center;
      width: 100%;
      height: calc(100vh - 312px);

      & > image {
        width: 100%;
      }
    }
  }
</style>
