bigdata_WX/pages/shuHai/deviceControl.vue

<template>
  <view class="device-detail">
    <view class="device-detail__header">
      <u-icon
        size="36"
        class="arrow-left"
        name="arrow-left"
        @click="handleBack"
      ></u-icon>
      {{ title }}
    </view>
    <view class="device-detail__body">
      <view class="tabs">
        <view class="tab-container">
          <view class="tab-item" v-if="myuser_type" :class="activeTab === 'pestAnalysis'?'active':''" @click="handleTabClick('pestAnalysis')">
            管理员
          </view>
          <view class="tab-item" :class="activeTab === 'viewImage'?'active':''" @click="handleTabClick('viewImage')">
            设置
          </view>
        </view>
      </view>
      <view class="device-detail-content" v-if="activeTab === 'pestAnalysis'">
        <view class="device-detail-child-settings" style="width:100%">
          <view class="device-detail-viewImage">
            <text class="device-detail-label">设备名称:</text>
            <view class="device-detail-value" >
              <u-input v-model="deviceName" type="text" maxlength="15" placeholder="设备名称" input-align="right" :custom-style="{'font-size':'24rpx'}"/>
            </view>
          </view>
          <view class="device-detail-viewImage">
            <text class="device-detail-label">设备ID:</text>
            <view class="device-detail-value" >
              <u-input v-model="deviceID" disabled type="text" placeholder="设备ID" input-align="right" :custom-style="{'font-size':'24rpx'}"/>
            </view>
          </view>
          <view class="device-detail-viewImage">
            <text class="device-detail-label">相机1:</text>
            <view class="device-detail-value" @click="openCameraIdPicker('camera1ID')">
              <text class="week-text">{{ camera1ID || '请选择相机' }}</text>
              <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
            </view>
          </view>
          <view class="device-detail-viewImage">
            <text class="device-detail-label">相机2:</text>
            <view class="device-detail-value" @click="openCameraIdPicker('camera2ID')">
              <text class="week-text">{{ camera2ID || '请选择相机' }}</text>
              <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
            </view>
          </view>
          <view class="device-detail-viewImage">
            <text class="device-detail-label">相机3:</text>
            <view class="device-detail-value" @click="openCameraIdPicker('camera3ID')">
              <text class="week-text">{{ camera3ID || '请选择相机' }}</text>
              <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="device-detail-content" style="padding-bottom: 50rpx" v-if="activeTab === 'viewImage'">
        <view v-for="(item, index) in deviceList" :key="index" style="width:100%">
          <view class="device-detail-name" @click="toggleChildItem(index)">
            <text>{{ item.deviceId || item.label }}</text>
            <u-icon name="arrow-down" size="24" :class="actionChildItem == index ? 'rotate':''"></u-icon>
          </view>
          <view v-show="actionChildItem == index" class="device-detail-child-settings-container">
            <view class="tabs">
              <view class="tab-container">
                <view class="tab-item" :class="item.activeTab === 'settings'?'active':''" @click="handleTabChildClick(item, 'settings')">
                  拍摄设置
                </view>
                <view class="tab-item" :class="item.activeTab === 'schedule'?'active':''" @click="handleTabChildClick(item, 'schedule')">
                  定时设置
                </view>
                <view class="tab-item" :class="item.activeTab === 'warning'?'active':''" @click="handleTabChildClick(item, 'warning')">
                  触发报警设置
                </view>
                <view class="tab-item" :class="item.activeTab === 'other'?'active':''" @click="handleTabChildClick(item, 'other')">
                  其他设置
                </view>
              </view>
            </view>
            <view class="device-detail-child-settings" v-if="item.activeTab === 'settings'">
              <view class="device-detail-viewImage">
                <text class="device-detail-label">拍照模式:</text>
                <view class="device-detail-value" @click="setDeviceItemContorl(item, 'takephoto')">
                  <text class="week-text">{{ formatPhotoModel(item.photoSettings.photoModel) }}</text>
                  <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
                </view>
              </view>
              <view class="device-detail-viewImage">
                <text class="device-detail-label">图片大小:</text>
                <view class="device-detail-value" @click="setDeviceItemContorl(item, 'imageSize')">
                  <text class="week-text">{{ formatImageSize(item.photoSettings.imageSize) }}</text>
                  <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
                </view>
              </view>
              <view class="device-detail-viewImage">
                <text class="device-detail-label">视频大小:</text>
                <view class="device-detail-value" @click="setDeviceItemContorl(item, 'videoSize')">
                  <text class="week-text">{{ formatImageSize(item.photoSettings.videoSize) }}</text>
                  <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
                </view>
              </view>
              <view class="device-detail-viewImage">
                <text class="device-detail-label">连拍:</text>
                <view class="device-detail-value">
                  <u-input v-model="item.photoSettings.burstPhoto" type="number" :maxlength="4" placeholder="连拍(1-9)" input-align="right" :custom-style="{'font-size':'24rpx'}" @blur="handlePositiveIntBlur(item.photoSettings, 'burstPhoto', 9)"/>
                  <text class="unit-text">次</text>
                </view>
              </view>
              <view class="device-detail-viewImage">
                <text class="device-detail-label">视频长度:</text>
                <view class="device-detail-value">
                  <u-input v-model="item.photoSettings.videoLength" type="number" :maxlength="4" placeholder="视频长度(1-300)" input-align="right" :custom-style="{'font-size':'24rpx'}" @blur="handlePositiveIntBlur(item.photoSettings, 'videoLength', 300)"/>
                  <text class="unit-text">秒</text>
                </view>
              </view>
              <view class="device-detail-viewImage">
                <text class="device-detail-label">拍摄限制:</text>
                <view class="device-detail-value">
                  <u-input v-model="item.photoSettings.photoInterval" type="number" :maxlength="4" placeholder="拍摄限制(0-255)" input-align="right" :custom-style="{'font-size':'24rpx'}" @blur="handlePositiveIntBlur(item.photoSettings, 'photoInterval', 255, 0)" />
                  <text class="unit-text">次</text>
                </view>
              </view>
            </view>
            <view class="device-detail-child-settings" v-if="item.activeTab === 'schedule'">
              <view class="device-detail-viewImage">
                <text class="device-detail-label">定时拍照:</text>
                <text class="device-detail-value">
                  <u-switch v-model="item.timeSettings.timePhoto" size="36" />
                </text>
              </view>
              <view class="device-detail-viewImage">
                <text class="device-detail-label">循环拍摄间隔:</text>
                <view class="device-detail-value" @click="openIntervalPicker(item)">
                  <text class="week-text">{{ item.timeSettings.photoTime || '00:01' }}</text>
                  <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
                </view>
              </view>
              <view class="device-detail-viewImage">
                <text class="device-detail-label">时间段1:</text>
                <view class="device-detail-value">
                  <text class="time-text" @click="openTimePicker(item, 'time1', 0)">{{ (item.timeSettings.time1 && item.timeSettings.time1[0]) || '开始' }}</text>
                  <text class="time-sep">-</text>
                  <text class="time-text" @click="openTimePicker(item, 'time1', 1)">{{ (item.timeSettings.time1 && item.timeSettings.time1[1]) || '结束' }}</text>
                </view>
              </view>
              <view class="device-detail-viewImage">
                <text class="device-detail-label">时间段2:</text>
                <view class="device-detail-value">
                  <text class="time-text" @click="openTimePicker(item, 'time2', 0)">{{ (item.timeSettings.time2 && item.timeSettings.time2[0]) || '开始' }}</text>
                  <text class="time-sep">-</text>
                  <text class="time-text" @click="openTimePicker(item, 'time2', 1)">{{ (item.timeSettings.time2 && item.timeSettings.time2[1]) || '结束' }}</text>
                </view>
              </view>
              <view class="device-detail-viewImage">
                <text class="device-detail-label">时间段3:</text>
                <view class="device-detail-value">
                  <text class="time-text" @click="openTimePicker(item, 'time3', 0)">{{ (item.timeSettings.time3 && item.timeSettings.time3[0]) || '开始' }}</text>
                  <text class="time-sep">-</text>
                  <text class="time-text" @click="openTimePicker(item, 'time3', 1)">{{ (item.timeSettings.time3 && item.timeSettings.time3[1]) || '结束' }}</text>
                </view>
              </view>
              <view class="device-detail-viewImage">
                <text class="device-detail-label">周重复:</text>
                <view class="device-detail-value" @click="openWeekPicker(item)">
                  <view class="week-text">{{ (item.timeSettings.weekLoop || []).join('、') || '请选择' }}</view>
                  <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
                </view>
              </view>
            </view>
            <view class="device-detail-child-settings" v-if="item.activeTab === 'warning'">
              <view class="device-detail-viewImage">
                <text class="device-detail-label">PIR开关:</text>
                <text class="device-detail-value">
                  <u-switch v-model="item.warning.pirOpenOrClose" size="36" />
                </text>
              </view>
              <view class="device-detail-viewImage">
                <text class="device-detail-label">PIR灵敏度:</text>
                <view class="device-detail-value" @click="setDeviceItemContorl(item, 'pirSensitivity')">
                  <text class="week-text">{{ formatPirSensitivity(item.warning.pirSensitivity) }}</text>
                  <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
                </view>
              </view>
              <view class="device-detail-viewImage">
                <text class="device-detail-label">触发时间间隔:</text>
                <view class="device-detail-value" @click="setDeviceItemContorl(item, 'pirInterval')">
                  <text class="week-text">{{ item.warning.triggerTimeInterval || '00:00' }}</text>
                  <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
                </view>
              </view>
            </view>
            <view class="device-detail-child-settings" v-if="item.activeTab === 'other'">
              <view class="device-detail-viewImage">
                <text class="device-detail-label">信息戳记:</text>
                <text class="device-detail-value">
                  <u-switch v-model="item.other.informationStamp" size="36" />
                </text>
              </view>
              <view class="device-detail-viewImage">
                <text class="device-detail-label">自动覆盖:</text>
                <text class="device-detail-value">
                  <u-switch v-model="item.other.autoOverWrite" size="36" />
                </text>
              </view>
              <view class="device-detail-viewImage">
                <text class="device-detail-label">相机名称:</text>
                <view class="device-detail-value">
                  <u-input v-model="item.other.photoName" :maxlength="15" placeholder="相机名称(最多15字)" input-align="right" :custom-style="{'font-size':'24rpx'}" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="device-detail-btn-footer">
      <view class="device-detail-btn" @click="saveSettings">保存</view>
    </view>
		<u-select v-model="showContorl" :list="list" @confirm="confirmDeviceItemContorl"></u-select>
		<u-select v-model="showImageTypeContorl" :list="currentSizeList" @confirm="confirmDeviceItemContorl"></u-select>
		<u-select v-model="showVideoTypeContorl" :list="currentSizeList" @confirm="confirmDeviceItemContorl"></u-select>
		<u-select v-model="showPirTypeContorl" :list="pirList" @confirm="confirmDeviceItemContorl"></u-select>
		<u-select v-model="showPirIntervalContorl" :list="pirIntervalList" @confirm="confirmDeviceItemContorl"></u-select>
    <u-picker
      v-model="showDateTime"
      mode="time"
      :params="timeParams"
      :default-time="currentDefaultTime"
      @confirm="confirmTimePicker"
    ></u-picker>
    <u-popup v-model="showWeekPicker" mode="bottom" border-radius="16">
      <view class="week-picker">
        <view class="week-picker__title">周重复</view>
        <view class="week-picker__list">
          <view
            v-for="day in weekList"
            :key="day"
            class="week-picker__item"
            :class="{ active: selectedWeeks.indexOf(day) > -1 }"
            @click="toggleWeek(day)"
          >{{ day }}</view>
        </view>
        <view class="week-picker__btn" @click="confirmWeekPicker">确定</view>
      </view>
    </u-popup>
    <u-select v-model="showCameraSelect" :list="cameraSelectList" @confirm="confirmCameraSelect"></u-select>
  </view>
</template>
<script>

export default {
  data(){
    return {
      value: 10,
      camera1ID: '123',
      camera2ID: '456',
      camera3ID: '789',
      timeParams: {
        year: false,
        month: false,
        day: false,
        hour: true,
        minute: true,
        second: false
      },
      // 拍照模式可选项（value 与协议 CAM_Mode 对应）
      list: [
        {
          label: '拍照',
          value: '0'
        },
        {
          label: '录像',
          value: '1'
        },
        {
          label: '拍照+录像',
          value: '2'
        }
      ],
      // 图片/视频大小可选项：点击时由当前相机的 options 动态生成
      currentSizeList: [],
      actionChildItem: 0,
      equipContrlForm: {},
      time: '',
      activeTab: 'pestAnalysis',
      title: '设置控制',
      myuser_type: false,
      deviceType: '',
      location: '',
      deviceList: [],
      d_id: '',
      // 双摄主设备 id（相机配置接口入参）
      device_id: '',
      show: false,
      checked: false,
      showContorl: false,
      showPirTypeContorl: false,
      showPirIntervalContorl: false,
      // 触发时间间隔可选项：小时 00~60、分钟 00~50 步长 10（与 PC 端一致）
      pirIntervalList: (() => {
        const list = []
        for (let hour = 0; hour <= 60; hour++) {
          for (let minute = 0; minute <= 50; minute += 10) {
            const hh = ('0' + hour).slice(-2)
            const mm = ('0' + minute).slice(-2)
            list.push({ label: hh + ':' + mm, value: hh + ':' + mm })
          }
        }
        return list
      })(),
      pirList: [
        {
          label: '自动',
          value: '0'
        },
        {
          label: '低',
          value: '1'
        },
        {
          label: '中',
          value: '2'
        },
        {
          label: '高',
          value: '3'
        }
      ],
      showDateTime: false,
      currentTimeItem: null,
      currentTimeField: '',
      currentTimeIndex: 0,
      currentIntervalItem: null,
      currentDefaultTime: '08:00',
      showImageTypeContorl: false,
      showVideoTypeContorl: false,
      showWeekPicker: false,
      weekList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      selectedWeeks: [],
      currentWeekItem: null,
      currentItem: null,
      currentFieldType: '',
      deviceName: '',
      deviceID: '',
      camera1ID: '',
      camera2ID: '',
      camera3ID: '',
      showCameraSelect: false,
      currentCameraField: '',
      // 相机选择弹层的可选项（打开时按互斥规则过滤）
      cameraSelectList: [],
      // 主设备下的相机列表（接口获取，作为相机选择弹层可选项）
      cameraList: []
    }
  },
  onLoad(options){
    this.d_id = options.d_id
    this.device_id = options.deviceId || ''
    // 管理员 tab 回显
    this.deviceID = this.device_id
    this.deviceName = options.name ? decodeURIComponent(options.name) : ''
    this.getCameraConfig()
    this.getCameraDeviceList()
    // this.getControlDeviceConfigInfo()
    uni.getStorage({
      key:"myuser_type",
      success:(res)=>{
        if(Number(res.data) == 1){
          this.myuser_type = true
          this.activeTab = 'pestAnalysis'
        }else{
          this.activeTab = 'viewImage'
        }
      }
    })
  },
  methods: {
    setDeviceItemContorl(item, type){
      this.currentItem = item
      this.currentFieldType = type
      switch(type){
        case 'takephoto':
          this.showContorl = true
          break;
        case 'imageSize':
          // 可选项来自当前相机配置返回的 options
          this.currentSizeList = (item.photoSettings.imageSizeOptions || []).map(label => ({ label: label, value: label }))
          this.showImageTypeContorl = true
          break;
        case 'videoSize':
          this.currentSizeList = (item.photoSettings.videoSizeOptions || []).map(label => ({ label: label, value: label }))
          this.showVideoTypeContorl = true
          break;
        case 'pirSensitivity':
          this.showPirTypeContorl = true
          break;
        case 'pirInterval':
          this.showPirIntervalContorl = true
          break;
      }
    },
    confirmDeviceItemContorl(e){
      const fieldMap = {
        takephoto: ['photoSettings', 'photoModel'],
        imageSize: ['photoSettings', 'imageSize'],
        videoSize: ['photoSettings', 'videoSize'],
        pirSensitivity: ['warning', 'pirSensitivity'],
        pirInterval: ['warning', 'triggerTimeInterval']
      }
      const target = fieldMap[this.currentFieldType]
      if (this.currentItem && target) {
        // 统一写入 value（协议编码或选项串），显示由 formatXxx 转文案
        this.$set(this.currentItem[target[0]], target[1], e[0].value)
      }
    },
    // 拍照模式编码转文案（与PC端一致：0=拍照，1=录像，2=拍照+录像）
    formatPhotoModel(value){
      const map = { '0': '拍照', '1': '录像', '2': '拍照+录像' }
      return map[value] || value || '--'
    },
    // 图片/视频大小：直接显示选项串（如 4M/2560*1440）
    formatImageSize(value){
      return value === '' || value === null || value === undefined ? '--' : value
    },
    // PIR灵敏度编码转文案（0=自动，1=低，2=中，3=高）
    formatPirSensitivity(value){
      const map = { '0': '自动', '1': '低', '2': '中', '3': '高' }
      return map[value] || value || '--'
    },
    handleTabChildClick(item, tab){
      item.activeTab = tab;
    },
    // 展开/收起相机设置面板（同时只展开一个，再点一次收起；-1表示全部收起）
    toggleChildItem(index){
      this.actionChildItem = this.actionChildItem == index ? -1 : index
    },
    // 失焦时校验：只保留数字并按上下限截断（min 缺省为 1，传 0 表示允许 0，如拍摄限制的不限）
    // 小程序上@input回传参数拿不到输入值，且边输入边改值会引发输入框错乱，所以统一在失焦时校正
    handlePositiveIntBlur(item, field, max, min){
      max = max || 1000
      min = min === undefined ? 1 : min
      let value = (item[field] === null || item[field] === undefined ? '' : item[field] + '').replace(/\D/g, '')
      if (value === '') {
        value = String(min)
      } else {
        value = String(Math.min(Math.max(Number(value), min), max))
      }
      this.$set(item, field, value)
    },
    openCameraIdPicker(field) {
      this.currentCameraField = field
      // 互斥：过滤掉已被其他相机项选中的选项
      const fields = ['camera1ID', 'camera2ID', 'camera3ID']
      this.cameraSelectList = this.cameraList.filter(c =>
        fields.every(f => f === field || this[f] !== c.value)
      )
      this.showCameraSelect = true
    },
    confirmCameraSelect(e) {
      const value = e[0].value
      const fields = ['camera1ID', 'camera2ID', 'camera3ID']
      for (let i = 0; i < fields.length; i++) {
        if (fields[i] !== this.currentCameraField && this[fields[i]] === value) {
          uni.showToast({ title: '该相机已被其他项选择', icon: 'none' })
          return
        }
      }
      this[this.currentCameraField] = value
    },
    // 循环拍摄间隔：时:分选择器（协议 Timer_Interval，00:00~23:59）
    openIntervalPicker(item) {
      this.currentIntervalItem = item
      this.currentDefaultTime = item.timeSettings.photoTime || '00:01'
      this.showDateTime = true
    },
    openTimePicker(item, field, index) {
      this.currentIntervalItem = null
      this.currentTimeItem = item
      this.currentTimeField = field
      this.currentTimeIndex = index
      const range = item.timeSettings[field] || []
      this.currentDefaultTime = range[index] || '08:00'
      this.showDateTime = true
    },
    confirmTimePicker(e) {
      const pad = (n) => ('0' + Number(n)).slice(-2)
      const value = pad(e.hour) + ':' + pad(e.minute)
      // 循环拍摄间隔：直接写入 HH:MM
      if (this.currentIntervalItem) {
        this.currentIntervalItem.timeSettings.photoTime = value
        this.currentIntervalItem = null
        return
      }
      const item = this.currentTimeItem
      const field = this.currentTimeField
      const index = this.currentTimeIndex
      if (!item || !field) return
      // 用修改后的临时数据做校验，通过才写入（time1~time3为[开始,结束]数组）
      const slots = ['time1', 'time2', 'time3'].map((key, i) => {
        const source = item.timeSettings[key] || []
        const range = [source[0] || '', source[1] || '']
        if (key === field) range[index] = value
        return { name: '时间段' + (i + 1), start: range[0], end: range[1] }
      })
      // 开始==结束视为未配置（如默认回显的 00:00-00:00），不参与校验
      const configured = slots.filter(s => s.start && s.end && s.start !== s.end)
      for (let i = 0; i < configured.length; i++) {
        if (configured[i].start >= configured[i].end) {
          uni.showToast({ title: configured[i].name + '的开始时间需小于结束时间', icon: 'none' })
          return
        }
      }
      for (let i = 0; i < configured.length - 1; i++) {
        const a = configured[i]
        const b = configured[i + 1]
        if (a.start === b.start && a.end === b.end) {
          uni.showToast({ title: a.name + '与' + b.name + '不能重复', icon: 'none' })
          return
        }
        if (a.end > b.start) {
          uni.showToast({ title: a.name + '需早于' + b.name, icon: 'none' })
          return
        }
      }
      if (!item.timeSettings[field] || item.timeSettings[field].length !== 2) {
        this.$set(item.timeSettings, field, ['', ''])
      }
      this.$set(item.timeSettings[field], index, value)
    },
    openWeekPicker(item) {
      this.currentWeekItem = item
      this.selectedWeeks = item.timeSettings.weekLoop ? item.timeSettings.weekLoop.slice() : []
      this.showWeekPicker = true
    },
    toggleWeek(day) {
      const index = this.selectedWeeks.indexOf(day)
      if (index > -1) {
        if (this.selectedWeeks.length === 1) {
          uni.showToast({
            title: '至少保留一个',
            icon: 'none'
          })
          return
        }
        this.selectedWeeks.splice(index, 1)
      } else {
        this.selectedWeeks.push(day)
      }
    },
    confirmWeekPicker() {
      if (this.selectedWeeks.length === 0) {
        uni.showToast({
          title: '请至少选择一个',
          icon: 'none'
        })
        return
      }
      if (this.currentWeekItem) {
        const ordered = this.weekList.filter(day => this.selectedWeeks.indexOf(day) > -1)
        this.$set(this.currentWeekItem.timeSettings, 'weekLoop', ordered)
      }
      this.showWeekPicker = false
    },
    getProgressWidth(value, min, max) {
      if (max === min) return 0
      return ((value - min) / (max - min)) * 100
    },
    onSliderTouchStart(e, field, min, max) {
      this.sliderField = field
      this.sliderMin = min
      this.sliderMax = max
      const query = uni.createSelectorQuery().in(this)
      query.select('.custom-progress').boundingClientRect(rect => {
        this.sliderRect = rect
      }).exec()
      this.updateSliderValue(e.touches[0].clientX, field, min, max)
    },
    onSliderTouchMove(e, min, max) {
      if (!this.sliderField || !this.sliderRect) return
      this.updateSliderValue(e.touches[0].clientX, this.sliderField, min, max)
    },
    onSliderTouchEnd() {
      this.sliderField = ''
    },
    onSliderTap(e, field, min, max) {
      const query = uni.createSelectorQuery().in(this)
      query.select('.custom-progress').boundingClientRect(rect => {
        this.sliderRect = rect
        this.updateSliderValue(e.detail.x + rect.left, field, min, max)
      }).exec()
    },
    updateSliderValue(clientX, field, min, max) {
      if (!this.sliderRect) return
      let ratio = (clientX - this.sliderRect.left) / this.sliderRect.width
      ratio = Math.max(0, Math.min(1, ratio))
      const value = Math.round(min + ratio * (max - min))
      this.$set(this.equipContrlForm, field, value)
    },
    handleBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    handleTabClick(tab) {
      this.activeTab = tab;
    },
    showMqttConfig(){
      this.show = true;
    },
    closeMqttConfig(){
      this.show = false;
    },
    async setDeviceContorl(type){
      const data = {
        device_type_id: 3,
        d_id: this.d_id,
        cmd: type,
      }
      if(type === 'imei'){
        data.imei = this.equipContrlForm.imei
      }else{
        delete data.imei
      }
      this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.admin_device_control',
        method: 'POST',
        data
      }).then(res => {
        this.closeMqttConfig()
        if (res) {
          uni.showToast({
            title: '设备控制修改成功！',
            icon: 'success',
          });
        } else {
          uni.showToast({
            title: '设备控制修改失败',
            icon: 'error',
          });
        }
      });
    },
    saveSettings(){
      // 管理员 tab：保存设备名称与相机绑定；设置 tab：下发相机配置
      if (this.activeTab === 'pestAnalysis') {
        this.saveAdminInfo()
        return
      }
      this.saveCameraConfig()
    },
    // 设置 tab：整包下发相机配置（未改动字段原样透传）
    async saveCameraConfig(){
      const device_config_data = this.deviceList.map(item => {
        // 以回显时的原始配置为底，写回用户改动
        const cfg = JSON.parse(JSON.stringify(item.rawConfig || {}));
        const p = item.photoSettings;
        const t = item.timeSettings;
        const w = item.warning;
        const o = item.other;
        cfg.CAM_Mode = Number(p.photoModel);
        if (p.imageSize && p.imageSizeOptions.length) {
          cfg.CAM_ImageSize = { options: p.imageSizeOptions, Selected: Math.max(0, p.imageSizeOptions.indexOf(p.imageSize)) };
        }
        if (p.videoSize && p.videoSizeOptions.length) {
          cfg.CAM_VideoSize = { options: p.videoSizeOptions, Selected: Math.max(0, p.videoSizeOptions.indexOf(p.videoSize)) };
        }
        cfg.CAM_Shooting = String(p.burstPhoto);
        cfg.CAM_VideoLength = Number(p.videoLength);
        cfg.CAM_MaxShooting = Number(p.photoInterval);
        cfg.PIR_Enable = w.pirOpenOrClose ? 1 : 0;
        cfg.PIR_Sensitivity = Number(w.pirSensitivity);
        cfg.PIR_Interval = w.triggerTimeInterval;
        cfg.Timer_Enable = t.timePhoto ? 1 : 0;
        cfg.Timer_Interval = t.photoTime;
        cfg.Timer_1Start = t.time1[0] || '00:00';
        cfg.Timer_1End = t.time1[1] || '00:00';
        cfg.Timer_2Start = t.time2[0] || '00:00';
        cfg.Timer_2End = t.time2[1] || '00:00';
        cfg.Timer_3Start = t.time3[0] || '00:00';
        cfg.Timer_3End = t.time3[1] || '00:00';
        cfg.Timer_Repeats = this.weeksToRepeats(t.weekLoop);
        cfg.Other_Stamp = o.informationStamp ? 1 : 0;
        cfg.Other_Cycle = o.autoOverWrite ? 1 : 0;
        cfg.Other_DevName = o.photoName;
        return { device_id: item.deviceId, device_config: cfg };
      });
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.shuhai.shuhai_two_camera_update_config',
        method: 'POST',
        data: {
          device_id: this.device_id,
          device_config_data: JSON.stringify(device_config_data)
        }
      });
      if (res) {
        uni.showToast({
          title: '保存成功',
          icon: 'success',
        });
      } else {
        uni.showToast({
          title: '保存失败',
          icon: 'none',
        });
      }
    },
    // ['周日','周一'...] → 按周日~周六位序的 7 位串
    weeksToRepeats(weeks) {
      const weekOrder = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      return weekOrder.map(name => ((weeks || []).indexOf(name) > -1 ? '1' : '0')).join('');
    },
    // 管理员 tab：保存设备名称与相机1/2/3绑定
    async saveAdminInfo(){
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.shuhai.shuhai_two_device_info_update',
        method: 'POST',
        data: {
          device_id: this.device_id,
          device_name: this.deviceName,
          ding_one_device_id: this.camera1ID,
          ding_two_device_id: this.camera2ID,
          ding_three_device_id: this.camera3ID
        }
      });
      if (res) {
        uni.showToast({
          title: '保存成功',
          icon: 'success',
        });
      } else {
        uni.showToast({
          title: '保存失败',
          icon: 'none',
        });
      }
    },
    async getControlDeviceConfigInfo(){
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.send_control.device_control_info',
        method: 'POST',
        data: {
          d_id: this.d_id,
          cmd:'paramconf'
        },
      });
      this.equipContrlForm = res
    },
    // 拉取相机配置并回显：按 camera_config 动态生成相机列表（返回几台显示几台）
    async getCameraConfig(){
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.shuhai.shuhai_two_camera_config',
        method: 'POST',
        data: {
          device_id: this.device_id
        },
      });
      const configList = (res && res.camera_config) || [];
      if (!configList.length) return;
      // 相机编号回显（管理员 tab 的相机选择）
      this.camera1ID = (configList[0] && configList[0].device_id) || ''
      this.camera2ID = (configList[1] && configList[1].device_id) || ''
      this.camera3ID = (configList[2] && configList[2].device_id) || ''
      this.deviceList = configList.map((camera, index) => {
        const cfg = (camera && camera.device_config) || {};
        return {
          label: '相机' + (index + 1),
          content: '',
          show: false,
          activeTab: 'settings',
          deviceId: (camera && camera.device_id) || '',
          // 保存时以原始配置为底回传，未改动字段透传
          rawConfig: cfg,
          // 拍摄设置
          photoSettings: {
            photoModel: cfg.CAM_Mode !== undefined ? String(cfg.CAM_Mode) : '',
            imageSize: this.sizeOf(cfg.CAM_ImageSize),
            videoSize: this.sizeOf(cfg.CAM_VideoSize),
            burstPhoto: cfg.CAM_Shooting !== undefined ? cfg.CAM_Shooting : '',
            videoLength: cfg.CAM_VideoLength !== undefined ? cfg.CAM_VideoLength : '',
            photoInterval: cfg.CAM_MaxShooting !== undefined ? cfg.CAM_MaxShooting : '',
            // 大小可选项，供下拉选择用
            imageSizeOptions: (cfg.CAM_ImageSize && cfg.CAM_ImageSize.options) || [],
            videoSizeOptions: (cfg.CAM_VideoSize && cfg.CAM_VideoSize.options) || []
          },
          // 定时设置
          timeSettings: {
            // 开关绑布尔值：u-switch 外观只认 value 的布尔真假，字符串 "0" 会被当成开
            timePhoto: cfg.Timer_Enable !== undefined ? Number(cfg.Timer_Enable) === 1 : false,
            photoTime: cfg.Timer_Interval !== undefined ? cfg.Timer_Interval : '',
            time1: [cfg.Timer_1Start || '', cfg.Timer_1End || ''],
            time2: [cfg.Timer_2Start || '', cfg.Timer_2End || ''],
            time3: [cfg.Timer_3Start || '', cfg.Timer_3End || ''],
            weekLoop: this.repeatsToWeeks(cfg.Timer_Repeats)
          },
          // 触发报警设置
          warning: {
            pirOpenOrClose: cfg.PIR_Enable !== undefined ? Number(cfg.PIR_Enable) === 1 : false,
            pirSensitivity: cfg.PIR_Sensitivity !== undefined ? String(cfg.PIR_Sensitivity) : '',
            triggerTimeInterval: cfg.PIR_Interval !== undefined ? cfg.PIR_Interval : ''
          },
          // 其他设置
          other: {
            informationStamp: cfg.Other_Stamp !== undefined ? Number(cfg.Other_Stamp) === 1 : false,
            autoOverWrite: cfg.Other_Cycle !== undefined ? Number(cfg.Other_Cycle) === 1 : false,
            photoName: cfg.Other_DevName !== undefined ? cfg.Other_DevName : ''
          }
        };
      });
    },
    // {options, Selected} → 选中的选项文案
    sizeOf(obj) {
      return ((obj && obj.options) || [])[(obj && obj.Selected)] || ''
    },
    // 拉取主设备下的相机列表，作为相机1/2/3选择弹层的可选项
    async getCameraDeviceList(){
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.shuhai.get_shuhai_two_camera_device_list',
        method: 'POST',
        data: {
          device_id: this.device_id
        },
      });
      const devices = (res && res.device) || [];
      this.cameraList = devices
        .map(d => d.camera_id)
        .filter(Boolean)
        .map(id => ({ label: id, value: id }));
    },
    // '1111111'（位序：周日~周六）→ 按周一~周日顺序的文案数组
    repeatsToWeeks(repeats) {
      const weekOrder = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      if (typeof repeats !== 'string' || repeats.length !== 7) return []
      const selected = []
      weekOrder.forEach((name, i) => {
        if (repeats.charAt(i) === '1') selected.push(name)
      })
      // 按页面上周一~周日的展示顺序重排
      return this.weekList.filter(day => selected.indexOf(day) > -1)
    },
  }
}
</script>
<style scoped lang="scss">
.device-detail {
  display: flex;
  width: 100%;
  height: calc(100vh - 112rpx);
  padding-top: 112rpx;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #ffffff00 0%, #F5F6FA 23.64%, #F5F6FA 100%), linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%);
  .device-detail__header {
    width: 100%;
    font-size: 28rpx;
    color: #999;
    color: #042118;
    font-family: 'Source Han Sans CN VF';
    font-weight: 700;
    position: relative;
    text-align: center;
    .arrow-left {
      position: absolute;
      left: 32rpx;
      margin-right: 12rpx;
    }
  }
  .device-detail__body {
    width: calc(100% - 64rpx);
    margin: 0 auto;
    border-radius: 16rpx;
    overflow-x: hidden;
    overflow-y: auto;
    // 隐藏滚动条
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .tabs {
    margin: 24rpx 0;
    border-radius: 16rpx;
    padding: 16rpx 0;
    padding-top: 0;
    .tab-container{
      display: flex;
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 700;
      color: #042118;
      font-family: 'Source Han Sans CN VF';
    }
    .tab-item {
      margin-right: 40rpx;
      color:#999999;
    }
    .active{
      position: relative;
      color: #303133;
      text-align: center;
      font-family: "Source Han Sans CN VF";
      font-size: 28rpx;
      font-weight: 700;
      &::after {
        content: '';
        position: absolute;
        bottom: 10rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 36rpx;
        border-bottom: 6rpx solid #303133;
      }
    }
  }
  .device-detail-content{
    display: flex;
    padding: 24rpx 32rpx;
    flex-direction: column;
    align-items: flex-start;
    gap: 20rpx;
    border-radius: 16rpx;
    background: #FFF;
    .device-detail-name{
      flex:1;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .rotate{
        transform: rotate(180deg);
        transition: all 0.3s ease-in-out;
      }
    }
    .device-detail-child-settings-container{
      transition: all 0.3s ease-in-out;
      padding: 0 24rpx;
    }
    .tabs {
      margin: 2rpx 0;
      border-radius: 16rpx;
      padding: 6rpx 0;
      padding-top: 0;
      .tab-container{
        display: flex;
        width: 100%;
        height: 68rpx;
        line-height: 68rpx;
        text-align: center;
        font-size: 24rpx;
        color: #042118;
        font-family: 'Source Han Sans CN VF';
      }
      .tab-item {
        margin-right: 20rpx;
        color:#999999;
      }
      .active{
        position: relative;
        color: #303133;
        text-align: center;
        font-family: "Source Han Sans CN VF";
        font-size: 24rpx;
        &::after {
          content: '';
          position: absolute;
          bottom: 10rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          height: 36rpx;
          border-bottom: 6rpx solid #303133;
        }
      }
    }
    .device-detail-item{
      .device-detail-btn-container{
        display: flex;
        gap: 24rpx;
        margin-top: 12rpx;
      }
      .device-detail-btn{
        display: flex;
        padding: 10rpx 16rpx;
        justify-content: center;
        align-items: center;
        gap: 16rpx;
        border-radius: 16rpx;
        background: #0BBC58;
        color: #ffffff;
        font-family: "Source Han Sans CN VF";
        font-size: 26rpx;
        font-weight: 400;
      }
      .force-btn{
        background: #FB4E52;
      }
    }
    .device-detail-viewImage{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70rpx;
      .device-detail-label{
        color: #303133;
        font-family: "Source Han Sans CN VF";
        font-size: 26rpx;
        flex-shrink: 0;
      }
      .device-detail-value{
        color: #303133;
        font-family: "Source Han Sans CN VF";
        font-size: 26rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .week-text{
          flex: 1;
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: right;
          margin-right: 8rpx;
        }
        .time-text{
          min-width: 96rpx;
          height: 48rpx;
          line-height: 48rpx;
          padding: 0 16rpx;
          text-align: center;
          border-radius: 10rpx;
          background: #F6F8FC;
          color: #303133;
          font-size: 24rpx;
          font-family: "Source Han Sans CN VF";
        }
        .time-sep{
          margin: 0 8rpx;
          color: #999999;
        }
        .unit-text{
          margin-left: 8rpx;
          flex-shrink: 0;
          color: #303133;
          font-size: 24rpx;
          font-family: "Source Han Sans CN VF";
        }
      }
    }
  }
  .slider-container{
    position: relative;
    margin-bottom: 20rpx;
    .slider-min-value{
      position: absolute;
      left: 0;
      top: -50rpx;
    }
    .slider{
      width: 600rpx;
    }
    .slider-max-value{
      position: absolute;
      right: 0;
      top: -50rpx;
    }
  }
  .custom-progress{
    width: 600rpx;
    padding: 0;
    .progress-track{
      position: relative;
      height: 12rpx;
      background-color: #ebedf0;
      border-radius: 6rpx;
    }
    .progress-fill{
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background-color: #0BBC58;
      border-radius: 6rpx;
      transition: width 0.2s;
    }
    .progress-thumb{
      position: absolute;
      top: 50%;
      width: 28rpx;
      height: 28rpx;
      margin-left: -14rpx;
      margin-top: -14rpx;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      transition: left 0.2s;
    }
  }
  .device-detail-btn-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 112rpx;
    line-height: 112rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 700;
    color: #042118;
    font-family: 'Source Han Sans CN VF';
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    .device-detail-btn{
      display: flex;
      height: 80rpx;
      width: 90%;
      margin: 0 auto;
      padding: 0rpx 20rpx;
      justify-content: center;
      align-items: center;
      gap: 8rpx;
      border-radius: 16rpx;
      background:#0BBC58;
      color: #ffffff;
      text-align: center;
      font-family: "Source Han Sans CN VF";
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
    }
  }
  .week-picker{
    padding: 32rpx 32rpx 40rpx;
    .week-picker__title{
      text-align: center;
      font-size: 30rpx;
      font-weight: 700;
      color: #042118;
      font-family: 'Source Han Sans CN VF';
      margin-bottom: 32rpx;
    }
    .week-picker__list{
      display: flex;
      flex-wrap: wrap;
      gap: 24rpx;
      margin-bottom: 40rpx;
    }
    .week-picker__item{
      width: calc((100% - 72rpx) / 4);
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      border-radius: 12rpx;
      background: #F6F8FC;
      color: #666666;
      font-size: 26rpx;
      font-family: 'Source Han Sans CN VF';
      &.active{
        background: #0BBC58;
        color: #ffffff;
      }
    }
    .week-picker__btn{
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 16rpx;
      background: #0BBC58;
      color: #ffffff;
      font-size: 28rpx;
      font-family: 'Source Han Sans CN VF';
      font-weight: 500;
    }
  }
}
</style>