<template>
  <div>
    <back-box>
      <template slot="title">
        <span>教师管理</span>
      </template>
      <template slot="btns">
        <el-tooltip effect="dark" content="导入教师名单" placement="bottom">
          <el-button
            type="primary"
            icon="el-icon-upload2"
            size="mini"
            plain
            circle
            @click="diaUp = true"
          ></el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="添加教师" placement="bottom">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            plain
            circle
          ></el-button>
        </el-tooltip>
      </template>
    </back-box>

    <div class="answer-header">
      <div class="sel-box">
        <el-select
          class="sel"
          v-model="query.gradeName"
          placeholder="选择年级"
          @change="_QueryData(1)"
        >
          <el-option
            v-for="item in gradeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          placeholder="请输入老师姓名"
          v-model="query.teacherName"
          class="input-with-select"
          @keyup.enter.native="_QueryData(2)"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="_QueryData(2)"
          ></el-button>
        </el-input>
        <el-input
          type="number"
          placeholder="请输入老师手机号"
          v-model="query.phone"
          class="input-with-select"
          @keyup.enter.native="_QueryData(3)"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="_QueryData(3)"
          ></el-button>
        </el-input>
      </div>
    </div>
    <div class="page-content">
      <el-empty
        :image-size="100"
        v-if="!teacherList.length && loading == false"
        description="没有更多数据"
      ></el-empty>
      <div class="teacher-box" v-loading="loading" v-else>
        <div class="teacher-list">
          <p class="h-title">教师列表</p>
          <ul class="teacher-ul">
            <li
              class="teacher-item"
              v-for="item in teacherList"
              :key="item.id"
              :class="showTId == item.id ? 'active' : ''"
              @click="showTeacher(item)"
            >
              {{ item.realName }}（{{ setClass(item) }}）
            </li>
          </ul>
        </div>
        <div class="teacher-detail">
          <div class="icon-box">
            <i class="icon el-icon-edit-outline"></i>
            <i class="icon el-icon-circle-plus-outline"></i>
          </div>
          <div class="detail-top">
            <p class="p-item">手机号码：{{ teacherDetail.loginName }}</p>
            <p class="p-item">
              状态：{{ teacherDetail.available == 1 ? "正常" : "不可用" }}
            </p>
            <p class="p-item">
              性别：{{
                teacherDetail.sex == 1
                  ? "男"
                  : teacherDetail.sex == 2
                  ? "女"
                  : "未知"
              }}
            </p>
          </div>
          <div
            class="grade-box"
            v-if="teacherDetail.managerList && teacherDetail.managerList.length"
          >
            <p class="h-title">班主任</p>
            <ul class="grade-info">
              <li
                class="grade-li"
                v-for="item in teacherDetail.managerList"
                :key="item.classId"
              >
                <i class="el-icon-delete"></i>
                <div class="grade-item">
                  <p class="grade-name">{{ item.className }}</p>
                  <div class="grade-class">
                    <p>
                      <i class="fa fa-address-book-o"></i>学生：{{
                        item.studentCount
                      }}个
                    </p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div
            class="grade-box"
            v-if="
              teacherDetail.teacherCourseList &&
              teacherDetail.teacherCourseList.length
            "
          >
            <p class="h-title">任课老师</p>
            <ul class="grade-info">
              <li
                class="grade-li"
                v-for="item in teacherDetail.teacherCourseList"
                :key="item.classId"
              >
                <i class="el-icon-delete"></i>
                <div class="grade-item">
                  <p class="grade-name">
                    {{ item.className }}（{{ item.subjectName }}）
                  </p>
                  <div class="grade-class">
                    <p>
                      <i class="fa fa-address-book-o"></i>学生：{{
                        item.studentCount
                      }}个
                    </p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div
            class="grade-box"
            v-if="
              teacherDetail.teacherGradeList &&
              teacherDetail.teacherGradeList.length
            "
          >
            <p class="h-title">备课组长</p>
            <ul
              class="grade-info"
              v-for="item in teacherDetail.teacherGradeList"
              :key="item.grade"
            >
              <li class="grade-li">
                <i class="el-icon-delete"></i>
                <div class="grade-item">
                  <p class="grade-name">
                    {{ item.gradeName }}（{{ item.subjectName }}）
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="导入学校名单" :visible.sync="diaUp" width="400">
      <up-load id="downTeacher" :url="url" fileName="教师名单">
        <p class="down-txt" slot="down">
          通过Excel名单导入教师名单，点击
          <el-link type="danger" @click="downExcel">模板下载</el-link> 。
        </p>
      </up-load>
      <div class="dialog-footer" slot="footer">
        <el-button @click="diaUp = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { downloadFile } from "@/utils";
export default {
  data() {
    return {
      loading:false,
      url: "",
      diaUp: false,
      query: {
        gradeName: "",
        teacherName: "",
        phone: "",
      },
      gradeList: [],
      teacherList: [ ],
      teacherDetail: {
        teacherName: "",
        loginName: "",
        sex: "",
        available: "",
        managerList: [],
        teacherCourseList: [],
        teacherGradeList: [],
      },
      showTId: "", //显示详情 教师ID
    };
  },
  async created() {
    await this._QueryDataGrade();
    this._QueryData(1);
  },
  methods: {
    setClass(obj) {
      return (
        obj.managerList?.length +
        obj.teacherCourseList?.length +
        obj.teacherGradeList?.length
      );
    },
    showTeacher(obj) {
      this.showTId = obj.id;
      this.teacherDetail = { ...obj };
    },
    async _QueryData(type) {
      let query = {};
      if (type == 1) {
        query.gradeName = this.query.gradeName;
        this.query.teacherName = "";
        this.query.phone = "";
      } else if (type == 2) {
        query.teacherName = this.query.teacherName;
        this.query.gradeName = "";
        this.query.phone = "";
      } else if (type == 3) {
        query.phone = this.query.phone;
        this.query.teacherName = "";
        this.query.gradeName = "";
      }
      this.loading = true;
      const { data, status, info } = await this.$request.teacherList({
        ...query,
      });
      this.loading = false;
      console.log(status);
      if (status === 0) {
        this.teacherList = data.list || [];
        this.teacherDetail = { ...this.teacherList[0] };
        this.showTId = this.teacherList[0]?.id;
      } else {
        this.$message.error(info);
      }
    },
    async _QueryDataGrade() {
      const { data, status, info } = await this.$request.gradeList();
      if (status === 0) {
        this.gradeList =
          data.list?.map((item) => {
            return {
              value: item.gradeName,
              label: item.gradeName,
            };
          }) || [];
        console.log(this.gradeList);
        this.query.gradeName = this.gradeList[0]?.value;
      } else {
        this.$message.error(info);
      }
    },
    async downExcel() {
      let data = await this.$request.downDevice({
        id: this.id,
      });
      if (data && !data.code) {
        let blob = new Blob([data], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        downloadFile(`设备信息.xlsx`, blob);
      } else {
        this.$message.error(data.message);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  padding: 0 20px 20px;
}
.teacher-box {
  display: flex;
  background: #f8f8f8;
  border-radius: 10px;
  overflow: hidden;
  min-height: 400px;
  .teacher-ul {
    max-height: 70vh;
    overflow-y: scroll;
  }
  .teacher-list {
    width: 240px;

    .h-title {
      height: 40px;
      line-height: 40px;
      background: #eee;
      border-radius: 10px 10px 0 0;
    }
    .teacher-item {
      font-size: 16px;
      color: #7f7f7f;
      line-height: 36px;
      cursor: pointer;
      padding-left: 12px;
      &:hover {
        background: #eee;
      }
      &.active {
        color: #667ffd;
      }
    }
  }

  .teacher-detail {
    flex: 1;
    position: relative;
    .icon-box {
      position: absolute;
      top: 12px;
      right: 20px;
      .icon {
        font-size: 24px;
        color: #7f7f7f;
        cursor: pointer;
      }
      .el-icon-circle-plus-outline {
        margin-left: 10px;
      }
    }
    .detail-top {
      padding: 12px 20px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;
      color: #7f7f7f;
      .p-item {
        width: 40%;
        line-height: 28px;
      }
    }
    .grade-box {
      .grade-info {
        display: flex;
        flex-wrap: wrap;
        padding: 20px 20px 0;
        & > li {
          margin-right: 20px;
          margin-bottom: 20px;
          position: relative;
          .el-icon-delete {
            position: absolute;
            top: 8px;
            right: 8px;
            padding: 2px;
            cursor: pointer;
            display: none;
            &:hover {
              color: #667ffd;
            }
          }
          &:hover {
            .el-icon-delete {
              display: block;
            }
          }
        }

        .grade-item {
          width: 200px;
          box-sizing: border-box;
          padding: 12px 16px;
          border-radius: 10px;
          box-shadow: 1px 1px 3px #888;
        }
        .grade-name {
          font-size: 16px;
          font-weight: bold;
          line-height: 18px;
          padding-bottom: 12px;
        }
        .grade-class {
          display: flex;
          justify-content: space-between;
          font-size: 15px;
          padding-right: 20px;
          .fa {
            font-size: 18px;
            margin-right: 5px;
            color: #a4a4a4;
          }
          .fa-book {
            font-size: 20px;
          }
        }
      }
    }
  }
}
</style>