<template>
  <div style="height: 100%; width: 100%">
    <div class="center_head">
      <el-carousel
        trigger="click"
        style="width: 100%; height: 100%"
        arrow="never"
      >
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <img class="imgS" :src="item" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="center_nav">
      <span @click="steps = 1" :class="{ active: steps == 1 }">赛事信息</span>
      <span @click="steps = 2" :class="{ active: steps == 2 }">我的案例</span>
      <span @click="steps = 3" :class="{ active: steps == 3 }">项目进度</span>
    </div>
    <div class="center_body">
      <EventMessage v-if="steps == 1"></EventMessage>
      <MyAnli :userid="userid" :oid="oid" v-if="steps == 2"></MyAnli>
      <ProjectJd v-if="steps == 3"></ProjectJd>
    </div>
    <div class="center_btn">
      <el-button
        type="primary"
        @click="goTo('/addRace?userid=' + userid + '&oid=' + oid)"
        >案例设计</el-button
      >
    </div>
  </div>
</template>

<script>
import EventMessage from "./eventCenter/eventMessage.vue";
import MyAnli from "./eventCenter/myAnli.vue";
import ProjectJd from "./eventCenter/projectJd.vue";
export default {
  components: {
    EventMessage,
    MyAnli,
    ProjectJd,
  },
  data() {
    return {
      steps: 1,
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      bannerList: [
        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202209141615451663143406745.png",
      ],
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style scoped>
.center_head {
  height: 240px;
  width: 100%;
}

.center_head >>> .el-carousel__container {
  height: 100%;
}
.center_head >>> .el-carousel__indicator--horizontal {
  display: none;
}

.center_head .imgS {
  width: 100%;
  height: 100%;
  cursor: pointer;
  object-fit: cover;
}

.center_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 10px 0;
}

.center_nav span {
  box-sizing: border-box;
  padding: 8px 5px;
  cursor: pointer;
  color: #444444;
  height: 35px;
}

.center_nav span + span {
  margin-left: 10px;
}

.center_nav .active {
  color: #001fff;
  border-bottom: 2px solid #001fff;
}

.center_body {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 0 auto;
  height: calc(100% - 360px);
}

.center_btn {
  width: 90%;
  margin: 10px auto 0;
  display: flex;
  justify-content: center;
}
</style>