<template>
  <div class="flexOne">
    <div class="att_title">工作日设置</div>
    <table class="att_table" cellspacing="0" cellpadding="0">
      <tr>
        <th>工作日</th>
        <th>上班时间</th>
        <th>下班时间</th>
        <th>操作</th>
      </tr>

      <tr v-for="(item,index) in listArr">
        <td>
          <el-checkbox @change='activateOrDisabled(index)' v-model='item.IsCheck'>{{item.Workday}}</el-checkbox>
        </td>
        <td>
          <el-time-select v-model='item.BeOnDutyTime'
                          :picker-options="{start: '08:00',step: '00:05',end: '22:00', maxTime: item.OffDutyTime}"
                          :disabled='!item.IsCheck'></el-time-select>
        </td>
        <td>
          <el-time-select v-model='item.OffDutyTime'
                          :picker-options="{start: '08:00',step: '00:05',end: '22:00', minTime: item.BeOnDutyTime}"
                          :disabled='!item.IsCheck'></el-time-select>
        </td>
        <td>
          <el-tooltip v-if='index>0' class="item" effect="dark" content="同上" placement="right">
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click='copyPrev(index)' circle></el-button>
          </el-tooltip>
        </td>
      </tr>
    </table>
    <div class="att_title">特殊日期</div>

    <div class="att_special_dates">必须打卡的日期 <input class="att_addBtn" type="button" value="添加" @click="addSignIn"></div>
    <table v-if='this.signInDates.length>=1' class="att_table" cellspacing="0" cellpadding="0">
      <tr>
        <th>日期</th>
        <th>部门</th>
        <th>员工</th>
        <th>考勤时间</th>
        <th width="80">操作</th>
      </tr>
      <tr v-for="(item,index) in signInDates">
        <td>{{item.Date}}</td>
        <td>{{item.DepartmentName}}</td>
        <td>{{item.EmployeeName}}</td>
        <td>{{item.BeOnDutyTime}}~{{item.OffDutyTime}}</td>
        <td>
          <el-row>
            <el-tooltip class="item" effect="dark" content="删除" placement="right">
              <el-button type="danger" icon="el-icon-delete" @click='deleteSignIn(index)' circle></el-button>
            </el-tooltip>
          </el-row>
        </td>
      </tr>
    </table>
    <div class="att_special_dates">不用打卡的日期 <input class="att_addBtn" type="button" value="添加" @click="addSignOut"></div>
    <table v-if='this.signOutDates.length>=1' class="att_table" cellspacing="0" cellpadding="0">
      <tr>
        <th>日期</th>
        <th width="80">操作</th>
      </tr>
      <tr v-for="(item,index) in signOutDates">
        <td>{{item.Date}}</td>
        <td>
          <el-row>
            <el-tooltip class="item" effect="dark" content="删除" placement="right">
              <el-button type="danger" icon="el-icon-delete" @click='deleteSignOut(index)' circle></el-button>
            </el-tooltip>
          </el-row>
        </td>
      </tr>
    </table>

    <div class="att_title">考勤方式<span>以下方式满足一项，考勤组成员即可完成考勤</span></div>

    <div class="att_type_item">
      <p>1.根据地点考勤<span>(可添加多个考勤地点)</span></p>
      <p>有效范围
        <el-select v-model='addressRange' @change='setAddressRange'>
          <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-select>
      </p>
      <table class="att_table" cellspacing="0" cellpadding="0">
        <tr>
          <th align="left" style="text-indent: 30px;">考勤地址</th>
          <th width="80">操作</th>
        </tr>
        <tr v-if="awListData.length==0">
          <td colspan="2">未添加办公地点！</td>
        </tr>
        <tr v-for="(item,index) in awListData">
          <td align="left">
            <p class="awName">
              {{item.Name}}
            </p>
            <p class="awAddress">
              {{item.Address}}
            </p>
          </td>
          <td>
            <el-row>
              <el-tooltip class="item" effect="dark" content="删除" placement="right">
                <el-button type="danger" icon="el-icon-delete" @click='deleteAddress(index)' circle></el-button>
              </el-tooltip>
            </el-row>
          </td>
        </tr>
      </table>

    </div>
    <input class="att_addBtn" type="button" value="添加地点" @click="addAddress()">

    <div class="att_type_item">
      <p>2.根据Wifi考勤<span>(可添加多个办公wifi)</span></p>
      <table class="att_table" cellspacing="0" cellpadding="0">
        <tr>
          <th>名称</th>
          <th>MAC地址</th>
          <th width="80">操作</th>
        </tr>
        <tr v-if="awWifiListDates.length==0">
          <td colspan="3">未添加办公Wifi！</td>
        </tr>
        <tr v-for="(item,index) in awWifiListDates">
          <td>{{item.Name}}</td>
          <td>{{item.TargetAddress}}</td>
          <td>
            <el-row>
              <el-tooltip class="item" effect="dark" content="删除" placement="right">
                <el-button type="danger" icon="el-icon-delete" @click='deleteWifi(index)' circle></el-button>
              </el-tooltip>
            </el-row>
          </td>
        </tr>
      </table>
    </div>
    <input class="att_addBtn" type="button" value="添加WIFI" @click="addWifi">
    <div class="att_saveDiv">
      <input type="button" class="normalBtn" value="保存设置" @click="addAttendance" />
      <input type="button" class="hollowFixedBtn" value="取消" @click="goBack()" />
    </div>

    <el-dialog custom-class='att_addDates' :title="dialogTitle" :visible.sync="outerVisible" center>
      <table class="layerTable" v-if='this.signDateType==1'>
        <tr>
          <td>
            <span>添加方式</span>
            <label><input type="radio" value="one" v-model="picked">单天</label>
            <label><input type="radio" value="two" v-model="picked">范围</label>
          </td>
        </tr>
        <tr v-if="picked=='one'">
          <td><span><em></em>日期</span>
            <el-date-picker class='w275' v-model='newSignIn.Date' type="date" :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd"></el-date-picker>
          </td>
        </tr>
        <tr v-if="picked=='two'">
          <td><span><em></em>日期</span>
            <el-date-picker class='w135' v-model='fwStartTime' type="date" :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd" @change='getDateArr'></el-date-picker>
            <el-date-picker class='w135' v-model='fwEndTime' type="date" :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd" @change='getDateArr'></el-date-picker>
          </td>
        </tr>
        <tr>
          <td><span><em></em>上班时间</span>
            <el-time-select class='w275' v-model='newSignIn.BeOnDutyTime'
                            :picker-options="{start: '08:00',step: '00:05',end: '22:00', maxTime:this.newSignIn.OffDutyTime}">
            </el-time-select>
          </td>

        </tr>
        <tr>
          <td><span><em></em>下班时间</span>
            <el-time-select class='w275' v-model='newSignIn.OffDutyTime'
                            :picker-options="{start: '08:00',step: '00:05',end: '22:00', minTime:this.newSignIn.BeOnDutyTime}">
            </el-time-select>
          </td>
        </tr>
        <tr>
          <td>
            <span>部门</span>
            <el-select  filterable  v-model='newSignIn.RB_Department_Id' @change='getEmployee(newSignIn.RB_Department_Id)'>
              <el-option v-for='item in departmentList'
                         :label='item.DeptName'
                         :value='item.DeptId'
                         :key='item.DeptId'>
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>
            <span>员工</span>
            <el-select  filterable  v-model='newSignIn.EmployeeId' @change="getEmployeeName(newSignIn.EmployeeId)">
              <el-option v-for='item in employeeList'
                         :label='item.EmployeeName'
                         :value='item.AccountId'
                         :key='item.AccountId'>
              </el-option>
            </el-select>
          </td>
        </tr>
      </table>
      <table class="layerTable" v-if='this.signDateType==2'>
        <tr>
          <td>
            <span>添加方式</span>
            <label><input type="radio" value="one" v-model="picked1">单天</label>
            <label><input type="radio" value="two" v-model="picked1">范围</label>
          </td>
        </tr>
        <tr v-if="picked1=='one'">
          <td><span><em></em>日期</span>
            <el-date-picker class='w275' v-model='newSignOut.Date' :picker-options="pickerOptions" type="date"
                            value-format="yyyy-MM-dd"></el-date-picker>
          </td>
        </tr>
        <tr v-if="picked1=='two'">
          <td><span><em></em>日期</span>
            <el-date-picker class='w135' v-model='fwStartTime1' type="date" :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd" @change='getDateArr1'></el-date-picker>
            <el-date-picker class='w135' v-model='fwEndTime1' type="date" :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd" @change='getDateArr1'></el-date-picker>
          </td>
        </tr>
      </table>

      <div v-if='this.signDateType==3' class="amap-page-container">
        <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult">
        </el-amap-search-box>
        <el-amap vid="amapDemo" :center="center" :zoom="12" style='width: 744px;height: 450px; border:1px solid #ccc;'>
          <el-amap-marker v-for="(marker, index) in markers" :key='index' :position="marker.position"
                          :radius="marker.radius" :fill-color="marker.fillColor" :fill-opacity="marker.fillOpacity"
                          :events="marker.events"></el-amap-marker>
        </el-amap>
        <table style="width: 100%;">
          <tr height="45">
            <td align="right">名称：</td>
            <td><input class="att_map_input" type="text" v-model="newAwlist.Name" /></td>
            <td align="right">详细地址：</td>
            <td><input class="att_map_input" type="text" v-model="newAwlist.Address" /></td>
          </tr>
          <tr height="45">
            <td align="right">经纬度：</td>
            <td><input class="att_map_input" type="text" v-model="newAwlist.TargetAddress" readonly="" /></td>
          </tr>
        </table>
      </div>

      <table class="layerTable" v-if='this.signDateType==4'>
        <tr>
          <td>
            <span><em></em>名称</span>
            <el-input class='w200' v-model='newAwWiFi.Name'></el-input>
          </td>
        </tr>
        <tr>
          <td>
            <span><em></em>MAC地址</span>
            <el-input class='w200' v-model='newAwWiFi.TargetAddress'></el-input>
          </td>
        </tr>
      </table>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="cancel">取 消</button> &nbsp;
        <button v-if='saveBtnType==1' class="normalBtn" type="primary" @click="saveSignIn()">保存</button>
        <button v-if='saveBtnType==3' class="normalBtn" type="primary" @click="saveSignOut()">保存</button>
        <button v-if='saveBtnType==4' class="normalBtn" type="primary" @click="saveWifi()">保存</button>
        <button v-if='saveBtnType==5' class="normalBtn" type="primary" @click="saveAddress()">保存</button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  // import VueAMap from 'vue-amap'
  // let amapManager = new VueAMap.AMapManager();
  import {
    getDepartmentGetList,
    getAttendanceInfo,
    getTimeSpanValue,
    setAttendanceInfo
  } from '../../api/administration/administration'
  import {
    queryManagerPage,
  } from '../../api/school/index'
  import {
    getDeptPage,
  } from '../../api/system/dept'
  export default {
    data() {
      return {
        fwStartTime: '',
        fwEndTime: '',
        fwStartTime1: '',
        fwEndTime1: '',
        fwdateArr: [],
        fwdateArr1: [],
        picked: 'one',
        picked1: 'one',
        searchOption: {},
        markers: [],
        center: [104.090588, 30.643365],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        zoom: 12,
        // amapManager,
        events: {},
        searchData: [],
        lnglatXY: [],
        addMapStyle: false,
        outerVisible: false,
        innerVisible: false,
        isRight: true,
        dialogTitle: '',
        specialDatesIsShow: true,
        wdListArr: [],
        signInDates: [],
        newSignIn: {
          'Date': '',
          'BeOnDutyTime': '',
          'OffDutyTime': ''
        },
        signOutDates: [],
        newSignOut: {
          'Date': ''
        },
        awWifiListDates: [],
        newAwWiFi: {
          'Name': '',
          'TargetAddress': ''
        },
        awListData: [],
        newAwlist: {
          'Name': '',
          'Address': '',
          'TargetAddress': '',
          'Scope': ''
        },
        SpecialDates: [],
        signDateType: 0,
        saveBtnType: 1,
        isRepetition: false,
        awListDates: [],
        addressRange: '300',
        listArr: [{
          'AttendanceId': '0',
          "Id": '0',
          'IsCheck': false,
          "Workday": "周一",
          "BeOnDutyTime": "",
          "OffDutyTime": ""
        },
          {
            'AttendanceId': '0',
            "Id": '0',
            'IsCheck': false,
            "Workday": "周二",
            "BeOnDutyTime": "",
            "OffDutyTime": ""
          },
          {
            'AttendanceId': '0',
            "Id": '0',
            'IsCheck': false,
            "Workday": "周三",
            "BeOnDutyTime": "",
            "OffDutyTime": ""
          },
          {
            'AttendanceId': '0',
            "Id": '0',
            'IsCheck': false,
            "Workday": "周四",
            "BeOnDutyTime": "",
            "OffDutyTime": ""
          },
          {
            'AttendanceId': '0',
            "Id": '0',
            'IsCheck': false,
            "Workday": "周五",
            "BeOnDutyTime": "",
            "OffDutyTime": ""
          },
          {
            'AttendanceId': '0',
            "Id": '0',
            'IsCheck': false,
            "Workday": "周六",
            "BeOnDutyTime": "",
            "OffDutyTime": ""
          },
          {
            'AttendanceId': '0',
            "Id": '0',
            'IsCheck': false,
            "Workday": "周日",
            "BeOnDutyTime": "",
            "OffDutyTime": ""
          }
        ],
        //请求数据
        addMsg: {
          attendanceId: '-1',
          RB_BranchId: '0',
          Status: '0',
          wdList: [], //[{'Workday'：周一,'BeOnDutyTime':'09:30:00','OffDutyTime':'09:30:00'}，{}，{}]
          tdList: [], //特殊打卡 [{'Date':'2018-04-15',BeOnDutyTime':'09:30:00','OffDutyTime':'09:30:00'},{}]
          NottdList: [], //[{Date:'2018-04-15'}]  //特殊不打卡
          awList: [], //Name，Address，TargetAddress，Scope  awList：[{'Name'：'xxx',Address:'xxx',TargetAddress:'xxx',Scope：'xxx'},{}]
          awWifiList: [] //awWifiList:[{'Name':'xxxx',TargetAddress:'12.51.42.32'}]
        },
        departmentMsg: {
          RB_Group_Id: '0',
          RB_Branch_Id:'0',
          Status:'0',
          ParentId:'-1',
          Tier:'0',
        },
        employeeMsg: {
          RB_Group_id:'0',
          RB_Branch_id:'-1',
          departmentId:'0',
          IsLeave:'-1',
        },
        departmentList: [],
        employeeList: [],
      }
    },
    methods: {
      getEmployeeName(id){
        this.employeeList.map(x=>{
          if (id == x.AccountId) {
            this.newSignIn.EmployeeName = x.EmployeeName
          }
        })
      },
      getEmployee(id) {
        let msg={
          Dept_Id: id,
          EmployeeName: "",
          EndBirthDate: "",
          EndEntryTime: "",
          EndLeaveTime: "",
          LeaveStatus: 0,
          Post_Id: 0,
          School_Id: 0,
          StartBirthDate: "",
          StartEntryTime: "",
          StartLeaveTime: "",
          pageIndex: 1,
          pageSize: 9999,
        }
        queryManagerPage(msg).then(res => {
          if(res.Code==1){
            this.employeeList = res.Data.PageData;
          }
        }).catch(() => {

        })
        this.departmentList.map(x=>{
          if (id == x.DeptId) {
            this.newSignIn.DepartmentName = x.DeptName
          }
        })
      },
      getDepartment() {
        let msg = {
          DeptId: 0,
          DeptName: "",
          DeptTier: "0",
          ParentId: "0",
          School_Id: this.departmentMsg.RB_Branch_Id,
          Status: "-1",
          pageIndex: 1,
          pageSize: 999999,
        }
        getDeptPage(msg).then(res => {
          if(res.Code==1){
            this.departmentList = res.Data.PageData;
          }
        }).catch(() => {
        })
      },
      getDateArr() {
        if (this.fwStartTime != '' && this.fwEndTime != '') {
          getTimeSpanValue(
            {
              StartTime: this.fwStartTime,
              EndTime: this.fwEndTime
            }
          ).then(res => {
            if(res.Code==1){
              this.fwdateArr = res.Data
            }
          }).catch(() => {
          })
        }
      },
      getDateArr1() {
        if (this.fwStartTime1 != '' && this.fwEndTime1 != '') {
          getTimeSpanValue(
            {
              StartTime: this.fwStartTime1,
              EndTime: this.fwEndTime1
            }
          ).then(res => {
            if(res.Code==1){
              this.fwdateArr1 = res.Data
            }
          }).catch(() => {
          })
        }
      },
      onSearchResult(pois) {
        let latSum = 0;
        let lngSum = 0;
        this.markers.length = 0
        if (pois.length > 0) {
          pois.forEach(poi => {
            let {
              lng,
              lat
            } = poi;
            lngSum += lng;
            latSum += lat;
            let markerItem = {
              position: [poi.lng, poi.lat],
              radius: 20,
              fillOpacity: 1,
              fillColor: 'rgba(0,0,255,1)',
              events: {
                click: (e) => {
                  this.newAwlist.Name = e.target.Uh.events.name;
                  this.newAwlist.Address = e.target.Uh.events.address;
                  this.newAwlist.TargetAddress = e.lnglat.lat + ',' + e.lnglat.lng;
                },
                address: poi.address,
                name: poi.name,
              },

            }
            this.markers.push(markerItem);
          });
          let center = {
            lng: lngSum / pois.length,
            lat: latSum / pois.length
          };
          this.center = [center.lng, center.lat];
        }
      },
      activateOrDisabled(index) {
        if (this.listArr[index].IsCheck == false) {
          this.listArr[index].BeOnDutyTime = '';
          this.listArr[index].OffDutyTime = '';
        }
      },
      copyPrev(index) {
        if (this.listArr[index].IsCheck == true) {
          this.listArr[index].BeOnDutyTime = this.listArr[index - 1].BeOnDutyTime;
          this.listArr[index].OffDutyTime = this.listArr[index - 1].OffDutyTime;
        }
      },
      addSignIn() {
        this.saveBtnType = 1;
        this.dialogTitle = '添加必须打卡日期';
        this.newSignIn = {
          'Date': '',
          'BeOnDutyTime': '',
          'OffDutyTime': '',
          RB_Department_Id: '',
          EmployeeId: '',
        };
        this.outerVisible = true;
        this.signDateType = 1;
      },
      updateSignIn(index) {
        this.dialogTitle = '修改必须打卡日期';
        this.outerVisible = true;
        this.signDateType = 1;
        this.saveBtnType = 2;
        this.newSignIn.Date = this.signInDates[index].Date;
        this.newSignIn.BeOnDutyTime = this.signInDates[index].BeOnDutyTime;
        this.newSignIn.OffDutyTime = this.signInDates[index].OffDutyTime;
      },
      deleteSignIn(index) {

        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.signInDates.splice(index, 1)
          this.getSpecialDates()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      saveSignIn() {
        let list = [...this.signInDates, ...this.signOutDates]
        if (this.newSignIn.RB_Department_Id == '') {
          this.newSignIn.RB_Department_Id = 0
        }
        if (this.newSignIn.EmployeeId == '') {
          this.newSignIn.EmployeeId = 0
        }
        if (this.picked == 'one') { // 单天设置
          this.isRepetition = false;
          list.forEach(item => {
            if (this.newSignIn.Date == item.Date && (this.newSignIn.RB_Department_Id == item.RB_Department_Id || this.newSignIn.RB_Department_Id == 0) &&
              (this.newSignIn.EmployeeId == item.EmployeeId || this.newSignIn.EmployeeId == 0)) {
              this.isRepetition = true;
            } else if (this.newSignIn.Date == item.Date) {
              this.isRepetition = true;
            }
          })
          if (this.newSignIn.Date != '' && this.newSignIn.BeOnDutyTime != '' && this.newSignIn.OffDutyTime != '') {
            if (!this.isRepetition) {
              this.signInDates.unshift(this.newSignIn);
              this.newSignIn = {
                'Date': '',
                'BeOnDutyTime': '',
                'OffDutyTime': ''
              };
              this.getSpecialDates()
              this.outerVisible = false;
              this.$message.success('添加成功！');

            } else {
              this.$message.warning('必须打卡日期或不用打卡日期存在重复！')
            }
          } else {
            this.$message.warning('请填写完整信息！')
          }
        }
        if (this.picked == 'two') { //范围设置
          this.isRepetition = false;

          this.SpecialDates.forEach(item => {
            if (this.fwdateArr.findIndex(x => x == item) != -1) {
              this.isRepetition = true; //存在重复
            }
          })

          if (this.isRepetition) {
            this.$message.warning('必须打卡日期或不用打卡日期存在重复！')
          } else {
            this.fwdateArr.forEach(item => {
              this.signInDates.push({
                'Date': item,
                'DepartmentName':this.newSignIn.DepartmentName,
                'RB_Department_Id':this.newSignIn.RB_Department_Id,
                'EmployeeId':this.newSignIn.EmployeeId,
                'BeOnDutyTime': this.newSignIn.BeOnDutyTime,
                'OffDutyTime': this.newSignIn.OffDutyTime,
                'EmployeeName': this.newSignIn.EmployeeName,
              })
              this.getSpecialDates()
              this.outerVisible = false;
              this.$message.success('添加成功！');
              this.fwStartTime = ''
              this.fwEndTime = ''
            })
          }
        }
      },
      addSignOut() {
        this.newSignOut.Date = '',
          this.signDateType = 2;
        this.dialogTitle = '添加不用打卡日期';
        this.saveBtnType = 3;
        this.outerVisible = true;
      },
      saveSignOut() {
        let list = [...this.signInDates, ...this.signOutDates]
        if (this.picked1 == 'one') { // 单天设置
          this.isRepetition = false;
          list.forEach(item => {
            if (this.newSignIn.Date == item.Date && (this.newSignIn.RB_Department_Id == item.RB_Department_Id || this.newSignIn.RB_Department_Id == 0) &&
              (this.newSignIn.EmployeeId == item.EmployeeId || this.newSignIn.EmployeeId == 0)) {
              this.isRepetition = true;
            } else if (this.newSignIn.Date == item.Date) {
              this.isRepetition = true;
            }
          })
          if (!this.isRepetition) {
            this.signOutDates.unshift(this.newSignOut);
            this.newSignOut = {
              'Date': ''
            };
            this.getSpecialDates()
            this.outerVisible = false;
            this.$message.success('添加成功!');

          } else {
            this.$message.warning('必须打卡日期或不用打卡日期存在重复！')
          }
        }

        if (this.picked1 == 'two') {
          this.isRepetition = false;

          this.SpecialDates.forEach(item => {
            if (this.fwdateArr1.findIndex(x => x == item) != -1) {
              this.isRepetition = true; //存在重复
            }
          })

          if (this.isRepetition) {
            this.$message.warning('必须打卡日期或不用打卡日期存在重复！')
          } else {
            this.fwdateArr1.forEach(item => {
              this.signOutDates.push({
                'Date': item
              })
              this.getSpecialDates()
              this.outerVisible = false;
              this.$message.success('添加成功！');
              this.fwStartTime1 = ''
              this.fwEndTime1 = ''
            })
          }

        }
      },
      deleteSignOut(index) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.signOutDates.splice(index, 1)
          this.getSpecialDates()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      getSpecialDates() { //特殊天数集合
        this.SpecialDates = []
        this.signInDates.forEach(item => {
          if (item.Date && item.Date != '')
            this.SpecialDates.push(item.Date)
        })
        this.signOutDates.forEach(item => {
          if (item.Date && item.Date != '')
            this.SpecialDates.push(item.Date)
        })

      },
      addAddress() {
        document.getElementsByClassName("att_addDates")[0].style.width = '800px';
        this.searchData = null;
        this.newAwlist.Name = '';
        this.newAwlist.Address = '';
        this.newAwlist.TargetAddress = '';
        this.saveBtnType = 5;
        this.dialogTitle = '添加办公地点';
        this.outerVisible = true;
        this.signDateType = 3;
      },
      saveAddress() {
        this.newAwlist.Scope = this.addressRange;
        if (this.newAwlist.Name != '' && this.newAwlist.Address != '' && this.newAwlist.TargetAddress != '') {
          this.awListData.unshift(this.newAwlist);
          this.newAwlist = {
            'Name': '',
            'Address': '',
            'TargetAddress': '',
            'Scope': ''
          };
          this.outerVisible = false;
          this.$alert('添加成功！', '提示');
        } else {
          this.$alert('请填写完整信息！', '提示')
        }
      },
      deleteAddress(index) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.awListData.splice(index, 1)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      setAddressRange() {
        this.awListData.forEach(item => {
          item.Scope = this.addressRange
        })
      },
      addWifi() {
        this.dialogTitle = '添加WIFI';
        this.outerVisible = true;
        this.signDateType = 4;
        this.saveBtnType = 4;
      },
      saveWifi() {
        if (this.newAwWiFi.Name != '' && this.newAwWiFi.TargetAddress != '') {
          this.awWifiListDates.unshift(this.newAwWiFi);
          this.newAwWiFi = {
            'Name': '',
            'TargetAddress': ''
          };
        } else {
          this.$alert('请填写完整信息！', '提示')
        }
      },
      deleteWifi(index) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.awWifiListDates.splice(index, 1)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      cancel() {
        document.getElementsByClassName("att_addDates")[0].style.width = '500px';
        this.outerVisible = false;
      },
      addAttendance() {
        this.wdListArr = []
        this.listArr.forEach(item => {
          if (item.IsCheck == true && item.BeOnDutyTime != '' && item.OffDutyTime != '') {
            this.wdListArr.push({
              'Workday': item.Workday,
              "BeOnDutyTime": item.BeOnDutyTime,
              "OffDutyTime": item.OffDutyTime
            })
          }
        })
        this.addMsg.wdList = this.wdListArr; //工作日设置
        this.addMsg.tdList = this.signInDates; //必须打卡的日期
        this.addMsg.NottdList = this.signOutDates; //不用打卡的日期
        this.addMsg.awList = this.awListData; //根据地点考勤
        this.addMsg.awWifiList = this.awWifiListDates; //根据Wifi考勤
        setAttendanceInfo(this.addMsg).then(res => {
          if (res.Code == 1) {
            this.$message.success(res.Message)
            this.goBack()
          } else {
            this.$message.error(res.Message)
          }
        }).catch(() => {

        })
      },
      getUpdateList() { //获取修改数据

        getAttendanceInfo({attendanceId: this.addMsg.attendanceId}).then(res => {
          if(res.Code==1){
            this.listArr = res.Data.WdList;
            this.listArr.forEach((item, index) => {
              item.IsCheck = res.Data.WdList[index].IsCheck == '1' ? true : false
            })
            this.signInDates = res.Data.TdList;
            this.signInDates.forEach(item => {
              item.Date = item.Date.substring(0, 10)
            })
            this.signOutDates = res.Data.NottdList;
            this.signOutDates.forEach(item => {
              item.Date = item.Date.substring(0, 10)
            })
            this.getSpecialDates();
            this.awListData = res.Data.AwList;
            this.awWifiListDates = res.Data.AwWifiList;
            if (res.Data.AwList.length > 0) {
              this.addressRange = res.Data.AwList[0].Scope.toString();
            }

          }
        }).catch(() => {
        })

      },
      goBack() {
        history.back(-1)
      },
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.departmentMsg.RB_Group_Id = this.employeeMsg.RB_Group_id = userInfo.RB_Group_id; //集团
      this.addMsg.RB_BranchId = this.departmentMsg.RB_Branch_Id = this.$route.query.bId;
      this.getDepartment()
      if (this.$route.query.id != undefined) {
        this.addMsg.attendanceId = this.$route.query.id;
        this.getUpdateList();
      }

    }

  }

</script>

<style>
  @import "../financial/css/cssReset.css";

  .search-box {
    top: 46px;
    left: 1px;
  }

  .amap-page-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .att .el-select .el-input.is-disabled .el-input__inner {
    height: 34px !important;
  }

  .att_mapitem {
    border-bottom: 1px solid #DCDFE6;
    cursor: pointer;
  }

  .att_mapitem:last-child {
    border-bottom: none;
  }

  .awName {
    height: 34px !important;
    font-size: 14px !important;
    line-height: 34px !important;
  }

  .awAddress {
    height: 34px !important;
  }

  .att_addDates {
    width: 500px;
  }

  .att_map_input {
    width: 200px;
    height: 34px;
    border-radius: 17px;
    padding: 0 10px;
    border: 1px solid #DCDFE6;
  }

  .att_addDates .el-input__inner {
    padding-left: 30px !important;
  }

  .att_addDates .el-input__icon {
    line-height: 34px !important;
  }

  .att_amap {
    width: 800px;
    height: 300px;
  }

  .att_search_box {
    position: absolute;
    top: 25px;
    left: 20px;
  }

  .att_title>span {
    color: #999;
    font-size: 12px;
    padding-left: 15px;
  }

  .att_title {
    height: 14px;
    line-height: 14px;
    padding-left: 15px;
    border-left: 3px solid #E95252;
    margin: 30px 0;
  }

  .att_table {
    width: 800px;
    border: none;
    text-align: center;
    font-size: 12px;
    margin: 20px 0;
  }

  .att_table tr {
    height: 38px;
    text-align: center;
  }

  .att_table tr th:first-child {
    border-radius: 4px 0 0 0;
  }

  .att_table tr th:last-child {
    border-radius: 0 4px 0 0;
  }

  .att_table tr th {
    background: #EAEAEA;
    color: #333;
  }

  .att_table tr td {
    background: #fff;
  }

  .att_table tr td .el-date-editor.el-input {
    width: 120px;
    height: 28px;
  }

  .att_table tr td .el-input--prefix .el-input__inner {
    padding-left: 30px;
    height: 28px;
  }

  .att_table tr td .el-input--prefix .el-input__icon {
    line-height: 28px;
  }

  .att_special_dates {
    font-size: 12px;
    color: #666;
    text-indent: 30px;
    height: 50px;
  }

  .att_addBtn {
    width: 90px;
    height: 30px;
    border: 1px solid #DCDFE6;
    background: #fff;
    margin: 20px 0;
    border-radius: 15px;
    margin-left: 30px;
    cursor: pointer;
  }

  .att_addBtn:hover {
    box-shadow: 2px 2px 1px rgba(0, 0, 0, .1)
  }

  .att_addBtn:active {
    background: #f9f9f9;
  }

  .att_saveDiv {
    margin: 30px 0;
  }

  .att_type_item .el-select .el-input {
    width: 120px;
    margin-left: 20px;
  }

  .att_type_item {}

  .att_type_item p {
    height: 40px;
    font-size: 12px;
    color: #333;
    padding-left: 30px;
  }

  .att_type_item p>span {
    color: #999;
  }

</style>
