<template>
  <view>
    <view v-if="requestFinish">
      <view
        class="py-3 px-4 bg-white flex items-center justify-between text-base"
        @click="toJump('openDoorNotice')"
      >
        <view class="item-title">开门通知</view>
        <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('notOpenDoor')"
      >
        <view class="item-title">N天未开门</view>
        <view class="flex items-center">
          <view class="mr-2">{{
            $bluetooth.currentLockNoticeSetting.dayNotOpenDoorState ? '已启用' : '未启用'
          }}</view>
          <up-icon name="arrow-right"></up-icon>
        </view>
      </view>
      <view class="py-3 px-4 bg-white !py-2 flex items-center justify-between text-base mt-4rpx">
        <view class="item-title">门未关好</view>
        <switch
          @click="
            updateSetting(
              'doorNotCloseState',
              $bluetooth.currentLockNoticeSetting.doorNotCloseState ? 0 : 1
            )
          "
          :checked="$bluetooth.currentLockNoticeSetting.doorNotCloseState"
          class="transform-scale-90"
          :disabled="true"
          color="#002ce5"
        />
      </view>
      <view class="py-3 px-4 bg-white !py-2 flex items-center justify-between text-base mt-4rpx">
        <view class="item-title">防拆报警</view>
        <switch
          @click="
            updateSetting(
              'tamperAlarmState',
              $bluetooth.currentLockNoticeSetting.tamperAlarmState ? 0 : 1
            )
          "
          :checked="$bluetooth.currentLockNoticeSetting.tamperAlarmState"
          class="transform-scale-90"
          :disabled="true"
          color="#002ce5"
        />
      </view>
      <view
        class="py-3 px-4 bg-white flex items-center justify-between text-base mt-4rpx"
        @click="toJump('lowElecNotice')"
      >
        <view class="item-title">低电量提醒</view>
        <view class="flex items-center">
          <view class="mr-2">{{
            $bluetooth.currentLockNoticeSetting.lowElecNoticeState ? '已启用' : '未启用'
          }}</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('coercionOpenDoor')"
      >
        <view class="item-title">胁迫开门</view>
        <view><up-icon name="arrow-right"></up-icon></view>
      </view>
      <view class="text-center text-sm mt-10">此模块功能需要锁联网后设置方可生效</view>
    </view>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { getLockNoticeSettingRequest, updateLockNoticeSettingRequest } from '@/api/setting'
  import { useBluetoothStore } from '@/stores/bluetooth'
  import { useBasicStore } from '@/stores/basic'

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

  const requestFinish = ref(false)

  const pending = ref(false)

  onMounted(async () => {
    const { code, data, message } = await getLockNoticeSettingRequest({
      lockId: $bluetooth.currentLockInfo.lockId
    })
    if (code === 0) {
      requestFinish.value = true
      $bluetooth.updateCurrentLockNoticeSetting(data)
    } else {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    }
  })

  const updateSetting = async (type, value) => {
    if (pending.value) return
    pending.value = true
    uni.showLoading({
      title: '更新中'
    })
    const { code, message } = await updateLockNoticeSettingRequest({
      lockId: $bluetooth.currentLockInfo.lockId,
      [type]: value
    })
    uni.hideLoading()
    pending.value = false
    if (code === 0) {
      const info = $bluetooth.currentLockNoticeSetting
      info[type] = value
      $bluetooth.updateCurrentLockNoticeSetting(info)
    } else {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    }
  }

  const toJump = name => {
    $basic.routeJump({
      name
    })
  }
</script>

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