  <template>
   <d2-container>
    <div class="d2-table-view-full" >
       <div class="d2-table-view-header">
			 <el-form size="small" :inline="true" :model="filter" @keyup.enter.native="handleList" class="demo-form-inline">
			   <el-form-item label="规则编号">
			     <el-input v-model="filter.ruleCode" placeholder="规则编号" clearable/>
			   </el-form-item>
			   <el-form-item label="规则名称">
			     <el-input v-model="filter.ruleName" placeholder="规则名称" clearable/>
			   </el-form-item>
				   <el-form-item label="每月天数">
				   <el-input v-model="filter.monthWorkDay" placeholder="每月天数" clearable/>
				 </el-form-item>
				 <el-form-item label="每日工时">
				   <el-input v-model="filter.dayWorkHour" placeholder="每日工时" clearable/>
				 </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>
					<!-- <el-button  size="small" type="primary">删除区域</el-button> -->
 				</div>
       <d2-crud
               title="考勤规则列表"
               ref="d2Crud"
               :options="tableOptions"
               :loading="loading"
               :columns="columns"
               :data="data"
               :rowHandle="rowHandle"
               @delete="handleRowRemove"
							 @edit="handleRowEdit"
							  selection-row
							 @selection-change="handleSelectionChange">
       </d2-crud>
       </div>
       <div class="d2-table-view-footer">
       <el-pagination
               @current-change="handleCurrentChange"
               @size-change="handleSizeChange"
               :page-size="tableOptions.pageList[0]"
               :page-sizes="tableOptions.pageList"
               :current-page.sync="currentPage"
               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="110px" labelPosition="right"  :rules="rules" >
     				<el-row :gutter="20">
     					<el-col :span="12">
     						<el-form-item label-width="80px" label="规则编号" >
     							<el-input v-model="form.ruleCode" placeholder="系统自动生成" disabled/>
     						</el-form-item>
     					</el-col>
							<el-col :span="12">
								<el-form-item label-width="80px" label="规则名称" prop="ruleName">
									<el-input v-model="form.ruleName" placeholder="规则名称"/>
								</el-form-item>
							</el-col>
     					<el-col :span="24">
     						<el-form-item label-width="80px" label="备注">
     							<el-input type="textarea" maxlength="50" v-model="form.rmk" clearable/>
     						</el-form-item>
     					</el-col>
     				</el-row>
							<el-tabs v-model="activeName2" type="card" @tab-click="handleClick" style="height: 360px;overflow: auto">
							<el-tab-pane label="规则" name="first">
								<el-col :span="24">
								<div class="title">
									<span>打卡时间规则</span>
								</div>
								</el-col>
								<el-col :span="12">
								<el-form-item label="上班时间" prop="bgTm" style="margin-top: 20px;">
									<el-time-select
									v-model="form.bgTm"
									: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="endTm" style="margin-top: 20px;">
									<el-time-select
										v-model="form.endTm"
										: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="bigHours"  >
									<el-input   v-model="form.bigHours" style="width: 225px;" placeholder="分钟打卡"/>
								</el-form-item>
								</el-col>
								<el-col :span="12">
								<el-form-item label="下班允许推迟" prop="endHours"  >
									<el-input v-model="form.endHours" style="width: 225px;" placeholder="分钟打卡"/>
								</el-form-item>
								</el-col>
								<el-col :span="12">
								<el-form-item label="请假计算起始" prop="vacateBg"  >
									<el-input v-model="form.vacateBg" style="width: 225px;" placeholder="分钟"/>
								</el-form-item>
								</el-col>
								<el-col :span="12">
								<el-form-item label="重复刷卡间隔" prop="repMin"  >
										<el-input v-model="form.repMin" style="width: 225px;" placeholder="分钟"/>
								</el-form-item>
								</el-col>
							<el-col :span="24">
								<div class="title">
									<span>迟到早退设置</span>
								</div>
								</el-col>
									<el-col :span="12">
								<el-form-item label="迟到时间在" prop="exemptLate" style="margin-top: 20px;" >
									<el-input   v-model="form.exemptLate" style="width: 225px;" placeholder="分钟内忽略"/>
									<!-- <span>分钟内忽略</span> -->
								</el-form-item>
								</el-col>
								<el-col :span="12">
								<el-form-item label="早退时间在" prop="exemptEarly"  style="margin-top: 20px;">
									<el-input v-model="form.exemptEarly" style="width: 225px;" placeholder="分钟内忽略"/>
									<!-- <span>分钟内忽略</span> -->
								</el-form-item>
								</el-col>
								<el-col :span="12">
								<el-form-item label="迟到时间超过" prop="lateMin"  >
									<el-input v-model="form.lateMin" style="width: 225px;" placeholder="分钟算迟到"/>
									<!-- <span>分钟算迟到</span> -->
								</el-form-item>
								</el-col>
								<el-col :span="12">
								<el-form-item label="早退时间超过" prop="earlyMin"  >
										<el-input v-model="form.earlyMin" style="width: 225px;" placeholder="分钟算早退"/>
										<!-- <span>分钟算早退</span> -->
								</el-form-item>
								</el-col>
								<el-col :span="12">
								<el-form-item label="迟到时间超过" prop="lateToAbsence"  >
									<el-input v-model="form.lateToAbsence" style="width: 225px;" placeholder="分钟算缺勤"/>
									<!-- <span>分钟算缺勤</span> -->
								</el-form-item>
								</el-col>
								<el-col :span="12">
								<el-form-item label="早退时间超过" prop="earlyToAbsece"  >
										<el-input v-model="form.earlyToAbsece" style="width: 225px;" placeholder="分钟算缺勤"/>
									<!-- 	<span>分钟算缺勤</span> -->
								</el-form-item>
								</el-col>
						 <el-col :span="24">
						 	<div class="title">
						 		<span>其他设置规则</span>
						 	</div>
						 	</el-col>
				       <el-col :span="24">
								<el-checkbox-group v-model="onRules" class="check">
									<el-checkbox label="0">提前上班</el-checkbox>
									<el-input v-model="form.bfOvertime" style="width: 150px;margin-right: 10px;" placeholder="分钟算加班"/>
									<el-checkbox label="1">加班不计入工时段</el-checkbox>
									<el-checkbox label="2">迟到扣工时</el-checkbox>
								</el-checkbox-group>
							 </el-col>
							<el-col :span="24">
									<el-checkbox-group v-model="offRules" class="check">
										<el-checkbox label="0">推迟下班</el-checkbox>
										<el-input v-model="form.afterToOvertime" style="width: 150px;margin-right: 10px;" placeholder="分钟算加班"/>
										<span></span>
										<el-checkbox label="1">迟到早退不计缺勤</el-checkbox>
										<el-checkbox label="2">早退扣工时</el-checkbox>
									</el-checkbox-group>
							 </el-col>
							 <el-col :span="24">
							 	<div class="title" style="margin-top: 20px;">
							 		<span>打卡时间匹配方法</span>
							 	</div>
							 	</el-col>
								<el-col :span="24">
										<el-checkbox-group v-model="clock" class="check">
											<el-checkbox label="0">允许自动套版</el-checkbox>
											<el-checkbox label="1">上班先早后迟</el-checkbox>
											<el-checkbox label="2">下班先早后迟</el-checkbox>
											<el-checkbox label="3">单次卡算缺勤</el-checkbox>
										</el-checkbox-group>
								 </el-col>
							</el-tab-pane>
							<el-tab-pane label="自动套班" name="second">
								<div class="title">
									<span>自动套班规则</span>
								</div>
								<el-col :span="24">
											<el-checkbox-group v-model="Rules" class="check">
												<el-checkbox label="1">整天匹配班次不成功时列出打卡记录</el-checkbox>
												<el-checkbox label="2">工时不足一天无加班</el-checkbox>
												<el-checkbox label="3">整班次匹配</el-checkbox>
											</el-checkbox-group>
								</el-col>
								<el-col :span="24">
									<el-form-item label-width="88px"  label="上班时间在" prop="resName" style="margin-top: 20px;" >
										<el-time-select
											v-model="form.workDayStart"
											:picker-options="{
												start: '00:00',
												step: '00:01',
												end: '23:59'
											}"
											placeholder="选择时间"
											style="width: 150px;">
										</el-time-select>
										<span>到</span>
										<el-time-select
											v-model="form.workDayEnd"
											:picker-options="{
												start: '00:00',
												step: '00:01',
												end: '23:59'
											}"
											placeholder="选择时间"
											style="width: 150px;">
										</el-time-select>
										<span>之间算当天的工时</span>
										<span style="margin-left: 25px;">是否跨天</span>
										<el-radio style="margin-left: 10px;" v-model="form.isDay" :label="1">不跨天</el-radio>
                    <el-radio v-model="form.isDay" :label="0">跨天</el-radio>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label-width="88px"  label="时段工时在" prop="resName">
										<el-time-select
											v-model="form.hourWorkStart"
											:picker-options="{
												start: '00:00',
												step: '00:01',
												end: '23:59'
											}"
											placeholder="选择时间"
											style="width: 150px;">
										</el-time-select>
											<span>到</span>
										<el-time-select
											v-model="form.hourWorkEnd"
											:picker-options="{
												start: '00:00',
												step: '00:01',
												end: '23:59'
											}"
											placeholder="选择时间"
											style="width: 150px;">
										</el-time-select>
										<span>小时之间有效</span>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label-width="170px"  label="周日、假日加班时间超过" prop="resName">
										<el-input v-model="form.holidayCntHours" style="width: 80px;margin-right: 5px;"/>
										<span>小时超出部分计平时加班</span>
									</el-form-item>
								</el-col>
								</el-tab-pane>
							</el-tab-pane>
							<el-tab-pane label="工作日" name="third">
								<el-col :span="24">
								<div class="title" style="margin-bottom: 20px;">
									<span>工作日设定</span>
								</div>
								</el-col>
								<el-col :span="12">
									<el-form-item    label="每月工作天数" prop="monthWorkDay">
										<el-input v-model="form.monthWorkDay" style="width: 220px;" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item    label="每日工作时数" prop="dayWorkHour">
										<el-input v-model="form.dayWorkHour" style="width: 220px;" />
									</el-form-item>
								</el-col>
								<el-col :span="24">
										<el-checkbox v-model="form.dateRestTime" label="1">按日期方式设定休息时间</el-checkbox>
										<div v-if="form.dateRestTime">
										<span style="font-size: 15px;margin-right: 10px;">休息日期</span>
										<el-date-picker style="width: 150px;" v-model="form.restDate" type="date"	placeholder="选择日期"></el-date-picker>
										 <span style="font-size: 15px;margin-right: 10px;margin-left: 5px;">开始时间</span>
										 	<el-time-select	v-model="form.restDateStart" style="width: 150px;"
										 	:picker-options="{
										 		start: '08:30',
										 		step: '00:15',
										 		end: '18:30'
										 	}"
										 	placeholder="选择时间">
										 </el-time-select>
									 <span style="font-size: 15px;margin-right: 10px;margin-left: 5px;">结束时间</span>
									 	<el-time-select	v-model="form.restDateEnd" style="width: 150px;"
									 	:picker-options="{
									 		start: '08:30',
									 		step: '00:15',
									 		end: '18:30'
									 	}"
									 	placeholder="选择时间">
									 </el-time-select>
									 </div>
										<el-checkbox v-model="form.restCountClocking" label="1">周日/假日计算迟到早退</el-checkbox>
										<el-checkbox v-model="form.overCountClocking" label="1">加班计算迟到早退</el-checkbox>
								</el-col>
								<el-col :span="24">
								<div class="title" style="margin-bottom: 20px;margin-top: 10px;">
									<span>工作时间（休息日不勾，半天不勾）</span>
								</div>
								</el-col>
										 <div>
											<el-checkbox label="1" v-model="form.week1" >星期一</el-checkbox>
										 	<el-time-select :disabled="form.week1"	v-model="form.week1Start" style="width: 220px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="开始时间"/>
											<el-time-select :disabled="form.week1"	v-model="form.week1End" style="width: 220px;margin-left: 20px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="结束时间"/>
											</div>
											<div style="margin-top: 10px;">
											<el-checkbox label="1" v-model="form.week2">星期二</el-checkbox>
											<el-time-select :disabled="form.week2"	v-model="form.week2Start" style="width: 220px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="开始时间"/>
											<el-time-select :disabled="form.week2"	v-model="form.week2End" style="width: 220px;margin-left: 20px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="结束时间"/>
											</div>
												<div style="margin-top: 10px;">
												<el-checkbox label="1" v-model="form.week3" >星期三</el-checkbox>
											<el-time-select :disabled="form.week3"	v-model="form.week3Start" style="width: 220px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="开始时间"/>
											<el-time-select :disabled="form.week3"	v-model="form.week3End" style="width: 220px;margin-left: 20px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="结束时间"/>
											</div>
												<div style="margin-top: 10px;">
												<el-checkbox  label="1" v-model="form.week4" >星期四</el-checkbox>
											<el-time-select :disabled="form.week4"	v-model="form.week4Start" style="width: 220px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="开始时间"/>
											<el-time-select	:disabled="form.week4" v-model="form.week4End" style="width: 220px;margin-left: 20px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="结束时间"/>
											</div>
											<div style="margin-top: 10px;">
												<el-checkbox label="1" v-model="form.week5" >星期五</el-checkbox>
											<el-time-select :disabled="form.week5"	v-model="form.week5Start" style="width: 220px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="开始时间"/>
											<el-time-select :disabled="form.week5"	v-model="form.week5End" style="width: 220px;margin-left: 20px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="结束时间"/>
											</div>
												<div style="margin-top: 10px;">
												<el-checkbox label="1" v-model="form.week6"  >星期六</el-checkbox>
											<el-time-select :disabled="form.week6"	v-model="form.week6Start" style="width: 220px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="开始时间"/>
											<el-time-select	:disabled="form.week6" v-model="form.week6End" style="width: 220px;margin-left: 20px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="结束时间"/>
											</div>
												<div style="margin-top: 10px;">
												<el-checkbox label="1" v-model="form.week7"  >星期天</el-checkbox>
											<el-time-select :disabled="form.week7"	v-model="form.week7Start" style="width: 220px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="开始时间"/>
											<el-time-select :disabled="form.week7"	v-model="form.week7End" style="width: 220px;margin-left: 20px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="结束时间"/>
											</div>
								</el-col>	
								</el-tab-pane>
							</el-tab-pane>
							<el-tab-pane label="计算方式" name="fourth">
								<el-col :span="24">
								<div class="title" style="margin-bottom: 20px;">
									<span>取整基数规则</span>
								</div>
								</el-col>
								<el-col :span="24">
									<el-form-item label-width="100px"  label="工时计算取整" prop="resName" style="margin-top: 20px;" >
										<el-input v-model="form.workCountRound" style="width: 80px;margin-right: 5px;"/>
										<span>分钟</span>
										<el-select v-model="form.workCountRoundRough" placeholder="请选择" style="width: 150px;margin-left: 5px;">
											<el-option label="四舍五入" value="0">四舍五入</el-option>
											<el-option label="去尾" value="1">去尾</el-option>
											<el-option label="进一" value="2">进一</el-option>
										</el-select>
										<span style="margin-left: 25px;">计算结果保留小数</span>
										 	<el-input v-model="form.keepDecimal" style="width: 80px;margin-right: 5px;"/>
								    <span>位</span>
									</el-form-item>
								</el-col> 
								<el-col :span="24">
									<el-form-item label-width="100px"  label="加班计算取整" prop="resName" style="margin-top: 20px;" >
										<el-input v-model="form.overCountRound" style="width: 80px;margin-right: 5px;"/>
										<span>分钟</span>
										<el-select v-model="form.overCountRoundRough" placeholder="请选择" style="width: 150px;margin-left: 5px;">
											<el-option label="四舍五入" value="0">四舍五入</el-option>
											<el-option label="去尾" value="2">去尾</el-option>
											<el-option label="进一" value="1">进一</el-option>
										</el-select>
									</el-form-item>
								</el-col> 
								<el-col :span="24">
									<el-form-item label-width="100px"  label="迟到计算取整" prop="resName" style="margin-top: 20px;" >
										<el-input v-model="form.lateCountRound" style="width: 80px;margin-right: 5px;"/>
										<span>分钟</span>
										<el-select v-model="form.lateCountRoundRough" placeholder="请选择" style="width: 150px;margin-left: 5px;">
											<el-option label="四舍五入" value="0">四舍五入</el-option>
											<el-option label="去尾" value="2">去尾</el-option>
											<el-option label="进一" value="1">进一</el-option>
										</el-select>
									</el-form-item>
								</el-col> 
								<el-col :span="24">
									<el-form-item label-width="100px"  label="请假计算取整" prop="resName" style="margin-top: 20px;" >
										<el-input v-model="form.leaveCountRound" style="width: 80px;margin-right: 5px;"/>
										<span>分钟</span>
										<el-select v-model="value" placeholder="请选择" style="width: 150px;margin-left: 5px;">
											<el-option label="四舍五入" value="0">四舍五入</el-option>
											<el-option label="去尾" value="2">去尾</el-option>
											<el-option label="进一" value="1">进一</el-option>
										</el-select>
									</el-form-item>
								</el-col> 
								<el-col :span="24">
										<div class="check">
											<el-checkbox v-model="form.dailyOverBill" label="1">日常加班需加班单</el-checkbox>
											<el-checkbox v-model="form.weekOverBill" label="1">周日加班需加班单</el-checkbox>
											<el-checkbox v-model="form.holidayOverBill" label="1">假日加班需加班单</el-checkbox>
											<el-checkbox v-model="form.subsectionCountWork" label="1">分段统计工时</el-checkbox>
											<div v-if="form.subsectionCountWork">
												<span style="font-size: 15px;margin-right: 10px;">白班时间</span>
												<el-time-select	v-model="form.dayShift" style="width: 220px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="开始时间"/>
												<span style="font-size: 15px;margin-left: 10px;">到</span>
												<el-time-select	v-model="form.dayShift" style="width: 220px;margin-left: 20px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="结束时间"/>
												<div>
														<span style="font-size: 15px;margin-right: 10px;">中班时间</span>
													<el-time-select	v-model="form.middleShift" style="width: 220px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="开始时间"/>
													<span style="font-size: 15px;margin-left: 10px;">到</span>
													<el-time-select	v-model="form.middleShift" style="width: 220px;margin-left: 20px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="结束时间"/>
												</div>
												<div>
														<span style="font-size: 15px;margin-right: 10px;">晚班时间</span>
													<el-time-select	v-model="form.nightShift" style="width: 220px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="开始时间"/>
													<span style="font-size: 15px;margin-left: 10px;">到</span>
													<el-time-select	v-model="form.nightShift" style="width: 220px;margin-left: 20px;" :picker-options="{start: '08:30',step: '00:15',end: '18:30' }" placeholder="结束时间"/>
												</div>
											</div>
											</div>
								 </el-col>
								 <el-col :span="24">
								 <div class="title" style="margin-top: 20px;">
								 	<span>其他计算规则</span>
								 </div>
								</el-col> 
							 <el-col :span="24">
							<el-checkbox-group v-model="RulesCount" class="check">
								<el-checkbox label="0">周日不加班算缺勤</el-checkbox>
								<el-checkbox label="1">假日不加班算缺勤</el-checkbox>
							</el-checkbox-group>
							</el-col>
							</el-tab-pane>
						</el-tabs>
     			</el-form>
     			<span slot="footer" class="dialog-footer">
     		<zl-button :loading="staLoading"  @click="operInstance('form')"/> 
     	</span>
     </el-dialog>
   </d2-container>
 </template>
 <script>
   import { getRulesByPage,saveOrUpdataRules,getRulesById,delRulesById} from '../../../api/att/system'
   import {tableOptions} from '../../../assets/options'
 	import util from '../../../libs/util'
   export default {
     name: 'system-address',
    /* components:{
       ApartmentTree,
 			teamShift
     }, */
     data () {
       return {
				 isDisabled:false,
 					func:{
 					add:false,
 					delete:false,
 					update:false,
 					select:false,
 				},
				value:'',
				 activeName2: "first",
				 resId:[],
				 multipleSelection:[],
				type:'equ',
 				imageUrl:'',
				quId:'',
				quName:'',
 				falg:true,
 				staLoading:false,
 				isExpend:true,
 				selection:[],
				ruleId:[],
         tableOptions,
				 	options:[
				 	{ value: '0',label: '否'},{value: '1',label: '是'}
				 ],
         filterText:'',
         loading:false,
         operVisible:false,
         isEdit: false,
         diaLogName:'新增',
				  wrokTime:[],
					onRules:[],
					offRules:['1'],
					clock:['1','2','0'],
					Rules:[],
					RulesCount:[],
         form:{
					 shiftsId:'102252ab204e42de8769837383b13db8',
					 ruleId:'',
 					 ruleCode:'',
					 ruleName:'',
					 rmk:'',
					 bgTm:'',
					 endTm:'',
					 bigHours:'30',
					 endHours:'30',
					 vacateBg:'30',
					 repMin:'10',
					 exemptLate:'',
					 lateMin:'',
					 lateToAbsence:'',
					 exemptEarly:'',
					 earlyMin:'',
					 earlyToAbsece:'',
					 bfOvertime:'30',
					 onOtherRules:'',
					 afterToOvertime:'30',
					 offOtherRules:'',
					 clockMethod:'',
					 classRules:'',
					 beWorkSameDay:'',
					 hourWorkValid:'',
					 isDay:1,
					 holidayCntHours:'',
					 week:'',
					 week1:true,
					 week2:true,
					 week3:true,
					 week4:true,
					 week5:true,
					 week6:false,
					 week7:false,
					 week1Start:'',
					 week1End:'',
					 week2Start:'',
					 week2End:'',
					 week3Start:'',
					 week3End:'',
					 week4Start:'',
					 week4End:'',
					 week5Start:'',
					 week5End:'',
					 week6Start:'',
					 week6End:'',
					 week7Start:'',
					 week7End:'',
					 monthWorkDay:'22',
					 dayWorkHour:'8',
					 dateRestTime:0,
					 restDate:'',
					 restDateStart:'',
					 restDateEnd:'',
					 restCountClocking:0,
					 overCountClocking:0,
					 workCountRound:'',
					 workCountRoundRough:'',
					 lateCountRound:'',
					 lateCountRoundRough:'',
					 leaveCountRound:'',
					 leaveCountRoundRough:'',
					 keepDecimal:'',
					 dailyOverBill:0,
					 weekOverBill:0,
					 holidayOverBill:0,
					 subsectionCountWork:0,
					 dayShift:'',
					 middleShift:'',
					 nightShift:'',
					 otherRulesCount:'',
					 isDelete:'',
					 creator:'',
					 creTm:'',
					 updator:'',
					 updTm:'',
					 hourWorkEnd:'',
					 hourWorkStart:'',
					 workDayEnd:'',
					 workDayStart:'',
					 startDayShift:'',
					 endDayShift:'',
					 startMiddleShift:'',
					 endMiddleShift:'',
					 startNightShift:'',
					 endNightShift:''
         },
         filter:{
					ruleCode:'',	
					ruleName:'',
					monthWorkDay:'',	
					dayWorkHour:'',
           pageSize: 10,
           pageNum:1,
         },
         pagination:{
           total: 0
       },
         currentPage:1,
         columns: [
 					{
 						title: '序号',
 						key: 'index',
 						minWidth: '50',
 						formatter (row, column, cellValue, index) {
 							return index+1
 						}
 					},
           {
             title: '规则编号',
             key: 'ruleCode',
             minWidth: '100',
 						showOverflowTooltip: true
           },
           {
             title: '规则名称',
             key: 'ruleName',
             minWidth: '100',
 						showOverflowTooltip: true
           },
           /* {
             title: '状态',
             key: 'status',
             minWidth: '80',
             showOverflowTooltip: true,
						 formatter (row, column, cellValue, index) {
						 	if(cellValue === "0"){
						 		return '禁用'
						 	}else if(cellValue === "1"){
						 		return '启用'
						 	} 
						 }
           }, */
 					{
 					  title: '每月天数',
 					  key: 'monthWorkDay',
 					  minWidth: '100',
 					  showOverflowTooltip: true
 					},
					 {
					  title: '每日工时',
					  key: 'dayWorkHour',
					  minWidth: '150',
					  showOverflowTooltip: true
					}
         ],
         rowHandle: {
           columnHeader: '操作',
           minWidth: '200',
           align:'center',
          custom: [
 						{
 								text: '编辑',
 								type: 'primary',
 								size: 'small',
 								emit: 'edit'
 							},
 						{
 							 text: '删除',
 							 type: 'danger',
 							 size: 'small',
 							 emit: 'delete'
 						 }
            
           ],
 
         },
         data: [],
         	rules: {
           ruleName: [{ required: true, message: "请输入规则", trigger: "blur" }], 
					 levelNum: [{ required: true, message: "请选择", trigger: "change" }]
         }
       }
     },
		 watch:{
		   	'form.levelNum':function(val){
					if(val === '1'){
						this.form.parentId = ''
						this.form.superName = ''
					}else if(val === '0'){
						this.form.parentId = this.quId
						this.form.superName = this.quName
					}
				}
		 },
     methods: {
			 action(data){
				 if(data.alias === 'top'){
					 this.filter.parentId = ''
				 }else{
					 this.filter.parentId = data.id
				 }
				  this.falg = false
					this.quId = data.id
					this.quName = data.name
				  this.form.parentId = data.id
				  this.form.superName = data.name
			  this.handleList()
			 },
			 getOrgId(val){
			 	this.form.orgId = val
			 },
 			handleSelectionChange (selection) {
 			  this.selection = selection
 			},
       handleList (val) {
         if(val){this.filter.pageNum=1
         this.currentPage = 1
         }
         this.loading = true
         getRulesByPage(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()
       },
       operInstance () {
					this.form.onOtherRules = this.onRules.join(",")
					this.form.offOtherRules = this.offRules.join(",")
					this.form.clockMethod = this.clock.join(",")
					this.form.classRules = this.Rules.join(",")
					this.form.otherRulesCount = this.RulesCount.join(",")
					this.form.dateRestTime?1:0
					this.form.restCountClocking=this.form.restCountClocking?1:0 
					this.form.overCountClocking=this.form.overCountClocking?1:0
					this.form.dailyOverBill=this.form.dailyOverBill?1:0
					this.form.weekOverBill=this.form.weekOverBill?1:0
					this.form.holidayOverBill=this.form.holidayOverBill?1:0
					this.form.subsectionCountWork=this.form.subsectionCountWork?1:0
					this.form.week1 = this.form.week1?1:0
					this.form.week2 = this.form.week2?1:0
					this.form.week3 = this.form.week3?1:0
					this.form.week4 = this.form.week4?1:0
					this.form.week5 = this.form.week5?1:0
					this.form.week6 = this.form.week6?1:0
					this.form.week7 = this.form.week7?1:0
					this.form.week =this.form.week1+','+this.form.week2+','+this.form.week3+','+this.form.week4+','+this.form.week5+','+this.form.week6+','+this.form.week7
				 this.$refs['form'].validate((valid) => {
							 if (valid) {
								this.staLoading=true
								 saveOrUpdataRules (this.form).then(res=>{
									this.staLoading=false
									 this.operVisible = false
									 this.$message({
										 message: this.form.ruleId?'编辑成功':'新增成功',
										 type: 'success'
									 })
									 this.handleList()
								 }).catch(err=>{
									this.staLoading=false
								})
							 }
						 })
       },
      handleRowEdit ({index, row}) {
        this.isEdit = true
         this.diaLogName = '编辑'
 				let ruleId = row.ruleId
 				getRulesById({ruleId}).then(res=>{
 				   this.form=res.rules
					this.onRules = res.rules.onOtherRules?res.rules.onOtherRules.split(','):[]
					 this.offRules =res.rules.offOtherRules?res.rules.offOtherRules.split(','):[]
					 this.clock =res.rules.clockMethod?res.rules.clockMethod.split(','):[] 
					 this.Rules = res.rules.classRules?res.rules.classRules.split(','):[]
					 this.RulesCount =res.rules.otherRulesCount?res.rules.otherRulesCount.split(','):[] 
					 let arr = res.rules.week.split(',')
					 this.form.week1 = arr[0] === '1'?true:false
					 this.form.week2 = arr[1] === '1'?true:false
					 this.form.week3 = arr[2] === '1'?true:false
					 this.form.week4 = arr[3] === '1'?true:false
						this.form.week5 = arr[4] === '1'?true:false
						this.form.week6 = arr[5] === '1'?true:false
						this.form.week7 = arr[6] === '1'?true:false
					 /* this.onRules=[]
					 this.offRules=[]
					 this.clock=[]
					  this.Rules=[]
						this.RulesCount=[] */
					  this.operVisible = true
 				})
       },
       handleRowRemove ({index, row}) {
				 this.delete(row.ruleId)
       },
			  onMutilDelClick(){
					this.isDisabled = true
					setTimeout(() => {
					  this.isDisabled = false
					}, 2000)
			   if(!this.selection.length){
			     this.$message({
			       message: '请选择记录',
			       type: 'error'
			     })
					 return false
			   } 
				 this.ruleId = []
				   this.selection.forEach((item,index)=>{
				   this.ruleId.push(item.ruleId)
				 })
				 this.ruleId=this.ruleId.join(",")
				 this.delete(this.ruleId)
			 },
			 delete(ruleIds){
				   this.$confirm(`确定要删除吗?`, '确认操作', {
				   confirmButtonText: '确定',
				   cancelButtonText: '放弃',
				   type: 'warning'
				 }).then(() => {
				   delRulesById({ruleIds}).then(res=>{
				     this.$message({
				       message: '删除成功',
				       type: 'success'
				     })
				    this.handleList()
				   })
				 })
			 },
 			handleClick(){
				
			},
       clearForm () {
         this.form = {
 					 ruleId:'',
 					ruleCode:'',
 					ruleName:'',
 					shiftsId:'',
 					rmk:'',
 					bgTm:'',
 					endTm:'',
 					bigHours:'',
 					endHours:'',
 					vacateBg:'',
 					repMin:'',
 					exemptLate:'',
 					lateMin:'',
 					lateToAbsence:'',
 					exemptEarly:'',
 					earlyMin:'',
 					earlyToAbsece:'',
 					bfOvertime:'',
 					onOtherRules:'',
 					afterToOvertime:'',
 					offOtherRules:'',
 					clockMethod:'',
 					classRules:'',
 					beWorkSameDay:'',
 					hourWorkValid:'',
 					isDay:'1',
 					holidayCntHours:'',
 					week1:false,
 					week2:false,
 					week3:false,
 					week4:false,
 					week5:false,
 					week6:false,
 					week7:false,
 					week1Start:'',
 					week1End:'',
 					week2Start:'',
 					week2End:'',
 					week3Start:'',
 					week3End:'',
 					week4Start:'',
 					week4End:'',
 					week5Start:'',
 					week5End:'',
 					week6Start:'',
 					week6End:'',
 					week7Start:'',
 					week7End:'',
 					monthWorkDay:'',
 					dayWorkHour:'',
 					dateRestTime:0,
 					restDate:'',
 					restDateStart:'',
 					restDateEnd:'',
 					restCountClocking:0,
 					overCountClocking:0,
 					workCountRound:'',
 					workCountRoundRough:'',
 					lateCountRound:'',
 					lateCountRoundRough:'',
 					leaveCountRound:'',
 					leaveCountRoundRough:'',
 					keepDecimal:'',
 					dailyOverBill:0,
 					weekOverBill:0,
 					holidayOverBill:0,
 					subsectionCountWork:0,
 					dayShift:'',
 					middleShift:'',
 					nightShift:'',
 					otherRulesCount:'',
 					isDelete:'',
 					creator:'',
 					creTm:'',
 					updator:'',
 					updTm:'',
 					hourWorkEnd:'',
 					hourWorkStart:'',
 					workDayEnd:'',
 					workDayStart:'',
					startDayShift:'',
					endDayShift:'',
					startMiddleShift:'',
					endMiddleShift:'',
					startNightShift:'',
					endNightShift:''
         }
         this.isEdit = false
         this.diaLogName = '新增'
       }
     },
     mounted () {
 			//this.getFunction()
 			//this.tableOptions.pageList = [20,50,100,200,500]
       this.filter.pageSize = this.tableOptions.pageList[0]
       this.tableOptions = this.$calcTableHeight(tableOptions,90)
 			this.handleList()
     }
   }
 </script>
 <style>
	 .title{
		 width: 100%;
		 height:35px ;
		 background: #F5F5F5;
	 }
	 .title span{
		 line-height: 35px;
		 margin-left: 10px;
	 }
	 .check{
		 margin-top: 10px;
		 font-size: 35px;
	 }
	/* .check input{
		 font-size: 15px;
		 margin-right: 10px;
	 } */
 </style> 