<template>
  <div style=" background-color: #fff; padding:15px;">
    <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)"
        v-if="profile.manager_type > 1"
        type="primary"
        plain
      >创建考勤组</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>
    <el-table
      @selection-change="handleSelectionChange"
      v-loading="loading"
      ref="multipleTable"
      :data="tableData"
      :border="false"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        width="42"
        v-if="profile.manager_type > 1"

      ></el-table-column>

      <el-table-column prop="name" label="名称" :filterMultiple="false"></el-table-column>
      <el-table-column prop="type" label="类型">

        <template slot-scope="scope">
          <span v-if="scope.row.type==0">固定班制</span>
          <span v-if="scope.row.type==1">排班制</span>
          <span v-if="scope.row.type==2">自由上下班</span>
        </template>
      </el-table-column>

      <el-table-column label="班次">
        <template slot-scope="scope">

          <div v-for="(item, index) in scope.row.attendance_info" :key="index" v-if="scope.row.type != 2"><div style="display: table;">

            <div style="display: table-cell; vertical-align: top;">{{item.attendance_name}}：</div>
            <div style="display: table-cell; vertical-align: top;">

              <div v-for="(ai, index) in item.attendance_setting" :key="index">{{ai}}</div>

            </div>


          </div></div>

          <div v-if="scope.row.type == 2">
            无
          </div>


      </template>
      </el-table-column>


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

            <el-button
              type="text"
              @click="toDetailPage(scope.row.id, $event)"
            >修改</el-button>
            <el-button v-if="profile.manager_type > 1"

              type="text"
              @click="confirmDelete(scope.row.id)"
            >删除</el-button>


            <el-button type="text" @click="attendance_duty_show(scope.row.id)" v-if="scope.row.type!=2">排班表</el-button>
            <el-button type="text" @click="corde(scope.row)">积分设置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <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>

    <el-dialog
      class="attendance_group"
      :title="dialog_title"
      @close="formReset"
      :visible.sync="RuleDetailDialogVisible"
      width="800px"
      top="50px"
    >
      <div style="padding:0 50px;" v-if="dialog_title != '创建考勤组'">
      <el-alert style="margin-bottom:30px;"
        title="修改设置会影响现有排班，请谨慎操作！"
        type="warning">
      </el-alert></div>
      <el-scrollbar
        wrap-class="column-wrapper scrollable-items-container check-item-box dept_tree"
        :native="false"
        style="height: 500px;"
      >

        <div style="padding:0 100px;">
        <el-form ref="formdata" :model="formdata" label-width="100px" :rules="formrule">
          <el-form-item label="考勤组名称" prop="name">
            <el-input style="width:350px;" v-model="formdata.name"></el-input>
          </el-form-item>
          <el-form-item label="参与人员" prop="employee_ids">
            <el-card class="box-card" shadow="hover">
              <div class="tag-box-padding">
            <el-tag
              v-for="(tag, index) in formdata.employee"
              :key="tag.name"
              type="success"
              @close="employee_delete(tag.id, index)"
              closable>
              {{tag.name}}
            </el-tag><el-button size="mini" @click="EmployeeSelector0_show">选择</el-button></div></el-card>
          </el-form-item>


          <el-form-item label="不参与人员">
            <el-card class="box-card" shadow="hover">
              <div class="tag-box-padding">
            <el-tag
              v-for="(tag, index) in formdata.un_employee"
              :key="tag.name"
              @close="un_employee_delete(tag.id, index)"
              type="success"
              closable>
              {{tag.name}}
            </el-tag><el-button size="mini" @click="EmployeeSelector1_show">选择</el-button></div></el-card>
          </el-form-item>

          <el-form-item label="考勤管理员" prop="manager_ids" v-if="profile.manager_type > 1">
            <el-card class="box-card" shadow="hover">
              <div class="tag-box-padding">
            <el-tag
              v-for="(tag, index) in formdata.manager"
              :key="tag.name"
              type="success"
              @close="manager_delete(tag.id, index)"
              closable>
              {{tag.name}}
            </el-tag><el-button size="mini" @click="EmployeeSelector2_show">选择</el-button></div></el-card>
          </el-form-item>

          <el-form-item label="考勤类型">
            <el-radio-group v-model="formdata.type" :disabled="profile.manager_type<2">
              <el-radio :label="0">固定班制</el-radio>
              <el-radio :label="1">排班制</el-radio>
              <el-radio :label="2">自由上下班</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="班次" v-if="formdata.type != 2 && profile.manager_type > 1">
            <el-tag
              @close="attendance_setting_delete(tag,index)"
              v-for="(tag,index) in formdata.attendance_setting_list"
              :key="tag.label"
              type="success"
              closable>
              {{tag.label}}
            </el-tag>

            <el-button size="mini" @click="class_selector_show">选择班次</el-button>


          </el-form-item>


          <el-form-item label="工作日" v-if="formdata.type == 2">
            <el-checkbox-group v-model="work_date_list">
              <el-checkbox v-for="(item,index) in formdata.work_date" :key="index" :label="index" name="work_date">{{item.name}}</el-checkbox>

            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="排班周期" v-if="formdata.type == 1">

            <el-select v-model="work_date_length" placeholder="2">
              <el-option label="2天" :value="2"></el-option>
              <el-option label="3天" :value="3"></el-option>
              <el-option label="4天" :value="4"></el-option>
              <el-option label="5天" :value="5"></el-option>
              <el-option label="6天" :value="6"></el-option>
              <el-option label="7天" :value="7"></el-option>
              <el-option label="8天" :value="8"></el-option>
              <el-option label="9天" :value="9"></el-option>
              <el-option label="10天" :value="10"></el-option>
              <el-option label="11天" :value="11"></el-option>
              <el-option label="12天" :value="12"></el-option>
              <el-option label="13天" :value="13"></el-option>
              <el-option label="14天" :value="14"></el-option>
              <el-option label="15天" :value="15"></el-option>
              <el-option label="16天" :value="16"></el-option>
              <el-option label="17天" :value="17"></el-option>
              <el-option label="18天" :value="18"></el-option>
              <el-option label="19天" :value="19"></el-option>
              <el-option label="20天" :value="20"></el-option>
              <el-option label="21天" :value="21"></el-option>
              <el-option label="22天" :value="22"></el-option>
              <el-option label="23天" :value="23"></el-option>
              <el-option label="24天" :value="24"></el-option>
              <el-option label="25天" :value="25"></el-option>
              <el-option label="26天" :value="26"></el-option>
              <el-option label="27天" :value="27"></el-option>
              <el-option label="28天" :value="28"></el-option>
              <el-option label="29天" :value="29"></el-option>
              <el-option label="30天" :value="30"></el-option>
              <el-option label="31天" :value="31"></el-option>
            </el-select>


          </el-form-item>
          <el-form-item v-if="formdata.type == 1">
            <el-table border
              :data="formdata.work_date"
              style="width: 350px;">

              <el-table-column width="80"
                prop="name"
                label="时间"
              >
              </el-table-column>
              <el-table-column
                prop="setting_id"
                label="班次"
              >
                <template slot-scope="scope">
                  <el-select v-model="scope.row.setting_id" placeholder="请选择">
                    <el-option
                      v-for="item in formdata.attendance_setting_list"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>

                    <el-option

                      :key="0"
                      label="休息（不上班）"
                      :value="0"
                    >
                    </el-option>

                  </el-select>
                </template>
              </el-table-column>

            </el-table>
          </el-form-item>


          <el-form-item v-if="formdata.type == 0">
            <el-table border
              :data="formdata.work_date"
              style="width: 350px;">

              <el-table-column  width="80"
                prop="name"
                label="时间"
               >
              </el-table-column>
              <el-table-column prop="setting_id" label="班次">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.setting_id" placeholder="请选择">
                    <el-option
                      v-for="item in formdata.attendance_setting_list"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      >
                    </el-option>


                    <el-option

                      :key="0"
                      label="休息（不上班）"
                      :value="0"
                    >
                    </el-option>

                  </el-select>
                </template>
              </el-table-column>

            </el-table>


          </el-form-item>

          <el-form-item label="必须打卡日期">
            <el-card class="box-card" shadow="hover">
              <div class="tag-box-padding">
            <el-tag
              color="#fff"
              v-for="(tag,index) in formdata.date_must"
              :key="tag"
              type="success"
              @close="date_must_delete(tag,index)"
              closable>


              <el-select class="diy-input-on-border" v-model="date_must_arr[index]" placeholder="请选择班次" size="mini">
                <el-option
                  v-for="item in attendance_setting_list_must[tag]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>



              </el-select>



            </el-tag><el-button @click="DateMustShow" size="mini">选择日期</el-button></div></el-card>
          </el-form-item>
          <el-form-item label="不用打卡日期">
            <el-card class="box-card" shadow="hover">
              <div class="tag-box-padding">
            <el-tag
              v-for="(tag,index) in formdata.date_not"
              :key="tag"
              @close="date_not_delete(tag,index)"
              type="success"
              closable>
              {{tag}}
            </el-tag><el-button size="mini" @click="DateNotShow">选择日期</el-button></div></el-card>




          </el-form-item>

          <el-form-item label="打卡位置">

            <el-card class="box-card" shadow="hover">

              <el-button size="mini" @click="show_map_com">添加位置</el-button><span style="color:#999; padding-left:1rem;">您可以添加多个位置并且设置有效打卡距离</span>



              <div v-for="(l,li) in formdata.location" :key="li" role="alert" class="el-alert el-alert--success" style="margin-top: 15px;"><!----><div class="el-alert__content"><span class="el-alert__title is-bold">{{'有效打卡范围'+l.radius+'米'}}</span><!----><p class="el-alert__description">{{l.name}} </p><i class="el-alert__closebtn el-icon-close" @click="location_del(li)"></i></div></div>




            </el-card>

            <el-checkbox v-model="is_out_attendance">允许外勤打卡</el-checkbox>
          </el-form-item>


          <el-form-item label="加班规则">
            <el-select v-model="formdata.overtime_rule" placeholder="请选择">
              <el-option
                v-for="item in overtime_rule_list"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>


          <!-- 这里加一个保存之后的生效时间 -->



        </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="setMapBaidu"
      title="添加打卡位置"
      :visible.sync="MapBoxDialogVisible"
      width="700px"
    >
      <el-input placeholder="请输入地址搜索" v-model="search_keyword" class="input-with-select">


      </el-input>
      <div style="height: 15px;"></div>


      <baidu-map :center="map_point_set" :zoom="16" ref="map_com" style="position: relative; height: 315px;" v-if="map_show_s">
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>




        <bm-marker :position="point_set" :dragging="true" @dragging="_point_set">

        </bm-marker>
        <bm-circle :center="point_set" :radius="point_radius" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="1"  :editing="false"></bm-circle>

        <bm-local-search v-show="panel_show" @infohtmlset="select_point" style="position: absolute; top:-15px; width:100%; height: 315px; overflow-y: scroll; background-color: #fff;" :keyword="search_keyword"></bm-local-search>
      </baidu-map>

      <baidu-map class="map" :center="map_point_set" :zoom="16" style="position: relative;" v-if="map_show">

        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>



        <bm-marker :position="point_set" :dragging="true" @dragging="_point_set">

        </bm-marker>
        <bm-circle :center="point_set" :radius="point_radius" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="1"  :editing="false"></bm-circle>


      </baidu-map>

<div style="margin-top:15px;">有效打卡范围：
  <el-select v-model="point_radius">
    <el-option label="100米" :value="100"></el-option>
  <el-option label="200米" :value="200"></el-option>
  <el-option label="300米" :value="300"></el-option>
  <el-option label="400米" :value="400"></el-option>
  <el-option label="500米" :value="500"></el-option>
  <el-option label="600米" :value="600"></el-option>
  <el-option label="700米" :value="700"></el-option>
</el-select>
</div>


      <span slot="footer" class="dialog-footer">
    <el-button @click="MapBoxDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveLocationInfo">保 存</el-button>
  </span>
    </el-dialog>


    <el-dialog
      title="必须打卡的日期"
      :visible.sync="DateMustDialogVisible"
      width="400px"
    >


      <Calendar v-on:choseDay="choseDaydate_must" :markDate="date_must"></Calendar>
      <span slot="footer" class="dialog-footer">

    <el-button type="primary" @click="DateMustSave">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="不用打卡的日期"
      :visible.sync="DateNotDialogVisible"
      width="400px"
    >


      <Calendar v-on:choseDay="choseDaydate_not" :markDate="date_not"></Calendar>
      <span slot="footer" class="dialog-footer">

    <el-button type="primary" @click="DateNotSave">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="选择参与人员"
      :visible.sync="EmployeeSelectorDialogVisible0"
      width="800px"
    >
      <EmployeeSelector @check="set_employee_ids" ref="joinEmployeeSelector" :include_admin="true"></EmployeeSelector>
      <span slot="footer" class="dialog-footer">

    <el-button type="primary" @click="EmployeeSelectorSave0">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="选择不用参与人员"
      :visible.sync="EmployeeSelectorDialogVisible1"
      width="800px"
    >
      <EmployeeSelector @check="set_un_employee_ids" ref="unJoinEmployeeSelector"></EmployeeSelector>
      <span slot="footer" class="dialog-footer">

    <el-button type="primary" @click="EmployeeSelectorSave1">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="选择考勤管理员"
      :visible.sync="EmployeeSelectorDialogVisible2"
      width="800px"
    >
      <EmployeeSelector @check="set_manager_ids"></EmployeeSelector>
      <span slot="footer" class="dialog-footer">

    <el-button type="primary" @click="EmployeeSelectorSave2" ref="managerEmployeeSelector">确 定</el-button>
  </span>
    </el-dialog>


    <el-dialog title="选择班次" :visible.sync="class_selectorDialogVisible" width="800px">
      <class_selector :select_list.sync="attendance_setting_list" :select_ids.sync="attendance_setting_ids"></class_selector>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="class_selector_save">确 定</el-button>
  </span>
    </el-dialog>


    <el-dialog title="排班表" :visible.sync="attendance_dutyDialogVisible" width="90%" top="50px">
      <attendance_duty ref="attendance_duty_com" @saved="save_success"></attendance_duty>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="attendance_duty_save" :loading="attendance_duty_save_loading">保 存</el-button>
  </span>
    </el-dialog>
    <changeCorde @changDialog="changDialog" :group_id="group_id"  :showDialog="showDialog" />
  </div>
</template>
<script>
  import Vue from 'vue'
  import BaiduMap from 'vue-baidu-map'
  import Calendar from 'vue-calendar-component'

  import EmployeeSelector from '@/views/integral/EmployeeSelector'
  import class_selector from '@/views/attendance/class_selector'
  import attendance_duty from '@/views/attendance/attendance_duty'
  import changeCorde from'@/views/attendance/attendance_dialog'  // 考勤设置弹框
  Vue.use(BaiduMap, {
    ak: 'QMDvD2Anle2gLOINIBUZ1Lhh'
  })

  import qs from 'qs'
export default {
  components: {
      Calendar, EmployeeSelector, class_selector, attendance_duty,changeCorde
  },
  watch: {
      attendance_setting_list(val, old) {
        console.log(val)
      },
      search_keyword: function(n, o) {
        if (n != '') {
          this.panel_show = true
          this.map_show_s = true
          this.map_show = false
        } else {
          this.map_show_s = false
          this.map_show = true
        }
      },
      'work_date_length': function(n, o) {
        const work_date = []
        let setting_id = 0
        // console.log(this.work_date)
        for (let i = 0; i < n; i++) {
          if (i < this.formdata.work_date.length) {
            setting_id = this.formdata.work_date[i].setting_id
          } else {
            setting_id = 0
          }
          work_date.push({ name: '第' + (i + 1) + '天', setting_id: setting_id })
        }
        // console.log(work_date);
        this.formdata.work_date = work_date
      },
      'formdata.type': function(n, o) {
        const work_date = []
        if (n != 1) {
          this.formdata.work_date = [
            { name: '周一', setting_id: 0 },
            { name: '周二', setting_id: 0 },
            { name: '周三', setting_id: 0 },
            { name: '周四', setting_id: 0 },
            { name: '周五', setting_id: 0 },
            { name: '周六', setting_id: 0 },
            { name: '周日', setting_id: 0 }
          ]
        } else {
          for (let i = 0; i < this.work_date_length; i++) {
            work_date.push({ name: '第' + (i + 1) + '天', setting_id: this.formdata.work_date[i].setting_id })
          }
          // console.log(work_date);
          this.formdata.work_date = work_date
        }
      }
  },
  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()
        }
      }
      return {
        formrule: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
          employee_ids: [
            { required: true, message: '请选择参与人员', trigger: 'blur' }
          ],
          manager_ids: [
            { required: true, message: '请选择管理员', trigger: 'blur' }
          ]
        },
        group_id: 0,
        showDialog:  false, // 控制考勤设置弹窗
        attendance_duty_save_loading: false,
        class_selectorDialogVisible: false,
        attendance_dutyDialogVisible: false,
        save_loading: false,
        EmployeeSelectorDialogVisible0: false,
        EmployeeSelectorDialogVisible1: false,
        EmployeeSelectorDialogVisible2: false,
        DateMustDialogVisible: false,
        DateNotDialogVisible: false,
        is_out_attendance:true,
        location_name: '',
        location_details: '',
        map_show_s: true,
        map_show: false,
        search_location: '',
        search_keyword: '',
        panel_show: false,
        map_point_set: { lng: 116.404, lat: 39.915 },
        point_set: { lng: 116.404, lat: 39.915 },
        point_radius: 300,

        MapBoxDialogVisible: false,
        dialog_title: '创建考勤组',
        work_date_length: 2,
        work_date_list: [],

        employee_ids: [],
        un_employee_ids: [],
        manager_ids: [],
        employee_list: [],
        un_employee_list: [],
        manager_list: [],
        attendance_setting_list: [],
        attendance_setting_ids: [],
        date_must_arr: [],
        attendance_setting_list_must: [],
        formdata: {
          name: '',
          employee_ids: [],
          employee: [

          ],
          manager_ids: [],
          manager: [

          ],
          un_employee_ids: [],
          un_employee: [

          ],
          attendance_setting_ids: [],
          attendance_setting_list: [

          ],
          work_date: [
            { name: '周一', setting_id: 0 },
            { name: '周二', setting_id: 0 },
            { name: '周三', setting_id: 0 },
            { name: '周四', setting_id: 0 },
            { name: '周五', setting_id: 0 },
            { name: '周六', setting_id: 0 },
            { name: '周日', setting_id: 0 }
          ],
          date_must: [],
          date_not: [],
          type: 0,
          location_range: 300,
          location: [],
          overtime_rule: 0
        },
        date_must: [],
        date_not: [],
        multipleSelection: [],
        RuleDetailDialogVisible: false,
        pageLimit: 10,

        profile: this.$store.getters.user_info,
        filter: {
          status: 1,
          keywords: ''
        },
        overtime_rule_list: [],
        form_api: '/integral.php/attendance_group/create_attend_group',
        loading: false,
        profile: this.$store.getters.user_info,
        totalCount: 0,
        currentPage: 1,
        tableData: null,
        rules: {
          name: [{ validator: validateName, trigger: 'blur' }]
        }

      }
  },
  methods: {

      location_del(index) {
        console.log(index)
        this.formdata.location.splice(index, 1)
      },
      attendance_duty_show(id) {
        const self = this
        this.attendance_dutyDialogVisible = true
        this.$nextTick(function() {
          self.$refs['attendance_duty_com'].get_group_info(id)
        })
      },
      attendance_duty_save() {
        const self = this
        self.attendance_duty_save_loading = true
        self.$refs['attendance_duty_com'].send_schedule()
      },
      save_success() {
        const self = this
        self.attendance_duty_save_loading = false
      },
      class_selector_save() {
      // console.log(this.attendance_setting_list)
        for (const l in this.attendance_setting_list) {
          if (this.formdata.attendance_setting_ids.indexOf(this.attendance_setting_list[l].id) < 0) {
            this.formdata.attendance_setting_ids.push(this.attendance_setting_list[l].id)
            this.formdata.attendance_setting_list.push({ label: this.attendance_setting_list[l].name, value: this.attendance_setting_list[l].id })
          }
        }
        this.setMustDateArr()
        this.class_selectorDialogVisible = false
      },
      class_selector_show() {
        this.class_selectorDialogVisible = true
      // let fromdata = JSON.parse(JSON.stringify(this.formdata))
      // this.attendance_setting_list = fromdata.attendance_setting_list
      // this.attendance_setting_ids = fromdata.attendance_setting_ids
      },
      EmployeeSelector0_show() {
        this.EmployeeSelectorDialogVisible0 = true
      // this.employee_ids = JSON.parse(JSON.stringify(this.formdata.employee_ids))
      },
      EmployeeSelector1_show() {
        this.EmployeeSelectorDialogVisible1 = true
      // this.un_employee_ids = JSON.parse(JSON.stringify(this.formdata.un_employee_ids))
      },
      EmployeeSelector2_show() {
        this.EmployeeSelectorDialogVisible2 = true
      // this.manager_ids = JSON.parse(JSON.stringify(this.formdata.manager_ids))
      },

      set_manager_ids(data) {
        console.log(data)
        this.manager_list = data
      },
      set_un_employee_ids(data) {
        console.log(data)
        this.un_employee_list = data
      },
      set_employee_ids(data) {
        console.log(data)
        this.employee_list = data
      },
      EmployeeSelectorSave0() {
        this.EmployeeSelectorDialogVisible0 = false
        this.formdata.employee_ids = this.formdata.employee_ids.map(item => item = Number(item))
        for (const i in this.employee_list) {
          if (this.formdata.employee_ids.indexOf(this.employee_list[i].id) < 0) {
            this.formdata.employee.push(this.employee_list[i])
            this.formdata.employee_ids.push(this.employee_list[i].id)
          }else {
            this.$message.error(this.employee_list[i].name+'已存在')
          }
        }
        // 清空所选员工
        this.$refs.joinEmployeeSelector.clearEmployee({columnKey: "clear"})
        this.$refs.joinEmployeeSelector.onFilterChanged() // 员工选择组件页码置为1
      },
      handleSelectionChange: function(val) {
        this.multipleSelection = val
      },
      EmployeeSelectorSave1() {
        this.EmployeeSelectorDialogVisible1 = false
        this.formdata.un_employee_ids = this.formdata.un_employee_ids.map(item => item = Number(item))
        for (const i in this.un_employee_list) {
          if (this.formdata.un_employee_ids.indexOf(this.un_employee_list[i].id) < 0) {
            this.formdata.un_employee.push(this.un_employee_list[i])
            this.formdata.un_employee_ids.push(this.un_employee_list[i].id)
          }
        }
        this.$refs.unJoinEmployeeSelector.clearEmployee({columnKey: "clear"})
        this.$refs.unJoinEmployeeSelector.onFilterChanged() // 员工选择组件页码置为1
      },
      EmployeeSelectorSave2() {
        this.EmployeeSelectorDialogVisible2 = false
        this.formdata.manager_ids = this.formdata.manager_ids.map(item => item = Number(item))
        for (const i in this.manager_list) {
          if (this.formdata.manager_ids.indexOf(this.manager_list[i].id) < 0) {
            this.formdata.manager.push(this.manager_list[i])
            this.formdata.manager_ids.push(this.manager_list[i].id)
          }
        }
        this.$refs.managerEmployeeSelector.clearEmployee({columnKey: "clear"})
        this.$refs.managerEmployeeSelector.onFilterChanged() // 员工选择组件页码置为1
      },
      choseDaydate_must(data) {
        if (this.formdata.date_not.indexOf(data) >= 0) {
          this.$message.error('当前日期已被选中为“不用打卡日期”')
          return
        }
        if (this.formdata.date_must.indexOf(data) >= 0) {
          this.$message.error('当前日期已被选中')
          return
        }
        if (this.date_must.indexOf(data) >= 0) {
          this.date_must.splice(this.date_must.indexOf(data), 1)
        } else {
          this.date_must.push(data)
        }
      },
      choseDaydate_not(data) {
        if (this.formdata.date_must.indexOf(data) >= 0) {
          this.$message.error('当前日期已被选中为“不用打卡日期”')
          return
        }
        if (this.date_not.indexOf(data) >= 0 || this.formdata.date_not.indexOf(data) >= 0) {
          this.$message.error('当前日期已被选中')
          return
        }
        if (this.date_not.indexOf(data) >= 0) {
          this.date_not.splice(this.date_not.indexOf(data), 1)
        } else {
          this.date_not.push(data)
        }
      },
      DateNotShow() {
        this.date_not = []
        this.DateNotDialogVisible = true
      },
      DateMustShow() {
        this.date_must = []
        this.DateMustDialogVisible = true
      },

      DateNotSave() {
        this.DateNotDialogVisible = false
        for (const i in this.date_not) {
          if (this.formdata.date_not.indexOf(this.date_not[i]) < 0) {
            this.formdata.date_not.push(this.date_not[i])
          }
        }
      },
      DateMustSave() {
        this.DateMustDialogVisible = false
        for (const i in this.date_must) {
          if (this.formdata.date_must.indexOf(this.date_must[i]) < 0) {
            this.formdata.date_must.push(this.date_must[i])
          }
        }
        this.setMustDateArr()
      },
      setMustDateArr() {
        const attendance_setting_list_must = {}
        for (const i in this.formdata.date_must) {
          attendance_setting_list_must[this.formdata.date_must[i]] = []
          for (const item in this.formdata.attendance_setting_list) {
            attendance_setting_list_must[this.formdata.date_must[i]].push({
              label: this.formdata.date_must[i] + '(' + this.formdata.attendance_setting_list[item].label + ')',
              value: this.formdata.date_must[i] + ':' + this.formdata.attendance_setting_list[item].value
            })
          }
        }
        this.attendance_setting_list_must = attendance_setting_list_must
      },
      saveLocationInfo() {
        if (this.location_name == '') {
          this.$message.error('搜索地址名称或者拖动地图中的红色标签确定位置')
          return
        }
        this.formdata.location.push({ lat: this.point_set.lat, lng: this.point_set.lng, name: this.location_name, radius: this.point_radius })
        this.MapBoxDialogVisible = false
      },
      _point_set(a) {
      // console.log(a)
        const _this = this
        this.point_set = a.point
        const geoc = new BMap.Geocoder()

        geoc.getLocation(a.point, function(rs) {
          const addComp = rs.addressComponents

          _this.location_name = (addComp.province + ' ' + addComp.city + ' ' + addComp.district + ' ' + addComp.street + ' ' + addComp.streetNumber)
        })
      },
      select_point(p) {
      // console.log(p)
        const _this = this

        const geoc = new BMap.Geocoder()

        geoc.getLocation(p.point, function(rs) {
          const addComp = rs.addressComponents
          _this.location_name = (addComp.province + ' ' + addComp.city + ' ' + addComp.district + ' ' + addComp.street + ' ' + addComp.streetNumber)
        })

        this.point_set = p.point
        this.map_point_set = p.point
        this.panel_show = false
        setTimeout(function() {
          _this.map_show = true
          _this.map_show_s = false
        }, 200)
      // _this.$refs["map_com"].map.clearOverlays()
      },

      show_map_com() {
        const _this = this
        this.MapBoxDialogVisible = true
        this.$nextTick(function() {
          console.log(_this.$refs['map_com'])
        // _this.$refs["map_com"].reload()
        })
      },
      date_must_delete(tag, index) {
        this.formdata.date_must.splice(index, 1)
        this.date_must_arr.splice(index, 1)
      },
      date_not_delete(tag, index) {
        this.formdata.date_not.splice(index, 1)
      },
      employee_delete(id, index) {
        this.formdata.employee.splice(index, 1)
        const employee_ids = []
        console.log(this.formdata.employee)
        for (const e in this.formdata.employee) {
          employee_ids.push(this.formdata.employee[e].id)
        }

        this.formdata.employee_ids = employee_ids
      },
      un_employee_delete(id, index) {
        this.formdata.un_employee.splice(index, 1)
        const employee_ids = []
        for (const e in this.formdata.un_employee) {
          employee_ids.push(this.formdata.un_employee[e].id)
        }
        this.formdata.un_employee_ids = employee_ids
      },
      manager_delete(id, index) {
        this.formdata.manager.splice(index, 1)
        const employee_ids = []
        for (const e in this.formdata.manager) {
          employee_ids.push(this.formdata.manager[e].id)
        }
        this.formdata.manager_ids = employee_ids
      },

      attendance_setting_delete(e, index) {
        this.formdata.attendance_setting_list.splice(index, 1)
        const attendance_setting_ids = []
        for (const i in this.formdata.attendance_setting_list) {
          attendance_setting_ids.push(this.formdata.attendance_setting_list[i].value)
        }
        this.formdata.attendance_setting_ids = attendance_setting_ids
      },
      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,
          keywords: self.filter.keywords
        }

        this.$http('get','/integral.php/attendance_group/get_attendance_group',params)
          .then(function(response) {
            if (response.status == 200) {
              self.loading = false
              var jsonData = response.data
              try {
                self.totalCount = jsonData.data.total
                self.tableData = jsonData.data.list
              } catch (err) {
                console.log(err)
              }
            }
          })
          .catch(function(error) {
            console.log(error)
          })
      },
      changePage: function(current) {
        if (isNaN(current) || current < 1) {
          return false
        }
        this.loadRuleList()
      },
      saveFormData: function() {
      // this.save_loading = true
        var self = this
        const send_data = JSON.parse(JSON.stringify(this.formdata))
        const work_date = []
        console.log(this.date_must_arr)
        for (const i in send_data.work_date) {
          work_date.push(send_data.work_date[i].setting_id)
        }

        send_data.date_must = self.date_must_arr
        console.log(self.work_date_list, '这里是数据')
        if (send_data.type == 2) {
        // 自由上下班
          send_data.work_date = self.work_date_list
        } else {
          send_data.work_date = work_date
        }

        if(self.is_out_attendance){
          send_data['is_out_attendance'] = 1
        }else{
          send_data['is_out_attendance'] = 0
        }
        this.$http('post',this.form_api,qs.stringify({ data: JSON.stringify(send_data) }),
          // headers: {
          //   'Content-Type': 'application/x-www-form-urlencoded'
          // }
        )
          .then(function(response) {
            self.save_loading = false
            if (response.status == 200) {
              console.log(response.data)
              if (response.data.code == 1) {
                self.RuleDetailDialogVisible = false
                self.onFilterChanged()
                self.$message.success(response.data.msg)
              } else {
                self.$message.error(response.data.msg)
              }
            } else {
              self.$message.error('网络错误')
            }
          })
          .catch(function(error) {
            self.$message.error('网络错误')
          })
      },

      confirmDelete: function(ruleId) {
        this.$confirm(
          '确定要删除此考勤组吗？',
          '删除考勤组',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            this.deleteRule(ruleId)
          })
          .catch(() => {
          // console.log('已取消删除');
          })
      },

      get_overtime_list() {
        const self = this
        var params = {
          page: 1,
          interval: 1000
        }
        this.$http('get','/integral.php/attendance_overtime_rule/get_list', params
          )
          .then(res => {
            if (res.status == 200) {
              self.overtime_rule_list = res.data.data.data
              console.log(res.data.data.data)
            }
          })
      },

      deleteRule: function(ruleId) {
        if (!ruleId) {
          return false
        }
        const params = {
          id: ruleId
        }
        var self = this
        this.$http('get','/integral.php/attendance_group/delete_attendance_group',params)
          .then(function(response) {
            if (response.status == 200 && response.data.code == 1) {
              self.$message.success(response.data.msg)
              self.loadRuleList()
            } else {
              self.$message.error('网络错误')
            }
          })
          .catch(function(error) {
            console.log(error)
          })
      },
      corde: function(data) {
         this.group_id = data.id;
         this.showDialog = true;
      },
      changDialog: function() {
         this.showDialog = false;
         console.log( this.showDialog);
      },
      toDetailPage: function(id, event) {
        const self = this

        self.date_must_arr = []
        self.formdata = {
          name: '',
          employee_ids: [],
          employee: [

          ],
          manager_ids: [],
          manager: [

          ],
          un_employee_ids: [],
          un_employee: [

          ],
          attendance_setting_ids: [],
          attendance_setting_list: [

          ],
          work_date: [
            { name: '周一', setting_id: 0 },
            { name: '周二', setting_id: 0 },
            { name: '周三', setting_id: 0 },
            { name: '周四', setting_id: 0 },
            { name: '周五', setting_id: 0 },
            { name: '周六', setting_id: 0 },
            { name: '周日', setting_id: 0 }
          ],
          date_must: [],
          date_not: [],
          type: 0,
          location_range: 300,
          location: [],
          overtime_rule: ''
        }

        if (id > 0) {
          this.form_api = '/integral.php/attendance_group/update_attendance_group'
          this.dialog_title = '修改考勤组'
          // 获取一条记录，用于复原修改界面
          this.$http('get','/integral.php/attendance_group/get_attendance_group',{ id: id }).then((res) => {
              if (res.status == 200) {
                self.is_out_attendance = res.data.data.is_out_attendance == 1
                self.formdata.name = res.data.data.name
                self.formdata.employee = res.data.data.employee_ids
                self.formdata.manager = res.data.data.manager_ids
                self.formdata.un_employee = res.data.data.un_employee_ids
                for (const i in self.formdata.employee) {
                  self.formdata.employee_ids.push(self.formdata.employee[i].id)
                }
                for (const i in self.formdata.manager) {
                  self.formdata.manager_ids.push(self.formdata.manager[i].id)
                }
                for (const i in self.formdata.un_employee) {
                  self.formdata.un_employee_ids.push(self.formdata.un_employee[i].id)
                }

                for (const i in res.data.data.attendance_setting_ids) {
                  self.formdata.attendance_setting_ids.push(res.data.data.attendance_setting_ids[i].id * 1)
                  self.formdata.attendance_setting_list.push({ label: res.data.data.attendance_setting_ids[i].name, value: res.data.data.attendance_setting_ids[i].id * 1 })
                }

                if (res.data.data.type == 0) {
                  for (const i in res.data.data.work_date) {
                    self.formdata.work_date[i].setting_id = res.data.data.work_date[i].id * 1
                  }
                  console.log(self.formdata.work_date)
                }
                if (res.data.data.type == 1) {
                  self.formdata.work_date = []
                  for (const i in res.data.data.work_date) {
                    self.work_date_length = res.data.data.work_date.length
                    self.formdata.work_date.push({ name: '第' + (i + 1) + '天', setting_id: res.data.data.work_date[i].id * 1 })
                  }
                }

                self.date_must_arr = JSON.parse(JSON.stringify(res.data.data.date_must))

                for (const i in res.data.data.date_must) {
                  self.formdata.date_must.push(res.data.data.date_must[i].split(':')[0])
                }

                if (res.data.data.type == 2) {
                  self.formdata.work_date = []
                  self.work_date_list = res.data.data.work_date.map(function(item) {
                    return 1 * item
                  })
                }

                self.formdata.overtime_rule = res.data.data.overtime_rule
                // self.formdata.date_must = res.data.data.date_must
                self.formdata.date_not = res.data.data.date_not
                self.formdata.location = res.data.data.location
                self.formdata.type = res.data.data.type
                self.formdata.id = res.data.data.id
                self.RuleDetailDialogVisible = true

                self.setMustDateArr()
                console.log(self.formdata, self.date_must_arr, self.attendance_setting_list_must)
              } else {
                self.$message.error('网络错误')
              }
            })
        } else {
          this.RuleDetailDialogVisible = true
          this.form_api = '/integral.php/attendance_group/create_attend_group'
          this.dialog_title = '创建考勤组'
        }
      }

  },
  created() {
      this.get_overtime_list()
      this.loadRuleList()
  }
}
</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;
  }

  .setMapBaidu .map {
    width: 100%;
    height: 300px;
  }
  .diy-input-on-border input{background-color: transparent; border:none;}
</style>
