<template>
  <div :style="containerStyle">
    <div
      ref="skid"
      v-for="(item, i) of data"
      @click.self="onNodeClick(item, i)"
      :key="'skid-' + i"
      class="dof-skid"
      :style="{
        width: 750 + item.right.length * 160 + 'px',
        height: height + 'px'
      }"
      @touchstart="e => !isAndroid && onPanStart(e, item, i)"
      @horizontalpan="e => isAndroid && onPanStart(e, item, i)"
      @touchend="e => onPanEnd(e, item, i)"
    >
      <div :style="styles" class="swipe-action-center">
        <slot :val="{ item: item, index: i }" />
      </div>
      <!-- <text :style="{lineHeight: height + 'px'}" :class="['box-center', 'border', 'text', i + 1 === data.length && 'box-center-last']">{{item.title}}</text> -->
      <div class="swipe-action-right">
        <!-- <text
          class="swipe-action-child swipe-action-text"
          @click="onRightNode(item, child, i)"
          v-for="(child, childIdx) of item.right"
          :style="
            Object.assign({ lineHeight: height + 'px' }, child.style || {})
          "
          :key="'child-' + childIdx"
          ref="button_small"
          >{{ child.text }}</text
        > -->
        <div
          class="swipe-action-child"
          @click="onRightNode(item, child, i)"
          v-for="(child, childIdx) of item.right"
          :key="'child-' + childIdx"
          ref="button_small"
        >
          <!-- 1~3个字 -->
          <text
            v-if="child.text.length <= 3"
            class="swipe-action-text"
            :style="
              Object.assign({ lineHeight: height + 'px' }, child.style || {})
            "
            >{{ child.text }}</text
          >
          <!-- 4~6个字 -->
          <div
            v-if="child.text.length >= 4"
            class="swipe-action-child"
            :style="Object.assign({ height: height + 'px' }, child.style || {})"
          >
            <text
              :style="
                Object.assign(
                  { marginTop: heightChoice + 'px' },
                  child.style || {}
                )
              "
              class="swipe-action-text"
              >{{ child.text.slice(0, child.text.length / 2) }}</text
            >
            <text
              :style="
                Object.assign(
                  { marginBottom: heightChoice + 'px' },
                  child.style || {}
                )
              "
              class="swipe-action-text"
              >{{ child.text.slice(2, child.text.length) }}</text
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.skid {
  align-items: stretch;
}
.border {
  border-bottom-width: 1px;
  border-bottom-color: #dddddd;
}
.dof-skid {
  flex-direction: row;
  background-color: #ffffff;
  align-items: center;
}
.swipe-action-right {
  flex-direction: row;
  align-items: center;
}

.swipe-action-center {
  width: 750px;
}

/* .box-center {
  width: 735px;
  line-height: 90px;
  background-color: #FFFFFF;
  margin-left: 15px !important;
  margin-left: 15px;
}
.box-center-last {
  width: 750px;
  margin-left: 0 !important;
  padding-left: 15px !important;
  margin-left: 0;
  padding-left: 15px;
} */

.swipe-action-child {
  width: 160px;
  background-color: #dddddd;
  display: flex;
  align-items: stretch;
  /* 
  text-align: center;
  line-height: 90px; */
  /* align-items: stretch; */
}
.swipe-action-text {
  font-family: PingFangSC-Medium;
  font-size: 32px;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  /* line-height: 42px; */
}
</style>

<script>
import Binding from 'weex-bindingx/lib/index.weex.js'
const animation = weex.requireModule('animation')
import Utils from '../utils'
const dom = weex.requireModule('dom')
import { Core } from '../../index'

export default {
  props: {
    containerStyle: {
      type: Object,
      default: () => ({
        backgroundColor: '#dddddd',
        borderTopColor: '#dddddd',
        borderTopWidth: 1
      })
    },
    data: {
      type: Array,
      default: () => []
    },
    height: {
      type: Number,
      default: 90
    },
    styles: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      mobileX: 0,
      webStarX: 0,
      saveIdx: null,
      isAndroid: Utils.env.isAndroid(),
      isIOS: Utils.env.isIOS(),
      /* heightChoice: 0 */
    }
  },
  methods: {
    special(dom, styles) {
      animation.transition(dom, {
        styles,
        duration: 200, //ms
        timingFunction: 'ease',
        delay: 10 //ms
      })
    },
    onRightNode(pNode, node, i) {
      node.onPress()
      if (pNode.autoClose)
        this.special(this.$refs.skid[i], {
          transform: 'translate(0, 0)'
        })
    },
    onNodeClick(node, i) {
      if (this.mobileX < 0) {
        this.mobileX = 0
        this.special(this.$refs.skid[this.saveIdx], {
          transform: 'translate(0, 0)'
        })
        this.isAndroid &&
          this.special(this.$refs.skid[i], {
            transform: 'translate(0, 0)'
          })
      } else {
        this.$emit('onNodeClick', node, i)
      }
    },

    onPanEnd(e, node, i) {
      if (Utils.env.isWeb()) {
        const webEndX = e.changedTouches[0].pageX
        this.movingDistance(webEndX - this.webStarX, node, this.$refs.skid[i])
      }
    },
    onPanStart: function(e, node, i) {
      const { saveIdx } = this
      if (saveIdx !== i && saveIdx !== null && this.$refs.skid[saveIdx]) {
        this.special(this.$refs.skid[saveIdx], {
          transform: 'translate(0, 0)'
        })
        this.mobileX = 0
      }
      this.saveIdx = i
      !Utils.env.isWeb() ? this.mobile(e, node, i) : this.web(e, node, i)
      e.stopPropagation()
    },
    web(e, node, i) {
      this.webStarX = e.changedTouches[0].pageX
    },
    mobile(e, node, i) {
      var el = this.$refs['skid'][i]
      Binding.bind(
        {
          anchor: el.ref,
          eventType: 'pan',
          props: [
            {
              element: el.ref,
              property: 'transform.translateX',
              expression: `x+${this.isAndroid ? 0 : this.mobileX}`
            }
          ]
        },
        e => {
          const { state, deltaX } = e
          if (state === 'end') {
            this.mobileX += deltaX
            this.movingDistance(this.mobileX, node, el)
          }
        }
      )
    },
    movingDistance(scope, node, el) {
      const len = node.right ? node.right.length : 0
      const distance = len * -160
      if (scope < -20) {
        this.special(el, {
          transform: `translate(${distance}px, 0)`
        })
        this.mobileX = distance
      } else {
        this.special(el, {
          transform: 'translate(0, 0)'
        })
        this.mobileX = 0
      }
    }
  },
  computed: {
    heightChoice() {
      let h = 0
      if (this.isAndroid) {
        h = this.height / 2 - 39
      } else if (this.isIOS) {
        h = this.height / 2 - 42
      }
      return h
    }
  }
}
</script>
