<template>
  <uv-tabs :list="list" @click="click"></uv-tabs>
  <view class="content">
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <uv-icon name="photo" size="30" color="#909399"></uv-icon>
    <button class="uv-reset-button">点击登录</button>
    <button>点击登录</button>
    <view>
      <uv-calendar ref="calendar" mode="single" @confirm="confirm"></uv-calendar>
      <button @click="open">打开</button>
    </view>
  </view>
  <uv-tabbar :value="value" @change="val => value = val">
    <uv-tabbar-item text="首页" icon="home" dot></uv-tabbar-item>
    <uv-tabbar-item text="放映厅" icon="photo" badge="3"></uv-tabbar-item>
    <uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
    <uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
  </uv-tabbar>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const title = ref('Hello UNI');
const value = ref(0);
const list = [
  { name: '关注' },
  { name: '推荐' },
  { name: '电影' },
  { name: '科技' },

];

const calendar = ref(null);

const click = (item) => {
  console.log('item', item);
};
const open = () => {
  if (calendar.value) calendar.value.open();
};
const confirm = (e) => {
  console.log('日历选择：', e);
};

onMounted(() => {
  if (uni && uni.$uv && uni.$uv.os) {
    console.log(uni.$uv.os());
  }
});
</script>

<style lang="scss" scoped>

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}
.text-area {
  display: flex;
  justify-content: center;
}
.title {
  font-size: 36rpx;
  color: $uni-color-primary;
}
.icon {
  width: 36rpx;
  height: 36rpx;
}
</style>