<template>
  <div class="app-container">
    <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="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete"

        >清空</el-button>
      </el-col>
       <!-- v-hasPermi="['course:time:remove']" -->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['course:time:export']"
        >导出</el-button>
      </el-col>
      <!-- <el-col :span="19" style="text-align: right;">
          <el-button
            type="primary"
            plain
            icon="el-icon-check"
            size="mini"
            @click="submitForm"
            v-hasPermi="['course:time:add']"
          >确定修改</el-button>
        </el-col> -->
      <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
    </el-row>

    <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="background-color: #fff;">
    <el-row>
      <el-col :span="24" style="padding-left: 5px; display: flex;justify-content: flex-end;padding-right: 10px;">
       <!-- <p class="bgtan" style="margin-top: 0;font-weight: bold;font-size: 15px;color: #4775EA;display: flex;justify-content: space-between;align-items: center;padding-right: 30px;"><span>上午上课时间配置<span style="color: red;">*</span></span> -->
         <span style="color: #4775EA;margin-left: 20px;display: flex;align-items: center;" @click="shangwuxin">
            <img style="width: 16px; height: 16px;margin-right: 5px;" src="../../../assets/images/icon_kcgl_ht_add.png" alt="" >
           新增巡检点
          </span>
       <!-- </p> -->
      </el-col>
      <el-col :span="24" v-for="(item,index) in shangwu" :key="index">
        <el-col :span="24">
          <div class="bgtan" style="margin-top: 0;font-weight: bold;font-size: 15px;color: #4775EA;display: flex;justify-content: space-between;align-items: center;padding-right: 30px;"><span>{{'巡检配置' + (index +1)}}<span style="color: red;">*</span></span></div>
        </el-col>
        <el-col :span="12">
        	<el-form-item label="巡检类型" prop="checkType">
        	          <el-select v-model="item.checkType" placeholder="请选择巡检类型">
        	            <el-option
        	              v-for="dict in dict.type.patrol_type"
        	              :key="dict.value"
        	              :label="dict.label"
        	              :value="dict.value"
        	            ></el-option>
        	          </el-select>
        	        </el-form-item>
        </el-col>
        <el-col :span="12">
        	<el-form-item label="巡检时间" prop="checkTime">
            <el-time-picker
            arrow-control
                v-model="item.checkTime"
            value-format="HH:mm:ss"
                placeholder="巡检时间">
              </el-time-picker>
        	        </el-form-item>
        </el-col>
        <el-col :span="24" style="position: relative;" >
        	<el-form-item label="巡检路线" prop="checkAddress">
        	  <el-input style="width:95%;" v-model="item.checkAddress" type="textarea" placeholder="请输入内容" />
        	</el-form-item>
         <img @click="shangwudel(index)" style="width: 16px; height: 16px;position: absolute;right: 30px;top:18px;" src="../../../assets/images/icon_qjlb_del.png" alt="" >
        </el-col>
      </el-col>

    </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center;margin-top:10px;">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>

    <!-- 添加或修改课程-时间对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1300px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
		  <el-row>
			  <el-col :span="6">
				  <el-form-item label="学校名称" prop="schoolId">
				  					    <!-- <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" /> -->
				  					  <el-select    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="6">
			  	<el-form-item label="第一节课" prop="oneStartTime">
			  	  <el-time-picker
			  	      v-model="form.oneStartTime"
					  @change="nhyesefr"
					  value-format="HH:mm"
			  	      placeholder="选择第一节课开始时间">
			  	    </el-time-picker>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第一节课" prop="oneEndTime">
			  	  <el-time-picker clearable
			  	    v-model="form.oneEndTime"
			  	    value-format="HH:mm"
			  	    placeholder="请选择第一节课结束时间">
			  	  </el-time-picker>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第二节课" prop="twoStartTime">
			  	  <el-time-picker clearable
			  	    v-model="form.twoStartTime"
			  	    value-format="HH:mm"
			  	    placeholder="请选择第二节课开始时间">
			  	  </el-time-picker>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第二节课" prop="twoEndTime">
			  	  <el-time-picker clearable
			  	    v-model="form.twoEndTime"
			  	    el-time-picker
			  	    value-format="HH:mm"
			  	    placeholder="请选择第二节课结束时间">
			  	  </el-time-picker>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第三节课" prop="threeStartTime">
			  	  <el-time-picker clearable
			  	    v-model="form.threeStartTime"
			  	    value-format="HH:mm"
			  	    placeholder="请选择第三节课开始时间">
			  	  </el-time-picker>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
				  <el-form-item label="第三节课" prop="threeEndTime">
				   <el-time-picker clearable
				     v-model="form.threeEndTime"
				     value-format="HH:mm"
				     placeholder="请选择第三节课结束时间">
				   </el-time-picker>
				  </el-form-item>

			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第四节课" prop="fourStartTime">
			  	  <el-time-picker clearable
			  	    v-model="form.fourStartTime"

			  	    value-format="HH:mm"
			  	    placeholder="请选择第四节课开始时间">
			  	  </el-time-picker>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第四节课" prop="fourEndTime">
			  	  <el-time-picker clearable
			  	    v-model="form.fourEndTime"

			  	    value-format="HH:mm"
			  	    placeholder="请选择第四节课结束时间">
			  	  </el-time-picker>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第五节课" prop="fiveStartTime">
			  	  <el-time-picker clearable
			  	    v-model="form.fiveStartTime"

			  	    value-format="HH:mm"
			  	    placeholder="请选择第五节课开始时间">
			  	  </el-time-picker>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第五节课" prop="fiveEndTime">
			  	  <el-time-picker clearable
			  	    v-model="form.fiveEndTime"

			  	    value-format="HH:mm"
			  	    placeholder="请选择第五节课结束时间">
			  	  </el-time-picker>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第六节课" prop="sixStartTime">
			  	  <el-time-picker clearable
			  	    v-model="form.sixStartTime"

			  	    value-format="HH:mm"
			  	    placeholder="请选择第六节课开始时间">
			  	  </el-time-picker>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第六节课" prop="sixEndTime">
			  	  <el-time-picker clearable
			  	    v-model="form.sixEndTime"

			  	    value-format="HH:mm"
			  	    placeholder="请选择第六节课结束时间">
			  	  </el-time-picker>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第七节课" prop="sevenStartTime">
			  	  <el-time-picker clearable
			  	    v-model="form.sevenStartTime"

			  	    value-format="HH:mm"
			  	    placeholder="请选择第七节课开始时间">
			  	  </el-time-picker>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第七节课" prop="sevenEndTime">
			  	  <el-time-picker clearable
			  	    v-model="form.sevenEndTime"

			  	    value-format="HH:mm"
			  	    placeholder="请选择第七节课结束时间">
			  	  </el-time-picker>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第八节课" prop="eightStartTime">
			  	  <el-time-picker clearable
			  	    v-model="form.eightStartTime"
			  	    value-format="HH:mm"
			  	    placeholder="请选择第八节课开始时间">
			  	  </el-time-picker>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="第八节课" prop="eightEndTime">
			  	  <el-time-picker clearable
			  	    v-model="form.eightEndTime"

			  	    value-format="HH:mm"
			  	    placeholder="请选择第八节课结束时间">
			  	  </el-time-picker>
			  	</el-form-item>
			  </el-col>
			  <el-col :span="6">
			  	<el-form-item label="备注" prop="remark">
			  	  <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
			  	</el-form-item>
			  </el-col>
		  </el-row>
      </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 { listTime, getTime, delTime, addTime, updateTime } from "@/api/system/time";
// import { listDept} from "@/api/system/dept";
import { listCheckPointManage, getCheckPointManage, delCheckPointManage, addCheckPointManage, updateCheckPointManage,addCheckPointManageadd } from "@/api/wuguan/checkPointManage";

export default {
  name: "Time",
  dicts: ['sys_normal_disable','patrol_type','patrol_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 课程-时间表格数据
      timeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        schoolName: null,
        oneStartTime: null,
        oneEndTime: null,
        twoStartTime: null,
        twoEndTime: null,
        threeStartTime: null,
        threeEndTime: null,
        fourStartTime: null,
        fourEndTime: null,
        fiveStartTime: null,
        fiveEndTime: null,
        sixStartTime: null,
        sixEndTime: null,
        sevenStartTime: null,
        sevenEndTime: null,
        eightStartTime: null,
        eightEndTime: null,
		schoolId:null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {

      },
      shangwu:[
        {checkType:null,checkAddress:null,checkTime:null},
        {checkType:null,checkAddress:null,checkTime:null},
        {checkType:null,checkAddress:null,checkTime:null}
        ],
      xiawu:[
        {classNumber:null,timeFrame:'PM',endTime:null,startTime:null},
        {classNumber:null,timeFrame:'PM',endTime:null,startTime:null},
        {classNumber:null,timeFrame:'PM',endTime:null,startTime:null},
        ],
      wanzixi:[
        {classNumber:null,timeFrame:'TM',endTime:null,startTime:null},
        {classNumber:null,timeFrame:'TM',endTime:null,startTime:null},
        {classNumber:null,timeFrame:'TM',endTime:null,startTime:null},
        ],
	  deptOptions:[],
    ishge:false
    };
  },
  created() {
	  // this.queryParams.schoolId = this.$store.state.user.schoolId - 0
	  // console.log(this.roleqh(),28)
   // this.getdept()
    // this.getList();

  },
  methods: {
	  getdept(){
	  		  let kuesf={'parentId':0}
	  		  // this.kiuesegh = []
	  		listDept(kuesf).then(response => {
	  		  this.deptOptions = this.handleTree(response.data, "deptId");
          if(this.deptOptions.length !=0){
            this.form.schoolId = this.deptOptions[0].deptId
            this.form.schoolName = this.deptOptions[0].deptName
          }
	  		});
	  },
    /** 查询课程-时间列表 */
    getList() {
      this.loading = true;
      listTime(this.queryParams).then(response => {
        this.timeList = response.rows;
        if(response.rows.length != 0){
          let nhd=[]
          let xis=[]
          let wan=[]
          this.ishge = true
          for(var i = 0; i < response.rows.length; i++){
            this.form.schoolId = response.rows[i].schoolId
            this.form.schoolName = response.rows[i].schoolName
            if(response.rows[i].timeFrame == 'AM'){
              response.rows[i].id = undefined
             nhd.push(response.rows[i])
            }
            if(response.rows[i].timeFrame == 'PM'){
              response.rows[i].id = undefined
              xis.push(response.rows[i])
            }
            if(response.rows[i].timeFrame == 'TM'){
              response.rows[i].id = undefined
              wan.push(response.rows[i])
            }
            // console.log(response.rows[i])
          }
          if(nhd.length != 0){
            this.shangwu = nhd
          }
          if(xis.length != 0){
            this.xiawu = xis
          }
          if(wan.length != 0){
            this.wanzixi = wan
          }
          // console.log(response.rows,nhd)
          // this.shangwu
          // this.form = response.rows[0]
        }else{
           this.ishge = false
        }
        // console.log(this.shangwu)
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      // this.open = false;
      this.reset();
      this.$router.go(-1)

    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        schoolId: null,
        schoolName: null,
        oneStartTime: null,
        oneEndTime: null,
        twoStartTime: null,
        twoEndTime: null,
        threeStartTime: null,
        threeEndTime: null,
        fourStartTime: null,
        fourEndTime: null,
        fiveStartTime: null,
        fiveEndTime: null,
        sixStartTime: null,
        sixEndTime: null,
        sevenStartTime: null,
        sevenEndTime: null,
        eightStartTime: null,
        eightEndTime: 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
      getTime(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改课程-时间";
      });
    },
    slls(){
      for(var l=0; l < this.shangwu.length; l++){
        if(this.shangwu[l].checkAddress == null &&  this.shangwu[l].checkTime == null){
          if(this.shangwu[l].checkType == null){
            this.shangwu.splice(l,1)
            this.slls()
          }
        }
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        // console.log(this.form,34)
        if (valid) {
           this.form.checkPointManageList= []
           this.slls()
           console.log(this.shangwu,7)
           // return
            this.form.checkPointManageList = this.shangwu
            addCheckPointManageadd(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$router.go(-1)
              // this.open = false;
              // this.getList();
            });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      if(this.timeList.length !=0){
        const ids = this.timeList[0].id
      }else{
        this.$modal.msgSuccess("数据已清空");
      }
      // const ids = row.id || this.ids;
      let gew={'schoolId':this.form.schoolId}
	   delTime(gew).then(response => {
	   this.getList();
	   this.$modal.msgSuccess("删除成功");
	  });
      // this.$modal.confirm('是否确认删除课程-时间编号为"' + ids + '"的数据项？').then(function() {
      //   return delTime(ids);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('course/time/export', {
        ...this.queryParams
      }, `time_${new Date().getTime()}.xlsx`)
    },
	nhyesefr(val){
	  console.log(val)
	},
	mjyhes(val){
		console.log(val,this.form.schoolName)
		this.form.schoolName = val.deptName
	},
  shangwuxin(){
    this.shangwu.push({checkType:null,checkTime:null,checkAddress:null},)
  },
  xiawuxin(){
    this.xiawu.push({classNumber:null,timeFrame:'PM',endTime:null,startTime:null},)
  },
  wanzixixin(){
   this.wanzixi.push({classNumber:null,timeFrame:'TM',endTime:null,startTime:null},)
  },
  shangwudel(index){
   this.shangwu.splice(index,1)
  },
  xiawudel(index){
    this.xiawu.splice(index,1)
  },
  wanzixidel(index){
   this.wanzixi.splice(index,1)
   console.log(this.wanzixi)
  }
  }
};
</script>
<style scoped lang="scss">
	.bgtan{
		border-left: 3px solid #4775EA;
		padding-left: 10px;
	}

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