<template>
  <view>
    <view class="bg-#f5f4f8 flex items-center mx-2.5 my-4 p-4 rounded-xl shadow-sm">
      <view>
        <view>3天滚动储存</view>
        <view class="text-#999999 mt-2 text-sm">
          {{ appName }}已为本设备免费提供3天滚动视频储存服务
        </view>
      </view>
      <view class="flex-none whitespace-nowrap mx-1.5">去升级</view>
      <up-icon name="arrow-right" />
    </view>
    <view class="mx-2.5 pb-10">
      <view class="flex items-center justify-between">
        <view>全部视频</view>
        <image
          src="https://oss-lock.xhjcn.ltd/mp/icon_edit.png"
          @click="handleEdit"
          class="w-48 h-48"
        />
      </view>
      <VideoList ref="videoListRef" />
    </view>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import env from '@/config/env'
  import VideoList from './VideoList.vue'
  import { useBasicStore } from '@/stores/basic'

  const $basic = useBasicStore()

  const appName = ref('')
  const videoListRef = ref(null)
  onMounted(async () => {
    appName.value = await env[await getApp().globalData.getEnvConfig()].appName
  })

  const handleEdit = () => {
    $basic.routeJump({
      name: 'videoEdit',
      events: {
        refresh: () => {
          videoListRef.value.refresh()
        }
      }
    })
  }
</script>
