<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"
                    value-format="yyyy-MM-dd HH:mm:ss"
										:default-time="['00:00:00', '23:59:59']"
                    @change="dateChange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="假日名称" >
            <el-input v-model="filter.hdName"  />
          </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" slot="headerButton">假日登记</el-button>
					  <el-button  :disabled="isDisabled"  size="small" @click="onMutilDelClick()">批量删除</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">
				</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="40%"
								:close-on-click-modal="false">
					<el-form ref="form" :model="form" label-width="80px" labelPosition="left" :rules="rules" >
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="假日名称" prop="hdName" >
									<el-input v-model="form.hdName" clearable maxlength="30"/>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="假日类型" prop="hdType">
									<custom-select :value="form.hdType"  v-model="form.hdType" typeName="假日类型" placeholder="假日类型" clearable style="width: 100%;"/>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="假日日期" prop="time_1">
									<el-date-picker
													v-model="time_1"
													type="datetimerange"
													value-format="yyyy-MM-dd HH:mm:ss"
													:default-time="['00:00:00', '23:59:59']"
													@change="dateChange_1"
													range-separator="至"
													start-placeholder="开始日期"
													end-placeholder="结束日期"
													style="width: 100%;">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="假日描述">
									<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">
				<zl-button :loading="holLoading" @click="operInstance('form')"/> 
			</span>
		</el-dialog>
  </d2-container>
</template>

<script>
  import { getHolidayByPage,saveOrUpdataHoliday ,getHolidayById,delHolidayById} from '../../../api/att/holiday'
  import { tableOptions } from '../../../assets/options'
	import leaveTimeDel from './components/leaveTimeDel'
  export default {
    name: 'attendance-holiday',
		components:{
			leaveTimeDel
		},
    data () {
      return {
				isDisabled:false,
				holLoading:false,
				func:{
					select:false,
					add:false,
					update:false,
					delete:false
					},
				diaLogName:'假日登记',
				operVisible:false,
        time: '',
				time_1:[],
        loading: false,
        tableOptions,
        currentPage:1,
        filter: {
          startTime: '',
          endTime: '',
          hdName: '',
          pageSize: 10,
          pageNum: 1
        },
				selection:[],
				hdId:[],
				form:{
					hdId:'',	
					hdName:'',	
					hdType:'',	
					startTime:'',	
					endTime:'',
					remarks:''
				},
        pagination: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            key: 'index',
            minWidth: '50',
            formatter (row, column, cellValue, index) {
              return index+1
            }
          },
          {
            title: '假日名称',
            key: 'hdName',
            minWidth: '80'
          },
          {
            title: '假日类别',
            key: 'typeName',
            minWidth: '90'
          },
          {
            title: '假日日期',
            key: 'startTime',
            minWidth: '200',
						component: { 
							name: leaveTimeDel,
						},
						showOverflowTooltip: true
          },
					{
					  title: '登记时间',
					  key: 'creTm',
					  minWidth: '150'
					},
					{
						title: '登记人',
						key: 'creatorNm',
						minWidth: '120',
						showOverflowTooltip: true
					},
					{
						title: '描述',
						key: 'remarks',
						minWidth: '90',
					},
					
        ],
				rowHandle: {
					columnHeader: '操作',
					minWidth: '160',
					align: 'center',
					custom: [
						{
							text: '编辑',
							type: 'primary',
							size: 'small',
							emit: 'edit'
						},
						{
							text: '删除',
							type: 'danger',
							size: 'small',
							emit: 'delete'
						}
					],
        },
				rules: {
										hdName:[{required: true, message: '请输入假日名称', trigger: 'blur' }],
									 hdType:[{required: true, message: '请选择假日类型', trigger: 'change' }],
									time_1:[{required: true, message: '请选择请假日期', trigger: 'blur' }]
				         },
        data: []
      }
    },
    methods: {
      handleList (val) {
        if(val){this.filter.pageNum=1
        this.currentPage = 1}
      this.loading = true
        getHolidayByPage(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.startTime = ''
       	this.filter.endTime = ''
       }else{
       	this.filter.startTime = val[0] 
       	this.filter.endTime = val[1]
       }
      },
			dateChange_1 (val) {
			if(val == null){
				this.form.startTime = ''
				this.form.endTime = ''
			}else{
				this.form.startTime = val[0] 
				this.form.endTime = val[1]
			}
			},
			operInstance(formName){
				this.holLoading=true
					this.$refs[formName].validate((valid) => {
						if (valid) {
								saveOrUpdataHoliday(this.form).then(res => {
								this.operVisible = false
								this.holLoading=false
								this.$message({
									message: this.form.hdId == ''?'新增成功':'编辑成功',
									type: 'success'
								})
								this.handleList()
							}).catch(err => {
							  	this.holLoading=false
							})
						}
						})
			},
			handleRowEdit({row,index}){
				this.diaLogName='编辑'
				let hdId = row.hdId
				getHolidayById({hdId}).then(res => {
					 this.form = res.holiday
					 this.$set(this.time_1,0,res.holiday.startTime)
					 this.$set(this.time_1,1,res.holiday.endTime)
					 this.operVisible=true
				})
			},
				handleRowRemove({row,index}){
			  this.detele(row.hdId)
			},
				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.hdId =[]
				 this.selection.forEach((item,index)=>{
				 this.hdId.push(item.hdId)
			 })
			 this.hdId=this.hdId.join(",")
			 this.detele(this.hdId)
			},
			detele(hdIds){
				 this.$confirm(`确定要删除吗?`, '确认操作', {
					 confirmButtonText: '确定',
					 cancelButtonText: '放弃',
					 type: 'warning'
			}).then(() => {
					 delHolidayById({hdIds}).then(res=>{
						 this.$message({
							 message: '删除成功',
							 type: 'success'
						 })
						this.handleList()
					 })
			})
			},
			clearForm(){
				this.holLoading=false
				this.time_1=[]
				this.diaLogName='假日登记'
				this.form={
					hdId:'',	
					hdName:'',	
					hdType:'',	
					startTime:'',	
					endTime:'',
					remarks:''
				}
			},
			/* 	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 === '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.startTime = this.time[0].format('yyyy-MM-dd hh:mm:ss')
      this.filter.endTime = this.time[1].format('yyyy-MM-dd hh:mm:ss')
			this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions,51)
      this.handleList()
    }
  }
</script>
