<template>
  <div class="draggable-container">
    <draggable
      :list="localDevices"
      class="device-list"
      animation="300"
      @end="onDragEnd"
    >
      <div
        v-for="(item, index) in localDevices"
        :key="index"
        class="device-item"
        :class="{ 'is-detail': detail }"
      >
        <template v-if="!detail">
          <el-select
            v-model="item.deviceCode"
            :disabled="disabled"
            clearable
            placeholder="请选择摄像头"
          >
            <el-option
              v-for="camera in cameraList"
              :key="camera.id"
              :label="camera.name"
              :value="camera.deviceCode"
            />
          </el-select>
          <img src="./draggable.svg" class="drag-icon" />
          <el-button
            v-if="localDevices.length > 1"
            type="danger"
            size="small"
            @click="delCamera(index)"
          >
            删除
          </el-button>
        </template>
        <template v-else>
          <span class="device-name">{{ getDeviceName(item) }}</span>
        </template>
      </div>
    </draggable>
    <el-button type="primary" class="mt-10px" @click="addCamera">新增摄像头</el-button>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'DraggableCamera',
  components: {
    draggable
  },
  props: {
    devices: {
      type: Array,
      default: () => []
    },
    cameraList: {
      type: Array,
      default: () => []
    },
    detail: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      localDevices: []
    }
  },
  watch: {
    devices: {
      immediate: true,
      deep: true,
      handler(val) {
        
        // 深拷贝避免引用问题
        this.localDevices = JSON.parse(JSON.stringify(val || []))
        console.log('devices 变化:', val, this.localDevices, this.cameraList)
      }
    }
  },
  methods: {
    /** 获取设备名称 */
    getDeviceName(element) {
      const camera = this.cameraList.find(item => item.deviceCode === element.deviceCode)
      return camera ? camera.name : element.deviceCode || '-'
    },

    /** 删除摄像头 */
    delCamera(index) {
      this.localDevices.splice(index, 1)
      this.emitUpdate()
    },

    /** 新增摄像头 */
    addCamera() {
      this.localDevices.push({ deviceCode: undefined })
    },

    /** 拖拽结束 */
    onDragEnd() {
      this.emitUpdate()
    },

    /** 通知父组件更新 */
    emitUpdate() {
      this.$emit('updateDevices', this.localDevices)
    },
  }
}
</script>

<style scoped>
.draggable-container {
  width: 100%;
}
.device-list {
  display: flex;
  flex-direction: column;
}
.device-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  cursor: move;
}
.device-item:not(:last-child) {
  border-bottom: 1px dashed #eee;
}
.device-item.is-detail {
  cursor: default;
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
}
.device-name {
  color: #606266;
}
.drag-icon {
  margin: 0 10px;
  cursor: move;
}
.ghost {
  background-color: #f1f1f1;
  border-radius: 5px;
  border: 1px dashed rgb(19, 41, 239);
}
</style>
