<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"
        style="background: rgb(112, 135, 228)"
        @click="goTo('/addRace?userid=' + userid + '&oid=' + oid)"
        >案例设计（必填）</el-button
      >
      <el-button
        type="primary"
        style="margin-left: 110px; background: rgb(91, 134, 210)"
        @click="goToX()"
        >平台实施（选填）</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/bg1667830734044.png",
      ],
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    goToX() {
      this.$message("暂未开放");
      return;
      window.parent.postMessage({ tools: "46" }, "*");
    },
  },
};
</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: 20px auto 10px;
}

.center_nav span {
  box-sizing: border-box;
  padding: 8px 5px;
  cursor: pointer;
  color: #767676;
  height: 42px;
  font-size: 18px;
}

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

.center_nav .active {
  color: #191919;
  border-bottom: 5px solid rgb(96 162 231);
}

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

.center_btn {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #fff;
  height: 58px;
  align-items: center;
  box-shadow: 0 -5px 5px 0px #eeeeee;
  z-index: 99;
  position: relative;
}
</style>