<template>
  <div style="min-height:850px;background-color: #f6f7f9;">
    <div class='projectWrap'
         v-if="activeRow">
      <div class="projectList width1200">
        <div class="left">
          <el-collapse @change='changeType'
                       class="projectInfoWrap"
                       v-model="activeList"
                       accordion>
            <el-collapse-item name="app">
              <template slot="title">
                <p class="title">酷乐秀考生APP </p>
              </template>
              <p v-for="(item,index) in vaidoJson.app"
                 :key="index"
                 :class="activeRow.id===item.id?'active':''"
                 @click='activeRow = item'>{{item.title}} </p>

            </el-collapse-item>
            <el-collapse-item name="admin">
              <template slot="title">
                <p class="title">酷乐秀管理端 </p>
              </template>
              <p v-for="(item,index) in vaidoJson.admin"
                 :key="index"
                 :class="activeRow.id===item.id?'active':''"
                 @click='activeRow = item'>{{item.title}} </p>
            </el-collapse-item>
            <!-- <section>
              <p class="title">酷乐秀管理端 <i class="el-icon-arrow-right"></i></p>

              <div v-if="activeList == 'admin'">
                <p v-for="(item,index) in vaidoJson.admin"
                   :key="index"
                   :class="activeRow.id===item.id?'active':''"
                   @click='activeRow = item'>{{item.title}}</p>
              </div>

            </section> -->
            <el-collapse-item name="teacher">
              <template slot="title">
                <p class="title">酷乐秀评委端 </p>
              </template>
              <p v-for="(item,index) in vaidoJson.teacher"
                 :key="index"
                 :class="activeRow.id===item.id?'active':''"
                 @click='activeRow = item'>{{item.title}} </p>
            </el-collapse-item>
            <!-- <section>
              <p class="title"
                 @click="activeList = 'teacher'">酷乐秀评委端 <i class="el-icon-arrow-right"></i></p>
              <div v-if="activeList == 'teacher'">
                <p v-for="(item,index) in vaidoJson.teacher"
                   :key="index"
                   :class="activeRow.id===item.id?'active':''"
                   @click='activeRow = item'>{{item.title}}</p>
              </div>
            </section> -->

          </el-collapse>
        </div>
        <div class="right">
          <h2>{{activeRow.title}}</h2>
          <div class="videoWrap"
               v-if="activeRow.width <= 352">
            <div class="textWrap">{{activeRow.text}}</div>
            <plyr :width='activeRow.width'
                  :height="activeRow.height"
                  :src="activeRow.src" />
          </div>
          <div v-else
               class="videoWrap1">
            <p>{{activeRow.text}}</p>
            <plyr :width='activeRow.width'
                  :height="activeRow.height"
                  :src="activeRow.src" />
            <!-- <video playsinline
                   controls
                   :src="activeRow.src"
                   :width="activeRow.width"
                   :height="activeRow.height"
                   autoplay
                   loop></video> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { vaidoJson } from '../../project/video'
import plyr from '@/components/video'
import { scrollAnimation } from '@/util/scroll'
export default {
  components: {
    plyr
  },
  data () {
    return {
      activeNum: 1,
      vaidoJson,
      activeRow: null,
      activeList: 'app'
    }
  },
  mounted () {
    this.activeRow = vaidoJson.app[0]
  },
  methods: {
    changeType (val) {
      const currentY = document.documentElement.scrollTop || document.body.scrollTop;
      let top = (document.getElementById('videoList').offsetTop - 76) + (document.getElementById('videoList').scrollTop())
      scrollAnimation(currentY, top)
    }
  },
}
</script>
<style lang="less" scoped>
/deep/.el-collapse-item__wrap {
  border-bottom: none !important;
}
.videoList {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60px;
  h2 {
    width: 820px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #788393;
    line-height: 29px;
  }

  .infoItem {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 704px;
    h3 {
      text-align: center;
      width: 100%;
    }
  }
}
.serversList {
  .serverItem {
    margin-top: 30px;
    h3 {
      margin-bottom: 30px;
      height: 40px;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 40px;
    }
  }
}
// 新版本
.projectWrap {
  background-color: #f6f7f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 790px;
  section {
    border-top: 1px solid #e9e9e9;
    &:nth-child(1) {
      border-top: none;
    }
  }
}
.projectList {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin: 80px 0 60px;
  .left {
    background-color: #fff;
    margin-right: 20px;
    width: 220px;

    border-top: none;
    .title {
      height: 70px;
      line-height: 70px;
      // border-top: 1px solid #e9e9e9;
      border-bottom: none;
      cursor: pointer;
      font-size: 20px;
      font-weight: 500;
      text-align: left;
      padding: 0 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-weight: 600;
      color: #1a1a1a;
      &:nth-child(1) {
        border-top: none;
      }
      .el-icon-arrow-right {
        line-height: 70px;
      }
    }
    .active {
      background-color: #2dc7aa;
      color: #fff;
      font-size: 16px;
    }
    p {
      height: 60px;
      line-height: 60px;
      cursor: pointer;
      padding-left: 30px;
      text-align: left;
      font-size: 16px;
    }
  }
  .right {
    background-color: #fff;
    width: 800px;
    padding: 0 30px 30px;
    h2 {
      color: #1a1a1a;
      margin-bottom: 50px;
      line-height: 70px;
      text-align: left;
      font-size: 20px;
      border-bottom: 1px solid #e9e9e9;
    }
    .videoWrap {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-items: flex-start;
      .textWrap {
        width: 315px;
        margin-right: 73px;
        min-height: 450px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #808080;
        line-height: 25px;
        text-align: left;
      }
    }
    .videoWrap1 {
      p {
        margin-bottom: 30px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #808080;
        line-height: 25px;
        text-align: left;
      }
    }
  }
  /deep/.el-collapse {
    border-top: none !important;
  }
  /deep/.el-collapse-item__header {
    height: 70px !important;
    line-height: 70px !important;
  }
  /deep/.el-collapse-item__content {
    padding-bottom: 0 !important;
  }
}
</style>