<template>
  <div class="app-container">
    <el-form :model="queryForm" ref="refqueryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
      <el-form-item label="教师姓名：">
        <el-input v-model="queryForm.teacherName" placeholder="请输入教师姓名" clearable
                  @keyup.native.enter="handleQuery"></el-input>
      </el-form-item>
      <el-form-item label="电话号码：">
        <el-input v-model="queryForm.teacherTel" placeholder="请输入电话号码" clearable
                  @keyup.native.enter="handleQuery"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addTeacher"
                   v-hasPermi="['system:teacher:add']">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="updateTeacher"
                   v-hasPermi="['system:teacher:edit']">修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="delTeacher"
                   v-hasPermi="['system:teacher:remove']">删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExportTeacher"
                   v-hasPermi="['system:teacher:export']">导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-close" size="mini" @click="closePage"
                   v-hasPermi="['system:teacher:close']">关闭
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="teachersList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column key="avatar" align="center" prop="picUrl" label="头像" fixed="left">
        <template slot-scope="scope">
          <ListImage :image-url="pev + scope.row.picUrl"></ListImage>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" prop="teacherName" label="教师姓名"></el-table-column>
      <el-table-column header-align="center" align="center" prop="teacherCode" label="工作编号"></el-table-column>
      <el-table-column header-align="center" align="center" prop="teacherTel" label="电话号码"></el-table-column>
      <el-table-column header-align="center" align="center" prop="homeAddress" label="家庭住址"
                       show-overflow-tooltip></el-table-column>
      <el-table-column header-align="center" align="center" prop="courseName" label="任课名称"></el-table-column>
      <el-table-column label="操作" align="center" width="180px">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="updateTeacher(scope.row)">编辑
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="delTeacher(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize"
                @pagination="getList"/>
    <!-- 新增或修改教师对话框 -->
    <el-drawer :title="title" :visible.sync="openTeacherRow" @before-close="closeForm">
      <el-form ref="refTeacherForm" :model="teacherPerForm" label-width="100px" style="padding-right: 20px">
        <el-form-item label="教师姓名：" prop="teacherName">
          <el-input :disabled="!!teacherPerForm.id" v-model="teacherPerForm.teacherName" readonly
                    @focus="selectTeacher"></el-input>
        </el-form-item>
        <el-form-item label="任课名称：" prop="courseId">
          <el-select v-model="teacherPerForm.courseId" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in subjectList"
                       :key="item.courseId"
                       :label="item.courseName"
                       :value="item.courseId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button type="primary" @click="submitFormTeacher">确 定</el-button>
        <el-button @click="closeForm">取 消</el-button>
      </el-row>
    </el-drawer>
    <!-- 选择老师 -->
    <TeacherSelect v-if="teacherOptions.open" :openSelect.sync="teacherOptions.open" :title="teacherOptions.title"
                   @getTeacherList="getTeacherList" @setTeacherInfo="setTeacherInfo"></TeacherSelect>
  </div>
</template>

<script>


import {
  teacherList,
  addTeacher,
  delTeacherInfo,
  editTeacherInfo,
  getTeacherInfo
} from '@/api/smartSchool/classAdviser/classManage/teacherList'
import TeacherSelect from '@/views/components/moduleComponets/TeacherSelect/index.vue'
import {teacherListInform} from '@/api/smartSchool/teacherManage/teacherInformation'
import {listSubject} from '@/api/smartSchool/course/index'

export default {
  name: '',
  components: {TeacherSelect},
  props: {},
  data() {
    return {
      pev: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: '',
      routeBack: '',
      //   任课教师列表
      teachersList: [],
      //   教师表单查询信息
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        teacherName: '',
        teacherTel: ''
      },
      // 新增或修改教师对话框
      openTeacherRow: false,
      //   新增或修改教师表单
      teacherPerForm: {},
      // 选择老师对话框
      teacherOptions: {
        open: false,
        title: '选择老师'
      },
      //  总课程列表
      subjectList: []
    }
  },
  created() {
    this.routeBack = this.$route.query && this.$route.query.routeBack
    this.getList()
    this.getCourseList()
  },

  methods: {
    getList() {
      const gradeId = this.$route.query && this.$route.query.gradeId

      this.loading = true
      teacherList(gradeId, this.queryForm)
        .then(response => {
          this.loading = false
          this.teachersList = response.rows
          this.total = response.total
        })
        .catch(error => {
          this.loading = false
        })
    },
    reset() {
      this.teacherPerForm = {
        id: undefined,
        teacherName: undefined
        //courseName: undefined
      }
      this.resetForm('refTeacherForm')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryForm.pageNum = 1
      this.getList()
    },
    // 重置表单
    resetQuery() {
      this.queryForm = {
        pageNum: 1,
        pageSize: 10,
        teacherName: '',
        teacherTel: ''
      }
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 增加教师
    addTeacher() {
      this.reset()
      this.openTeacherRow = true
      this.title = '添加教师'
    },
    // 编辑教师
    updateTeacher(row) {
      this.reset()
      const ids = row.id || this.ids
      getTeacherInfo(ids).then(response => {
        this.teacherPerForm.teacherName = response.data.teacherName
        this.teacherPerForm.teacherId = response.data.teacherId
        this.teacherPerForm.id = response.data.id
        this.teacherPerForm.classId = response.data.classId
        this.teacherPerForm.courseId = response.data.courseId
        this.openTeacherRow = true
        this.title = '修改教师'
      })
    },

    // 删除教师列表
    delTeacher(row) {
      const id = row.id || this.ids
      this.$modal
        .confirm('是否确认删除选中的数据项？')
        .then(() => {
          this.$modal.loading('正在处理数据，请稍等...')
          return delTeacherInfo(id)
        })
        .then(() => {
          this.$modal.closeLoading()
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {
          this.$modal.closeLoading()
        })
    },
    /** 导出教师按钮操作 */
    handleExportTeacher() {
      const gradeId = this.$route.query.gradeId
      this.download(
        '/schoolClassMentor/schoolClassMentor/' + gradeId,
        {
          ...this.queryParams
        },
        `classTeacherList_${Date.now()}.xlsx`
      )
    },

    submitFormTeacher() {
      const gradeId = this.$route.query.gradeId
      this.$refs['refTeacherForm'].validate(valid => {
        if (valid) {
          if (this.teacherPerForm.id != null) {
            editTeacherInfo(this.teacherPerForm).then(response => {
              this.$modal.msgSuccess('修改教师成功')
              this.closeForm()
              this.getList()
            })
          } else {
            addTeacher(gradeId, this.teacherPerForm).then(response => {
              this.$modal.msgSuccess('新增教师成功')
              this.closeForm()
              this.getList()
            })
          }
        }
      })
    },
    refresh() {
      this.$forceUpdate()
    },
    // 关闭老师选择对话框
    closeForm() {
      this.reset()
      this.openTeacherRow = false
    },
    // 关闭页面
    closePage() {
      // window.history.back(-1);
      // this.$tab.closeOpenPage({path: '/class/handleClass'});
      console.log(this.route)
      let path
      if (this.routeBack == 1) {
        path = {path: '/classAdviser/classManage'}
      } else {
        path = {path: '/teachAffairAdministration/affairClassManage'}
      }
      this.$tab.closeOpenPage(path)
    },

    // 获取教师信息
    teacherInfoList() {
      this.teacherOptions.open = true
    },
    /** 选择老师(打开对话框) */
    selectTeacher() {
      this.teacherOptions.open = true
    },
    // 关闭老师选择对话框
    handleClose() {
      this.teacherOptions.open = false
    },
    /** 获取老师信息列表 */
    getTeacherList(queryForm, callback) {
      teacherListInform({...queryForm, employeeType: 0})
        .then(response => {
          // console.log(response);
          callback(response.rows, response.total)
        })
        .catch(error => {
          callback([], 0)
        })
    },

    // 请求所有课程
    async getCourseList() {
      let res = await listSubject()
      this.subjectList = res.rows.map((item) => {
        return {
          courseId: item.id,
          courseName: item.courseName
        }
      })
    },


    /** 设置老师信息 */
    setTeacherInfo(item) {
      this.teacherPerForm.teacherName = item.teacherName
      this.teacherPerForm.teacherId = item.id
    }
  }
}
</script>
<style scoped lang="less"></style>
