<template>
  <view class="text-base">
    <view
      class="py-3 px-4 bg-white flex items-center justify-between text-base"
      @click="toJump('videoSlot')"
    >
      <view class="text-lg">录像时段</view>
      <view class="flex items-center">
        <view class="mr-2"> {{ duration }} </view>
        <up-icon name="arrow-right"></up-icon>
      </view>
    </view>
    <view
      class="py-3 px-4 bg-white flex items-center justify-between text-base mt-4rpx"
      @click="showRecordingTime = true"
    >
      <view>
        <view class="text-lg">有人出现时录像</view>
        <view class="text-sm text-gray-500">{{
          recordingTimeObject.value === 0
            ? '有人在门口出现不录像'
            : recordingTimeObject.value === 1
              ? '有人在门口出现立即录像'
              : `有人在门口出现${recordingTimeObject.name}后开始录像`
        }}</view>
        <view class="text-sm text-gray-500">有人按门铃时立即录像</view>
      </view>
      <view class="flex items-center">
        <view class="mr-2"> {{ recordingTimeObject.name }} </view>
        <up-icon name="arrow-right"></up-icon>
      </view>
    </view>
    <view
      class="py-3 px-4 bg-white flex items-center justify-between text-base mt-4rpx"
      @click="showDetectionDistance = true"
    >
      <view>
        <view class="text-lg">人体侦测距离</view>
        <view class="text-sm text-gray-500"
          >有人出现在门口{{
            detectionDistanceObject.name.match(/\d+(\.\d+)?米/)[0]
          }}范围时启动录像</view
        >
      </view>
      <view class="flex items-center">
        <view class="mr-2"> {{ detectionDistanceObject.name }} </view>
        <up-icon name="arrow-right"></up-icon>
      </view>
    </view>
    <view
      class="py-3 px-4 bg-white flex items-center justify-between text-base mt-4rpx"
      @click="toJump('realTimePicture')"
    >
      <view>实时画面</view>
      <view class="flex items-center">
        <view class="mr-2">
          {{
            $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
              .realTimeMode === 0
              ? '发生事件时查看'
              : '实时查看'
          }}
        </view>
        <up-icon name="arrow-right"></up-icon>
      </view>
    </view>
    <up-picker
      :show="showRecordingTime"
      :columns="recordingTimeList"
      keyName="name"
      :itemHeight="70"
      title="有人出现时录像"
      :visibleItemCount="5"
      :defaultIndex="[recordingTimeIndex]"
      @close="showRecordingTime = false"
      @cancel="showRecordingTime = false"
      @confirm="select('recordTime', $event)"
    ></up-picker>
    <up-picker
      :show="showDetectionDistance"
      :columns="detectionDistanceList"
      title="人体侦测距离"
      :itemHeight="70"
      :visibleItemCount="5"
      keyName="name"
      :defaultIndex="[detectionDistanceIndex]"
      @close="showDetectionDistance = false"
      @cancel="showDetectionDistance = false"
      @confirm="select('detectionDistance', $event)"
    ></up-picker>
  </view>
</template>

<script setup>
  import { computed, getCurrentInstance, ref } from 'vue'
  import { useBluetoothStore } from '@/stores/bluetooth'
  import { useBasicStore } from '@/stores/basic'

  const instance = getCurrentInstance().proxy
  const eventChannel = instance.getOpenerEventChannel()

  const $bluetooth = useBluetoothStore()
  const $basic = useBasicStore()

  const value = computed(() => {
    const list = []
    if ($bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0]) {
      list.push($bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode - 1)
      if ($bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode === 4) {
        if (
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .recordStartTime === 0 &&
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .recordEndTime === 1440
        ) {
          list.push(1)
        } else {
          list.push(0)
        }
        list.push(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .recordStartTime / 256
        )
        list.push(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .recordStartTime % 256
        )
        list.push(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .recordEndTime / 256
        )
        list.push(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .recordEndTime % 256
        )
        list.push(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig.recordTime
            ? $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
                .recordTime
            : 0
        )
        list.push(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .detectionDistance
            ? $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
                .detectionDistance
            : 0
        )
        list.push(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .realTimeMode
        )
      } else {
        list.push(...[0, 0, 0, 0, 0, 0, 0, 0])
      }
    } else {
      list.push(...[0, 0, 0, 0, 0, 0, 0, 0, 0])
    }
    list.push($bluetooth.currentLockSetting.lockSettingInfo.autoLightScreen)
    list.push($bluetooth.currentLockSetting.lockSettingInfo.autoLightScreenTime)
    list.push($bluetooth.currentLockSetting.lockSettingInfo.stayWarn)
    list.push($bluetooth.currentLockSetting.lockSettingInfo.abnormalWarn)
    return list
  })

  const showRecordingTime = ref(false)
  const showDetectionDistance = ref(false)

  const toJump = name => {
    $basic.routeJump({
      name,
      events: {
        update: data => {
          eventChannel.emit('update', data)
        }
      }
    })
  }

  const recordingTimeIndex = computed(() => {
    return recordingTimeList.value[0].findIndex(
      item =>
        item.value ===
        $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig.recordTime
    )
  })
  const detectionDistanceIndex = computed(() => {
    return detectionDistanceList.value[0].findIndex(
      item =>
        item.value ===
        $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
          .detectionDistance
    )
  })

  const recordingTimeList = ref([
    [
      {
        name: '不录像',
        value: 0
      },
      {
        name: '立即录像',
        value: 1
      },
      {
        name: '5秒',
        value: 5
      },
      {
        name: '10秒',
        value: 10
      },
      {
        name: '15秒',
        value: 15
      },
      {
        name: '30秒',
        value: 30
      },
      {
        name: '60秒',
        value: 60
      }
    ]
  ])

  const detectionDistanceList = ref([
    [
      {
        name: '约0.8米',
        value: 0
      },
      {
        name: '约1.5米',
        value: 1
      },
      {
        name: '约3.0米',
        value: 2
      }
    ]
  ])

  const select = (key, event) => {
    let array = value.value
    let data
    if (key === 'recordTime') {
      array[6] = recordingTimeList.value[0][event.indexs[0]].value
      data = array[6]
      showRecordingTime.value = false
    } else if (key === 'detectionDistance') {
      array[7] = detectionDistanceList.value[0][event.indexs[0]].value
      data = array[7]
      showDetectionDistance.value = false
    }
    eventChannel.emit('update', {
      value: array,
      type: 'catEyeConfig',
      params: [
        {
          catEyeMode: $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode,
          catEyeModeConfig: {
            ...$bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig,
            [key]: data
          }
        }
      ]
    })
  }

  const recordingTimeObject = computed(() => {
    return recordingTimeList.value[0].find(
      item =>
        item.value ===
        $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig.recordTime
    )
  })

  const detectionDistanceObject = computed(() => {
    return detectionDistanceList.value[0].find(
      item =>
        item.value ===
        $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
          .detectionDistance
    )
  })

  const duration = computed(() => {
    if (
      $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
        .recordStartTime === 0 &&
      $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
        .recordEndTime === 0
    ) {
      return ''
    }
    if (
      $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
        .recordStartTime === 0 &&
      $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
        .recordEndTime === 1440
    ) {
      return '全天'
    }
    const startHour = Math.floor(
      $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
        .recordStartTime / 60
    )
    const startMinute =
      $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
        .recordStartTime % 60
    const endHour = Math.floor(
      $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig.recordEndTime /
        60
    )
    const endMinute =
      $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig.recordEndTime %
      60
    return `${startHour < 10 ? '0' + startHour : startHour}:${
      startMinute < 10 ? '0' + startMinute : startMinute
    }-${endHour < 10 ? '0' + endHour : endHour}:${endMinute < 10 ? '0' + endMinute : endMinute}`
  })
</script>

<style lang="scss">
  page {
    background-color: $uni-bg-color-grey;
  }
</style>
