<template>
  <div>
   <div
     class="ipc-drag-container"
     :class="{ editing: isEditing }"
     :style="{
       marginTop: (scalePx(data.topMargin , 0)) + 'px'
     }"
     ref="containerRef"
   >
     <transition-group
       name="grid-fade"
       tag="div"
       class="grid"
       :style="{
         gridTemplateColumns: 'repeat(' + (data.spanCount || 2) + ', 1fr)',
         columnGap: ( scalePx(data.horizontalSpanPadding, 8)) + 'px',
         rowGap: (scalePx(data.verticalSpanPadding , 12)) + 'px'
       }"
     >
       <div
         v-for="(item, index) in data.list"
         :key="item.id"
         class="grid-item"
        :class="{
          'being-dragged': draggingIndex === index,
          hidden: isDragClone && draggingIndex === index,
          disabled: item.disabled === true,
          deleted: item.deleted
        }"
        v-show="!item.deleted"
         :data-index="index"
         @touchstart="(e) => onTouchStart(e, index)"
         @touchmove="onTouchMove"
         @touchend="onTouchEnd"
         @touchcancel="onTouchEnd"
         @click.stop.prevent="() => onItemClick(item, index)"
       >
         <div class="box" :class="{ shaking: isEditing }">
           <div class="thumb-wrap">
             <img class="thumb" :src="item.imageSrc" alt="" />
            <button class="delete-btn" 
             :style="{ fontSize : data.deleteBtnSize && data.deleteBtnSize * 4  || 16 * 4 }"
            @click.stop="requestDelete(index, item)">×</button>
           </div>
          <div
            class="label-row"
            :style="{
              marginTop: scalePx(data.labelTextMarginTop, 8) + 'px'
            }"
          >
            <div
              class="label"
              :style="{
                fontSize: scalePx(data.labelTextSize, 12) + 'px',
                color: data.labelTextColor || '#666'
              }"
            >
              {{ item.label }}
            </div>
            <img
              @click.stop.prevent="() => onEditClick(item, index)"
              class="edit-icon"
              :src="'data:image/png;base64,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'"
              :style="{ width: scalePx(data.editBtnSize, 12) + 'px', height: scalePx(data.editBtnSize, 12) + 'px' }"
              alt="编辑"
            />
          </div>
         </div>
       </div>
     </transition-group>
   </div>
  <div v-if="showEditDialog" class="modal-mask">
    <div class="modal">
      <div class="modal-title">当前视角名称</div>
      <input
        class="modal-input"
        v-model="editInputValue"
        :placeholder="data.inputPlaceholder || ''"
      />
      <div class="modal-actions">
        <text class="btn cancel" @click="onEditCancel">取消</text>
        <div class="btn-divider"></div>
        <text class="btn confirm" @click="onEditConfirm">确认</text>
      </div>
    </div>
  </div>
  <div v-if="showDeleteConfirm" class="modal-mask">
    <div class="modal">
      <div class="modal-title">温馨提示</div>
      <div class="modal-content">删除所选常看视角后，相关的智能场景将执行失败</div>
      <div class="modal-actions">
        <text class="btn cancel" @click="onDeleteCancel">取消</text>
        <div class="btn-divider"></div>
        <text class="btn confirm" @click="onDeleteConfirmAction">确定</text>
      </div>
    </div>
  </div>
  </div>
 </template>
 
 <script>
 export default {
   name: 'midea-ipc-drag-list-view',
   props: {
     data: {
       type: Object,
       required: true
     }
   },
   data() {
     return {
       // 独立的编辑态
       isEditing: false,
       // 手势与状态
       longPressTimer: null,
       longPressDuration: 350,
       isTouchDragging: false,
       draggingIndex: null,
       // 拖拽克隆
       isDragClone: false,
       dragCloneEl: null,
       dragCloneX: 0,
       dragCloneY: 0,
       targetTouchX: 0,
       targetTouchY: 0,
       touchStartX: 0,
       touchStartY: 0,
       // 移动阈值与滚动判定（对齐 drag-list-view 逻辑）
       isScrolling: false,
       scrollThreshold: 5,
       longPressMoveThreshold: 8,
       lastTouch: null,
       touchOffsetX: 0,
       touchOffsetY: 0,
       // 布局缓存
       containerRect: null,
       itemWidth: 0,
       itemHeight: 0,
       // 动画帧
       rafId: null,
       // 交换频率控制
      lastSwapTime: 0,
      // 编辑弹窗
      showEditDialog: false,
      editInputValue: '',
      editIndex: null,
      showDeleteConfirm: false,
      pendingDeleteIndex: null,
       scale: weex.config.env.scale
     };
   },
   mounted() {
     this.$nextTick(() => {
       this.measureItemSize();
     });
   },
   methods: {
     scalePx(value , defaultVal){
       return value ? value /this.scale : defaultVal /this.scale
     },
     // registerGesture.js 会对 touch.pageX/pageY 乘以 rate(=750/clientWidth)
     // 将其转回 CSS 真实像素，与 getBoundingClientRect() 保持同一坐标系
     toRealPx(weexPx) {
       const rate = 750 / document.documentElement.clientWidth;
       return weexPx / rate;
     },
     measureItemSize() {
       const gridItem = this.$el.querySelector('.grid-item');
       if (gridItem) {
         const rect = gridItem.getBoundingClientRect();
         this.itemWidth = rect.width;
         this.itemHeight = rect.height;
       }
       const container = this.$refs.containerRef;
       if (container) {
         this.containerRect = container.getBoundingClientRect();
       }
     },
 
     onItemClick(item, index) {
       if (this.isTouchDragging || this.longPressTimer || this.secondLongPressTimer) return;
       this.$emit('onClickEvent', { item, index });
     },
  
    requestDelete(index, item) {
      const targetItem = this.data.list[index];
      if (!targetItem || targetItem.deleted) return;
      this.pendingDeleteIndex = index;
      this.showDeleteConfirm = true;
    },

    onDeleteCancel() {
      this.showDeleteConfirm = false;
      this.pendingDeleteIndex = null;
    },

    onDeleteConfirmAction() {
      if (this.pendingDeleteIndex === null) return;
      const item = this.data.list[this.pendingDeleteIndex];
      this.onDelete(this.pendingDeleteIndex, item);
      this.onDeleteCancel();
    },

    onEditClick(item, index) {
      // 点击编辑按钮：弹出编辑名称对话框
      this.editIndex = index;
      this.editInputValue = item && item.label || '';
      this.showEditDialog = true;
    },
    onEditCancel() {
      this.showEditDialog = false;
      this.editInputValue = '';
      this.editIndex = null;
    },
    
    /**
     * @description 校验输入内容，仅允许中文/英文/数字，且去除前后空白。
     * @param {string} value 当前输入值
     * @returns {{ valid: boolean, message?: string, value?: string }}
     */
    validateLabelInput(value) {
      const trimmedValue = (value || '').trim();
      if (!trimmedValue) {
        return { valid: false, message: '视角名称不能为空' };
      }
      if (/[^a-zA-Z0-9\u4e00-\u9fa5]/.test(trimmedValue)) {
        return { valid: false, message: '视角名称只能输入中文、英文和数字' };
      }
      return { valid: true, value: trimmedValue };
    },
    
    showToast(message) {
      console.log(`[TOAST 提示]: ${message}`);
      if (typeof weex !== 'undefined' && weex.requireModule('bridgeModule')) {
        weex.requireModule('bridgeModule').toast({
          message: message,
          bottom: 1,
          duration: 1.5 // 1.5s
        });
      } 
    },
    
    onEditConfirm() {
      const validation = this.validateLabelInput(this.editInputValue);
      if (!validation.valid) {
        this.showToast(validation.message);
        return;
      }
      const newLabel = validation.value;
      
      // 3. 检查长度
      if (newLabel.length > 8) {
        // 长度超限：提示并阻止后续更新和关闭逻辑
        this.showToast('限8个字符以内名称，请重新输入');
        return; 
      }
      const duplicateExists = this.data.list && this.data.list.some((it, idx) => {
        if (idx === this.editIndex) return false;
        if (!it || it.deleted) return false;
        return String(it.label || '') === newLabel;
      });
      if (duplicateExists) {
        this.showToast('已存在此视角');
        return;
      }
      if (this.editIndex !== null && this.data.list && this.data.list[this.editIndex]) {
        this.$set(this.data.list[this.editIndex], 'label', newLabel);
        // 通知外部（可选）
        this.$emit('onLabelEdited', { index: this.editIndex, label: newLabel, item: this.data.list[this.editIndex] });
      }
      this.showEditDialog = false;
      this.editInputValue = '';
      this.editIndex = null;
    },
 
    /**
     * @description 删除列表项
     * FIX: 修复了参数顺序错误，确保传入的第一个参数是 index
     * @param {number} index 列表项的索引
     * @param {object} item 列表项数据
     */
    onDelete(index, item) {
      const currentItem = this.data.list[index];
      if (!currentItem) return;
      this.$emit('onDeleteEvent', { item: currentItem, index });
      this.$set(currentItem, 'deleted', true);
      this.$nextTick(this.measureItemSize);
    },
 
     onTouchStart(e, index) {
       if (!e.changedTouches || e.changedTouches.length === 0) return;
      const targetItem = this.data.list[index];
      if (targetItem && targetItem.deleted) {
        return;
      }
      this.measureItemSize();
       const touch = e.changedTouches[0];
       this.touchStartX = this.toRealPx(touch.pageX);
       this.touchStartY = this.toRealPx(touch.pageY);
       this.lastTouch = touch;
       this.isScrolling = false;
 
       // 与 drag-list-view 一致：统一使用一次长按回调
       this.clearTimers();
       this.longPressTimer = setTimeout(() => {
         this.longPressTimer = null;
         this.activateDragMode(index);
       }, this.longPressDuration);
     },
 
     // 长按回调：进入抖动编辑并立即开始拖拽（一次长按即可拖动）
     activateDragMode(index) {
       const touch = this.lastTouch;
       if (!touch) return;
       this.isEditing = true;
       console.log('[cdj-drag] activateDragMode → isEditing=true, start drag', { index });
       this.activateDrag(index, touch);
     },
 
     activateDrag(index, touch) {
       this.draggingIndex = index;
       this.isTouchDragging = true;
 
       const gridItems = this.$el.querySelectorAll('.grid-item');
       const el = gridItems[index];
       if (!el) return;
       const rect = el.getBoundingClientRect();
 
       this.touchOffsetX = this.toRealPx(touch.pageX) - rect.left;
       this.touchOffsetY = this.toRealPx(touch.pageY) - rect.top;
 
       // 创建拖拽克隆
       this.createDragClone(el, rect);
 
       // 初始位置（相对容器）
       this.containerRect = this.$refs.containerRef.getBoundingClientRect();
       this.dragCloneX = rect.left - this.containerRect.left;
       this.dragCloneY = rect.top - this.containerRect.top;
       this.updateDragCloneStyle();
     },
 
     createDragClone(sourceEl, rect) {
       this.destroyDragClone();
       const clone = document.createElement('div');
       clone.className = 'drag-clone';
       clone.style.width = rect.width + 'px';
       clone.style.height = rect.height + 'px';
       clone.style.position = 'absolute';
       clone.style.zIndex = '9999';
       clone.style.pointerEvents = 'none';
       clone.style.left = '0';
       clone.style.top = '0';
       clone.style.willChange = 'transform';
       clone.style.transition = 'none';
       clone.innerHTML = sourceEl.querySelector('.box').outerHTML;
       this.$refs.containerRef.appendChild(clone);
       this.dragCloneEl = clone;
       this.isDragClone = true;
     },
 
     destroyDragClone() {
       if (this.dragCloneEl && this.dragCloneEl.parentNode) {
         this.dragCloneEl.parentNode.removeChild(this.dragCloneEl);
       }
       this.dragCloneEl = null;
       this.isDragClone = false;
     },
 
     onTouchMove(e) {
       // 长按判定阶段：控制移动阈值与滚动
       if (!this.isTouchDragging && this.longPressTimer) {
         const touch = e.changedTouches && e.changedTouches[0];
         if (touch) {
           const dx = Math.abs(this.toRealPx(touch.pageX) - this.touchStartX);
           const dy = Math.abs(this.toRealPx(touch.pageY) - this.touchStartY);
           // 垂直滚动判定优先
           if (dy > this.scrollThreshold * 3) {
             this.isScrolling = true;
             clearTimeout(this.longPressTimer);
             this.longPressTimer = null;
             return;
           }
           // 超过阈值则取消长按
           if (dx > this.longPressMoveThreshold || dy > this.longPressMoveThreshold) {
             clearTimeout(this.longPressTimer);
             this.longPressTimer = null;
             return;
           }
           // 保持长按：阻止默认和冒泡，避免滚动打断
           if (e.preventDefault) e.preventDefault();
           if (e.stopPropagation) e.stopPropagation();
         }
         return;
       }
 
       if (!this.isTouchDragging) return;
       const touch = e.changedTouches && e.changedTouches[0];
       if (!touch) return;
 
       const targetX = this.toRealPx(touch.pageX) - this.touchOffsetX - this.containerRect.left;
       const targetY = this.toRealPx(touch.pageY) - this.touchOffsetY - this.containerRect.top;
 
       // 约束在容器内部
       const maxX = this.containerRect.width - this.itemWidth;
       const maxY = this.containerRect.height - this.itemHeight;
       this.dragCloneX = Math.max(0, Math.min(targetX, maxX));
       this.dragCloneY = Math.max(0, Math.min(targetY, maxY));
       this.updateDragCloneStyle();
 
       // 控制交换频率
       const now = Date.now();
       if (now - this.lastSwapTime > 120) {
         this.lastSwapTime = now;
         this.maybeSwapByPosition(this.toRealPx(touch.pageX), this.toRealPx(touch.pageY));
       }
     },
 
     updateDragCloneStyle() {
       if (!this.dragCloneEl) return;
       this.dragCloneEl.style.transform = `translate(${this.dragCloneX}px, ${this.dragCloneY}px)`;
     },
 
     onTouchEnd() {
       this.clearTimers();
       if (this.isTouchDragging) {
         const idx = this.draggingIndex;
         this.isTouchDragging = false;
         this.draggingIndex = null;
         this.destroyDragClone();
         this.$emit('onDragEndEvent', { list: this.data.list, index: idx });
       }
     },
 
     clearTimers() {
       if (this.longPressTimer) {
         clearTimeout(this.longPressTimer);
         this.longPressTimer = null;
       }
       // 移除二次长按定时器逻辑，统一在 activateDragMode 处理
     },
 
     maybeSwapByPosition(pageX, pageY) {
       const gridItems = Array.from(this.$el.querySelectorAll('.grid-item'));
       let targetIndex = null;
       for (let i = 0; i < gridItems.length; i++) {
        if (i === this.draggingIndex) continue;
        const listItem = this.data.list[i];
        if (listItem && listItem.deleted) continue;
         const rect = gridItems[i].getBoundingClientRect();
         const centerX = (rect.left + rect.right) / 2;
         const centerY = (rect.top + rect.bottom) / 2;
         const halfW = rect.width * 0.35;
         const halfH = rect.height * 0.35;
         if (
           pageX >= centerX - halfW && pageX <= centerX + halfW &&
           pageY >= centerY - halfH && pageY <= centerY + halfH
         ) {
           targetIndex = i;
           break;
         }
       }
 
       if (targetIndex !== null && targetIndex !== this.draggingIndex) {
         const a = this.draggingIndex;
         const b = targetIndex;
         const tmp = this.data.list[a];
         this.$set(this.data.list, a, this.data.list[b]);
         this.$set(this.data.list, b, tmp);
         this.draggingIndex = b;
       }
    },
    getListData(callback) {
      const list = Array.isArray(this.data && this.data.list) ? this.data.list : [];
      const arr = [];
      list.forEach((it) => {
        if (!it || it.deleted) return;
        arr.push({
          id: String((it && (it.id != null ? it.id : '')) || ''),
          label: String((it && (it.label != null ? it.label : '')) || ''),
          imageSrc: (it && it.imageSrc) || ''
        });
      });
      const payload = { listData: arr, list: arr };
      if (typeof callback === 'function') {
        try { callback(payload); } catch (e) { /* ignore */ }
      }
      return payload;
    }
   }
 };
 </script>
 
 <style scoped>
 .ipc-drag-container {
   position: relative;
   background:#fff;
   padding:20px
 }
 .grid {
   display: grid;
   width: 100%;
 }
 .grid-item {
   position: relative;
   box-sizing: border-box;
   transition: transform 0.25s ease;
 }
 .grid-item.hidden {
   opacity: 0 !important;
   visibility: hidden;
 }
 .grid-item.being-dragged {
   opacity: 0.2;
 }
 .box {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .box.shaking {
   animation: shake 0.6s infinite;
   transform-origin: center center;
 }
 @keyframes shake {
   0% { transform: rotateZ(1.8deg); }
   25% { transform: rotateZ(-1.8deg); }
   50% { transform: rotateZ(1.8deg); }
   75% { transform: rotateZ(-1.8deg); }
   100% { transform: rotateZ(1.8deg); }
 }
 .thumb-wrap {
   position: relative;
   width: 100%;
   /* 统一比例，按宽度自适应，可按需调整为固定高 */
   aspect-ratio: 16 / 9;
   background: #0000000a;
   overflow: hidden;
   border-radius: 16px;
 }
 .thumb {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 .delete-btn {
   position: absolute;
   top: 0;
   right: 0;
   border: none;
   color: #fff;
   font-size: 70px;
   background:transparent;
   font-weight:300
 }
 .label {
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
.label-row {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
}
 .drag-clone {
   box-sizing: border-box;
   pointer-events: none;
   user-select: none;
 }

/* 简易弹窗样式 */
.modal-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.modal {
  width: 520px;
  max-width: 520px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.modal-title {
  font-size: 28px;
  font-weight: 300;
  color: #222;
  margin: 24px 0 24px 0px;
  text-align: center;
  font-weight: 500;
}
.modal-content {
  font-size: 24px;
  color: #333;
  text-align: center;
  padding-bottom: 16px;
  padding: 10px 16px;
}
.modal-input {
  width: 90%;
  margin: 10px auto;
  box-sizing: border-box;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  padding: 20px 22px;
  font-size: 24px;
  outline: none;
}
.modal-input:focus {
  border-color: #1677ff;
}
.modal-actions {
  border-top:1px solid #ccc;
  margin-top: 14px;
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  justify-content: space-evenly;
}
.btn {
  padding: 20px 24px;
  font-size: 30px;
  color:#46a2df
}
.btn-divider {
  width: 1px;
  height: 100%;
  background: #ccc;
}
 </style>