<template>
  <common-header />
  <div class="ysgc">
    <div class="ysgc-kind">
      <ul class="specail">
        <li class="kc" v-for="(item,index) in listFourData" :key="index" v-show="index<4">
          <!-- <router-link to="/ysgc_detail"> -->
          <img class="kc-back" :src="https+item.yz_img" alt="" />
          <!-- </router-link> -->
        </li>

      </ul>

      <div class="activityContent">
        <div class="activityItem" @click="changeActiveName('first')" :class="activeName == 'first' ? 'activityItem-active' : ''">
          学生优秀作业
        </div>
        <div @click="changeActiveName('second')" :class="activeName == 'second' ? 'activityItem-active' : ''" class="activityItem">
          教师优秀作品
        </div>
        <div @click="changeActiveName('third')" :class="activeName == 'third' ? 'activityItem-active' : ''" class="activityItem">
          专题艺术活动
        </div>
      </div>

      <div class="el-tabs__content">
        <div v-show="activeName == 'first'">
          <div class="nav">
            <div class="search-list">
              <div class="label">年级</div>
              <div class="valueDiv">
                <div class="item pointer" :class="activeGrade==item.grade_id?'active':''" @click="initGrade(item)" v-for="item in gradeData" :key="item.grade_id">{{item.grade_name}}</div>
              </div>
            </div>
            <div class="search-list">
              <div class="label">分册</div>
              <div class="valueDiv">
                <div class="item pointer" :class="activeFascicule==item.v?'active':''" @click="initFascicule(item)" v-for="item in fasciculeData" :key="item.v">{{item.n}}</div>
              </div>
            </div>
            <div class="search-list">
              <div class="label">分类</div>
              <div class="valueDiv">
                <div class="item pointer" :class="activeType==item.v?'active':''" @click="initType(item)" v-for="item in typeData" :key="item.v">{{item.n}}</div>
              </div>
            </div>
          </div>
          <div class="inp">
            <input v-model="keyword" type="text" placeholder="搜索关键字" />
            <span class="inp-sear" @click="getData"></span>
          </div>
          <ul class="stuWorks">
            <li class="s-works" v-for="(item, index) in listData" :key="index">
              <!-- <router-link to="/ysgc_detail"> -->
              <div class="img">
                <img @click="toDetail(item.yz_id)" class="tp" :src="https+item.yz_img" alt="" />
                <!-- 悬浮遮罩层 -->
                <div v-show="is_Sq == '1'" class="img_mask">
                  <img class="play" src="" alt="" />
                </div>
              </div>
              <div class="kc-des">
                <p class="kc-name">{{ item.yz_name }}</p>
                <div class="rate">
                  <img v-for="star in Number(item.yz_star_num)" :key="star" src="../../assets/ysgc/star.png" alt="" />
                </div>
              </div>
              <div class="zan">
                <img src="../../assets/ysgc/zan.png" />{{ item.yz_like_num }}
                <img src="../../assets/ysgc/xin.png" alt="" />{{
                  item.yz_fav_num
                }}
              </div>
              <!-- </router-link> -->
            </li>
          </ul>
        </div>
        <div v-show="activeName == 'second'">
          <div class="nav">
            <div class="search-list">
              <div class="label">年级</div>
              <div class="valueDiv">
                <div class="item pointer" :class="activeGrade==item.grade_id?'active':''" @click="initGrade(item)" v-for="item in gradeData" :key="item.grade_id">{{item.grade_name}}</div>
              </div>
            </div>
            <div class="search-list">
              <div class="label">分册</div>
              <div class="valueDiv">
                <div class="item pointer" :class="activeFascicule==item.v?'active':''" @click="initFascicule(item)" v-for="item in fasciculeData" :key="item.v">{{item.n}}</div>
              </div>
            </div>
          </div>
          <div class="inp">
            <input v-model="keyword" type="text" placeholder="搜索关键字" />
            <span class="inp-sear" @click="getJsData"></span>
          </div>
          <FallsFlow v-if="activeName == 'second'" :Plist="listJsData"></FallsFlow>

        </div>
        <div v-show="activeName == 'third'">
          <div class="nav" style="margin-left: 100px;">
            <div class="search-list">
              <div class="label">类型</div>
              <div class="valueDiv">
                <div class="item pointer" :class="activeZthdType==item.v?'active':''" @click="initZthdType(item)" v-for="item in typeZthdData" :key="item.v">{{item.n}}</div>
              </div>
            </div>

          </div>
          <div class="inp" style="margin-left: 100px;">
            <input v-model="keyword" type="text" placeholder="搜索关键字" />
            <span class="inp-sear" @click="getZthdData"></span>
          </div>
          <div class="hd-list">
            <ul class="hd-content">
              <li class="hd" v-for="(item,index) in zthdData" :key="index">
                <img @click="toSchool(item.yz_id)" class="hd-back" :src="https+item.yz_img" alt="" />
                <div class="hd-des">
                  <p>{{item.yz_name}}</p>
                </div>
              </li>

            </ul>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonHeader from "@/components/CommonHeader/index.vue";
import { ysgc_list, grade_list, zthd_list } from "./api";
import FallsFlow from "./FallsFlow.vue";
import top1 from "~/assets/stuWorks/top1.png";
import top2 from "~/assets/stuWorks/top2.png";
import top3 from "~/assets/stuWorks/top3.png";
import top4 from "~/assets/stuWorks/top4.png";
export default {
  components: {
    CommonHeader,
    FallsFlow,
  },

  data() {
    return {
      activeName: "first",
      https: window.GLOBAL_CONFIG.api,
      is_Sq: "0",

      listData: [],
      zthdData: [],
      keyword: "",
      grade_id: "",
      subject_id: "",
      team_id: "",
      yz_ext_type: "",
      firstForm: {
        grade: "",
      },
      gradeData: [],
      fasciculeData: [],
      typeData: [],
      typeZthdData: [],
      name: "index",
      listJsData: [],
      activeGrade: "",
      activeFascicule: "",
      activeType: "",
      activeZthdType: "",
      listFourData: [],
    };
  },
  methods: {

    changeActiveName(val) {
      this.activeName = val;
    },
    getFourData() {
      let data = {
        page: this.cur_page,

        yz_type: "1"
      };
      ysgc_list(data).then((res) => {
        this.listFourData = res.data.page_data;


      });
    },
    //作品
    getData() {
      let data = {
        page: this.cur_page,
        keyword: this.keyword,
        grade_id: this.activeGrade,
        subject_id: this.activeSubject,
        team_id: this.activeFascicule,
        yz_ext_type: this.activeType,
        yz_type: "1"
      };
      ysgc_list(data).then((res) => {
        this.listData = res.data.page_data;
      });
    },
    getJsData() {
      let data = {
        page: this.cur_page,
        limit: this.limit,
        keyword: this.keyword,
        grade_id: this.activeGrade,
        subject_id: this.activeSubject,
        team_id: this.activeFascicule,
        yz_ext_type: this.activeType,
        yz_type: "2"
      };

      ysgc_list(data).then((res) => {
        this.listJsData = res.data.page_data;
        console.log(this.listJsData, 1234);

      });
    },
    //年级
    initGradeData() {
      this.gradeData = [
        {
          grade_id: "",
          grade_name: "全部",
        }
      ];
      grade_list().then((res) => {
        if (res.code == 1) {
          this.gradeData = this.gradeData.concat(res.data.page_data);
        }
      });
    },
    initGrade(value) {
      this.activeGrade = value.grade_id;
      this.getData();
    },

    // 分册
    initFasciculeData() {
      this.fasciculeData = [
        {
          v: "",
          n: "全部"
        }
      ];
      ysgc_list().then((res) => {
        if (res.code == 1) {
          this.fasciculeData = this.fasciculeData.concat(res.data.table_structure.field.team_id.option);
        }
      });
    },
    initFascicule(value) {
      this.activeFascicule = value.v;
      this.getData();
    },
    // 分类
    initTypeData() {
      this.typeData = [
        {
          v: "",
          n: "全部"
        }
      ];
      ysgc_list().then((res) => {
        if (res.code == 1) {
          this.typeData = this.typeData.concat(res.data.table_structure.field.yz_ext_type.option);
        }
      });
    },
    initType(value) {
      this.activeType = value.v;
      this.getData();
    },
    // 类型
    initZthdTypeData() {
      this.typeZthdData = [
        {
          v: "",
          n: "全部"
        }
      ];
      zthd_list().then((res) => {
        if (res.code == 1) {
          this.typeZthdData = this.typeZthdData.concat(res.data.table_structure.field.yz_cate.option);
        }
      });
    },
    initZthdType(value) {
      this.activeZthdType = value.v;
      this.getZthdData();
    },
    //专题活动
    getZthdData() {
      let data = {
        page: this.cur_page,
        limit: this.limit,
        keyword: this.keyword,
        yz_cate: this.activeZthdType,
        yz_hdjb: this.yz_hdjb,
        yz_status: this.yz_status,

      };

      zthd_list(data).then((res) => {
        this.zthdData = res.data.page_data;
        console.log(this.zthdData);
        this.cur_page = Number(res.data.page_now);
        this.total = Number(res.data.total_rows);
      });
    },
    //学生作品详情
    toDetail(id) {
      this.$router.push({ name: "ysgc_stuDetail", params: { id: id } });
    },

    //专题活动学校
    toSchool(id) {
      this.$router.push({ name: "ysgc_schoolList", params: { id: id } });
    },






  },
  mounted() {
    this.getData();
    this.getJsData();
    this.initGradeData();
    this.initFasciculeData();
    this.initTypeData();
    this.initZthdTypeData();
    this.getZthdData();
    this.getFourData()
  },

};




</script>
<style lang="scss" scoped>
.hd-list {
  width: 1440px;
  min-width: 1280px;
  margin: 0 auto;

  .hd-content {
    width: 100%;
    display: flex;

    flex-wrap: wrap;
    .hd {
      width: 332px;
      height: 274px;
      border-radius: 12px 12px 0px 0px;
      box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
      position: relative;
      margin: 25px 13px;
      .hd-back {
        width: 332px;
        height: 195px;
        border-radius: 12px 12px 0px 0px;
      }
      .hd-des {
        width: 332px;
        height: 79px;
        padding: 11px;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #050026;
      }
    }
  }
}
.search-list {
  display: flex;
  align-items: baseline;
  font-size: 14px;
  margin: 20px 0;
  .label {
    color: #000;
    margin-right: 25px;
  }
  .valueDiv {
    flex: 1;
    display: flex;
    color: #949494;
    border-bottom: 1px dashed #e4e6e8;
    padding-bottom: 15px;
    font-weight: 400;
    cursor: pointer;
    .item + .item {
      margin-left: 20px;
    }
    .item {
      padding: 3px 5px;
      &.active {
        color: #00a3ff;
        border-radius: 6px;
        background: rgba($color: #00a3ff, $alpha: 0.1);
      }
    }
  }
}
.ysgc {
  width: 100%;
  min-width: 1280px;
  .ysgc-kind {
    width: 1650px;
    min-width: 1280px;
    margin: 0 auto;

    .specail {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin: 42px auto;
      .kc {
        margin-right: 25px;
        width: 347px;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
        position: relative;
        .kc-back {
          width: 100%;
        }
      }
      .zan {
        position: absolute;
        top: 0;
        right: 0;
        width: 173px;
        height: 34px;
        line-height: 34px;
        font-size: 14px;
        color: #fff;
        display: flex;
        padding-left: 20px;
        background: rgba(0, 0, 0, 0.59);
        border-radius: 0px 12px 0px 12px;
        img {
          display: inline-block;
          width: 17px;
          height: 16px;
          margin: 8px 5px 0 10px;
        }
      }
    }
  }
}

.el-tabs {
  width: 100%;
  .el-tabs__header {
    .el-tabs__nav {
      margin: 0 auto;
    }
  }
}
.el-tabs__content {
  color: #6b778c;
  font-size: 32px;

  .nav {
    .nav-list {
      display: flex;
      .kindName {
        display: inline-block;
        width: 50px;
        height: 100%;
        line-height: 64px;
        font-size: 16px;
        color: #000;
        font-weight: 600;
      }
    }
  }
  .stuWorks {
    display: flex;
    flex-wrap: wrap;
    .s-works {
      position: relative;
      width: 260px;
      height: 234px;
      margin-top: 30px;
      border-radius: 12px;
      margin-right: 15px;
      box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
      .img {
        .tp {
          width: 100%;
          height: 157px;
          border-radius: 12px;
          // border: 1px solid red;
        }
        .img_mask {
          position: absolute;
          top: 0;
          border-radius: 12px 12px 0 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.58) url("@/assets/img/zhjy/start.png")
            no-repeat center;
        }
      }
      .kc-des {
        padding: 11px 6px;
        box-sizing: border-box;
        .kc-name {
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #000000;
          line-height: 22px;
        }
        .rate {
          display: flex;
          margin: 11px 0;
          img {
            width: 15px;
            margin-right: 6px;
          }
        }
      }
      .zan {
        position: absolute;
        top: 0;
        right: 0;
        width: 173px;
        height: 34px;
        line-height: 34px;
        font-size: 14px;
        color: #fff;
        display: flex;
        padding-left: 20px;
        background: rgba(0, 0, 0, 0.59);
        border-radius: 0px 12px 0px 12px;
        img {
          display: inline-block;
          width: 17px;
          height: 16px;
          margin: 8px 5px 0 10px;
        }
      }
    }
  }
  .is-active {
    // width: 32px;
    // height: 21px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    // text-align: center;
    color: #00a3ff;
    // line-height: 21px;
    background: #e2f2ff;
  }
}
.inp {
  width: 497px;
  margin: 30px 0 17px 0px;
  height: 50px;
  line-height: 50px;
  position: relative;
  input {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #00a3ff;
    outline: none;
    width: 100%;
    height: 100%;
    padding-left: 17px;
    font-size: 16px;
  }
  .inp-sear {
    display: block;
    width: 26px;
    height: 26px;
    background: #00a3ff;
    border-radius: 6px;
    position: absolute;
    top: 18px;
    right: 15px;
    background-image: url("../../assets/ysgc/search.png");
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
  }
}
.activityContent {
  width: 790px;
  height: 80px;
  background: #ffffff;
  border: 1px solid #dbe7ec;
  border-radius: 10px;
  margin: auto;
  padding: 10px 8px;
  box-sizing: border-box;
  display: flex;
  .activityItem {
    width: 281px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: #fff;
    font-size: 30px;
    color: #666666;
    border-radius: 10px;
    cursor: pointer;
  }
  .activityItem-active {
    background: #e8f3fa;
    font-size: 30px;
    color: #000;
  }
}
</style>
