<template>
  <view class="swipeable-item">
    <view
      class="swipeable-item__inner"
      :style="{ transform: `translateX(${translateX}px)`, transition: animating ? 'transform 0.3s ease' : 'none' }"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
      @touchcancel="onTouchEnd"
    >
      <view
        class="swipeable-item__main"
        :style="{ backgroundColor: themeConfig.cardBgColor }"
        @click="onMainClick"
      >
        <slot></slot>
      </view>
      <view class="swipeable-item__actions">
        <view
          v-for="action in actions"
          :key="action.key"
          class="swipeable-item__action"
          :style="{ backgroundColor: getActionColor(action) }"
          @click.stop="onActionClick(action)"
        >
          <text class="swipeable-item__action-text">{{ action.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import themeMixin from '@/mixins/themeMixin.js'
import { THEME_CHANGE_EVENT } from '@/utils/theme.js'

export default {
  name: 'SwipeableItem',
  mixins: [themeMixin],
  props: {
    actions: {
      type: Array,
      required: true
    },
    autoClose: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    index: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      translateX: 0,
      animating: false,
      isOpen: false,
      startX: 0,
      thresholdPx: 0,
      maxOffsetPx: 0
    }
  },
  computed: {
    actionColorMap() {
      return {
        edit: this.themeConfig.primaryColor,
        delete: this.themeConfig.dangerColor,
        done: this.themeConfig.successColor
      }
    }
  },
  created() {
    this.syncThemeConfig()
    this.watchThemeChange()
    this.thresholdPx = uni.upx2px(80)
    this.maxOffsetPx = uni.upx2px(this.actions.length * 160)
  },
  beforeUnmount() {
    if (this.themeChangeHandler) {
      uni.$off(THEME_CHANGE_EVENT, this.themeChangeHandler)
    }
  },
  methods: {
    getActionColor(action) {
      if (action.color) return action.color
      return this.actionColorMap[action.key] || this.themeConfig.primaryColor
    },
    onTouchStart(e) {
      if (this.disabled) return
      this.startX = e.touches[0].clientX
      this.animating = false
    },
    onTouchMove(e) {
      if (this.disabled) return
      const currentX = e.touches[0].clientX
      const delta = currentX - this.startX
      this.translateX = Math.max(-this.maxOffsetPx, Math.min(0, delta))
    },
    onTouchEnd() {
      if (this.disabled) return
      this.animating = true
      if (this.translateX < -this.thresholdPx) {
        this.open()
      } else {
        this.close()
      }
    },
    open() {
      this.translateX = -this.maxOffsetPx
      this.isOpen = true
      this.$emit('open', this.index)
      this.$emit('closeOthers', this.index)
    },
    close() {
      this.translateX = 0
      this.isOpen = false
      this.$emit('close', this.index)
    },
    onMainClick() {
      if (this.isOpen) {
        this.close()
      }
    },
    onActionClick(action) {
      this.$emit('action', action.key)
      if (this.autoClose) {
        this.close()
      }
    }
  }
}
</script>

<style scoped>
.swipeable-item {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.swipeable-item__inner {
  display: flex;
  flex-direction: row;
  width: 100%;
  will-change: transform;
}

.swipeable-item__main {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.swipeable-item__actions {
  display: flex;
  flex-direction: row;
}

.swipeable-item__action {
  width: 160rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.swipeable-item__action-text {
  font-size: 24rpx;
  color: #ffffff;
}
</style>