<template>
  <d2-container>
    <div class="d2-table-view-full">
      <div class="d2-table-view-header">
        <el-form label-width="90px" labelPosition="center" size="small" :inline="true" :model="filter" @keyup.enter.native="handleList" class="demo-form-inline">
          <el-form-item label="加班日期">
            <el-date-picker
                    v-model="time"
                    type="datetimerange"
										style="width: 350px;"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @change="dateChange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="加班单号">
						<el-input v-model="filter.leaveOverCode" clearable/>
          </el-form-item>
          <el-form-item label="申请人">
            <el-input v-model="filter.userNm" clearable/>
          </el-form-item>
					<!-- <el-form-item label="工号">
						<el-input v-model="filter.empCode"/>
					</el-form-item>
					<el-form-item label="请假类别">
						<custom-select :isAll="true" style="width: 180px;" :value="filter.leaveType"  v-model="filter.leaveType" typeName="请假类型" placeholder="请假类型" clearable/>
					</el-form-item> -->
				<!-- 	<el-form-item label="部门">
					 <department-tree @clearInput="clearDepartment" v-model="filter.levelCode" style="width: 260px;"/>
					</el-form-item> -->
          <el-form-item>
            <el-button   type="primary" @click="handleList('1')">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="d2-table-view-content">
				 <div class="d2-table-view-handle">
					  <el-button  @click="operVisible = !operVisible"  size="small" icon="el-icon-plus"  >加班申请</el-button>
					 <el-button    size="small" @click="onMutilDelClick()" :disabled="isDisabled">批量删除</el-button>
				</div>
        <d2-crud
                title="加班登记列表"
                ref="d2Crud"
                :loading="loading"
                :columns="columns"
                :data="data"
                :options="tableOptions"
								:rowHandle="rowHandle"
								@edit="handleRowEdit"
								@delete="handleRowRemove"
								selection-row
								@selection-change="handleSelectionChange">
								<label slot="headerButton" style="margin-right: 15px; color: red;"  >合计：{{total}}行</label>
								<label slot="headerButton" style="margin-right: 30px;  color: red;"  >时长：{{money}}</label>
				</d2-crud>
      </div>
      <div class="d2-table-view-footer">
        <el-pagination
        				@current-change="handleCurrentChange"
        				@size-change="handleSizeChange"
                :current-page.sync="currentPage"
        				:page-size="tableOptions.pageList[0]"
        				:page-sizes="tableOptions.pageList"
        				layout="total,sizes, prev, pager, next,jumper"
        				:total="pagination.total">
        </el-pagination>
      </div>
    </div>
				<el-dialog
								:title="diaLogName"
								:visible.sync="operVisible"
								@close="clearForm"
								width="900px"
								:close-on-click-modal="false">
					<el-form ref="form" :model="form" label-width="90px" labelPosition="right" :rules="rules" >
						<el-row :gutter="20">
						<!-- 	<el-col :span="24">
							<el-form-item label="" >
							<el-radio change="clear" style="margin-left: 38%;" v-model="form.lsTerm" label="0">学生</el-radio>
              <el-radio change="clear" v-model="form.lsTerm" label="1">教工</el-radio>
							</el-form-item>
							</el-col> -->
							<el-col :span="12">
								<el-form-item label="加班类型" prop="leaveOverType">
									<custom-select style="width: 100%;" :value="form.leaveOverType"  v-model="form.leaveOverType" typeName="加班类型" placeholder="加班类型" clearable/>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="申请人">
									<!-- <saff-tree :str="form.empName" v-model="form.empId" ref="saffTree"/> -->
									 <staff-tree  ref="saffTree" :depType="type" :strr="form.userNm" v-model="form.userId" @depNm="depNm"></staff-tree>
								</el-form-item>
							</el-col>
							<!-- <el-col :span="12">
								<el-form-item label="岗位">
									<el-input disabled v-model="form.work" clearable  />
								</el-form-item>
							</el-col> -->
							<el-col :span="12">
								<el-form-item label="部门">
									<el-input disabled v-model="form.depNm" clearable/>
								</el-form-item>
							</el-col>
							 
								<!-- <el-col :span="12">
									<el-form-item label="请假日期">
											<el-date-picker
												v-model="form.leaveOverStart"
												type="date"
												value-format="yyyy-MM-dd"
												placeholder="选择日期">
											</el-date-picker>
									</el-form-item>
								</el-col> -->
									<!-- <el-col :span="6">
									<el-form-item label="开始时间" >
											<el-input   type="time"   v-model="form.sTimes " />
											<el-time-select
												v-model="form.sTimes"
												:picker-options="{
													start: '00:00',
													step: '00:01',
													end: '23:59'
												}"
												placeholder="选择时间">
												</el-time-select>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="结束时间" >
										<el-input type="time"  v-model="form.eTimes" />
										<el-time-select
											v-model="form.eTimes"
											:picker-options="{
												start: '00:00',
												step: '00:01',
												end: '23:59'
											}"
											placeholder="选择时间">
											</el-time-select>
									</el-form-item>
								</el-col> -->
									<!-- <el-col :span="12">
									<el-form-item label="请假时长" prop="leaveHours1">
										<el-input   v-model="form.leaveHours1 " maxlength="5" placeholder="点击获取请假时长" @focus="leaveHours"/>
									</el-form-item>
								</el-col> -->
							 
								 
								<el-col :span="12">
									<el-form-item label="加班日期" prop="time_1">
										 <el-date-picker
											v-model="time_1"
											type="datetimerange"
											value-format="yyyy-MM-dd HH:mm:ss"
											@change="dateChange_1"
											range-separator="至"
											start-placeholder="开始日期"
											end-placeholder="结束日期">
										</el-date-picker>
									</el-form-item>
								</el-col>
									<!-- <el-col :span="12">
									<el-form-item label="请假时长" >
										<el-input v-model="form.leaveHours1 " maxlength="5"  @blur="cheack"  />
									</el-form-item>
								</el-col> -->
					 
							<el-col :span="24">
								<el-form-item label="加班原因" prop="remarks">
									<el-input type="textarea" maxlength="50" v-model="form.remarks" clearable/>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<span slot="footer" class="dialog-footer">
				<el-button :loading="leaLoading" @click="operInstance('form')">确 定</el-button>
			</span>
		</el-dialog>
  </d2-container>
</template>
<script>
  import { getOverByPage,delLerverById,saveOrUpdataOver,getLerverById} from '../../../api/att/leave'
  import { tableOptions } from '../../../assets/options'
	//import SaffTree from './components/saffTree'
	import leaveTimeDel from './components/leaveTimeDel'
	import util from '../../../libs/util'
	 //import departmentTree from '../../../components/department-tree/index'
  export default {
    name: 'attendance-leave',
		components:{
			//SaffTree,
			leaveTimeDel,
			//departmentTree
		},
    data () {
			let checkleaveHours = (rule, value, callback) => {
				let reg=/^([0-1][0-9]|[2][0-3]):([0-5][0-9])$/
			  if(!reg.test(value)){
				return callback(new Error('请输入正确格式的请假时长 如 08:00'))
			}else{
				callback ()
			}
			}
      return {
				isDisabled:false,
				total:0,
				money:0,
				leaLoading:false,
				func:{
					select:false,
					update:false,
					add:false,
					delete:false,
					out:false
				},
				leaveOverId:[],
				selection:[],
				diaLogName:'请假申请',
				operVisible:false,
        time: '',
				time_1:[],
				type:'teacher',
        loading: false,
        tableOptions,
        currentPage:1,
				stTime:'',
				leaveOverEnd:'',
        filter: {
					empId:'',
          leaveOverStart: '',
          leaveOverEnd: '',
          leaveOverCode: '',
          userNm: '',
          pageSize: 10,
          pageNum: 1,
        },
				form:{
					leaveOverId:'',
					lsTerm:'0',
					leaveOverType:'',
					leaveOverStart: '',
					leaveOverEnd: '',
					userId:'',
					userNm:'',
					remarks:'',
					leaveOrOver:'2'
				},
        pagination: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            key: 'index',
            minWidth: '50',
            formatter (row, column, cellValue, index) {
              return index+1
            }
          },
          {
            title: '加班单号',
            key: 'leaveOverCode',
            minWidth: '200'
          },
          {
            title: '申请人',
            key: 'userNm',
            minWidth: '150',
          },
					/* {
					  title: '工号',
					  key: 'empCode',
					  minWidth: '150',
					}, */
          {
            title: '所属部门',
            key: 'depNm',
            minWidth: '150',
          },
          {
            title: '加班类别',
            key: 'typeName',
            minWidth: '90'
          },
					/* {
					  title: '长短假',
					  key: 'lsTerm',
					  minWidth: '90',
						formatter (row, column, cellValue, index) {
						  if(cellValue === '0'){
								return '短假'
							}else if(cellValue === '1'){
								return '长假'
							}
						}
					}, */
					{
					  title: '加班日期',
					  key: 'leaveOverStart',
					  minWidth: '280',
						component: { 
							name: leaveTimeDel,
						 }
					},
				/* 	{
						title: '请假时长',
						key: 'leaveHours',
						minWidth: '110',
						formatter(row, column, cellValue, index) {
							if(cellValue){
								return cellValue+"小时"
							}else{
								return cellValue
							}
								
						}
					}, */
          /* {
            title: '登记时间',
            key: 'createDate',
            minWidth: '180',
          }, */
					{
					  title: '加班原因',
					  key: 'remarks',
					  minWidth: '180',
					},
					{
						title: '登记人',
						key: 'creatorNm',
						minWidth: '150',
					}
        ],
				rowHandle: {
					columnHeader: '操作',
					minWidth: '160',
					align: 'center',
					custom: [
						{
							text: '编辑',
							type: 'primary',
							size: 'small',
							emit: 'edit'
						},
						{
							text: '删除',
							type: 'danger',
							size: 'small',
							emit: 'delete'
						}
					],
        },
				 rules: {
					        leaveOverType:[{required: true, message: '请选择请假类别', trigger: 'change' }],
					       //leaveHours:[{validator: checkleaveHours1, trigger: 'blur' }],
					       //time_1:[{required: true, message: '请选择请假日期', trigger: 'blur' }]
				          },
        data: []
      }
    },
		watch: {
			'form.lsTerm':function(val){
				this.$nextTick(() => {
				this.$refs.saffTree.cleanName()
				});
				if(val === '1'){
					this.type = 'teacher'
				}else if(val === '0'){
					this.type = 'student'
				}
			}
		},
    methods: {
			depNm(val){
				this.form.depNm = val
			},
			 clearDepartment(){
			  this.filter.orgId=''
			},
			cheack(){
				let reg=/^([0-1][0-9]|[2][0-3]):([0-5][0-9])$/
				if(!reg.test(this.form.leaveHours1)){
					this.$message({
					message: '请输入正确的格式 如 08:00',
					type: 'error'
				})
				return false
				}
			},
      handleList (val) {
        if(val){this.filter.pageNum=1
        this.currentPage = 1}
      this.loading = true
        getOverByPage(this.filter).then(res => {
          this.loading = false
          this.data = res.page.list
          this.pagination.total = res.page.total
        }).catch(err => {
          this.loading = false
        })
      },
      handleCurrentChange (val) {
        this.filter.pageNum = val
        this.handleList()
      },
			handleSizeChange (val) {
			this.filter.pageNum = 1
			this.filter.pageSize = val
			this.handleList()
			},
      dateChange (val) {
       if(val == null){
       	this.filter.leaveOverStart = ''
       	this.filter.leaveOverEnd = ''
       }else{
       	this.filter.leaveOverStart = val[0] 
       	this.filter.leaveOverEnd = val[1]
       }
      },
			dateChange_1 (val) {
			if(val == null){
				this.form.leaveOverStart = ''
				this.form.leaveOverEnd = ''
			}else{
				this.form.leaveOverStart = val[0] 
				this.form.leaveOverEnd = val[1]
			}
			},
			operInstance(formName){
				/* if(this.form.lsTerm == '0'){
					 if(this.form.sTimes == '' || this.form.eTimes == ''){
						 	this.$message({
						 	message: '请输入开始时间或结束时间',
						 	type: 'error'
						 })
						 return false
					 }
				} */
					this.$refs[formName].validate((valid) => {
							if (valid) {
								this.leaLoading=true
								saveOrUpdataOver(this.form).then(res => {
									this.operVisible = false
									this.leaLoading=false
									this.$message({
										message: this.form.id == ''?'新增成功':'编辑成功',
										type: 'success'
									})
									this.handleList()
								}).catch(err => {
						  this.leaLoading=false
						})
							 }
							})
					
			},
			handleRowEdit({row,index}){
				this.diaLogName='编辑'
				let leaveOverId = row.leaveOverId
				let leaveOrOver = '2'
				getLerverById({leaveOverId,leaveOrOver}).then(res => {
					  this.form = res.lerverOver
						this.$set(this.time_1,0,res.lerverOver.leaveOverStart)
						this.$set(this.time_1,1,res.lerverOver.leaveOverEnd)
					 this.operVisible=true
				})
			},
			handleRowRemove({row,index}){
			  this.detele(row.leaveOverId)
			},
			handleSelectionChange (selection) {
			  this.selection = selection
			},
			 onMutilDelClick(){
				 this.isDisabled = true
				 setTimeout(() => {
				   this.isDisabled = false
				 }, 2000)
			  if(!this.selection.length){
			    this.$message({
			      message: '请选择记录',
			      type: 'success'
			    })
					return false
			  } 
				this.leaveOverId=[]
				 this.selection.forEach((item,index)=>{
				 this.leaveOverId.push(item.leaveOverId)
			 })
			 this.leaveOverId=this.leaveOverId.join(",")
			 this.detele(this.leaveOverId)
			},
			detele(leaveOverIds){
				 this.$confirm(`确定要删除吗?`, '确认操作', {
					 confirmButtonText: '确定',
					 cancelButtonText: '放弃',
					 type: 'warning'
			}).then(() => {
					 delLerverById({leaveOverIds}).then(res=>{
						 this.$message({
							 message: '删除成功',
							 type: 'success'
						 })
						this.handleList()
					 })
			})
			},
			 /* exportFile () {
			    if (!this.data.length){
			      this.$message({
			        message: '页面无数据,无法导出',
			        type: 'error'
			      })
			      return false
			    }
			    const token = util.cookies.get('token')
			    window.open(`${process.env.VUE_APP_API}/leave/downLeaveByExcel?empCode=${this.filter.empCode}&empName=${this.filter.empName}&leaveOverStart=${this.filter.leaveOverStart}&leaveOverEnd=${this.filter.leaveOverEnd}&leaveNo=${this.filter.leaveNo}&levelCode=${this.filter.levelCode}&leaveType=${this.filter.leaveType || ''}&token=${token}`)
			}, */
			clear(){
				this.form={
					lsTerm:'0',
					leaveNo:'',
					leaveType:'',
					leaveDate:'',
					empId:'',
					leaveOverStart:'',
					leaveOverEnd:'',
					remarks:'',
					work:'',
					orgId:'',
					empName:'',
					id:'',
					leaveHours1:'',
					sTimes:'',
					eTimes:''
				}
			},
			clearForm(){
				this.leaLoading=false
				this.time_1=[]
				this.diaLogName='请假申请'
				this.$nextTick(() => {
				this.$refs.saffTree.cleanName()
				});
				this.form={
					lsTerm:'0',
					leaveNo:'',
					leaveType:'',
					leaveDate:'',
					empId:'',
					leaveOverStart:'',
					leaveOverEnd:'',
					remarks:'',
					work:'',
					orgId:'',
					empName:'',
					id:'',
					leaveHours1:'',
					sTimes:'',
					eTimes:'',
					leaveOrOver:'2'
				}
			},
	/* 			getFunction () {
			  this.$GetFunction({
			    menuUrl:this.$route.path
			  }).then(res=>{
			    res.data.forEach(item=>{
			      if (item.functionType === 'add') {
			        if (item.remarks === 'true') {
			          this.func.add = true
			        } else {
			          this.func.add = false
			        }
			      } else if(item.functionType === 'select') {
			        if (item.remarks === 'true') {
			          this.func.select = true
			        } else {
			          this.func.select = false
			        }
			      }else if(item.functionType === 'out') {
			        if (item.remarks === 'true') {
			          this.func.out = true
			        } else {
			          this.func.out = false
			        }
			      }  else if(item.functionType === 'update') {
			        if (item.remarks === 'true') {
			          this.$set(this.rowHandle.custom,0,
			            {
			              text: '编辑',
			              type: 'primary',
			              size: 'small',
			              emit: 'edit'
			            },
			          )
			
			        }
			      }else if(item.functionType === 'delete') {
			        if (item.remarks === 'true') {
			          this.$set(this.rowHandle.custom,this.rowHandle.custom.length,
			            {
			              text: '删除',
			              type: 'danger',
			              size: 'small',
			              emit: 'delete'
			            }
			          )
			        }
			      }
			    })
			  })
			} */
    },
    mounted () {
			//this.getFunction()
      this.time = this.$setInitTime()
      this.filter.leaveOverStart = this.time[0].format('yyyy-MM-dd hh:mm:ss')
      this.filter.leaveOverEnd = this.time[1].format('yyyy-MM-dd hh:mm:ss')
			this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions,60)
      this.handleList()
    }
  }
</script>
<style lang="scss" scoped>
	/* /deep/.d2-container-full__body{
		
		.el-input__inner {
			padding: 10px 15px 10px 15px
		}
	} */
	.el-date-editor{
		width: 100%
	}
	
</style>