<template>
  <view>
    <hs-page-head-information
      title="可以把您所在的小区下单元开门权限分享给好友，好友即可一键开门，方便快捷!"
    />
    <view class="invitation_title"> 门禁授权 </view>
    <view class="access_control_equipment">
      <view
        v-for="(i, index) in list"
        :key="`item_${index}`"
        :class="`item ${i.checked ? 'active' : ''}`"
        @click="handleSelectLock(index)"
      >
        <view class="name"> {{ i.label }} </view>
        <view class="icon">
          <image
            src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K7NSB69207VWR4EQ3GBHB6VZ.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="select_icon" v-if="i.checked">
          <image
            mode="widthFix"
            src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K7NWB769KXP87P865DNCCRT2.png"
          />
        </view>
      </view>
    </view>
    <view class="invitation_title"> 钥匙授权时长 </view>
    <view class="day_list_container">
      <view
        v-for="(i, index) in dayList"
        :key="`item_${index}`"
        :class="`item ${current === index ? 'active' : ''}`"
        @click="handleSelectDay(index)"
      >
        {{ i.label }}
      </view>
    </view>

    <hs-footer
      btnParimaryName="分享给访客开门"
      openType="share"
      v-if="current > -1 && invitationArr?.length"
    />
    <hs-footer btnParimaryName="分享给访客开门" v-else @handleParmaryClick="handleShareBtn" />
  </view>
</template>
<script lang="ts" setup>
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { ref } from 'vue'
const current = ref(-1)
const invitationArr = ref<number[]>([])
const list = ref([
  { label: '北大门闸机', checked: false },
  { label: '3座1楼大堂', checked: false },
  { label: '3座负1楼', checked: false },
  { label: '3座负2楼', checked: false }
])
const dayList = [
  { label: '1小时', checked: false },
  { label: '3小时', checked: false },
  { label: '6小时', checked: false },
  { label: '12小时', checked: false },
  { label: '1天', checked: false },
  { label: '2天', checked: false },
  { label: '3天', checked: false },
  { label: '4天', checked: false }
]

const handleSelectLock = (index: number) => {
  list.value[index].checked = !list.value[index].checked
  list?.value?.forEach((e: { label: string; checked: boolean }) => {
    if (e.checked) {
      invitationArr?.value?.push(1)
    }
  })
}

const handleSelectDay = (index: number) => {
  current.value = index
}

const handleShareBtn = () => {
  if (!invitationArr?.value?.length) {
    uni.showToast({
      title: '请选择门禁！',
      icon: 'none'
    })
    return false
  }

  if (current?.value < 0) {
    uni.showToast({
      title: '请选择授权时长！',
      icon: 'none'
    })
    return false
  }
}

onShareAppMessage(() => {
  return {
    title: '您的好友给您授权门禁！',
    path: '/INDEX/open_door/index',
    imageUrl:
      'https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K5B5RY2TQQAJ1GT2RZSK426V.jpg'
  }
})
</script>
<style lang="scss">
@import './style.scss';
</style>
