<!-- 展示积分 -->
<template>
  <v-app>
    <v-dialog
      v-model="dialog"
      max-width="400"
      :persistent="persistent || false"
    >
      <div class="white-bgc pa-5" style="border-radius: 2px; max-height: 600px; overflow-y: auto;">
        <template v-if="list?.length">
          <div class="d-flex align-center" v-for="(item, index) in list" :key="'curtainPoint' + index">
            <span style="color: darkorange; font-size: 44px;" class="mdi mdi-database-check-outline ml-2 mr-2"></span>
            <div style="color: darkorange;" class="mt-4">{{ item }}</div>
          </div>
        </template>
        <div v-else class="d-flex align-center">
          <span style="color: darkorange; font-size: 44px;" class="mdi mdi-database-check-outline ml-2 mr-2"></span>
          <div style="color: darkorange;" class="mt-4">{{message}}</div>
        </div>
      </div>
      <div class="text-center mt-3">
        <span style="color: white; font-size: 28px;" class="mdi mdi-close-circle-outline cursor-pointer" @click="dialog = false"></span>
      </div>
    </v-dialog>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'
defineOptions({name: 'curtain-point'})
defineProps({
  message: String, // 单条数据，也可以用list['']
  list: Array, // 多条数据一起展示传list['', '']
  persistent: Boolean, // false: 点击遮罩层关闭dialog
})

const dialog = ref(true)

</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 4px;
  height: 10px;
  // display: none;
}
::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
  // 滚动条-颜色
  background: #c3c3c379;
}
::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
  // 滚动条-底色
  background: #e5e5e58f;
}
</style>
