<template>
  <view>
    <view
      @click="isAllDay = 1"
      class="flex items-center bg-#ececec py-4 pr-2 pl-1 mx-3 my-6 rounded-2xl"
      :class="[isAllDay === 1 ? 'bg-#d9e8fd' : 'bg-#ececec']"
    >
      <view class="w-80 h-full flex items-center justify-center">
        <up-icon v-if="isAllDay === 1" name="checkbox-mark" color="#2a85ec" size="40"></up-icon>
      </view>
      <view class="flex-1">
        <view class="text-lg font-bold" :class="[isAllDay === 1 ? 'text-#2a85ec' : 'text-black']"
          >全天</view
        >
      </view>
    </view>
    <view
      @click="isAllDay = 0"
      class="py-4 pr-2 pl-1 mx-3 my-6 rounded-2xl"
      :class="[isAllDay === 0 ? 'bg-#d9e8fd' : 'bg-#ececec']"
    >
      <view class="flex items-center">
        <view class="w-80 h-full flex items-center justify-center">
          <up-icon v-if="isAllDay === 0" name="checkbox-mark" color="#2a85ec" size="40"></up-icon>
        </view>
        <view class="flex-1">
          <view class="text-lg font-bold" :class="[isAllDay === 0 ? 'text-#2a85ec' : 'text-black']">
            自定义时间</view
          >
        </view></view
      >
      <view
        class="mt-2 text-#2a85ec mx-4 border-t-1 border-t-solid border-t-#2a85ec"
        v-if="isAllDay === 0"
      >
        <view class="flex items-center mt-2" @click="showStartTime = true">
          <view>开始时间</view>
          <view class="ml-a mr-2"
            >{{ columns[0][startIndex[0]] }}:{{ columns[1][startIndex[1]] }}</view
          >
          <up-icon name="arrow-right" color="#2a85ec"></up-icon>
        </view>
        <view class="flex items-center mt-1" @click="showEndTime = true">
          <view>结束时间</view>
          <view class="ml-a mr-2">{{ columns[0][endIndex[0]] }}:{{ columns[1][endIndex[1]] }}</view>
          <up-icon name="arrow-right" color="#2a85ec"></up-icon>
        </view>
      </view>
    </view>
    <up-picker
      :show="showStartTime"
      :columns="columns"
      title="开始时间"
      mode="time"
      :defaultIndex="startIndex"
      :itemHeight="70"
      :visibleItemCount="5"
      @close="showStartTime = false"
      @cancel="showStartTime = false"
      @confirm="confirmTime('start', $event)"
    ></up-picker>
    <up-picker
      :show="showEndTime"
      :columns="columns"
      title="结束时间"
      mode="time"
      :defaultIndex="endIndex"
      :itemHeight="70"
      :visibleItemCount="5"
      @close="showEndTime = false"
      @cancel="showEndTime = false"
      @confirm="confirmTime('end', $event)"
    ></up-picker>
    <view
      @click="confirm"
      class="mt-10 w-686 mx-4 h-88 line-height-88rpx text-center bg-#63b8af text-white rounded-3xl"
      >确定
    </view>
  </view>
</template>

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

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

  const $bluetooth = useBluetoothStore()

  const isAllDay = ref(0)

  const startIndex = ref([0, 0])
  const endIndex = ref([0, 0])

  const columns = ref([[], []])

  const showStartTime = ref(false)
  const showEndTime = ref(false)

  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 confirm = () => {
    if (isAllDay.value === 0) {
      if (
        startIndex.value[0] * 60 + startIndex.value[1] >=
        endIndex.value[0] * 60 + endIndex.value[1]
      ) {
        uni.showToast({
          title: '结束时间要大于开始时间',
          icon: 'none'
        })
        return
      }
    }
    let array = value.value
    const recordStartTime =
      isAllDay.value === 1 ? 0 : startIndex.value[0] * 60 + startIndex.value[1]
    const recordEndTime = isAllDay.value === 1 ? 1440 : endIndex.value[0] * 60 + endIndex.value[1]
    if (isAllDay.value === 1) {
      array[1] = 1
      array[2] = 0
      array[3] = 0
      array[4] = 0
      array[5] = 0
    } else {
      array[1] = 0
      array[2] = recordStartTime / 256
      array[3] = recordStartTime % 256
      array[4] = recordEndTime / 256
      array[5] = recordEndTime % 256
    }
    eventChannel.emit('update', {
      value: array,
      type: 'catEyeConfig',
      params: [
        {
          catEyeMode: $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeMode,
          catEyeModeConfig: {
            ...$bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig,
            recordStartTime,
            recordEndTime
          }
        }
      ],
      back: true
    })
  }

  onMounted(() => {
    columns.value = [
      Array.from({ length: 24 }, (v, k) => (k < 10 ? '0' + k : k)),
      Array.from({ length: 60 }, (v, k) => (k < 10 ? '0' + k : k))
    ]
    isAllDay.value =
      $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
        .recordStartTime === 0 &&
      $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
        .recordEndTime === 1440
        ? 1
        : 0
    if (isAllDay.value === 0) {
      startIndex.value = [
        Math.floor(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .recordStartTime / 60
        ),
        $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
          .recordStartTime % 60
      ]
      endIndex.value = [
        Math.floor(
          $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
            .recordEndTime / 60
        ),
        $bluetooth.currentLockSetting.lockSettingInfo.catEyeConfig[0].catEyeModeConfig
          .recordEndTime % 60
      ]
    }
  })

  const confirmTime = (type, event) => {
    if (type === 'start') {
      startIndex.value = event.indexs
      showStartTime.value = false
    } else {
      endIndex.value = event.indexs
      showEndTime.value = false
    }
  }
</script>

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