<template>
  <div class="box">
    <div style="position: absolute; top: 0; left: 50%">
      <webReleaseActive
        v-model:dialogVisible="dialogVisible"
      ></webReleaseActive>
    </div>
    <div class="wrap">
      <div class="tit">
        <div class="left">科技活动</div>
        <div class="right">
          <!-- @click="dialogVisible = true" -->
          <!-- <div class="publish">发布活动</div> -->
          <div class="more" @click="handlePage">更多</div>
        </div>
      </div>
      <div class="content">
        <div
          class="item"
          :class="index == 0 ? 'one' : ''"
          v-for="(item, index) in state.list.slice(0, 1)"
          :key="item.id"
          @click="handleDetail(item.id)"
        >
          <img :src="item.image" style="width: 100%" />
          <div class="des">
            <div class="left">
              <div>{{ item.title }}</div>
              <div class="time">
                活动时间：{{ parseTime(item.begin_at) }} -
                {{ parseTime(item.finish_at) }}
              </div>
              <div>{{ item.join_count }}人已观看</div>
            </div>
            <div class="right">{{ item.amount }}元报名</div>
          </div>
        </div>
        <div
          class="item"
          v-for="item in state.list.slice(1)"
          :key="item.id"
          @click="handleDetail(item.id)"
        >
          <div class="img">
            <img :src="item.image" />
          </div>
          <div class="dess">
            <div class="txt">
              {{ item.title }}
            </div>
            <div class="dess1">
              <div class="time">
                活动时间：{{ parseTime(item.begin_at) }}
                <!-- - {{ parseTime(item.finish_at) }} -->
              </div>
              <div>{{ item.join_count }}人已观看</div>
            </div>
            <div class="enroll">{{ item.amount }}元报名</div>
          </div>
        </div>
        <!-- <div class="item">
          <div class="img">
            <img
              src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF"
            />
          </div>
          <div class="dess">
            <div class="txt">
              助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效
            </div>
            <div class="dess1">
              <div class="time">活动时间：2021-11-01 08:00</div>
              <div>1988人已观看</div>
            </div>
            <div class="enroll">19.9元报名</div>
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img
              src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF"
            />
          </div>
          <div class="dess">
            <div class="txt">
              助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效
            </div>
            <div class="dess1">
              <div class="time">活动时间：2021-11-01 08:00</div>
              <div>1988人已观看</div>
            </div>
            <div class="enroll">19.9元报名</div>
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img
              src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF"
            />
          </div>
          <div class="dess">
            <div class="txt">
              助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效
            </div>
            <div class="dess1">
              <div class="time">活动时间：2021-11-01 08:00</div>
              <div>1988人已观看</div>
            </div>
            <div class="enroll end">已结束</div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { defineComponent, onMounted, reactive } from "vue";
import webReleaseActive from "@/components/webReleaseActive/index.vue";
function activity() {
  return request({
    url: "/v1/activity",
    method: "post",
    data: {
      status: 2,
      page_num: 1,
      page_size: 5,
    },
  });
}
const router = useRouter();
const dialogVisible = ref(false);
const state = reactive({
  list: [],
  total: 0,
});

function getList() {
  activity().then((res) => {
    if (200 == res.code) {
      state.total = res.data.count;
      state.list = res.data.data;
    }
  });
}
function handleDetail(id) {
  let routeData = router.resolve({ path: `/activity/detail/${id}` });
  window.open(routeData.href, "_blank");
}
function handlePage() {
  router.push("/activity");
}
getList();
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  div.wrap {
    width: 1400px;
  }
}

.tit {
  overflow: hidden;
  padding: 20px 0;
  .left {
    float: left;
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #333333;
  }
  .right {
    float: right;
    font-size: 20px;
    font-family: Source Han Sans CN;
    .publish {
      display: inline-block;
      font-weight: 500;
      color: #0054ff;
      margin-right: 20px;
      cursor: pointer;
      user-select: none;
    }
    .more {
      display: inline-block;
      font-weight: 400;
      color: #333333;
      cursor: pointer;
      user-select: none;
    }
  }
}
.content {
  width: 101%;
  overflow: hidden;
  .time {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 0;
    background: #0054ff;
    border-radius: 10px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
  .item {
    position: relative;
    float: left;
    width: 24%;
    margin: 0 1% 1% 0;
    .dess {
      overflow: hidden;
      .txt {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .dess1 {
        float: left;
      }
      .enroll {
        margin-top: 10px;
        float: right;
        width: 90px;
        height: 30px;
        line-height: 30px;
        background: #0054ff;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        &.end {
          background: #b4b4b4;
        }
      }
    }
    img {
      top: 0;
      left: 0;
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .img {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 54%;
    }
    &.one {
      width: 49%;
      height: 0;
      padding-bottom: 36.75%;
      overflow: hidden;
      .des {
        position: absolute;
        height: 94px;
        width: 100%;
        bottom: 0;
        background: rgba(0, 0, 0, 0.2);
        overflow: hidden;
        .left {
          float: left;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          margin: 16px 0 0 18px;
        }
        .right {
          margin: 27px 38px;
          float: right;
          width: 120px;
          height: 40px;
          line-height: 40px;
          background: #0054ff;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
        }
      }
    }
  }
}
</style>