<template>
  <view
    class="manHourCard"
    :key="index"
    @touchstart="touchStart($event, index)"
    @touchmove="touchMove"
    @touchend="touchEnd"
    @mousedown="mouseDown($event, index)"
    @mousemove="mouseMove"
    @mouseup="mouseUp"
    @mouseleave="mouseUp"
  >
    <!-- 左滑删除按钮 -->
    <view
      class="delete-btn"
      :style="{ transform: `translateX(${info.slideX || 0}rpx)` }"
      @click.stop="$emit('deletemanHour',info)"
      v-if="info.state == 0"
    >
      <text>删除</text>
    </view>

    <!-- 服务内容 -->
    <view
      class="manHour-content"
      :style="{ transform: `translateX(${info.slideX || 0}rpx)` }"
    >
      <view class="top_info">
        <!-- 服务图片 -->
        <image
          :src="photo && photo[0]"
          mode="aspectFill"
          class="manHour-image"
        />

        <!-- 服务信息 -->
        <view class="manHour-info">
          <view class="manHourTop">
            <view class="manHour-title white-space-nowrap">{{ info.title }}</view>
            <view class="manHour-subtitle white-space-nowrap"
              >服务范围：{{
                info.first_class_title +
                " " +
                info.second_class_title.join("、")
              }}
            </view>
          </view>
          <view class="manHour-price">
            <text class="price-symbol">¥</text>
            <text class="price-value">{{ price }}</text>
            <text class="price-unit">元\10分钟</text>
          </view>
        </view>
      </view>

      <!-- 状态标签 -->
      <view :class="['status-tag', 'state' + info.state]">
        <text class="status-text">{{
          info.state == 0
            ? "草稿"
            : info.state == 1
            ? "审核中"
            : info.state == 2
            ? "已上架"
            : info.state == 3
            ? "下架"
            : info.state == 4
            ? "驳回"
            : ""
        }}</text>
      </view>

      <!-- 编辑按钮 -->
      <view class="btns">
        <view
          class="view-btn"
          @click="$emit('viewRemove', info)"
          v-if="info.state == 2"
        >
          <text class="view-text">下架</text>
        </view>
        <view
          class="view-btn"
          @click="$emit('viewList', info)"
          v-if="info.state == 3"
        >
          <text class="view-text">上架</text>
        </view>
        <view class="view-btn" @click="$emit('viewEdit', info)">
          <text class="view-text">编辑</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "manHourCard",

  props: {
    info: {
      type: Object,
    },
    index: {
      type: Number,
    },
  },
  data() {
    return {
      currentIndex: "",
    };
  },
  computed: {
    photo() {
      return JSON.parse(this.info.photo);
    },
    price() {
      return Number(this.info.price);
    },
  },
  methods: {
    touchStart(e, index) {
      if (this.info.state != 0) return;
      // 阻止默认事件和冒泡

      e.preventDefault();
      e.stopPropagation();

      // 获取触摸事件的坐标
      if (e.touches && e.touches[0]) {
        this.startX = e.touches[0].clientX;
        this.currentIndex = index;
      }
    },
    touchMove(e) {
      if (this.info.state !== 0) return;

      // 阻止默认事件和冒泡
      e.preventDefault();
      e.stopPropagation();

      // 获取触摸事件的坐标
      if (e.touches && e.touches[0]) {
        this.moveX = e.touches[0].clientX - this.startX;

        // 限制只能向左滑动
        if (this.moveX > 0) {
          this.moveX = 0;
        }
        // 限制最大滑动距离
        if (this.moveX < -160) {
          this.moveX = -160;
        }
        // 更新当前项的滑动状态
        this.$emit("changeSlide", {
          index: this.currentIndex,
          slide: this.moveX,
        });
      }
    },
    touchEnd(e) {
      if (this.info.state !== 0) return;

      // 阻止默认事件和冒泡
      e.preventDefault();
      e.stopPropagation();

      // 如果滑动距离超过一半，则完全展开
      if (this.moveX < -80) {
        this.$emit("changeSlide", { index: this.currentIndex, slide: -160 });
      } else {
        // 否则恢复原位
        this.$emit("changeSlide", { index: this.currentIndex });
      }
      this.currentIndex = -1;
    },
    mouseDown(e, index) {
      if (this.info.state !== 0) return;
      // 阻止默认事件和冒泡
      e.preventDefault();
      e.stopPropagation();

      this.startX = e.clientX;
      this.currentIndex = index;
    },
    mouseMove(e) {
      if (this.info.state !== 0) return;

      // 阻止默认事件和冒泡
      e.preventDefault();
      e.stopPropagation();

      this.moveX = e.clientX - this.startX;

      // 限制只能向左滑动
      if (this.moveX > 0) {
        this.moveX = 0;
      }
      // 限制最大滑动距离
      if (this.moveX < -160) {
        this.moveX = -160;
      }
      // 更新当前项的滑动状态
      this.$emit("changeSlide", {
        index: this.currentIndex,
        slide: this.moveX,
      });
    },
    mouseUp(e) {
      if (this.info.state !== 0) return;

      // 阻止默认事件和冒泡
      e.preventDefault();
      e.stopPropagation();

      // 如果滑动距离超过一半，则完全展开
      if (this.moveX < -80) {
        this.$emit("changeSlide", {
          index: this.currentIndex,
          slide: -160,
        });
      } else {
        // 否则恢复原位
        this.$emit("changeSlide", {
          index: this.currentIndex,
        });
      }
      this.currentIndex = -1;
    },
  },
};
</script>

<style lang="less" scoped>
.manHourCard {
  //   height: 248rpx;
  position: relative;
  background-color: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 32rpx;
  box-sizing: border-box;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
.manHourCard:last-child {
  margin-bottom: 0;
}

.manHour-content {
  width: 100%;
  height: 100%;
  padding: 24rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  .top_info {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    margin-bottom: 30rpx;
    border-bottom: 2rpx solid #f6f5f5;
    padding-bottom: 24rpx;
  }
  .btns {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

.delete-btn {
  position: absolute;
  right: -160rpx;
  top: 0;
  width: 160rpx;
  height: 100%;
  background-color: #E8101E;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  transition: transform 0.3s ease;
  z-index: 2;
}

.manHourCard:active .manHour-content,
.manHourCard:active .delete-btn {
  transform: none;
}

.manHour-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 24rpx;
  margin-right: 30rpx;
  background-color: rgba(0, 0, 0, 0.05);
}

.manHour-info {
  height: 200rpx;
  width: 350rpx;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

.manHour-title {
  font-size: 30rpx;
  padding-right: 20rpx;
  line-height: 30rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 20rpx;
}
.manHour-subtitle {
  font-size: 26rpx;
  line-height: 26rpx;
  color: #666;
}

.manHour-price {
  display: flex;
  align-items: baseline;
  font-weight: 500;
}

.price-symbol {
  font-size: 30rpx;
  color: #E8101E;
}

.price-value {
  font-size: 30rpx;
  color: #E8101E;
}

.price-unit {
  font-size: 30rpx;
  color: #E8101E;
}

.status-tag {
  position: absolute;
  top: 0rpx;
  right: 0rpx;
  border-radius: 0 0 0 20rpx;
  line-height: 38rpx;
  text-align: center;
  box-sizing: border-box;
  font-size: 24rpx;
  padding: 10rpx 18rpx;
}
/* 已上架 */
.status-tag.state2 {
  background-color: rgba(252, 67, 124, 0.15);
}
.status-tag.state2 .status-text {
font-weight: 400;
font-size: 26rpx;
color: #E8101E;
line-height: 37rpx;
text-align: left;
font-style: normal;
}
/* 审核中 */
.status-tag.state1 {
  background-color: rgba(40, 209, 137, 0.2);
}
.status-tag.state1 .status-text {
  color: #28d189;
}
/* 草稿/撤回 */
.status-tag.state0,
.status-tag.state3,
.status-tag.state4 {
  background-color: rgba(209, 15, 19, 0.2);
}
.status-tag.state0 .status-text,
.status-tag.state3 .status-text,
.status-tag.state4 .status-text {
  color: #d10f13;
}

.view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 39rpx;
  width: 160rpx;
  height: 64rpx;
  border-radius: 64rpx;
  border: 2rpx solid #979797;
}
.view-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}
.view-text {
  font-size: 26rpx;
  color: #333333;
}

.load-more {
  text-align: center;
  padding: 20rpx 0;
  color: #999999;
  font-size: 24rpx;
}

.manHourCard {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.manHour-content,
.delete-btn {
  will-change: transform;
}

.add-btn {
  height: 140rpx;
}
/* 平台特定样式 */
/* #ifdef H5 */
.manHour-container {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
/* #endif */

/* #ifdef APP-PLUS */
.manHour-image {
  border: 1rpx solid #eeeeee;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.manHourCard {
  /* 小程序阴影效果 */
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
/* #endif */
</style>
