<template>
  <div style=" background-color: #fff; padding:15px; min-height: calc(100vh - 160px);">
    <div style="margin-top:2px; margin-bottom:15px;" class="inline-block-btn-list">
      <el-button class="first-element-btn" v-if="profile.manager_type > 1" :disabled="multipleSelection.length < 1"
        @click="confirmMultipleDelete" type="primary" plain>批量删除
      </el-button>

      <el-button @click="toDetailPage(0, $event)" type="primary">创建加班规则
      </el-button>

      <el-button @click="ShowRuleDetailBaseDialogVisible" type="primary" style="margin-right:10px;">基础设置
      </el-button>

      <div class="gap-right-8" style="display:inline-block; width:220px;">
        <el-input placeholder="输入关键词查找" ref="search-bar" v-model="filter.keywords" class="input-with-select"
          @keyup.enter.native="onFilterChanged">
          <el-button slot="append" icon="el-icon-search" @click="onFilterChanged"></el-button>
        </el-input>
      </div>

    </div>
    <div v-if="tableData.length!=0">

      <el-table stripe v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark"
        style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="42" v-if="profile.manager_type > 1"></el-table-column>

        <el-table-column prop="name" label="名称"></el-table-column>

        <el-table-column label="规则">

          <template slot-scope="scope">
            <div style="display: table;font-size: 15px;font-weight:bold;">
              <!-- <div style="display: table-cell;"
                v-if=" scope.row.config.workday.enabled == 'true' ||  scope.row.config.workday.enabled == true">工作日：
              </div> -->
              <div style="display: table-cell;">工作日：
              </div>
              <div style="display: table-cell;">


                <div v-if="scope.row.config.workday.type=='review' && (scope.row.config.workday.enabled == 'true' ||  scope.row.config.workday.enabled == true)">按审批时长计算</div>
                <div v-if=" scope.row.config.workday.type=='review_and_checkin' && (scope.row.config.workday.enabled == 'true' ||  scope.row.config.workday.enabled == true)">在审批的时段内，按打卡时长计算</div>
                <div v-if=" scope.row.config.workday.type=='normal' && (scope.row.config.workday.enabled == 'true' ||  scope.row.config.workday.enabled == true)">无需审批，按打卡时长计算</div>

                <div style="display: table-cell;"
                  v-if=" scope.row.config.workday.enabled == 'false' ||  scope.row.config.workday.enabled == false">
                  不允许加班</div>
              </div>
            </div>
            <div style="display: table;">
              <div style="display: table-cell;">休息日：</div>
              <div style="display: table-cell;"
                v-if="scope.row.config.offday.enabled == true || scope.row.config.offday.enabled == 'true'">
                <div v-if="scope.row.config.offday.type=='review'">按审批时长计算</div>
                <div v-if="scope.row.config.offday.type=='review_and_checkin'">在审批的时段内，按打卡时长计算</div>
                <div v-if="scope.row.config.offday.type=='normal'">无需审批，按打卡时长计算</div>
              </div>
              <div style="display: table-cell;"
                v-if="scope.row.config.offday.enabled == false ||  scope.row.config.offday.enabled  == 'false'">不允许加班
              </div>
            </div>

            <div style="display: table;">
              <div style="display: table-cell;">节假日：</div>
              <div style="display: table-cell;"
                v-if="scope.row.config.holiday.enabled == 'true' || scope.row.config.holiday.enabled == true">
                <div v-if="scope.row.config.holiday.type=='review'">按审批时长计算</div>
                <div v-if="scope.row.config.holiday.type=='review_and_checkin'">在审批的时段内，按打卡时长计算</div>
                <div v-if="scope.row.config.holiday.type=='normal'">无需审批，按打卡时长计算</div>
              </div>
              <div style="display: table-cell;"
                v-if="scope.row.config.holiday.enabled == 'false' ||　scope.row.config.holiday.enabled == false">不允许加班
              </div>
            </div>
          </template>
        </el-table-column>


        <el-table-column label="操作" width="120">
          <template slot-scope="scope">

            <el-button type="text" @click="toDetailPage(scope.row.id, $event)">修改
            </el-button>
            <el-button style="color:#f56c6c !important;" type="text" @click="confirmDelete(scope.row.id)">删除
            </el-button>


          </template>
        </el-table-column>
      </el-table>
    </div>
    <center style="margin: 20px 0">
      <el-pagination background layout="total,sizes, prev, pager, next" :page-size="pageLimit" :page-sizes="[10, 20, 50, 100]" :total="totalCount"
        @size-change="handleSizeChange" :current-page.sync="currentPage" @current-change="changePage"></el-pagination>
    </center>
    <el-dialog class="attendance_group" :title="dialog_title" @close="formReset" :visible.sync="RuleDetailDialogVisible"
      width="800px" top="50px">
      <el-scrollbar wrap-class="column-wrapper scrollable-items-container check-item-box dept_tree" :native="false"
        style="height: 450px;">

        <div style="padding:0 80px;">
          <el-form ref="formdata" :model="formdata" label-width="150px">
            <el-form-item label="规则名称" prop="name">
              <el-input style="width:350px;" v-model="formdata.name"></el-input>
            </el-form-item>

            <el-form-item label="">
              <el-radio-group v-model="activeName2" style="margin-bottom: 30px;">
                <el-radio-button label="first">工作日加班</el-radio-button>
                <el-radio-button label="right">休息日加班</el-radio-button>
                <el-radio-button label="bottom">节假日加班</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <transition name="slide-fade">
              <el-form-item label="允许加班" v-if="activeName2=='first'">
                <el-switch v-model="formdata.config.workday.enabled" active-text="" inactive-text="">
                </el-switch>
              </el-form-item>
            </transition>
            <transition name="slide-fade">
              <el-form-item label="计算方式" v-if="activeName2=='first' && formdata.config.workday.enabled">
                <div>
                  <el-radio v-model="formdata.config.workday.type" label="review" name="stype">按审批时长计算</el-radio>
                </div>
                <div>
                  <el-radio v-model="formdata.config.workday.type" label="review_and_checkin" name="stype">
                    在审批的时段内，按打卡时长计算</el-radio>
                </div>
                <div>
                  <el-radio v-model="formdata.config.workday.type" label="normal" name="stype">无需审批，按打卡时长计算</el-radio>
                </div>
              </el-form-item>
            </transition>
            <transition name="slide-fade" v-if="overtimeNone">
              <el-form-item label="扣除休息时间" v-if="activeName2=='first'">
                <el-switch v-model="formdata.config.workday.dislodge_break" active-text="" inactive-text="">
                </el-switch>
              </el-form-item>
            </transition>
            <transition name="slide-fade">
              <el-form-item label="" v-if="activeName2=='first' && formdata.config.workday.dislodge_break">
                <div style="margin-bottom:15px;">
                  <el-radio v-model="formdata.config.workday.dislodge_break_type" label="0" name="dislodge_break_type">
                    设置休息时段</el-radio>



                  <div v-for="(item,index) in formdata.config.workday.dislodge_break0" style="margin-bottom:10px;">
                    <el-time-picker value-format="HH:mm" selectableRange="00:00:00-23:59:59" format="HH:mm"
                      v-model="item.starttime" placeholder="选择时间" style="width:120px; margin-left:25px;">
                    </el-time-picker>
                    -
                    <el-time-picker value-format="HH:mm" selectableRange="00:00:00-23:59:59" format="HH:mm"
                      v-model="item.endtime" placeholder="选择时间" style="width:120px;">
                    </el-time-picker>
                    <el-button v-if="formdata.config.workday.dislodge_break0.length > 1"
                      @click="del_time_list('workday', index)">-</el-button>
                    <el-button @click="add_time_list('workday')" style="margin-left:0;">+</el-button>
                  </div>


                </div>
                <div>
                  <el-radio v-model="formdata.config.workday.dislodge_break_type" label="1" name="dislodge_break_type">
                    按加班时长扣除</el-radio>
                </div>


                <div v-for="(item,index) in formdata.config.workday.dislodge_break1"
                  style="margin-left:25px; margin-bottom:10px;">每天满

                  <el-input type="number" v-model="item.starttime" style="width:70px;"></el-input>
                  小时，扣除

                  <el-input type="number" v-model="item.endtime" style="width:70px;"></el-input>
                  小时


                  <el-button v-if="formdata.config.workday.dislodge_break1.length > 1"
                    @click="del_time_list1('workday', index)">-</el-button>
                  <el-button @click="add_time_list1('workday')" style="margin-left:0;">+</el-button>
                </div>



              </el-form-item>
            </transition>
            <transition name="slide-fade" v-if="overtimeNone">
              <el-form-item label="调休或加班费" v-if="activeName2=='first'">
                <el-switch v-model="formdata.config.workday.result_convert" active-text="" inactive-text="">
                </el-switch>
              </el-form-item>
            </transition>
            <transition name="slide-fade">
              <el-form-item label="" v-if="activeName2=='first' && formdata.config.workday.result_convert">
                <div>
                  <el-radio v-model="formdata.config.workday.result_type" label="0" name="result_type">

                    按1:
                    <el-input type="number" :disabled="formdata.config.workday.result_type != '0'"
                      v-model="formdata.config.workday.result_convert_config" style="width:80px;"></el-input>
                    计为
                    <el-select style="width:80px;" :disabled="formdata.config.workday.result_type != '0'"
                      v-model="formdata.config.workday.result_convert_type" placeholder="请选择">
                      <!-- <el-option label="年假" value="0"></el-option>
                  <el-option label="事假" value="1"></el-option>
                  <el-option label="病假" value="2"></el-option>
                  <el-option label="调休" value="3"></el-option>
                  <el-option label="产假" value="4"></el-option>
                  <el-option label="婚假" value="5"></el-option>
                  <el-option label="例假" value="6"></el-option>
                  <el-option label="丧假" value="7"></el-option>
                  <el-option label="陪产假" value="8"></el-option> -->
                      <el-option v-for="item in holidayList" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>

                    </el-select>
                    时长
                  </el-radio>
                </div>
                <div>
                  <el-radio v-model="formdata.config.workday.result_type" label="1" name="result_type">计为加班费</el-radio>
                </div>
                <div v-if="false">
                  <el-radio v-model="formdata.config.workday.result_type" label="2" name="result_type">
                    员工申请加班时可选择，计为加班费<br />
                    <div style="display: inline; margin-left:25px;">或者按1:
                      <el-input type="number" :disabled="formdata.config.workday.result_type != '2'"
                        v-model="formdata.config.workday.result_convert_config" style="width:80px;"></el-input>
                      计为
                      <el-select style="width:80px;" :disabled="formdata.config.workday.result_type != '2'"
                        v-model="formdata.config.workday.result_convert_type" placeholder="请选择">
                        <el-option v-for="item in holidayList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>
                      时长</div>
                  </el-radio>
                </div>
              </el-form-item>
            </transition>
            <transition name="slide-fade">
              <el-form-item label="允许加班" v-if="activeName2=='right'">
                <el-switch v-model="formdata.config.offday.enabled" active-text="" inactive-text="">
                </el-switch>
              </el-form-item>
            </transition>
            <transition name="slide-fade">
              <el-form-item label="计算方式" v-if="activeName2=='right' && formdata.config.offday.enabled">
                <div>
                  <el-radio v-model="formdata.config.offday.type" label="review" name="stype">按审批时长计算</el-radio>
                </div>
                <div>
                  <el-radio v-model="formdata.config.offday.type" label="review_and_checkin" name="stype">
                    在审批的时段内，按打卡时长计算</el-radio>
                </div>
                <div>
                  <el-radio v-model="formdata.config.offday.type" label="normal" name="stype">无需审批，按打卡时长计算</el-radio>
                </div>
              </el-form-item>
            </transition>
            <transition name="slide-fade" v-if="overtimeNone1">
              <el-form-item label="扣除休息时间" v-if="activeName2=='right'">
                <el-switch v-model="formdata.config.offday.dislodge_break" active-text="" inactive-text="">
                </el-switch>
              </el-form-item>
            </transition>
            <transition name="slide-fade">
              <el-form-item label="" v-if="activeName2=='right' && formdata.config.offday.dislodge_break">
                <div style="margin-bottom:15px;">
                  <el-radio v-model="formdata.config.offday.dislodge_break_type" label="0" name="dislodge_break_type">
                    设置休息时段</el-radio>



                  <div v-for="(item,index) in formdata.config.offday.dislodge_break0" style="margin-bottom:10px;">
                    <el-time-picker value-format="HH:mm" selectableRange="00:00:00-23:59:59" format="HH:mm"
                      v-model="item.starttime" placeholder="选择时间" style="width:120px; margin-left:25px;">
                    </el-time-picker>
                    -
                    <el-time-picker value-format="HH:mm" selectableRange="00:00:00-23:59:59" format="HH:mm"
                      v-model="item.endtime" placeholder="选择时间" style="width:120px;">
                    </el-time-picker>
                    <el-button v-if="formdata.config.offday.dislodge_break0.length > 1"
                      @click="del_time_list('offday', index)">-</el-button>
                    <el-button @click="add_time_list('offday')" style="margin-left:0;">+</el-button>
                  </div>


                </div>
                <div>
                  <el-radio v-model="formdata.config.offday.dislodge_break_type" label="1" name="dislodge_break_type">
                    按加班时长扣除</el-radio>
                </div>


                <div v-for="(item,index) in formdata.config.offday.dislodge_break1"
                  style="margin-left:25px; margin-bottom:10px;">每天满

                  <el-input type="number" v-model="item.starttime" style="width:70px;"></el-input>
                  小时，扣除

                  <el-input type="number" v-model="item.endtime" style="width:70px;"></el-input>
                  小时


                  <el-button v-if="formdata.config.offday.dislodge_break1.length > 1"
                    @click="del_time_list1('offday', index)">-</el-button>
                  <el-button @click="add_time_list1('offday')" style="margin-left:0;">+</el-button>
                </div>



              </el-form-item>
            </transition>
            <transition name="slide-fade" v-if="overtimeNone1">
              <el-form-item label="调休或加班费" v-if="activeName2=='right'">
                <el-switch v-model="formdata.config.offday.result_convert" active-text="" inactive-text="">
                </el-switch>
              </el-form-item>
            </transition>
            <transition name="slide-fade">
              <el-form-item label="" v-if="activeName2=='right' && formdata.config.offday.result_convert">
                <div>
                  <el-radio v-model="formdata.config.offday.result_type" label="0" name="result_type">

                    按1:
                    <el-input type="number" :disabled="formdata.config.offday.result_type != '0'"
                      v-model="formdata.config.offday.result_convert_config" style="width:80px;"></el-input>
                    计为
                    <el-select style="width:80px;" :disabled="formdata.config.offday.result_type != '0'"
                      v-model="formdata.config.offday.result_convert_type" placeholder="请选择">
                      <el-option v-for="item in holidayList" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    时长
                  </el-radio>
                </div>
                <div>
                  <el-radio v-model="formdata.config.offday.result_type" label="1" name="result_type">计为加班费</el-radio>
                </div>
                <div v-if="false" style="margin-top:10px;">
                  <el-radio v-model="formdata.config.offday.result_type" label="2" name="result_type">
                    员工申请加班时可选择，计为加班费<br />
                    <div style="display: inline; margin-left:25px;">或者按1:
                      <el-input type="number" :disabled="formdata.config.offday.result_type != '2'"
                        v-model="formdata.config.offday.result_convert_config" style="width:80px;"></el-input>
                      计为
                      <el-select style="width:80px;" :disabled="formdata.config.offday.result_type != '2'"
                        v-model="formdata.config.offday.result_convert_type" placeholder="请选择">
                        <el-option v-for="item in holidayList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>
                      时长</div>
                  </el-radio>
                </div>
              </el-form-item>
            </transition>
            <transition name="slide-fade">
              <el-form-item label="允许加班" v-if="activeName2=='bottom'">
                <el-switch v-model="formdata.config.holiday.enabled" active-text="" inactive-text="">
                </el-switch>
              </el-form-item>
            </transition>
            <transition name="slide-fade">
              <el-form-item label="计算方式" v-if="activeName2=='bottom' && formdata.config.holiday.enabled">
                <div>
                  <el-radio v-model="formdata.config.holiday.type" label="review" name="stype">按审批时长计算</el-radio>
                </div>
                <div>
                  <el-radio v-model="formdata.config.holiday.type" label="review_and_checkin" name="stype">
                    在审批的时段内，按打卡时长计算</el-radio>
                </div>
                <div>
                  <el-radio v-model="formdata.config.holiday.type" label="normal" name="stype">无需审批，按打卡时长计算</el-radio>
                </div>
              </el-form-item>
            </transition>
            <transition name="slide-fade" v-if="overtimeNone2">
              <el-form-item label="扣除休息时间" v-if="activeName2=='bottom'">
                <el-switch v-model="formdata.config.holiday.dislodge_break" active-text="" inactive-text="">
                </el-switch>
              </el-form-item>
            </transition>
            <transition name="slide-fade">
              <el-form-item label="" v-if="activeName2=='bottom' && formdata.config.holiday.dislodge_break">
                <div style="margin-bottom:15px;">
                  <el-radio v-model="formdata.config.holiday.dislodge_break_type" label="0" name="dislodge_break_type">
                    设置休息时段</el-radio>



                  <div v-for="(item,index) in formdata.config.holiday.dislodge_break0" style="margin-bottom:10px;">
                    <el-time-picker value-format="HH:mm" selectableRange="00:00:00-23:59:59" format="HH:mm"
                      v-model="item.starttime" placeholder="选择时间" style="width:120px; margin-left:25px;">
                    </el-time-picker>
                    -
                    <el-time-picker value-format="HH:mm" selectableRange="00:00:00-23:59:59" format="HH:mm"
                      v-model="item.endtime" placeholder="选择时间" style="width:120px;">
                    </el-time-picker>
                    <el-button v-if="formdata.config.holiday.dislodge_break0.length > 1"
                      @click="del_time_list('holiday', index)">-</el-button>
                    <el-button @click="add_time_list('holiday')" style="margin-left:0;">+</el-button>
                  </div>


                </div>
                <div>
                  <el-radio v-model="formdata.config.holiday.dislodge_break_type" label="1" name="dislodge_break_type">
                    按加班时长扣除</el-radio>
                </div>


                <div v-for="(item,index) in formdata.config.holiday.dislodge_break1"
                  style="margin-left:25px; margin-bottom:10px;">每天满

                  <el-input type="number" v-model="item.starttime" style="width:70px;"></el-input>
                  小时，扣除

                  <el-input type="number" v-model="item.endtime" style="width:70px;"></el-input>
                  小时


                  <el-button v-if="formdata.config.holiday.dislodge_break1.length > 1"
                    @click="del_time_list1('holiday', index)">-</el-button>
                  <el-button @click="add_time_list1('holiday')" style="margin-left:0;">+</el-button>
                </div>



              </el-form-item>
            </transition>
            <transition name="slide-fade" v-if="overtimeNone2">
              <el-form-item label="调休或加班费" v-if="activeName2=='bottom'">
                <el-switch v-model="formdata.config.holiday.result_convert" active-text="" inactive-text="">
                </el-switch>
              </el-form-item>
            </transition>
            <transition name="slide-fade">
              <el-form-item label="" v-if="activeName2=='bottom' && formdata.config.holiday.result_convert">
                <div>
                  <el-radio v-model="formdata.config.holiday.result_type" label="0" name="result_type">

                    按1:
                    <el-input type="number" :disabled="formdata.config.holiday.result_type != '0'"
                      v-model="formdata.config.holiday.result_convert_config" style="width:80px;"></el-input>
                    计为
                    <el-select style="width:80px;" :disabled="formdata.config.holiday.result_type != '0'"
                      v-model="formdata.config.holiday.result_convert_type" placeholder="请选择">
                      <el-option v-for="item in holidayList" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    时长
                  </el-radio>
                </div>
                <div>
                  <el-radio v-model="formdata.config.holiday.result_type" label="1" name="result_type">计为加班费</el-radio>
                </div>
                <div v-if="false">
                  <el-radio v-model="formdata.config.holiday.result_type" label="2" name="result_type">
                    员工申请加班时可选择，计为加班费<br />
                    <div style="display: inline; margin-left:25px;">或者按1:
                      <el-input type="number" :disabled="formdata.config.holiday.result_type != '2'"
                        v-model="formdata.config.holiday.result_convert_config" style="width:80px;"></el-input>
                      计为
                      <el-select style="width:80px;" :disabled="formdata.config.holiday.result_type != '2'"
                        v-model="formdata.config.holiday.result_convert_type" placeholder="请选择">
                        <el-option v-for="item in holidayList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>
                      时长</div>
                  </el-radio>
                </div>
              </el-form-item>
            </transition>
          </el-form>
        </div>


      </el-scrollbar>

      <span slot="footer" class="dialog-footer">
        <el-button @click="RuleDetailDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveFormData" :loading="save_loading">保 存</el-button>
      </span>
    </el-dialog>





    <el-dialog class="attendance_group" title="加班规则基础设置" :visible.sync="RuleDetailBaseDialogVisible" width="500px"
      top="50px">

      <el-form ref="baseformdata" :model="baseformdata" :rules="baseformdata_rules" label-width="150px">
        <el-form-item label="最小加班单位">


          <el-select v-model="baseformdata.time_min" placeholder="请选择">
            <el-option label="按分钟" :value="0"></el-option>
            <el-option label="按半小时" :value="1"></el-option>
            <el-option label="按小时" :value="2"></el-option>
            <el-option label="按半天" :value="3"></el-option>
            <el-option label="按一天" :value="4"></el-option>
          </el-select>


        </el-form-item>


        <el-form-item prop="time_convert" v-if="baseformdata.time_min== 3 ||baseformdata.time_min == 4" label="时间折合">


          <el-input type="number" v-model="baseformdata.time_convert" :min="1" oninput ="value=value.replace(/^[0]\d*$/,'1')" style="width:80px;"></el-input> 小时=1天


        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveFormDataBase('baseformdata')" :loading="save_loading">保 存</el-button>
      </span>
    </el-dialog>


  </div>
</template>
<script>
  import qs from 'qs'
  import moment from 'moment'

  export default {

    data() {
      const validateName = (rule, value, callback) => {
        var validValue = value
          ? value.replace(/\s/g, '').replace(/&nbsp;/gi, '')
          : value
        if (!validValue) {
          return callback(new Error('请填写积分分类名称'))
        } else {
          callback()
        }
      }
      const config = {
        enabled: false, //是否允许加班
        type: 'review',//review,review_and_checkin,normal,
        dislodge_break: false, //去除休息时间
        dislodge_break_type: '0', //0按时段，按时长1
        dislodge_break0: [
          {
            starttime: '8:00',
            endtime: '9:00'
          }
        ],
        dislodge_break1: [
          {
            starttime: '5',
            endtime: '1'
          }
        ],
        holidayList: [],
        result_convert: false,
        result_type: '0', //0调休,1加班费,2员工可选择
        result_convert_config: 1, //1代表1:1转换为调休时长,2代表1:2
        result_convert_type:  ''//1代表1:1转换为调休时长,2代表1:2
      }
      return {
        overtimeNone:true,
        overtimeNone1:true,
        overtimeNone2:true,
        id: '',
        baseformdata:{
          time_min:0, //按分钟，按半小时，按小时，按半天，按一天
          time_convert:8
        },
        baseformdata_rules:{
          time_convert:[{pattern: new RegExp(/^[1-9]\d*|0$/, "g"),message: '请输入正整数!',trigger: 'blur' }]
        },
        RuleDetailBaseDialogVisible:false,
        activeName2: 'first',
        save_loading: false,
        dialog_title: "创建加班规则",
        formdata: {
          name: '',
          config: {
            workday: JSON.parse(JSON.stringify(config)),
            offday: JSON.parse(JSON.stringify(config)),
            holiday: JSON.parse(JSON.stringify(config))
          }
        },
        multipleSelection: [],
        RuleDetailDialogVisible: false,
        pageLimit: 10,

        profile: this.$store.getters.user_info,
        filter: {
          status: 1,
          keywords: '',
        },
        form_api: '/integral.php/attendance_overtime_rule/add',
        loading: false,
        totalCount: 0,
        currentPage: 1,
        tableData: [],
      }
    },
    watch:{
      'formdata.config.workday.enabled'(val){
        this.overtimeNone = val
        this.formdata.config.workday.dislodge_break = false
        this.formdata.config.workday.result_convert = false
      },
      'formdata.config.offday.enabled'(val){
        this.overtimeNone1 = val
        this.formdata.config.offday.dislodge_break = false
        this.formdata.config.offday.result_convert = false
      },
      'formdata.config.holiday.enabled'(val){
        this.overtimeNone2 = val
        this.formdata.config.holiday.dislodge_break = false
        this.formdata.config.holiday.result_convert = false
      },
    },
    methods: {
      // 获取加班基础设施
      load_base_setting() {
        this.loading = true
        const self = this
        this.$jtoken.get( this.serveAd +'/ad/over_time_rule/get_base_setting').then(
          ret => {
            self.loading = false
            if (ret.status == '200') {
              
              const data = ret.data.data
              self.baseformdata = data
              if(self.baseformdata.time_convert == ""){
                self.baseformdata.time_convert = 1
              }
            }
          }
        )
      },
      // 保存加班规则基础设置
      saveFormDataBase(formName){
        let self = this
        let send_data = []
        self.$refs[formName].validate((valid) => {
          if (valid) {
            this.save_loading = true
            this.$jtoken({
              url: this.serveAd +　'/ad/over_time_rule/set_base_setting',
              method: 'post',
              data: qs.stringify({data:JSON.stringify(self.baseformdata)}),
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then((res) => {
              if(res.status == 200){
                if(res.data.code == 1){
                  self.RuleDetailBaseDialogVisible = false
                  self.$message.success(res.data.msg)
                }else{
                  self.$message.error(res.data.msg)
                }
              }
              self.save_loading = false
            }).catch((e) => {self.$message.error(e.data.msg)}).finally(() => {self.save_loading = false})
          }
        });
      },
      ShowRuleDetailBaseDialogVisible(){
        this.load_base_setting()
        this.RuleDetailBaseDialogVisible = true
      },
      add_time_list(name){
        this.formdata.config[name].dislodge_break0.push({starttime:'00:00', endtime: '00:00'})
      },

      del_time_list(name, index){
        if(this.formdata.config[name].dislodge_break0.length == 1){
          return false
        }
        this.formdata.config[name].dislodge_break0.splice(index,1)
      },

      add_time_list1(name){
        this.formdata.config[name].dislodge_break1.push({starttime:5, endtime: 1})
      },

      del_time_list1(name, index){
        if(this.formdata.config[name].dislodge_break1.length == 1){
          return false
        }
        this.formdata.config[name].dislodge_break1.splice(index,1)
      },


      handleSelectionChange: function (val) {
        this.multipleSelection = val
      },

      confirmMultipleDelete() {
        if (this.multipleSelection.length < 1) {
          return false
        }
        this.$confirm('确定要删除选中的加班规则吗?', '批量删除加班规则', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            const targetArr = []
            for (const index in this.multipleSelection) {
              targetArr.push(this.multipleSelection[index].id)
            }
            const targetIds = targetArr.join(',')
            this.deleteRule(targetIds, true)
          })
          .catch(() => {
            // console.log('已取消删除');
          })
      },


      handleSizeChange(val) {
        this.pageLimit = val
        this.onFilterChanged()
      },

      formReset() {
        const _this = this
      },

      onFilterChanged: function () {
        this.currentPage = 1
        this.loadRuleList()
      },

      // 获取规则列表接口
      loadRuleList: function () {
        var self = this
        self.loading = true
        var params = {
          site_id: this.profile.site_id,
          page: this.currentPage,
          interval: this.pageLimit,
          page_size: this.pageLimit,
          keyword: self.filter.keywords
        }

        this.$jtoken
          .get(this.serveAd + '/ad/over_time_rule', {
            params: params
          })
          .then(function (response) {
            if (response.data.code == 1) {
              self.loading = false
              var jsonData = response.data;
              self.tableData = jsonData.data.list
              self.totalCount = jsonData.data.total
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      changePage: function (current) {
        if (isNaN(current) || current < 1) {
          return false
        }
        this.loadRuleList()
      },

      //  创建修改 aa
      saveFormData: function () {
        this.save_loading = true
        var self = this
        let send_data = JSON.parse(JSON.stringify(this.formdata))
        let config = send_data.config;
        let name = send_data.name;
        let a = {};
        let isId = self.id;
        this.$jtoken({
          url: this.form_api,
          method: 'post',
          data: isId > 0 ? qs.stringify({name: name, config: JSON.stringify(config), id:　self.id}): qs.stringify({name: name, config: JSON.stringify(config)}),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
          .then(function (response) {
            self.save_loading = false
            if (response.status == 200) {
              if (response.data.code == 1) {
                self.RuleDetailDialogVisible = false
                self.onFilterChanged()
                self.$message.success(response.data.msg)
              } else {
                self.$message.error(response.data.msg)
              }
              self.$refs.formdata.resetFields();
            } else {
              self.$message.error('网络错误')
            }
          })
          .catch(function (error) {
            self.$message.error('网络错误')
          })
      },

      confirmDelete: function (ruleId) {
        this.$confirm(
          '确定要删除此加班规则吗？',
          '删除加班规则',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            this.deleteRule(ruleId)
          })
          .catch(() => {
          })
      },
      deleteRule: function (ruleId) {
        if (!ruleId) {
          return false
        }
        const params = {
          id: ruleId
        }
        var self = this
        this.$jtoken
          .get( this.serveAd + '/ad/over_time_rule/delete', {
            params: params
          })
          .then(function (response) {

            if (response.status == 200 && response.data.code == 1) {
              self.$message.success(response.data.msg)
              self.loadRuleList()
            } else {
              self.$message.error(response.data.msg)
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      // 获取假期种类列表
      getholidaylist() {
        this.$jtoken.get(this.serveAd +　'/ad/holidays')
        .then(res => {
          if(res.data.code == 1) {
            this.holidayList = res.data.data.list;
          }
        })
      },
      // 打开创建修改的弹窗
      toDetailPage: function (id, event) {
        const self = this

        /*self.formdata = {
          name: '',
          time_list: [
            {id: 0, checkin_time: '8:00', start_time: '8:30', end_time: '18:00'},
          ],
          break_time: ['12:00', '13:00'],
          is_break_time: false,
          is_card: false,
          allowed_late_time: 30,
          serious_late_time: 30,
          absenteeism_late_time: 30,
        }*/
        const config = {
          enabled: true, //是否允许加班
          type: 'review',//review,review_and_checkin,normal,
          dislodge_break: false, //去除休息时间
          dislodge_break_type: '0', //0按时段，按时长1
          dislodge_break0: [
            {
              starttime: '8:00',
              endtime: '9:00'
            }
          ],
          dislodge_break1: [
            {
              starttime: '5',
              endtime: '1'
            }
          ],

          result_convert: false,
          result_type: '0', //0调休,1加班费,2员工可选择
          result_convert_config: 1, //1代表1:1转换为调休时长,2代表1:2
          result_convert_type: '' //1代表1:1转换为调休时长,2代表1:2
        }
        self.formdata = {
          name: '',
          config: {
            workday: JSON.parse(JSON.stringify(config)),
            offday: JSON.parse(JSON.stringify(config)),
            holiday: JSON.parse(JSON.stringify(config))
          }
        }

       
        if (id > 0) {
          this.id = id;
          this.form_api =  this.serveAd + '/ad/over_time_rule/update'
          this.dialog_title = '修改加班规则'
          //获取一条记录，用于复原修改界面  打开详情页面
          this.$jtoken
            .get(this.serveAd +　'/ad/over_time_rule/info', {
              params: {id: id}
            }).then((res) => {
            if (res.data.code == 1) {
              self.formdata = res.data.data
              let newformData = res.data.data;
              for(let i in self.formdata.config){
                self.formdata.config[i].enabled = self.formdata.config[i].enabled == 'true'?true:false
                self.formdata.config[i].dislodge_break = self.formdata.config[i].dislodge_break  == 'true'?true:false
                self.formdata.config[i].result_convert = self.formdata.config[i].result_convert == 'true'?true:false
                self.formdata.config[i].result_convert_type =  Number(self.formdata.config[i].result_convert_type)
              
              self.RuleDetailDialogVisible = true
            }
            } else {
              self.$message.error('网络错误')
            }
          })
        } else {
          this.RuleDetailDialogVisible = true
          // this.formdata.config.workday.enabled = true;
          // this.formdata.config.workday.dislodge_break = true;
          // this.formdata.config.workday.result_convert = true;

          // this.formdata.config.workday.enabled = true;
          // this.formdata.config.workday.dislodge_break = true;
          // this.formdata.config.workday.result_convert = true;

          //  this.formdata.config.workday.enabled = true;
          // this.formdata.config.workday.dislodge_break = true;
          // this.formdata.config.workday.result_convert = true;

          this.form_api = this.serveAd +　'/ad/over_time_rule/add'
          this.dialog_title = '创建加班规则'
        }

      },

    },
    created() {
      this.loadRuleList()
      this.load_base_setting()
      this.getholidaylist()
    }
  }
</script>
<style>

  .date_tag .el-tag + .el-tag {
    margin: 5px;
  }

  .attendance_group .el-card__body {
    padding: 15px;
  }

  .attendance_group .el-tag + .el-tag {
    margin-left: 10px;
  }

  .attendance_group .el-tag + .el-button {
    margin-left: 10px;
  }
  .attendance_group /deep/ .el-scrollbar__wrap{
    overflow-x:hidden !important;
  }
  .setMapBaidu .map {
    width: 100%;
    height: 300px;
  }
  .slide-fade-enter-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-leave-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
