<template>
  <view class="master-page">
    <view class="hero-card">
      <view>
        <text class="hero-title">设备管理</text>
        <text class="hero-sub">统一管理你的 Attractor 设备</text>
      </view>
      <button class="hero-btn" @click="openAddDeviceModal">新增设备</button>
    </view>

    <view class="filter-row">
      <view
        v-for="(tab, index) in deviceTabs"
        :key="tab.type || index"
        class="filter-pill"
        :class="{ active: activeTab === index }"
        @click="switchTab(index)"
      >
        {{ tab.name }}
      </view>
    </view>

    <scroll-view class="device-list" scroll-y>
      <view v-if="filteredDevices.length === 0" class="empty-card">
        <text class="empty-title">当前分类暂无设备</text>
        <text class="empty-sub">你可以点击右上角“新增设备”进行添加</text>
      </view>

      <view
        class="device-card"
        v-for="device in filteredDevices"
        :key="device.id"
        @click="toDeviceDetail(device.id)"
      >
        <image class="device-icon" :src="device.image" mode="aspectFit" />

        <view class="device-main">
          <text class="device-name">{{ device.name }}</text>
          <text class="device-sn">SN: {{ device.sn }}</text>
          <view class="meta-row">
            <text class="meta-tag">{{ typeText(device.type) }}</text>
            <text class="meta-text" v-if="device.user">使用者：{{ device.user }}</text>
          </view>
        </view>

        <button class="delete-btn" @click.stop="deleteDevice(device.id)">
          <uni-icons type="trash" size="13" color="#64748b"></uni-icons>
          <text>删除</text>
        </button>
      </view>
    </scroll-view>

    <uni-popup ref="addDevicePopup" type="center">
      <view class="popup-card">
        <text class="popup-title">新增设备</text>

        <button class="pair-btn" @click="bluetoothPair">蓝牙配对设备</button>

        <view class="form-item">
          <text class="form-label">设备名称</text>
          <input class="form-input" v-model="newDevice.name" placeholder="请输入设备名称" />
        </view>

        <view class="form-item">
          <text class="form-label">SN 码</text>
          <input class="form-input" v-model="newDevice.sn" placeholder="配对后自动填充/手动输入" />
        </view>

        <view class="form-item">
          <text class="form-label">设备类型</text>
          <picker :range="pickerTypes" :value="newDevice.type" @change="onTypeChange">
            <view class="picker-view">{{ pickerTypes[newDevice.type] }}</view>
          </picker>
        </view>

        <view class="popup-actions">
          <button class="ghost" @click="closeAddDeviceModal">取消</button>
          <button class="primary" @click="confirmAddDevice">确认添加</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceTabs: [
        { name: '全部', type: '' },
        { name: '智能硬件', type: 'hardware' },
        { name: '传感器', type: 'sensor' },
        { name: '控制器', type: 'controller' }
      ],
      activeTab: 0,
      deviceList: [
        {
          id: 1,
          name: 'Attractor 主控器',
          sn: 'ATR-20260327001',
          type: 'controller',
          image: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png',
          user: 'Attractor_001'
        },
        {
          id: 2,
          name: '环境传感器 A1',
          sn: 'ATR-20260327002',
          type: 'sensor',
          image: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png',
          user: ''
        }
      ],
      newDevice: {
        name: '',
        sn: '',
        type: 0
      },
      pickerTypes: ['智能硬件', '传感器', '控制器']
    }
  },
  computed: {
    filteredDevices() {
      if (this.activeTab === 0) return this.deviceList
      const targetType = this.deviceTabs[this.activeTab].type
      return this.deviceList.filter(item => item.type === targetType)
    }
  },
  methods: {
    typeText(type) {
      const map = {
        hardware: '智能硬件',
        sensor: '传感器',
        controller: '控制器'
      }
      return map[type] || '未知类型'
    },
    switchTab(index) {
      this.activeTab = index
    },
    openAddDeviceModal() {
      this.newDevice = { name: '', sn: '', type: 0 }
      this.$refs.addDevicePopup.open()
    },
    closeAddDeviceModal() {
      this.$refs.addDevicePopup.close()
    },
    onTypeChange(e) {
      this.newDevice.type = Number(e.detail.value)
    },
    bluetoothPair() {
      this.newDevice.sn = `ATR-${Date.now().toString().slice(-8)}`
      uni.showToast({ title: '配对成功，SN 已填充', icon: 'none' })
    },
    confirmAddDevice() {
      if (!this.newDevice.name || !this.newDevice.sn) {
        uni.showToast({ title: '设备名称和 SN 不能为空', icon: 'none' })
        return
      }

      const typeMap = ['hardware', 'sensor', 'controller']
      const id = Math.max(...this.deviceList.map(d => d.id), 0) + 1
      this.deviceList.unshift({
        id,
        name: this.newDevice.name,
        sn: this.newDevice.sn,
        type: typeMap[this.newDevice.type],
        image: '/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png',
        user: ''
      })

      this.closeAddDeviceModal()
      uni.showToast({ title: '设备已添加', icon: 'success' })
    },
    deleteDevice(id) {
      uni.showModal({
        title: '删除设备',
        content: '确认删除该设备吗？',
        success: res => {
          if (res.confirm) {
            this.deviceList = this.deviceList.filter(item => item.id !== id)
            uni.showToast({ title: '删除成功', icon: 'none' })
          }
        }
      })
    },
    toDeviceDetail(id) {
      uni.navigateTo({
        url: '/pages/devices/detail/detail?id=' + id
      })
    }
  }
}
</script>

<style scoped>
.master-page {
  min-height: 100vh;
  background: #f4f7f8;
  padding: 20rpx;
  box-sizing: border-box;
}

.hero-card {
  background: #ffffff;
  border: 1rpx solid #e7eeef;
  border-radius: 18rpx;
  padding: 22rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14rpx;
}

.hero-title {
  display: block;
  font-size: 34rpx;
  font-weight: 700;
  color: #0f172a;
}

.hero-sub {
  display: block;
  margin-top: 4rpx;
  font-size: 22rpx;
  color: #94a3b8;
}

.hero-btn {
  height: 62rpx;
  line-height: 62rpx;
  padding: 0 20rpx;
  border-radius: 14rpx;
  border: 1rpx solid #bfe9e7;
  background: #e6f5f4;
  color: #0f7f7a;
  font-size: 24rpx;
}

.filter-row {
  display: flex;
  gap: 10rpx;
  overflow-x: auto;
  padding-bottom: 8rpx;
  margin-bottom: 10rpx;
}

.filter-pill {
  flex-shrink: 0;
  padding: 8rpx 18rpx;
  border-radius: 999rpx;
  border: 1rpx solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  font-size: 23rpx;
}

.filter-pill.active {
  border-color: #bfe9e7;
  background: #e6f5f4;
  color: #0f7f7a;
  font-weight: 600;
}

.device-list {
  height: calc(100vh - 240rpx);
}

.empty-card {
  background: #ffffff;
  border: 1rpx dashed #d7dee5;
  border-radius: 16rpx;
  padding: 40rpx 20rpx;
  text-align: center;
}

.empty-title {
  display: block;
  font-size: 26rpx;
  color: #64748b;
}

.empty-sub {
  display: block;
  margin-top: 8rpx;
  font-size: 22rpx;
  color: #94a3b8;
}

.device-card {
  background: #ffffff;
  border: 1rpx solid #e7eeef;
  border-radius: 16rpx;
  padding: 16rpx;
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.device-icon {
  width: 72rpx;
  height: 72rpx;
  border-radius: 14rpx;
  margin-right: 14rpx;
  background: #f0fdfa;
}

.device-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.device-name {
  font-size: 26rpx;
  color: #0f172a;
  font-weight: 600;
}

.device-sn,
.meta-text {
  font-size: 22rpx;
  color: #94a3b8;
}

.meta-row {
  display: flex;
  gap: 10rpx;
  align-items: center;
}

.meta-tag {
  font-size: 21rpx;
  color: #0f7f7a;
  background: #e6f5f4;
  border-radius: 8rpx;
  padding: 2rpx 10rpx;
}

.delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6rpx;
  height: 46rpx;
  padding: 0 12rpx;
  border-radius: 12rpx;
  border: 1rpx solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 20rpx;
}

.popup-card {
  width: 620rpx;
  background: #ffffff;
  border-radius: 18rpx;
  padding: 24rpx;
  box-sizing: border-box;
}

.popup-title {
  display: block;
  text-align: center;
  font-size: 30rpx;
  color: #0f172a;
  font-weight: 700;
  margin-bottom: 16rpx;
}

.pair-btn {
  height: 68rpx;
  line-height: 68rpx;
  border-radius: 14rpx;
  border: 1rpx solid #bfe9e7;
  background: #e6f5f4;
  color: #0f7f7a;
  font-size: 24rpx;
  margin-bottom: 16rpx;
}

.form-item {
  margin-bottom: 12rpx;
}

.form-label {
  display: block;
  font-size: 23rpx;
  color: #64748b;
  margin-bottom: 6rpx;
}

.form-input,
.picker-view {
  height: 64rpx;
  line-height: 64rpx;
  border-radius: 12rpx;
  border: 1rpx solid #e2e8f0;
  background: #f8fafc;
  padding: 0 14rpx;
  font-size: 24rpx;
  color: #0f172a;
}

.popup-actions {
  margin-top: 16rpx;
  display: flex;
  gap: 10rpx;
}

.popup-actions button {
  flex: 1;
  height: 68rpx;
  line-height: 68rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
}

.popup-actions .ghost {
  border: 1rpx solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
}

.popup-actions .primary {
  border: 1rpx solid #bfe9e7;
  background: #e6f5f4;
  color: #0f7f7a;
}
</style>
