<template>
  <!-- 双师一生 -->
  <div class="ssysContent" v-loading="loading">
    <el-card>
      <div style="padding: 0 75px;">
        <span class="title">双师一生</span>
        <span class="subTitle">我的课程 - 我创建的 - <span style="color: #000;">双师一生</span></span>
      </div>
    </el-card>

    <el-card style="padding-bottom: 50px;">
      <div class="searchDiv">
        <div class="menuDiv">
          <div class="list pointer" :class="activeName==item.status?'active':''" v-for="item in tabData" :key="item" @click="handleClick(item.status)">{{item.name}}</div>
        </div>
        <div style="display: flex;align-items: center;">
          <el-button 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 class="line"></div>
      <div class="contentDiv">
        <div class="searchBtn">
          <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>
        <el-empty v-if="resultData.length==0" image-size="100" description="无数据" style="padding: 10px 0;" />
        <div class="resultDiv">
          <el-row :gutter="20">
            <el-col :span="12" v-for="item in resultData" :key="item.name" @click="lookDetail(item)">
              <el-card class="resultCard" :class="activeName!=1?'pointer':''">
                <div style="display: flex;">
                  <img class="leftImg" :src="getFullUrl(item.ks_img)" alt="" />
                  <div style="flex: 1;padding: 8px 10px;position: relative;font-size: 14px">
                    <div class="production">
                      <div style="display: flex;justify-content: space-between;">
                        <div style="font-size: 16px;color: #050026;">{{item.ks_name}}</div>
                        <div v-if="activeName==1" style="font-size: 18px;">
                          <el-icon class="pointer" @click.stop="handleEdit(item.ks_id)">
                            <EditPen />
                          </el-icon>
                          <el-icon class="pointer" @click.stop="handleDelete(item.ks_id)" style="margin-left: 20px;">
                            <Delete />
                          </el-icon>
                        </div>
                        <div style="display: flex;align-items: center;" v-if="activeName==3">
                          <el-icon>
                            <View />
                          </el-icon>
                          <span style="color: #666;font-size: 12px;margin-left: 5px;">{{item.bfl || 0}}</span>
                        </div>
                      </div>
                      <div style="color: #949494;">{{item.ks_brief}}</div>
                      <div style="color: #000;">{{item.grade_name}} <span v-if="item.grade_name && item.subject_name">|</span> {{item.subject_name}}</div>
                    </div>
                    <div class="user">
                      <div style="display: flex;">
                        <el-avatar style="width: 24px;height: 24px;" :size="16" :src="getAvatarUrl(item.user_id)" />
                        <span style="margin-left: 8px;color: #050026;">{{ item.ks_zjjsxm }}</span>
                      </div>
                      <div style="display: flex;align-items: center;">
                        <el-icon size="16" :color="item.color" style="margin-right: 10px;">
                          <Histogram />
                        </el-icon>
                        <span :style="{color: item.color}">{{item.statusName}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="paginationDiv">
        <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :page-size="pageSize" :currentPage="currentPage"></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { Delete, EditPen, Histogram, View } from '@element-plus/icons-vue';
import img_lczs1 from '/zbktssys/1.png';
import img_lczs2 from '/zbktssys/2.png';
import img_lczs3 from '/zbktssys/3.png';
import img_tx from '/zbktssys/tx.png';

import { grade_list, ssyskc_list, ssyskc_delete } from "./api";
import { ElMessage, ElMessageBox } from 'element-plus'
import { getFullUrl, getAvatarUrl } from '@/utils/helper';
export default {
  data() {
    return {
      loading: false,
      activeName: "1",
      tabData: [
        {
          name: "待开始",
          status: "1",
          color: "#00A3FF"
        },
        {
          name: "进行中",
          status: "2",
          color: "#f35421"
        },
        {
          name: "已结束",
          status: "3",
          color: "#666"
        }
      ],
      searchKey: "",
      gradeData: ["幼儿园", "一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三", "其他"],
      fasciculeData: ["上册", "下册"],
      activeGrade: "",
      activeFascicule: "",
      wholeData: [],
      resultData: [
        // { id: 1, img: img_lczs1, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '1' },
        // { id: 2, img: img_lczs2, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' },
        // { id: 3, img: img_lczs3, title: '走进生肖文化——寅虎卯兔', bfl: 100, desc: '领略生肖传奇，品味传统文化！', nj: '四年级', xk: '美术', ls: '尚老师', tx: img_tx, zt: '' }
      ],
      pageSize: 10,
      currentPage: 1,
      total: 0,
    }
  },
  components: { Delete, EditPen, Histogram, View, ElMessageBox },
  methods: {
    handleClick(index) {
      this.activeName = index;

      this.initData();
    },
    //年级
    initGradeData() {
      this.gradeData = [
        {
          grade_id: "",
          grade_name: "全部",
        }
      ];
      grade_list({ limit: 50 }).then((res) => {
        if (res.code == 1) {
          this.gradeData = this.gradeData.concat(res.data.page_data);
        }
      });
    },
    // 分册
    initFasciculeData() {
      this.fasciculeData = [
        {
          v: "",
          n: "全部"
        }
      ];
      ssyskc_list().then((res) => {
        if (res.code == 1) {
          this.fasciculeData = this.fasciculeData.concat(res.data.table_structure.field.team_id.option);
        }
      });
    },
    initGrade(value) {
      this.activeGrade = value.grade_id;

      this.initData();
    },
    initFascicule(value) {
      this.activeFascicule = value.v;

      this.initData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initData();
    },
    initData() {
      let data = {
        keyword: this.searchKey,
        grade_id: this.activeGrade,
        team_id: this.activeFascicule,
        ks_status: this.activeName,
        page: this.currentPage,
        limit: this.pageSize
      };

      this.loading = true;
      ssyskc_list(data).then((res) => {
        if (res.code == 1) {
          this.resultData = res.data.page_data;
          this.resultData.map((item) => {
            this.tabData.map((value) => {
              if (item.ks_status == value.status) {
                item.statusName = value.name;
                item.color = value.color;
              }
            })
          })
          this.total = Number(res.data.total_rows);
          this.loading = false;
        }
      });
    },
    lookDetail(data) {
      if (this.activeName == 2) {
        this.$router.push({ path: `/zbkt/ssys/rtc/${data.ks_id}` });
      } else if (this.activeName == 3) {
        this.$router.push({ name: "course-ssys-detail", params: { id: data.ks_id } });
      }
    },
    handleCreate() {
      this.$router.push({ name: "course-ssys-create" });
    },
    handleEdit(id) {
      this.$router.push({ name: "course-ssys-create", query: { id: id } });
    },
    handleDelete(ks_id) {
      ElMessageBox.confirm('是否确定删除当前课程？', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        ssyskc_delete({ ks_id }).then(res => {
          if (res.code == 1) {
            this.$message.success("删除成功！");
            this.initData();
          }
        })
      }).catch(() => {

      })
    }
  },
  created() {
    this.initGradeData();
    this.initFasciculeData();
    this.initData();
  },
  mounted() {
    const _this = this;
    document.onkeydown = function (e) {
      e = window.event || e;
      if (_this.$route.name == "course-ssys" && (e.code === 'Enter' || e.code === 'enter')) {
        // 登录事件
        _this.initData();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ssysContent {
  .el-card {
    margin-bottom: 15px;
    background: #fff;
  }
  .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 80px;
    .menuDiv {
      display: flex;
      margin-bottom: -10px;
      .list {
        margin: 0 20px;
        padding: 0 10px;
        color: #949494;
        position: relative;
        line-height: 40px;
        font-size: 14px;
        &::after {
          content: "";
          width: 0;
          height: 2px;
          background: rgba(0, 131, 197, 0.8);
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          transition: width linear 0.1s;
        }
        &:hover {
          color: rgba(0, 131, 197, 0.8);
        }
        &.active {
          color: rgba(0, 131, 197, 0.8);
          font-size: 16px;
          &::after {
            width: 100%;
          }
        }
      }
    }
    .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;
        }
      }
    }
  }
  .line {
    height: 1px;
    background: #eaeaea;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-top: 10px;
  }
  .contentDiv {
    .searchBtn {
      padding-top: 10px;
      .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;
          .item + .item {
            margin-left: 20px;
          }
          .item {
            padding: 3px 5px;
            &.active {
              color: #00a3ff;
              border-radius: 6px;
              background: rgba($color: #00a3ff, $alpha: 0.1);
            }
          }
        }
      }
    }
    .resultDiv {
      .resultCard {
        padding: 0 !important;
        .leftImg {
          width: 264px;
          height: 155px;
        }
        .user {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          position: absolute;
          bottom: 8px;
          width: calc(100% - 20px);
        }
      }
    }
  }
  .paginationDiv {
    position: absolute;
    right: 30px;
    bottom: 15px;
    padding: 3px;
  }
}
</style>

<style lang="scss" >
.ssysContent {
  .resultCard .el-card__body {
    padding: 0 !important;
  }
}
</style>