<template>
  <PageWrapper>
    <!-- 搜索框 -->
    <el-card shadow="hover" :bordered="false" class="custom-box-card">
      <h2 class="text-lg">搜索列表（视频）</h2>
      <div class="mt-4 text-center">
        <el-input
          :style="{ width: '320px' }"
          v-model="keywords"
          placeholder="请输入关键字"
          :prefix-icon="Search"
        />
      </div>
    </el-card>

    <!-- 视频部分 start -->
    <div class="mt-3 tab2">
      <el-card shadow="hover" class="custom-box-card">
        <!-- 分类 -->
        <div class="p-5">
          <el-skeleton :rows="1" :loading="loading" style="width: 100%">
            <template #default>
              <div class="flex items-start classification justify-between mt-2.5">
                <div class="flex-none label">分类: </div>
                <div class="flex-grow">
                  <el-space wrap size="small" :class="!isCollapse ? 'height-limited' : ''">
                    <el-tag
                      size="large"
                      v-for="(item, index) in categoryListData"
                      :key="index"
                      @click="selectedHandle(index)"
                      :class="categoryIndex != index ? 'noSelected' : ''"
                      >{{ item.name }}</el-tag
                    >
                  </el-space>
                </div>
                <div
                  class="flex items-center justify-end flex-none cursor-pointer collapse-btn"
                  :style="`color:var(--el-color-primary-light-1)`"
                  @click="collapseHandle"
                  >{{ isCollapse ? '收起' : '展开' }}
                  <el-icon
                    ><arrow-up-bold class="ml-1" v-if="isCollapse" /><arrow-down-bold
                      class="ml-1"
                      v-else /></el-icon
                ></div>
              </div>
            </template>
          </el-skeleton>

          <div class="flex items-start items-center justify-between mt-4 classification">
            <div class="flex-none label">排序:</div>
            <div class="flex-grow">
              <el-radio-group v-model="radio">
                <el-radio :label="1">最新</el-radio>
                <el-radio :label="2">最热</el-radio>
                <el-radio :label="3">评分最高</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 视频 -->
      <el-row :gutter="12" class="list">
        <el-col
          :xs="12"
          :sm="8"
          :md="8"
          :lg="6"
          :xl="4"
          v-for="item in videoListData"
          :key="item.id"
        >
          <el-card shadow="hover" class="custom-box-card">
            <el-image :src="item.cover" class="cover" />
            <div class="p-3">
              <div>
                <h3 class="text-base font-bold truncate">{{ item.title }}</h3>
                <p class="my-1 text-gray-500 roy-line-2">简介：{{ item.summary }}</p>
              </div>
              <div class="flex items-center justify-between text-gray-400">
                <div>
                  <el-icon class="mr-1 align-middle"><video-play /></el-icon>
                  <span class="text-xs">{{ item.viewingtimes }}万</span></div
                >
                <div class="flex items-center justify-center">
                  <div v-for="(avatar, i) in item.avatargroup" :key="i">
                    <el-avatar :size="20" :src="avatar.src" />
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 加载更多 -->
      <el-card shadow="hover" class="mt-3 text-center custom-box-card">
        <el-button :loading="loadingMore" @click="loadMore">加载更多</el-button>
      </el-card>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Search, ArrowUpBold, ArrowDownBold, VideoPlay } from '@element-plus/icons-vue';
  import { categoryList } from '@/api/comtemp/category';
  import { videoList } from '@/api/comtemp/video';

  const keywords = ref('');
  const loading = ref(true);
  const categoryIndex = ref(-1);
  const isCollapse = ref(false);
  const categoryListData = ref();
  const videoListData = ref();
  const pageSize = ref(12);
  const loadingMore = ref(false);
  const radio = ref(1);

  //获取分类列表
  async function getCategoryList() {
    const res = await categoryList();
    categoryListData.value = res && res.list ? res.list : [];
    loading.value = false;
  }

  //分类选中
  function selectedHandle(index) {
    categoryIndex.value = index;
    console.log(categoryIndex.value);
  }

  //是否展开
  function collapseHandle() {
    isCollapse.value = !isCollapse.value;
  }

  //获取视频列表
  async function getVideoList() {
    const res = await videoList({ pageSize: pageSize.value });
    videoListData.value = res && res.list ? res.list : [];
    loadingMore.value = false;
  }

  //加载更多
  function loadMore() {
    loadingMore.value = true;
    pageSize.value = pageSize.value + 12;
    getVideoList();
  }

  onMounted(() => {
    //获取分类
    getCategoryList();
    //获取文章
    getVideoList();
  });
</script>

<style lang="scss" scoped>
  // 处理栅格
  .el-row {
    padding-top: 6px;
    margin: -6px;
    .el-row {
      padding-top: 0;
    }
  }
  .el-col {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  // 卡片定制
  .custom-box-card {
    border: none;
  }

  //分类
  .classification {
    .label,
    .collapse-btn {
      height: 32px;
      font-size: 14px;
      line-height: 30px;
    }
    .label {
      width: 60px;
    }
    .collapse-btn {
      width: 60px;
    }
    .height-limited {
      height: 40px;
      overflow: hidden;
    }
    .el-tag {
      cursor: pointer;
    }
    .el-tag.noSelected {
      background-color: transparent;
      border-color: transparent;
      color: var(--el-color-info-lighter);
    }
  }

  //视频
  .tab2 {
    .list {
      margin-top: 0;
      :deep(.el-card .el-card__body) {
        padding: 0;
        p {
          height: 42px;
        }
      }
      .card:hover {
        box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px;
      }
    }
  }
</style>
