<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-row>
		  <el-col :span="8">
			  <el-form-item label="班级名称" prop="classId">
			  		  <el-select v-model="queryParams.classId" placeholder="请选择班级名称">
			  		    <el-option
			  		      v-for="dict in kiuesegh"
			  		      :key="dict.deptId"
			  		      :label="dict.deptName"
			  		      :value="dict.deptId"
			  			  clearable
			  			  @keyup.enter.native="handleQuery"
			  		    ></el-option>
			  		  </el-select>
			  </el-form-item>
		  </el-col>
		  <el-col :span="8">
		  		<el-form-item label="姓名" prop="userName">
		  		  <el-input
		  		    v-model="queryParams.userName"
		  		    placeholder="请输入姓名"
		  		    clearable
		  		    @keyup.enter.native="handleQuery"
		  		  />
		  		</el-form-item>
		  </el-col>
		  <el-col :span="8">
		  		<el-form-item label="联系方式" prop="userPhone">
		  		  <el-input
		  		    v-model="queryParams.userPhone"
		  		    placeholder="请输入联系方式"
		  		    clearable
		  		    @keyup.enter.native="handleQuery"
		  		  />
		  		</el-form-item>
		  </el-col>
		  <el-col :span="8">
		  		<el-form-item label="审核结果" prop="isPass">
		  		  <el-select v-model="queryParams.isPass" placeholder="请选择审核结果" clearable>
		  		    <el-option
		  		      v-for="dict in dict.type.shhjg"
		  		      :key="dict.value"
		  		      :label="dict.label"
		  		      :value="dict.value"
		  		    />
		  		  </el-select>
		  		</el-form-item>
		  </el-col>
		  <el-col :span="8">
			 <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-col>
	  </el-row>





    </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="['register: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="handleUpdate"
          v-hasPermi="['register: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="handleDelete"
          v-hasPermi="['register:teacher: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="['register:teacher: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: 30px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;">
	   <el-table border :max-height="tableMaxHeight" v-loading="loading" :data="teacherList" @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="学校id" align="center" prop="schoolId" /> -->
	     <el-table-column label="学校名称" align="center" prop="schoolName" width="120"/>
	     <el-table-column label="姓名" align="center" prop="userName" />
	     <el-table-column label="联系方式" align="center" prop="userPhone" width="120"/>
	     <el-table-column label="审核人" align="center" prop="auditUser" />
	     <el-table-column label="审核结果" align="center" prop="isPass">
	       <template slot-scope="scope">
	       <dict-tag :options="dict.type.shhjg" :value="scope.row.isPass"/>
	       </template>
	     </el-table-column>
	     <el-table-column label="审核意见" align="center" prop="opinion" />

	     <el-table-column label="备注" align="center" prop="remark" />
	     <el-table-column label="操作" width="140" align="center" class-name="small-padding fixed-width">
	       <template slot-scope="scope">
	         <el-button
	           size="mini"
	           type="text"
	           @click="handleUpdate(scope.row)"
	     	v-if="scope.row.isPass != 2"
	     	style="background: #00B034;color: #FFF;padding: 7px;"
	           v-hasPermi="['register:teacher:edit']"
	         >修改</el-button>
	     			<el-button size="mini" type="text" style="background: #00B034;color: #FFF;padding: 7px; margin-bottom: 5px;" v-hasPermi="['audit:shyj:add']"
	     			    @click="getPass(scope.row)" v-if="scope.row.isPass == 1">审核</el-button>
	     			  <el-button size="mini" type="text" style="background: #3FBCEF;color: #FFF;padding: 7px; margin-left: 0;" v-hasPermi="['audit:shyj:add']"
	     			    @click="infoBtn(scope.row)"  v-if="scope.row.isPass == 1">驳回</el-button>
	         <el-button
	           size="mini"
	           type="text"
	     	style="background: red;color: #FFF;padding: 7px;"
	           @click="handleDelete(scope.row)"
	           v-hasPermi="['register:teacher: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="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
		  <el-row>
			  <el-col :span="8">
				 <el-form-item label="学校名称" prop="schoolName">
				   <el-input v-model="form.schoolName" placeholder="请输入学校名称" />
				 </el-form-item>
			  </el-col>
			  <el-col :span="8">
			  		<el-form-item label="姓名" prop="userName">
			  		  <el-input v-model="form.userName" placeholder="请输入姓名" />
			  		</el-form-item>
			  </el-col>
			  <el-col :span="8">
			  		<el-form-item label="联系方式" prop="userPhone">
			  		  <el-input v-model="form.userPhone" placeholder="请输入联系方式" />
			  		</el-form-item>
			  </el-col>
			  <el-col :span="24" v-for="(item,index) in form.registerTeacherClassList" :key="index">
			  	<el-col :span="12">
			  		<el-form-item label="班级名称" prop="classId">
			  		<el-select style="width: 100%;" v-model="item.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="10">
						  	<el-form-item label="课程" prop="discipline">
						  		<el-select style="width: 100%;" v-model="item.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="2">
						  	<div class="hyeoa" style="margin-top: 10px;">
						  		 <el-tooltip class="item" effect="dark" content="新增信息,请慎重操作" placement="top-start">
						  		      <img src="../../../assets/images/icon_tc_add.png" alt="" class="hueyde" @click="tijea(index)" />
						  		</el-tooltip>
						  		<el-tooltip class="item" effect="dark" content="删除无法恢复,请慎重操作" placement="top-start">
						  			     <img src="../../../assets/images/delei.png" alt="" class="hueydele" @click="naeyrfakjf(index, item)" />
						  		 </el-tooltip>
						  	</div>
						  </el-col>
			  </el-col>
			  <!-- <el-col :span="12">
			  		<el-form-item label="审核结果" prop="isPass">
						<el-select style="width: 100%;" v-model="form.isPass" placeholder="请选择审核结果" clearable>
						  <el-option
						    v-for="dict in dict.type.shhjg"
						    :key="dict.value"
						    :label="dict.label"
						    :value="dict.value"
						  />
						</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="schoolId">
          <el-input v-model="form.schoolId" 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 { listTeacher, getTeacher, delTeacher, addTeacher, updateTeacher} from "@/api/system/teacher";
import { setPass } from "@/api/system/school";
import { listDept,listDeptode} from "@/api/system/dept";
export default {
  name: "Teacher",
  dicts: ['shhjg','sys_subject'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 注册-老师表格数据
      teacherList: [],
      // 弹出层标题
      title: "",
	  tableMaxHeight:400,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        schoolId: null,
        schoolName: null,
        userName: null,
        userPhone: null,
        isPass: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        schoolId: [
          { required: true, message: "学校id不能为空", trigger: "blur" }
        ],
        schoolName: [
          { required: true, message: "学校名称不能为空", trigger: "blur" }
        ],
        userName: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
		userPhone:[
			{ required: true, message: "不能为空", trigger: "blur" }
		]
      },
	  deptOptions:[],
	  kiuesegh:[],
	  kiueseghs:[],
	  idf:0,
	  teachid:0
    };
  },
  created() {
	  window.onresize = () => {
	            this.changeTableMaxHeight()
	          }
	          this.changeTableMaxHeight()
    this.getList();
	this.getdept(0)
  },
  mounted() {
  	window.onresize = () => {
  	          this.changeTableMaxHeight()
  	        }
  	        this.changeTableMaxHeight()
  },
  methods: {
	  getdept(val){
	  		  let kuesf={'parentId':val}
	  		  // this.kiuesegh = []
	  		listDeptode(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)
	  		});
	  },
    /** 查询注册-老师列表 */
    getList() {
      this.loading = true;
      listTeacher(this.queryParams).then(response => {
        this.teacherList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        schoolId: null,
        schoolName: null,
        userName: null,
        userPhone: null,
        isPass: 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 = "添加注册-老师";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getTeacher(id).then(response => {
        this.form = response.data;
		this.idf = this.form.registerTeacherClassList[0].id
		this.teachid = this.form.registerTeacherClassList[0].teacherId
        this.open = true;
        this.title = "修改注册-老师";
      });
    },
	// 点击新增
	tijea(index) {
		console.log(index+ 1)
		// this.nameutaiL = index+ 1
	 //   this.cascaderKey = index + 1
		this.form.registerTeacherClassList.push({
			classId:null,
			className:null,
			discipline:null,
			id:this.idf,
			teacherId:this.teachid
		});
	  // this.nhyeojd = true
	},
	// 点击删除
	naeyrfakjf(index, item) {
	  if(this.form.registerTeacherClassList.length == 1){
	    this.$message.error('信息必填不可全删除');
	    return  false
	  }
		var that = this
		this.$confirm('是否确认删除信息?', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		})
			.then(function() {
				 return  that.user.registerTeacherClassList.splice(index, 1)
			})
			.then(() => {
				// this.getList();
				// this.msgSuccess('删除成功');
			});

	},
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateTeacher(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addTeacher(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
	  delTeacher(ids).then(response => {
	   this.getList();
	   this.$modal.msgSuccess("删除成功");
	  });
      // this.$modal.confirm('是否确认删除注册-老师编号为"' + ids + '"的数据项？').then(function() {
      //   return delTeacher(ids);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('register/teacher/export', {
        ...this.queryParams
      }, '教师注册信息.xlsx')
    },
		getPass(row) {
		  const _this = this
		  this.$confirm('是否审核通过', "提醒", {
		    confirmButtonText: "确定",
		    cancelButtonText: "取消",
		    type: "warning"
		  }).then(function() {
		    return setPass({
		    type: 2,
		    dataId: row.id,
			shjg:2,
		    // xmStatus:row.xmStatus
		  })
		  }).then(() => {
			   _this.getList();
		    _this.msgSuccess("提交成功");
		  })
		},
		infoBtn(row) {
		  const _this = this
		    this.$prompt("请输入驳回意见", "提醒", {
		      confirmButtonText: "确定",
		      cancelButtonText: "取消",
		      type: "warning",
		      inputValidator: (value) => {
		                if(!value) {
		                  return '驳回意见不能为空！';
		                }
		               }
		    })
		      .then(function({ value }) {
		          return setPass({
		            shjg: 3,
		            type: 2,
		            dataId: row.id,
		            shyj:value
		          });

		      })
		      .then(({ value }) => {
		        _this.msgSuccess("驳回成功");
		        _this.getList();
		      });
		},
		// 获取屏幕高度
		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>
	.hyeoa {
		height: 100%;
		display: flex;
		align-items: center;
		margin-left: 10px;
	}
	.hueyde {
		width: 18px;
		height: 18px;
		margin: 0 5px;
		margin-right: 10px;
	}
	.hueydele {
		width: 15px;
		height: 18px;
	}
</style>
<style scoped lang="scss">
	.bgtan{
		border-left: 3px solid #4775EA;
		padding-left: 10px;
	}

	.app-container{
		background-color: #f6f6f6;
		// height: 100vh;
	}
</style>
