<script setup>
import { useVModel } from '@vueuse/core'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  list: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['update:modelValue', 'update:list'])
const show = useVModel(props, 'modelValue', emit)
const close = () => {
  show.value = false
  emit('update:list', [])
}
const open = () => {
  console.log('open popup')
}
</script>

<template>
  <up-popup
    :show="show"
    mode="center"
    round="6"
    :safe-area-inset-bottom="false"
    :custom-style="{
      width: '80%'
    }"
    @close="close"
    @open="open"
  >
    <view w-full h-600 overflow-hidden>
      <scroll-view w-full h-full :scroll-y="true">
        <up-cell
          v-for="(item, index) in list"
          :key="index"
          :title="item.elevatorName"
        >
          <template #label>
            <view mt-8>
              <view text="#666">本次年检时间：{{ item.annualDate }}</view>
              <view text="#666">下次年检时间：{{ item.nextAnnual }}</view>
              <view text="#999">提醒状态：未提醒</view>
            </view>
          </template>
        </up-cell>
      </scroll-view>
    </view>
  </up-popup>
</template>
