<template>
  <div class="h5-editor-container">
    <!-- 标题编辑栏 -->
    <div class="title-bar">
      <el-input v-model="pageTitle" placeholder="输入落地页标题" class="title-input" />
    </div>
    <el-row :gutter="16" class="editor-wrapper">
      <!-- 左上：页面选择面板 -->
      <el-col :span="3" class="page-panel">
        <div class="panel-header">
          <h3>页面选择</h3>
        </div>
        <div class="page-list">
          <div 
            v-for="page in pageList" 
            :key="page.pageStep"
            class="page-card" 
            :class="{active: currentPageStep === page.pageStep}"
            @click="switchPage(page.pageStep)"
          >
            <div class="page-icon">
              <i :class="page.icon"></i>
            </div>
            <div class="page-name">{{ page.name }}</div>
          </div>
        </div>
      </el-col>

      <!-- 左下：组件面板 -->
      <el-col :span="3" class="left-panel">
        <div class="panel-header">
          <h3>组件库</h3>
        </div>
        <div class="components-list">
          <div v-for="(group, idx) in componentList" :key="idx" class="component-group">
            <div class="group-title">
              <i class="el-icon-box"></i>
              {{ group.groupName }}
            </div>
            <div class="buttons-wrapper">
              <div 
                v-for="comp in group.comps" 
                :key="comp.type"
                class="comp-button" 
                draggable="true"
                @dragstart="handleDragStart($event, comp)"
                @dragend="handleDragEnd"
              >
                <i :class="comp.icon"></i>
                <span>{{ comp.label }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      
      <!-- 中间：预览区域 -->
      <el-col :span="10" class="center-panel">
        <div class="panel-header">
          <h3>页面预览</h3>
          <span class="device-info">手机预览 (375px)</span>
        </div>
        <div class="parent-container">
          <!-- 模拟手机导航栏 -->
          <div class="mobile-nav-bar">
            <div class="nav-left">
              <i class="el-icon-arrow-left"></i>
            </div>
            <div class="nav-title">{{ pageTitle || '落地页标题' }}</div>
            <div class="nav-right">
              <i class="el-icon-more"></i>
            </div>
          </div>
          <div class="view-body" @dragover.prevent="handleDragOver" @drop="handleDrop" @dragleave="handleDragLeave" @mousemove="handleMouseMove">
            <draggable 
              v-model="list" 
              @end="end" 
              class="draggable-area"
              animation="200"
              group="components"
              :disabled="false"
              ghost-class="ghost"
              drag-class="drag"
            >
              <div v-for="(item, index) in list" :key="'item-' + index" 
                   class="draggable-wrapper"
                   @dragenter="handleItemDragEnter($event, index)"
                   @dragover="handleItemDragOver($event, index)"
                   @dragleave="handleItemDragLeave($event, index)">
                <div @click="select(index)" class="view-item" :class="{active: item.active}">
                  <component :is="item.type" :config="item"/>
                  <!-- 删除按钮 -->
                  <div v-if="item.active" class="delete-button-wrapper" @click.stop="handleDelete(index)">
                    <i class="el-icon-close"></i>
                  </div>
                </div>
              </div>
            </draggable>
            <div v-if="list.length === 0" class="empty-state">
              <i class="el-icon-picture"></i>
              <p>从左侧拖拽或点击添加组件</p>
            </div>
          </div>
        </div>
      </el-col>
      
      <!-- 右侧：属性面板 -->
      <el-col :span="8" class="right-panel">
        <div class="panel-header">
          <h3>属性设置</h3>
        </div>
        <div class="properties-wrapper">
          <form-wrapper
            :form="form"
            :index="index"
            :list="list"
            @update:form="updateForm"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import H5Text from '@/components/H5/h5-text.vue'
import H5Image from '@/components/H5/h5-image.vue'
import H5Button from '@/components/H5/h5-button.vue'
import H5Sep from '@/components/H5/h5-sep.vue'
import H5Countdown from '@/components/H5/h5-countdown.vue'
import H5Form from '@/components/H5/h5-form.vue'
import H5LinkButton from '@/components/H5/h5-link-button.vue'
import H5AddWechatButton from '@/components/H5/h5-add-wechat-button.vue'
import H5Qrcode from '@/components/H5/h5-qrcode.vue'
import FormWrapper from '@/components/H5/FormWrapper.vue'
import H5Chat from '@/components/H5/h5-chat.vue'
import AgentAvatar from '@/assets/images/customer.png?inline'

export default {
  components: {
    draggable, // 对应模板中的<h5-text>
    H5Text, // 对应模板中的<h5-text>
    H5Button, // 对应模板中的<h5-text>
    H5Image,// 对应模板中的<h5-image>
    H5Sep,// 对应模板中的<h5-sep>
    H5Countdown,// 对应模板中的<h5-countdown>
    H5Form,// 对应模板中的<h5-form>
    H5LinkButton,// 对应模板中的<h5-link-button>
    H5AddWechatButton,// 对应模板中的<h5-add-wechat-button>
    H5Qrcode,// 对应模板中的<h5-qrcode>
    FormWrapper,
    H5Chat
  },
  mounted() {
    this.initData(this.json)
  },
  props: {
    json: {
      type: String,
      default: '[]'
    }
  },
  data() {
    return {
      pageTitle: '',
      currentPageStep: 'home',
      pageList: [
        { pageStep: 'home', name: '首页', icon: 'el-icon-house' },
        { pageStep: 'appletLand', name: '小程序授权页', icon: 'el-icon-document' },
        { pageStep: 'purchaseSuccess', name: '小程序出码页', icon: 'el-icon-success' }
      ],
      configList: [],
      componentList: [{
        groupName: '基础控件',
        comps: [
          {
            type: 'h5-text',
            label: '文本',
            icon: 'el-icon-document'         // 文档图标更符合文本语义
          },
          {
            type: 'h5-image',
            label: '图片',
            icon: 'el-icon-picture'          // 明确的图片图标
          },
          {
            type: 'h5-sep',
            label: '分割线',
            icon: 'el-icon-minus'            // 减号图标模拟分割线效果
          }
        ]
      }, {
        groupName: '营销控件',
        comps: [
          {
            type: 'h5-countdown',
            label: '倒计时',
            icon: 'el-icon-timer'            // 计时器图标表示倒计时
          },
          {
            type: 'h5-form',
            label: '表单',
            icon: 'el-icon-document-copy'    // 表单图标
          },
          {
            type: 'h5-link-button',
            label: '跳转按钮',
            icon: 'el-icon-connection'       // 跳转图标
          },
          {
            type: 'h5-add-wechat-button',
            label: '加微按钮',
            icon: 'el-icon-connection'       // 加微图标
          },
          {
            type: 'h5-qrcode',
            label: '二维码',
            icon: 'el-icon-picture'          // 二维码图标
          }
        ]
      }],
      list: [],
      index: -1,
      form: {},
      draggedComponent: null, // 存储被拖拽的组件信息
      insertIndex: -1 // 存储插入位置
    }
  },
  methods: {
    initData(json, templateType) {
      // 根据模板类型设置页面列表
      if (templateType === '小程序表单类') {
        this.pageList = [
          { pageStep: 'home', name: '首页', icon: 'el-icon-house' },
          { pageStep: 'appletLand', name: '小程序授权页', icon: 'el-icon-document' },
          { pageStep: 'purchaseSuccess', name: '小程序出码页', icon: 'el-icon-success' }
        ]
      } else if (templateType === '小程序加粉类') {
        this.pageList = [
          { pageStep: 'home', name: '首页', icon: 'el-icon-house' },
          { pageStep: 'purchaseSuccess', name: '小程序出码页', icon: 'el-icon-success' }
        ]
      } else if (templateType === '免费加粉类') {
        this.pageList = [
          { pageStep: 'home', name: '首页', icon: 'el-icon-house' }
        ]
      } else if (templateType === '免费表单类') {
        this.pageList = [
          { pageStep: 'home', name: '首页', icon: 'el-icon-house' },
          { pageStep: 'receiveSuccess', name: '领取成功页', icon: 'el-icon-circle-check' }
        ]
      } else if (templateType === '一站式小程序表单类') {
        this.pageList = [
          { pageStep: 'home', name: '首页', icon: 'el-icon-house' },
          { pageStep: 'purchaseSuccess', name: '小程序出码页', icon: 'el-icon-success' }
        ]
      } else {
        // 默认显示首页
        this.pageList = [
          { pageStep: 'home', name: '首页', icon: 'el-icon-house' }
        ]
      }

      // 防止switchPage将当前的空list保存到新加载的configList中
      this.currentPageStep = ''
      try {
        const data = JSON.parse(json)
        // 支持新格式
        if (data.pageTitle !== undefined && Array.isArray(data.configList)) {
          this.pageTitle = data.pageTitle
          // 深拷贝接收到的configList
          this.configList = JSON.parse(JSON.stringify(data.configList))
          // 初始化configList，确保所有页面都存在
          this.initializeConfigList()
          // 加载首页数据
          this.switchPage('home')
        } else if (Array.isArray(data)) {
          // 兼容旧格式（直接是数组）
          this.configList = [{
            pageStep: 'home',
            moduleList: data
          }, {
            pageStep: 'appletLand',
            moduleList: []
          }, {
            pageStep: 'purchaseSuccess',
            moduleList: []
          }]
          this.switchPage('home')
        } else {
          // 其他格式
          this.configList = [{
            pageStep: 'home',
            moduleList: Array.isArray(data) ? data : []
          }, {
            pageStep: 'appletLand',
            moduleList: []
          }, {
            pageStep: 'purchaseSuccess',
            moduleList: []
          }]
          this.switchPage('home')
        }
      } catch (e) {
        // 初始化为新格式
        this.pageTitle = ''
        this.configList = this.pageList.map(page => ({
          pageStep: page.pageStep,
          moduleList: []
        }))
        this.switchPage('home')
      }
      // 重置选中状态和属性表单
      this.form = {}
      this.index = -1
    },
    initializeConfigList() {
      // 根据当前的pageList初始化配置
      this.pageList.forEach(page => {
        if (!this.configList.find(config => config.pageStep === page.pageStep)) {
          this.configList.push({
            pageStep: page.pageStep,
            moduleList: []
          })
        }
      })
    },
    switchPage(pageStep) {
      // 保存当前页面的数据
      const currentConfig = this.configList.find(config => config.pageStep === this.currentPageStep)
      if (currentConfig) {
        currentConfig.moduleList = this.list
      }
      
      // 切换到新页面
      this.currentPageStep = pageStep
      let newConfig = this.configList.find(config => config.pageStep === pageStep)
      
      // 如果找不到对应的配置，创建一个新的
      if (!newConfig) {
        newConfig = {
          pageStep: pageStep,
          moduleList: []
        }
        this.configList.push(newConfig)
      }
      
      // 使用$set确保列表更新响应式追踪
      this.$set(this, 'list', newConfig.moduleList || [])
      
      // 重置选中和表单
      this.form = {}
      this.index = -1
    },
    end() {

    },
    add(item) {
      let data = {
        type: item.type,
        active: false,
        name: item.label,
        fixe: false,
        classText: ['parent-div'],
        workUrl: ''
      }
      if (item.type === 'h5-text') {
        data.content = '默认文本'
        data.style = {
          textAlign: 'left',
          fontSize: 20,
          background: '#FFF',
          color: '#000',
          fontWeight: 'none',
          fontStyle: 'none',
          textDecoration: 'none'
        }
      } else if (item.type === 'h5-image') {
        data.url = null
      } else if (item.type === 'h5-sep') {
        data.classText = [...data.classText, 'divider']
        data.style = {
          height: '10px',
          background: 'rgb(228, 231, 237)'
        }
      } else if (item.type === 'h5-countdown') {
        data.days = 0
        data.hours = 0
        data.minutes = 0
        data.seconds = 0
        data.countdownMode = 1
      } else if (item.type === 'h5-form') {
        data.showImage = true
        data.formImage = ''
        data.showSubmitBtn = true
        data.submitBtnStyle = 'text'
        data.submitBtnColor = '#409EFF'
        data.submitBtnText = '提交'
        data.submitBtnImage = ''
      } else if (item.type === 'h5-link-button') {
        data.buttonStyle = 'text'
        data.buttonText = '提交'
        data.buttonColor = '#FF5A5A'
        data.buttonTextColor = '#ffffff'
        data.buttonImage = ''
      } else if (item.type === 'h5-add-wechat-button') {
        data.buttonStyle = 'text'
        data.buttonText = '提交'
        data.buttonColor = '#FF5A5A'
        data.buttonTextColor = '#ffffff'
        data.buttonImage = ''
        data.enableGetCustomerAssistant = true
        data.followScreen = true
        data.enableDefaultWechat = false
        data.enableMiniProgram = false
      } else if (item.type === 'h5-qrcode') {
        data.qrcodeImage = ''
        data.qrcodeSize = 140
        data.showCopyBtn = true
        data.copyBtnText = '复制并添加老师'
        data.copyBtnColor = '#FF9500'
        data.copyBtnTextColor = '#ffffff'
        data.showClickBtn = true
        data.clickBtnText = '点击添加老师'
        data.clickBtnColor = '#FF9500'
        data.clickBtnTextColor = '#ffffff'
        data.clickBtnWechatJump = false
        data.enableGetCustomerAssistant = false
        data.enableDefaultWechat = false
        data.enableMiniProgram = false
      }

      if (this.index !== null && this.index >= 0 && this.index < this.list.length) {
        this.list.splice(this.index + 1, 0, data)
      } else {
        this.list.push(data)
      }
    },
    select(index) {
      this.index = index
      // 更新所有元素的active状态
      this.list.forEach((item, i) => {
        this.$set(item, 'active', i === index)
      })
      // 直接绑定list中的对象
      this.form = this.list[index]
    },

    del() {
      if (this.index >= 0 && this.index < this.list.length) {
        this.list.splice(this.index, 1)
        this.form = {}
        this.index = -1
      }
    },
    /** 处理删除操作 */
    handleDelete(index) {
      this.index = index
      this.list.splice(index, 1)
      this.form = {}
      this.index = -1
    },
    updateForm(newForm) {
      // 更新表单数据
      if (this.index < 0 || this.index >= this.list.length) {
        return
      }

      Object.assign(this.form, newForm)

      // 更新列表中的数据
      for (const key in newForm) {
        if (Object.hasOwnProperty.call(newForm, key)) {
          // 如果是嵌套对象，递归更新
          if (typeof newForm[key] === 'object' && newForm[key] !== null) {
            for (const nestedKey in newForm[key]) {
              this.$set(this.list[this.index][key], nestedKey, newForm[key][nestedKey])
            }
          } else {
            this.$set(this.list[this.index], key, newForm[key])
          }
        }
      }
    },
    /** 处理左侧组件拖拽开始 */
    handleDragStart(event, comp) {
      this.draggedComponent = comp
      this.insertIndex = -1
      event.dataTransfer.effectAllowed = 'copy'
      event.dataTransfer.setData('text/html', event.target.innerHTML)
    },
    /** 处理拖拽结束 */
    handleDragEnd() {
      this.draggedComponent = null
      this.insertIndex = -1
    },
    /** 处理控件池drag-enter */
    handleItemDragEnter(event, index) {
      // 仅根据是否来自左侧组件池
      if (!this.draggedComponent) return
      event.preventDefault()
    },
    /** 处理控件池drag-over */
    handleItemDragOver(event, index) {
      // 只有来自于左侧组件池的拖拽有效
      if (!this.draggedComponent) return
      event.preventDefault()
      event.dataTransfer.dropEffect = 'copy'
      
      const wrapper = event.currentTarget
      const rect = wrapper.getBoundingClientRect()
      const midPoint = rect.top + rect.height / 2
      
      // 根据鼠标的纵位置判断是开始位置还是结数位置
      wrapper.classList.remove('drag-before', 'drag-after')
      if (event.clientY < midPoint) {
        wrapper.classList.add('drag-before')
        this.insertIndex = index
      } else {
        wrapper.classList.add('drag-after')
        this.insertIndex = index + 1
      }
    },
    /** 处理控件池drag-leave */
    handleItemDragLeave(event, index) {
      // 仅在来自左侧拖拽时事
      if (!this.draggedComponent) return
      const wrapper = event.currentTarget
      if (event.target === wrapper) {
        wrapper.classList.remove('drag-before', 'drag-after')
      }
    },
    /** 根据鼠标位置计算插入索引 */
    handleMouseMove(event) {
      // 此方法已经不使用，位置计算变为了handleItemDragOver
    },
    /** 处理拖拽经过预览区域 */
    handleDragOver(event) {
      event.preventDefault()
      event.dataTransfer.dropEffect = 'copy'
      // 添加视觉反馈
      this.$el.querySelector('.view-body').classList.add('drag-over')

      // 自动滚动逻辑
      const container = this.$el.querySelector('.parent-container')
      if (container) {
        const rect = container.getBoundingClientRect()
        const threshold = 60 // 边缘阈值
        const scrollSpeed = 15 // 滚动速度

        // 向下滚动
        if (event.clientY > rect.bottom - threshold) {
          container.scrollTop += scrollSpeed
        }
        // 向上滚动
        else if (event.clientY < rect.top + threshold) {
          container.scrollTop -= scrollSpeed
        }
      }
    },
    /** 处理拖拽离开预览区域 */
    handleDragLeave(event) {
      if (event.target === this.$el.querySelector('.view-body')) {
        this.$el.querySelector('.view-body').classList.remove('drag-over')
      }
    },
    /** 处理拖拽放下 */
    handleDrop(event) {
      event.preventDefault()
      this.$el.querySelector('.view-body').classList.remove('drag-over')
      
      // 清除所有拖拽样式
      document.querySelectorAll('.draggable-wrapper').forEach(el => {
        el.classList.remove('drag-before', 'drag-after')
      })
      
      // 处理新添加的组件（来自于左侧组件池）
      if (this.draggedComponent) {
        const newItem = this.createNewComponent(this.draggedComponent)
        // 在插入位置插入新控件
        if (this.insertIndex >= 0 && this.insertIndex <= this.list.length) {
          this.list.splice(this.insertIndex, 0, newItem)
        } else {
          this.list.push(newItem)
        }
        this.draggedComponent = null
        this.insertIndex = -1
      }
    },
    /** 根据组件贫模对象创建新控件 */
    createNewComponent(item) {
      let data = {
        type: item.type,
        active: false,
        name: item.label,
        fixe: false,
        classText: ['parent-div'],
        workUrl: ''
      }
      if (item.type === 'h5-text') {
        data.content = '默认文本'
        data.style = {
          textAlign: 'left',
          fontSize: 20,
          background: '#FFF',
          color: '#000',
          fontWeight: 'none',
          fontStyle: 'none',
          textDecoration: 'none'
        }
      } else if (item.type === 'h5-image') {
        data.url = null
      } else if (item.type === 'h5-sep') {
        data.classText = [...data.classText, 'divider']
        data.style = {
          height: '10px',
          background: 'rgb(228, 231, 237)'
        }
      } else if (item.type === 'h5-countdown') {
        data.days = 0
        data.hours = 0
        data.minutes = 0
        data.seconds = 0
        data.countdownMode = 1
      } else if (item.type === 'h5-form') {
        data.showImage = true
        data.formImage = ''
        data.showSubmitBtn = true
        data.submitBtnStyle = 'text'
        data.submitBtnColor = '#409EFF'
        data.submitBtnText = '提交'
        data.submitBtnImage = ''
      } else if (item.type === 'h5-link-button') {
        data.buttonStyle = 'text'
        data.buttonText = '提交'
        data.buttonColor = '#FF5A5A'
        data.buttonTextColor = '#ffffff'
        data.buttonImage = ''
      } else if (item.type === 'h5-add-wechat-button') {
        data.buttonStyle = 'text'
        data.buttonText = '提交'
        data.buttonColor = '#FF5A5A'
        data.buttonTextColor = '#ffffff'
        data.buttonImage = ''
        data.enableGetCustomerAssistant = true
        data.followScreen = true
        data.enableDefaultWechat = false
        data.enableMiniProgram = false
      } else if (item.type === 'h5-qrcode') {
        data.qrcodeImage = ''
        data.qrcodeSize = 140
        data.showCopyBtn = true
        data.copyBtnText = '复制并添加老师'
        data.copyBtnColor = '#FF9500'
        data.copyBtnTextColor = '#ffffff'
        data.showClickBtn = true
        data.clickBtnText = '点击添加老师'
        data.clickBtnColor = '#FF9500'
        data.clickBtnTextColor = '#ffffff'
        data.clickBtnWechatJump = false
        data.enableGetCustomerAssistant = false
        data.enableDefaultWechat = false
        data.enableMiniProgram = false
      }
      return data
    },
    /** 获取完整的页面数据（新格式JSON） */
    getPageData() {
      // 保存当前页面数据
      const currentConfig = this.configList.find(config => config.pageStep === this.currentPageStep)
      if (currentConfig) {
        currentConfig.moduleList = this.list
      }
      
      return {
        pageTitle: this.pageTitle,
        configList: this.configList
      }
    },
    /** 获取JSON字符串 */
    getJsonString() {
      return JSON.stringify(this.getPageData())
    }
  }
}
</script>
<style lang="scss" scoped>
.h5-editor-container {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

// 标题编辑栏
.title-bar {
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid #ebeef5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.04);
  z-index: 100;

  .title-input {
    width: 300px;
    
    ::v-deep .el-input__inner {
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      &:focus {
        border-color: #409eff;
      }
    }
  }
}

.editor-wrapper {
  flex: 1;
  padding: 0;
  margin: 0 !important;
  display: flex !important;
  overflow: hidden;
}

// 面板公共样式
.panel-header {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: #fff;

  h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1f2d3d;
  }

  .device-info {
    font-size: 12px;
    color: #909399;
    background: #f4f4f5;
    padding: 2px 8px;
    border-radius: 10px;
  }
}

// 左侧通用面板样式
.page-panel,
.left-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-right: 1px solid #ebeef5;
  box-shadow: none;
  z-index: 10;
  border-radius: 0;
}

// 页面选择面板
.page-panel {
  .page-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;

    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background: #e0e0e0;
      border-radius: 2px;
    }
  }

  .page-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 10px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    position: relative;
    overflow: hidden;

    .page-icon {
      font-size: 24px;
      color: #606266;
      transition: color 0.3s;
    }

    .page-name {
      font-size: 12px;
      color: #606266;
      font-weight: 500;
      transition: color 0.3s;
    }

    &:hover {
      border-color: #b3d8ff;
      background: #ecf5ff;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

      .page-icon, .page-name {
        color: #409eff;
      }
    }

    &.active {
      background: #409eff;
      border-color: #409eff;
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);

      .page-icon, .page-name {
        color: #fff;
      }
    }
  }
}

// 左下组件面板
.left-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 4px 0 0 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .components-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #d0d0d0;
      border-radius: 3px;

      &:hover {
        background: #aaa;
      }
    }
  }
}

.component-group {
  margin-bottom: 16px;

  .group-title {
    font-size: 12px;
    font-weight: 600;
    color: #606266;
    padding: 8px 0;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;

    i {
      font-size: 14px;
      color: #409eff;
    }
  }

  .buttons-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.comp-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 10px;
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  cursor: grab;
  transition: all 0.2s ease;
  min-height: 80px;

  i {
    font-size: 24px;
    color: #606266;
    margin-bottom: 8px;
    transition: transform 0.2s;
  }

  span {
    text-align: center;
    word-break: break-word;
    white-space: normal;
  }

  &:hover {
    border-color: #409eff;
    color: #409eff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);

    i {
      color: #409eff;
      transform: scale(1.1);
    }
    
    span {
      color: #409eff;
    }
  }

  &:active {
    background: #f0f9ff;
    transform: scale(0.98);
    cursor: grabbing;
  }
}

// 中间预览面板
.center-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #eaedf1;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.02);
  
  .panel-header {
    background: #fff;
    border-bottom: 1px solid #ebeef5;
  }
}

// 模拟手机外壳
.mobile-nav-bar {
  width: 375px;
  background: #fff;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  flex-shrink: 0;
  z-index: 20;
  
  border-top-left-radius: 30px; 
  border-top-right-radius: 30px; 
  padding-top: 10px; 
  height: 54px; 
  box-sizing: border-box;

  box-shadow: 0 0 0 12px #333; 
  margin: 0 auto;
  
  .nav-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
  }
  
  i {
    font-size: 18px;
    color: #333;
  }
    
    .nav-left, .nav-right {
      width: 40px;
      display: flex;
      align-items: center;
      
      i {
        font-size: 18px;
        color: #333;
        cursor: pointer;
      }
    }

    .nav-right {
      justify-content: flex-end;
    }
}

.view-body {
  width: 375px;
  min-height: 667px;
  background: #fff;
  padding: 0;
  position: relative;
  
  border-bottom-left-radius: 30px; 
  border-bottom-right-radius: 30px; 
  padding-bottom: 30px; 
  
  box-shadow: 0 0 0 12px #333, 0 20px 40px -10px rgba(0,0,0,0.4); 
  margin: 0 auto;
  
  &.drag-over {
    background-color: #f0f9ff;
    
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 2px dashed #409eff;
      border-radius: 0 0 30px 30px;
      pointer-events: none;
      z-index: 100;
    }
  }
  
  &:hover {
    box-shadow: 0 0 0 12px #333, 0 25px 50px -12px rgba(0,0,0,0.5);
  }
}

.parent-container {
  flex: 1;
  padding: 40px 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  &::-webkit-scrollbar {
    width: 0; 
  }

  &::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 3px;

    &:hover {
      background: #aaa;
    }
  }
}

.draggable-area {
  padding: 0;
  width: 100%;
}

.draggable-wrapper {
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  cursor: move;
}

.draggable-wrapper.drag-before {
  border-top: 3px solid #409eff;
}

.draggable-wrapper.drag-after {
  border-bottom: 3px solid #409eff;
}

.view-item {
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: none;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

  &:hover {
    background-color: #f0f2f5;
  }

  &.active {
    outline: 2px solid #409eff;
    outline-offset: -2px;
    z-index: 2;
    background-color: #ecf5ff;
  }
}

.ghost {
  opacity: 0.5;
  background: #f0f9ff;
}

.drag {
  opacity: 0;
}

.insert-placeholder {
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #409eff 0%, #409eff 100%);
  position: relative;
  margin: 4px 0;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    position: absolute;
    background: #fff;
    padding: 0 8px;
    font-size: 10px;
    color: #409eff;
    font-weight: 600;
  }
}

.delete-button-wrapper {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: #ff4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

  i {
    color: #fff;
    font-size: 16px;
  }

  &:hover {
    background: #ff2222;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
  }

  &:active {
    transform: scale(0.95);
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #909399;
  font-size: 12px;

  i {
    font-size: 48px;
    margin-bottom: 12px;
    color: #d0d0d0;
  }
}

// 右侧属性面板
.right-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.properties-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 12px;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 3px;

    &:hover {
      background: #aaa;
    }
  }
}

// 分割线样式
.divider {
  width: 100%;
  background: #DCDEE2;
  height: 10px;
}

</style>