<template>
  <view class="video-page">
    <!-- 日期选择栏 -->
    <view class="date-tabs">
      <view
          v-for="(item, index) in dateList"
          :key="index"
          class="date-tab"
          :class="{ active: item.active }"
          @click="handleDateClick(item)"
      >
        <text class="week">{{ item.week }}</text>
        <text class="day">{{ item.day }}</text>
      </view>
    </view>

    <!-- 日期标题 + 分类筛选（靠右） -->
    <view class="filter-bar">
      <text class="date-title">
        <uni-dateformat :date="Date.now()" format="MM-dd" />
      </text>
      <view class="category-tabs">
        <view
            v-for="(item, index) in categoryList"
            :key="index"
            class="category-item"
            :class="{ active: activeCategory === item.type,
             'filter-btn': item.type === 'filter' }"
            @click="handleCategoryClick(item.type)"
        >
          <image class="icon" :src="item.imgUrl" mode="aspectFill"/>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 视频列表（带时间轴） -->
    <scroll-view scroll-y class="video-list" v-if="videoList.length>0">
      <view
          v-for="(item, index) in videoList"
          :key="index"
          class="video-item"
      >
        <!-- 时间轴（uni-icons实现） -->
        <view class="time-axis">
          <uni-icons type="circle" size="14" color="#1677ff"></uni-icons>
          <view class="axis-line" v-if="index !== videoList.length"></view>
        </view>

        <!-- 时间 + 卡片 垂直排列 -->
        <view class="time-card-wrap">
          <!-- 时间 + 未读红点（在卡片正上方） -->
          <view class="time-info">
            <text class="time-text">{{ item.time }}</text>
            <view class="unread-dot" v-if="item.unread"></view>
          </view>

          <!-- 视频卡片 -->
          <view class="video-card" @click="gotoDetail(item)">
            <view class="video-info">
              <text class="device-name">{{ item.device }}</text>
              <text class="event-type">{{ item.event }}</text>
            </view>
            <image class="video-cover" :src="item.cover" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="empty__item tn-margin-top" v-else>
      <tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png"
                text="暂无视频" :imgWidth="200"
                :imgHeight="200"></tn-empty>
    </view>
  </view>
</template>

<script>
import {parseTime} from "@/utils/agri";

export default {
  data() {
    return {
      dateList: this.getDateList(),
      activeCategory: 'person',
      categoryList: [
        {type: 'person', name: '人', imgUrl: "https://picsum.photos/id/1015/400/200"},
        {type: 'car', name: '车', imgUrl: "https://picsum.photos/id/1015/400/200"},
        {type: 'animal', name: '动物', imgUrl: "https://picsum.photos/id/1015/400/200"},
        {type: 'filter', name: '筛选', imgUrl: "https://picsum.photos/id/1015/400/200"}
      ],
      videoList: [
        {
          time: '13:22:04',
          device: 'DS-2DE4423DW-D/GLT/...',
          event: '画面变化',
          cover: 'https://picsum.photos/id/1015/400/200',
          unread: true
        },
        {
          time: '13:20:20',
          device: 'DS-2DE4423DW-D/G我饿全额钱31313122LT/...',
          event: '画面变化',
          cover: 'https://picsum.photos/id/1015/400/200',
          unread: true
        },
        {
          time: '13:19:12',
          device: 'DS-2DE4423DW-D/GLT/...',
          event: '画面变化',
          cover: 'https://picsum.photos/id/1015/400/200',
          unread: true
        },
        {
          time: '13:18:11',
          device: 'DS-2DE4423DW-D/GLT/...',
          event: '画面变化',
          cover: 'https://picsum.photos/id/1015/400/200',
          unread: true
        }
      ]
    }
  },
  methods: {
    parseTime,
    handleDateClick(item) {
      this.dateList = this.dateList.map(d => ({...d, active: d === item}))
      uni.showToast({title: `切换到${item.day} ${item.week}`})
      // todo 切换日期后，更新视频列表
      // this.videoList = this.getDateList1();
    },
    handleCategoryClick(type) {
      if (type === 'filter') {
        this.handleFilterClick();
        return;
      }
      // todo 切换分类后，更新视频列表
      this.activeCategory = type;
      uni.showToast({title: `切换到${type === 'person' ? '人' : type === 'car' ? '车' : '动物'}分类`})
    },
    handleFilterClick() {
      // todo 打开筛选面板
      uni.showToast({title: '打开筛选面板'})
    },
    getDateList() {
      const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
      const today = new Date();
      const list = [];
      for (let i = 6; i >= 0; i--) {
        const date = new Date(today);
        date.setDate(today.getDate() - i);

        list.push({
          week: weekMap[date.getDay()],
          day: i === 0 ? '今' : date.getDate() + '',
          active: i === 0
        });
      }
      return list;
    },

    getDateList1() {
      const w = ['日', '一', '二', '三', '四', '五', '六'];
      const t = new Date();
      return Array.from({length: 7}, (_, i) => {
        const d = new Date(t);
        d.setDate(t.getDate() - 6 + i);
        return {week: w[d.getDay()], day: i === 6 ? '今' : d.getDate() + '', active: i === 6}
      })
    },
    gotoDetail(item) {
      // 更新已读
      this.$modal.msg("暂未开放！");
      return;
    }
  }
}
</script>

<style scoped>
/* 页面容器 */
.video-page {
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

/* 日期选择栏 */
.date-tabs {
  display: flex;
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.date-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
  background: #f7f8fd;
  margin: 0 10rpx;
  //border: 1rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 16rpx 0;
}
.date-tab.active {
  background-color: #1677ff;
  color: #fff;
  border-color: #1677ff;
}
.week {
  font-size: 25rpx;
  margin-bottom: 8rpx;
  color: #bdbdbd;
}
.day {
  font-size: 28rpx;
  font-weight: 500;
}

/* 筛选栏 */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
}
.date-title {
  font-size: 36rpx;
  font-weight: 400;
  color: #333;
}
.category-tabs {
  display: flex;
  align-items: center;
}
.category-item {
  display: flex;
  align-items: center;
  padding: 8rpx 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 20rpx;
  margin-left: 15rpx;
  font-size: 26rpx;
  color: #666;
}
.category-item.active {
  background-color: #fff7f0;
  border-color: #ff7d00;
  color: #ff7d00;
}
.category-item:nth-child(2).active {
  background-color: #f0f8ff;
  border-color: #00a8ff;
  color: #00a8ff;
}
.category-item:nth-child(3).active {
  background-color: #f0f5ff;
  border-color: #4080ff;
  color: #4080ff;
}
.filter-btn {
  border: none;
  background: transparent;
}
.icon {
  margin-right: 6rpx;
  width: 16rpx;
  height: 22rpx;
}

/* 视频列表 */
.video-list {
  flex: 1;
  padding: 0 30rpx;
}
.video-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30rpx;
}

/* 时间轴 */
.time-axis {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 14rpx;
  padding-top: 20rpx;
}
.axis-line {
  width: 1rpx;
  height: 170rpx; /* 适配时间+卡片高度 */
  background-color: #e0e0e0;
  margin-top: 8rpx;
}

/* 时间+卡片 垂直包裹 */
.time-card-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 时间信息（在卡片正上方） */
.time-info {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}
.time-text {
  font-size: 30rpx;
  color: #333;
  margin-top: 20rpx;
}
.unread-dot {
  width: 12rpx;
  height: 12rpx;
  background-color: #ff3b30;
  border-radius: 50%;
  margin-left: 10rpx;
}

/* 视频卡片 */
.video-card {
  display: flex;
  background-color: #f7f8fd;
  border-radius: 12rpx;
  padding: 20rpx;
}
.video-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 0;
}
.device-name {
  font-size: 28rpx;
  color: #8f8f8f;
  margin-bottom: 10rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10rpx;
}
.event-type {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
.video-cover {
  width: 320rpx;
  height: 180rpx;
  border-radius: 8rpx;
}
</style>