<template>
  <div class="app-container">
    <el-form style="background-color: #fff; padding: 15px 5px; border-radius:10px;"  :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <p class="bgtan" style="margin-top: 0;">搜索条件</p>
	  <el-form-item label="老师姓名" prop="teacherName">
        <el-input
          v-model="queryParams.teacherName"
          placeholder="请输入老师姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />  
      </el-form-item>
      <el-form-item label="班级名称" prop="classId">
      		  <el-select v-model="queryParams.classId" placeholder="请选择班级名称">
      		    <el-option
      		      v-for="dict in kiueseghs"
      		      :key="dict.deptId"
      		      :label="dict.deptName"
      		      :value="dict.deptId"
      			  clearable
      			  @keyup.enter.native="handleQuery"
      		    ></el-option>
      		  </el-select>
      </el-form-item>
      <el-form-item label="学科" prop="discipline">
       <el-select style="width: 100%;" v-model="queryParams.discipline" placeholder="请选择学科">
                   <el-option
                     v-for="dict in dict.type.sys_subject"
                     :key="dict.value"
                     :label="dict.label"
                     :value="dict.label"
       				 style="width: 100%;"
                   ></el-option>
       </el-select>
      </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" style=" border-top-left-radius: 12px; border-top-right-radius: 12px; background-color: #fff;margin: 0;margin-top: 20px;padding: 10px 5px; ">
      <p class="bgtan" style="margin-top: 0;">老师班级信息</p>
	  <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['formal:class:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['formal:class:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['formal:class:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['formal:class:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
     <div style="background-color: #fff; padding: 0 10px;  padding-bottom: 40px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;">
		<el-table border :max-height="tableMaxHeight" v-loading="loading" :data="classList" @selection-change="handleSelectionChange">
		  <el-table-column type="selection" width="55" align="center" />
		  <!-- <el-table-column label="ID" align="center" prop="id" /> -->
		  <el-table-column label="学校" align="center" prop="schoolName" />
		  <!-- <el-table-column label="班级id" align="center" prop="classId" /> -->
		  <el-table-column label="班级名称" align="center" prop="className" />
		  <el-table-column label="老师" align="center" prop="teacherName" />
		  <el-table-column label="学科" align="center" prop="discipline"/>
		          <!-- <template slot-scope="scope">
		            <dict-tag :options="dict.type.sys_subject" :value="scope.row.discipline"/>
		          </template> -->
		        <!-- </el-table-column> -->
		  <el-table-column label="备注" align="center" prop="remark" />
		  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
		    <template slot-scope="scope">
		      <el-button
		        size="mini"
		        type="text"
		        icon="el-icon-edit"
		        @click="handleUpdate(scope.row)"
		        v-hasPermi="['formal:class:edit']"
		      >修改</el-button>
		      <el-button
		        size="mini"
		        type="text"
		        icon="el-icon-delete"
		        @click="handleDelete(scope.row)"
		        v-hasPermi="['formal:class:remove']"
		      >删除</el-button>
		    </template>
		  </el-table-column>
		</el-table>
		
		<pagination
		  v-show="total>0"
		  :total="total"
		  :page.sync="queryParams.pageNum"
		  :limit.sync="queryParams.pageSize"
		  @pagination="getList"
		/> 
	 </div>
    

    <!-- 添加或修改注册-老师-班级（学科）对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <!-- <el-form-item label="老师id" prop="teacherId">
          <el-input v-model="form.teacherId" placeholder="请输入老师id" />
        </el-form-item> -->
		<el-row>
			<el-col :span="8">
				  <el-form-item label="学校名称" prop="schoolId">
				  					    <!-- <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" /> -->
				  					  <!-- :disabled="fku" -->
									  <el-select :disabled="true"  style="width: 100%;"   v-model="form.schoolId" placeholder="请选择学校名称">
				  					    <el-option
				  					      v-for="dict in deptOptions"
				  					      :key="dict.deptId"
				  					      :label="dict.deptName"
				  					      :value="dict.deptId"
				  						  @click.native="mjyhes(dict)"
				  					    ></el-option>
				  					  </el-select>
				  </el-form-item>
			</el-col>
			
			<el-col :span="8">
				  <el-form-item label="班级名称" prop="classId">
				  <el-select style="width: 100%;" v-model="form.classId" placeholder="请选择班级名称">
				    <el-option
				      v-for="dict in kiuesegh"
				      :key="dict.deptId"
				      :label="dict.deptName"
				      :value="dict.deptId"
				  	@click.native="mjyhess(dict)"
				    ></el-option>
				  </el-select>
				  </el-form-item>
			</el-col>
			<!-- <el-col :span="8">
				<el-form-item label="姓名" prop="teacherName">
					<el-select style="width: 100%;"  filterable v-model="form.teacherName" placeholder="请选择老师名称">
					  <el-option
					    v-for="dict in infoListstu"
					    :key="dict.teacherId"
					    :label="dict.teacherName"
					    :value="dict.teacherName"
						@click.native="mjyhesstu(dict)"
					  ></el-option>
					</el-select>
				</el-form-item>
			</el-col> -->
			<el-col :span="8">
				<el-form-item label="学科" prop="discipline">
				  <el-select style="width: 100%;" v-model="form.discipline" placeholder="请选择学科">
				              <el-option
				                v-for="dict in dict.type.sys_subject"
				                :key="dict.value"
				                :label="dict.label"
				                :value="dict.label"
								style="width: 100%;"
				              ></el-option>
				  </el-select>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="备注" prop="remark">
				  <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
				</el-form-item>
			</el-col>
		</el-row>
        <!-- <el-form-item label="班级id" prop="classId">
          <el-input v-model="form.classId" placeholder="请输入班级id" />
        </el-form-item> -->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listClass, getClass, delClass, addClass, updateClass } from "@/api/system/class";
import {listInfostu } from "@/api/zhihuixy/teacherdan";
import { listDepts,listDeptode} from "@/api/system/dept";
export default {
  name: "Class",
  dicts: ['sys_subject'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 注册-老师-班级（学科）表格数据
      classList: [],
      // 弹出层标题
      title: "",
	  tableMaxHeight:400,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        teacherId: null,
        classId: null,
        className: null,
        discipline: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        classId: [
          { required: true, message: "班级不能为空", trigger: "blur" }
        ],
        discipline: [
          { required: true, message: "学科不能为空", trigger: "blur" }
        ],
      },
	  deptOptions:[],
	  kiuesegh:[],
	  kiueseghs:[],
	  fku:false,
		listInfostucs:{},
		infoListstu:[]
	  
    };
  },
  created() {
	  window.onresize = () => {
	            this.changeTableMaxHeight()
	          }
	          this.changeTableMaxHeight()
    this.getList();
	this.getdept(0)
  },
  mounted() {
  	window.onresize = () => {
  	          this.changeTableMaxHeight()
  	        }
  	        this.changeTableMaxHeight()
  },
  methods: {
	  /** 查询老师档案信息列表 */
	  getListuye(val) {
	    this.loading = true;
	  		this.listInfostucs.classId = val
	    listInfostu(this.listInfostucs).then(response => {
	      this.infoListstu = response.rows;
	      this.loading = false;
	    });
	  },
	  getdept(val){
	  		  let kuesf=  {'parentId':val}
	  		  // this.kiuesegh = []
			  console.log(kuesf)
	  		listDepts(kuesf).then(response => {
	  		  this.deptOptions = this.handleTree(response.data, "deptId");
	  		  this.deptOptions.filter(rou =>{
	  			  if(rou.children != undefined){
	  			  	rou.children.filter(rour =>{
	  			  		this.kiuesegh.push(rour)
	  			  	})		  
	  			  }
				  
	  			  // this.kiuesegh = rou.children
	  			  // this.kiuesegh.push(rou.children)
	  			  console.log(rou.children)
	  		  })
	  		  this.kiueseghs = this.kiuesegh
	  		  // this.deptOptions = response.data
	  		  console.log(this.kiuesegh)
	  		});  
	  },
	  getdeptfr(val){
	  		  let kuesf=  {'parentId':val}
	  		  // this.kiuesegh = []
	  		 console.log(kuesf)
	  		this.kiuesegh = []
	  		listDeptode(kuesf).then(response => {
	  		  this.kiuesegh = this.handleTree(response.data, "deptId");
	  		  // console.log(this.kiuesegh)
	  		});  
	  },
    /** 查询注册-老师-班级（学科）列表 */
    getList() {
      this.loading = true;
      listClass(this.queryParams).then(response => {
        this.classList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        teacherId: null,
        classId: null,
        className: null,
        discipline: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加注册-老师-班级（学科）";
	  this.form.schoolId =  this.$store.state.user.schoolId
	  this.deptOptions.filter(rou=>{
		if(rou.deptId == this.form.schoolId){
			this.form.schoolName = rou.deptName
		}  
	  })
	  // 1699303538183421953
	  // this.form.schoolName =  this.$store.state.user.schoolId
	  
	  this.fku = false
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getClass(id).then(response => {
		  this.fku = true
        this.form = response.data;
		// this.form.
		if(this.form.schoolId != null){
			this.getdeptfr(this.form.schoolId)
		}
        this.open = true;
        this.title = "修改注册-老师-班级（学科）";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateClass(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addClass(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
	  delClass(ids).then(response => {
	  		this.getList();
	  		this.$modal.msgSuccess("删除成功");
	  });
      // this.$modal.confirm('是否确认删除注册-老师-班级（学科）编号为"' + ids + '"的数据项？').then(function() {
      //   return delClass(ids);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('formal/class/export', {
        ...this.queryParams
      }, `class_${new Date().getTime()}.xlsx`)
    },
	mjyhess(val){
		this.form.className = val.deptName
		this.getListuye(val.deptId)
	},
	mjyhes(val){
		console.log(val,this.form.schoolName)
		this.form.schoolName = val.deptName
		this.kiuesegh = []
		let kuesf= {'parentId':val.deptId} 
		listDepts(kuesf).then(response => {
		  this.kiuesegh = this.handleTree(response.data, "deptId");
		  console.log(this.kiuesegh)
		});  
		// this.getdept(val.deptId)
	},
	// 老师姓名选择器
	mjyhesstu(val){
		this.form.teacherId = val.teacherId
		// this.form.studentNumber = val.studentNumber
	},
	// 获取屏幕高度
	showFilterForm () {
	      this.filterActive = !this.filterActive
	      this.changeTableMaxHeight()
	    },
	
	    changeTableMaxHeight () {
	      let height = document.body.offsetHeight // 网页可视区域高度
	      // if (this.filterActive) {
	      //   this.tableMaxHeight = height - 320
	      // } else {
	        this.tableMaxHeight = height - 250
	      // }
	      console.log(height)
	    }
	
  }
};
</script>

<style scoped lang="scss">
	.bgtan{
		border-left: 3px solid #4775EA;
		padding-left: 10px;
	}
	
	.app-container{
		background-color: #f6f6f6;
		// height: 100vh;
	}
</style>
