<template>
  <!-- 作业-网络直播 -->
  <div class="liveContent">
    <el-card>
      <div style="padding: 0 75px;">
        <span class="title">创建作业</span>
        <span class="subTitle">作业 - {{workTypeName}} - <span style="color: #000;">创建作业</span></span>
      </div>
    </el-card>

    <el-card class="contentCard">
      <div class="searchDiv">
        <div class="switch">
          <div class="switchDiv">
            <div class="list" :class="activeSwitch == index ? 'active' : ''" v-for="(item, index) in switchData" :key="item" @click="initSwitch(index)">{{ item }}</div>
          </div>
        </div>
        <div style="display: flex;align-items: center;">
          <el-button v-if="activeSwitch==0" type="primary" @click="handleCreate">创建作业</el-button>
          <div class="searchValue">
            <input type="text" placeholder="搜索关键字" v-model="searchKey">
            <div class="searchBtn" @click="initData">
              <img src="/kczy/searchIcon.png" alt="">
            </div>
          </div>
        </div>
      </div>

      <div style="min-height: 350px;">
        <create-work ref="createWork" :workType="workType" v-if="activeSwitch==0"></create-work>
        <student-work ref="studentWork" :workType="workType" v-if="activeSwitch==1 && workType==1"></student-work>
        <kczy-student-work ref="studentWork" :workType="workType" v-if="activeSwitch==1 && workType==2"></kczy-student-work>
      </div>
    </el-card>
  </div>
</template>

<script>
import CreateWork from "./components/CreateWork.vue";
import StudentWork from "./components/StudentWork.vue";
import KczyStudentWork from "./components/KczyStudentWork.vue";
export default {
  data() {
    return {
      workType: "",
      workTypeName: "",
      switchData: ["创建作业", "学生作业"],
      activeSwitch: 0,
      searchKey: "",
    }
  },
  components: { CreateWork, StudentWork, KczyStudentWork },
  methods: {
    initSwitch(index) {
      this.activeSwitch = index;
      this.searchKey = "";
    },
    initData() {
      if (this.activeSwitch == 0) {
        this.$refs.createWork.initData(this.searchKey);
      } else if (this.activeSwitch == 1) {
        this.$refs.studentWork.initData(this.searchKey);
      }
    },
    handleCreate() {
      this.$router.push({ name: "personal_homework_wlzb_work", params: { workType: this.workType } });
    }
  },
  created() {
    this.workType = this.$route.params.workType || "";
    if (this.workType == 1) {
      this.workTypeName = "网络直播";
    } else if (this.workType == 2) {
      this.workTypeName = "课程资源";
    }
  }
}
</script>

<style lang="scss" scoped>
.liveContent {
  .el-card {
    margin-bottom: 15px;
    background: #fff;
  }
  .contentCard::v-deep {
    .el-card__body {
      padding-bottom: 50px;
    }
  }
  .pointer {
    cursor: pointer;
  }
  .title {
    font-size: 18px;
    color: #050026;
  }
  .subTitle {
    font-size: 14px;
    color: #949494;
    margin-left: 45px;
  }
  .searchDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px 0 10px;
    .switch {
      display: inline-block;
      border: 1px solid #dbe7ec;
      padding: 3px;
      border-radius: 12px;
      .switchDiv {
        display: flex;
        .list {
          cursor: pointer;
          color: #666;
          line-height: 30px;
          padding: 0 10px;
          &.active {
            background: #e8f3fa;
            color: #000;
            border-radius: 12px;
          }
        }
      }
    }
    .el-button {
      width: 100px;
      height: 40px;
      margin-right: 40px;
    }
    .searchValue {
      width: 350px;
      height: 50px;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      input {
        width: 100%;
        height: 100%;
        outline: 0;
        box-sizing: border-box;
        padding-left: 10px;
        background: #f6f8fa;
      }
      .searchBtn {
        width: 26px;
        height: 26px;
        background: #00a3ff;
        border-radius: 6px;
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        img {
          display: block;
          text-align: center;
          margin: 6px auto 0;
        }
      }
    }
  }
}
</style>