<template>
  <view>
    <scroll-view
      v-if="deviceInfo"
      :scroll-y="true"
      :style="{ height: deviceInfo.windowHeight - deviceInfo.safeArea.top + 'px' }"
    >
      <view class="pb-[calc(env(safe-area-inset-bottom)+250rpx)]">
        <view
          v-for="(item, index) in list"
          :key="index"
          :style="{ marginTop: index !== 0 ? '4rpx' : '0' }"
          @click="changeGroup(item)"
          class="flex items-center justify-between h-80 bg-white text-base"
        >
          <view class="ml-4 max-w-550 break-all">{{ item.keyGroupName }}</view>
          <view
            class="mr-4"
            v-if="item.keyGroupId === $bluetooth.currentLockSetting.lockBasicInfo.groupId"
          >
            <up-icon name="checkbox-mark" color="#63b8af" size="40rpx"></up-icon>
          </view>
        </view>
      </view>
    </scroll-view>
    <view
      @click="() => $refs.modalInput.open()"
      class="bg-#63b8af text-white pos-fixed bottom-[calc(env(safe-area-inset-bottom)+48rpx)] rounded-44rpx w-686 ml-4 h-88 line-height-88rpx text-lg font-bold text-center"
      >创建新分组</view
    >
    <ModalInput
      ref="modalInput"
      title="创建新分组"
      :autoClose="false"
      placeholder="请输入名称"
      @confirm="changeName"
    />
  </view>
</template>

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

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

  const deviceInfo = ref(null)
  const modalInput = ref(null)
  const list = ref([])

  const pending = ref(false)

  onMounted(async () => {
    deviceInfo.value = await $basic.getDeviceInfo()
    getList()
  })

  const getList = async () => {
    const { code, data, message } = await getGroupListRequest({ type: 1 })
    if (code === 0) {
      list.value = data.list
    } else {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    }
  }

  const changeGroup = async item => {
    if (pending.value) return
    pending.value = true
    uni.showLoading({
      title: '设置中'
    })
    const { code, message } = await setGroupRequest({
      lockId: $bluetooth.currentLockInfo.lockId,
      groupId: item.keyGroupId
    })
    uni.hideLoading()
    pending.value = false
    if (code === 0) {
      $bluetooth.updateCurrentLockSetting({
        ...$bluetooth.currentLockSetting,
        lockBasicInfo: {
          ...$bluetooth.currentLockSetting.lockBasicInfo,
          groupId: item.keyGroupId,
          groupName: item.keyGroupName
        }
      })
      uni.showToast({
        title: '设置锁分组成功',
        icon: 'none'
      })
    } else {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    }
  }

  const changeName = async name => {
    if (!name) {
      uni.showToast({
        title: '请输入名称',
        icon: 'none'
      })
      return
    }
    if (pending.value) return
    pending.value = true
    const { code, message } = await createGroupRequest({
      groupName: name
    })
    pending.value = false
    if (code === 0) {
      modalInput.value.close()
      getList()
      uni.showToast({
        title: '创建成功',
        icon: 'none'
      })
    } else {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    }
  }
</script>

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