<template>
  <div class="flexOne">
    <div class="rowDiv">展示列：
      <el-checkbox v-model='column'>{{$t('admin.admin_Post')}}</el-checkbox>
      <el-checkbox v-model='column1'>出勤天数</el-checkbox>
      <el-checkbox v-model='column2'>休息天数</el-checkbox>
      <el-checkbox v-model='column4'>迟到次数</el-checkbox>
      <el-checkbox v-model='column5'>迟到时长</el-checkbox>
      <el-checkbox v-model='column6'>旷工天数</el-checkbox>
      <el-checkbox v-model='column7'>上班缺卡次数</el-checkbox>
      <el-checkbox v-model='column8'>下班缺卡次数</el-checkbox>
      <el-checkbox v-model='column9'>请假</el-checkbox>
    </div>
    <div class="query-box">
      <ul>
        <li><span><em>{{$t('system.table_company')}}</em>
            <el-select filterable v-model='msg.BranchId' @change='linkageDepartment()'>
              <el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
              <el-option v-for='item in companyList' :label='item.BName' :value='item.Id' :key='item.Id'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li><span><em>{{$t('admin.admin_Department')}}</em>
            <el-select filterable v-model='msg.DepartmentId' @change='linkageEmployeeMsg()'>
              <el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
              <el-option v-for='item in departmentList' :label='item.DepartmentName' :value='item.DepartmentID'
                :key='item.DepartmentID'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li><span><em>{{$t('system.table_staffs')}}</em>
            <el-select filterable v-model='msg.EmployeeId'>
              <el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
              <el-option v-for='item in employeeList' :label='item.name' :value='item.empId' :key='item.empId'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li><span><em>时间</em>
            <el-date-picker v-model='msg.MonthTime' value-format="yyyy-MM" type="month"></el-date-picker>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" value="查询" @click="resetPageIndex(),getList()" />
          <input type="button" class="normalBtn" value="导出报表" @click="exportExcel()" />
          <input type="button" class="normalBtn" value="和平报表" @click="exportExcelByheping()" />
        </li>
      </ul>
    </div>
    <el-table :data="dataList" stripe style="width: 100%" max-height='600' v-loading='loading'>
      <el-table-column fixed prop="EmName" :label="$t('system.query_name')" width="100">
      </el-table-column>
      <el-table-column prop="DepartmentName" :label="$t('admin.admin_Department')" width="150">
      </el-table-column>
      <el-table-column prop="EmployeeId" label="工号" width="80">
      </el-table-column>
      <el-table-column v-if='column' prop="PostName" :label="$t('admin.admin_Post')" width="100">
      </el-table-column>
      <el-table-column v-if='column1' prop="CQDay" label="出勤天数" width="100">
      </el-table-column>
      <el-table-column v-if='column2' prop="XXDay" label="休息天数" width="100">
      </el-table-column>
      <el-table-column v-if='column4' label="迟到次数" width="100">
        <template slot-scope="scope">
          <p v-if='scope.row.CDNum==0'>{{scope.row.CDNum}}</p>
          <p v-if='scope.row.CDNum>0' class="pclick"
            @click="getCDList(msg.MonthTime,scope.row.EmployeeId,type=1,scope.row.EmName,title='月迟到汇总')">
            {{scope.row.CDNum}}</p>
        </template>
      </el-table-column>
      <el-table-column v-if='column5' prop="CDTime" label="迟到时间" width="100">
        <template slot-scope="scope">
          <p v-if="scope.row.CDTime>0">{{scope.row.CDTime}}分钟</p>
        </template>
      </el-table-column>
      <el-table-column v-if='column6' label="旷工天数" width="100">
        <template slot-scope="scope">
          <p v-if='scope.row.QGDay==0'>{{scope.row.QGDay}}</p>
          <p v-if='scope.row.QGDay>0' class="pclick"
            @click="getCDList(msg.MonthTime,scope.row.EmployeeId,type=4,scope.row.EmName,title='月旷工汇总')">
            {{scope.row.QGDay}}</p>
        </template>
      </el-table-column>
      <el-table-column v-if='column7' label="上班缺卡" width="100">
        <template slot-scope="scope">
          <p v-if='scope.row.SBQK==0'>{{scope.row.SBQK}}</p>
          <p v-if='scope.row.SBQK>0' class="pclick"
            @click="getCDList(msg.MonthTime,scope.row.EmployeeId,type=2,scope.row.EmName,title='月上班缺卡汇总')">
            {{scope.row.SBQK}}</p>
        </template>
      </el-table-column>
      <el-table-column v-if='column8' label="下班缺卡" width="100">
        <template slot-scope="scope">
          <p v-if='scope.row.XBQK==0'>{{scope.row.XBQK}}</p>
          <p v-if='scope.row.XBQK>0' class="pclick"
            @click="getCDList(msg.MonthTime,scope.row.EmployeeId,type=3,scope.row.EmName,title='月下班缺卡汇总')">
            {{scope.row.XBQK}}</p>
        </template>
      </el-table-column>
      <el-table-column v-if='column9' label="事假时长" width="100">
        <template slot-scope="scope">
          <p v-if='scope.row.AffairLeave==0'>{{scope.row.AffairLeave}}</p>
          <p v-if='scope.row.AffairLeave>0' class="pclick"
            @click="getLeave(msg.MonthTime,scope.row.EmployeeId,type=2,scope.row.EmName,title='月事假汇总')">
            {{scope.row.AffairLeave}}</p>
        </template>
      </el-table-column>
      <el-table-column v-if='column9' label="事假天数" width="100">
        <template slot-scope="scope">
          <p v-if='scope.row.AffairLeave==0'>{{scope.row.AffairLeaveForDay}}</p>
          <p v-if='scope.row.AffairLeave>0' class="pclick"
            @click="getLeave(msg.MonthTime,scope.row.EmployeeId,type=2,scope.row.EmName,title='月事假汇总')">
            {{scope.row.AffairLeaveForDay}}</p>
        </template>
      </el-table-column>
      <el-table-column v-if='column9' label="年假时长" width="100">
        <template slot-scope="scope">
          <p v-if='scope.row.AnnualLeave==0'>{{scope.row.AnnualLeave}}</p>
          <p v-if='scope.row.AnnualLeave>0' class="pclick"
            @click="getLeave(msg.MonthTime,scope.row.EmployeeId,type=1,scope.row.EmName,title='月年假汇总')">
            {{scope.row.AnnualLeave}}</p>
        </template>
      </el-table-column>
      <el-table-column v-if='column9' label="年假天数" width="100">
        <template slot-scope="scope">
          <p v-if='scope.row.AnnualLeave==0'>{{scope.row.AnnualLeaveForDay}}</p>
          <p v-if='scope.row.AnnualLeave>0' class="pclick"
            @click="getLeave(msg.MonthTime,scope.row.EmployeeId,type=1,scope.row.EmName,title='月年假汇总')">
            {{scope.row.AnnualLeaveForDay}}</p>
        </template>
      </el-table-column>
      <el-table-column v-if='column9' label="病假时长" width="100">
        <template slot-scope="scope">
          <p v-if='scope.row.SickLeave==0'>{{scope.row.SickLeave}}</p>
          <p v-if='scope.row.SickLeave>0' class="pclick"
            @click="getLeave(msg.MonthTime,scope.row.EmployeeId,type=3,scope.row.EmName,title='月病假汇总')">
            {{scope.row.SickLeave}}</p>
        </template>
      </el-table-column>
      <el-table-column v-if='column9' label="病假天数" width="100">
        <template slot-scope="scope">
          <p v-if='scope.row.SickLeave==0'>{{scope.row.SickLeaveForDay}}</p>
          <p v-if='scope.row.SickLeave>0' class="pclick"
            @click="getLeave(msg.MonthTime,scope.row.EmployeeId,type=3,scope.row.EmName,title='月病假汇总')">
            {{scope.row.SickLeaveForDay}}</p>
        </template>
      </el-table-column>
      <el-table-column v-for='(item,index) in newArr' :prop='item.value' :label="item.title" :key='index' width="180">
        <template slot-scope="scope">
          <p v-if="scope.row[item.value]=='休息'||scope.row[item.value]==''" v-html='scope.row[item.value]'></p>
          <p class="pclick" v-if="scope.row[item.value]!='休息'&&scope.row[item.value]!=''"
            @click="getEverydayList(msg.MonthTime,scope.row.EmployeeId,item.value,scope.row.EmName,item.title)"
            v-html='scope.row[item.value]'></p>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
    </el-pagination>
    <el-dialog :title="dialogTitle" :visible.sync="outerVisible" center>
      <el-form :model="form">
        <el-table v-show='layerType==1' :data='CDList' style='width: 100%;'>
          <el-table-column prop="DateStr" label="日期" min-width="80">
          </el-table-column>
          <el-table-column prop="BeOnDutyTime" label="上班打卡时间" min-width="80">
          </el-table-column>
          <el-table-column prop="BeOnResult" label="上班打卡结果" min-width="80">
          </el-table-column>
          <el-table-column prop="OffDutyTime" label="下班打卡时间" min-width="80">
          </el-table-column>
          <el-table-column prop="OffResult" label="下班打卡结果" min-width="80">
          </el-table-column>
        </el-table>
        <el-table v-if='layerType==2' :data='leaveList' style='width: 100%;' key="bTable">
          <el-table-column prop="AskforleaveType" label="请假类型" min-width="80">
          </el-table-column>
          <el-table-column prop="StartTime" label="开始时间" min-width="80">
          </el-table-column>
          <el-table-column prop="EndTime" label="结束时间" min-width="80">
          </el-table-column>
          <el-table-column prop="Duration" label="时长" min-width="80">
          </el-table-column>
        </el-table>
        <el-table v-if='layerType==3' :data='everdayList' style='width: 100%;' key="cTable">
          <el-table-column prop="BeOnTime" label="上班考勤时间" min-width="80">
          </el-table-column>
          <el-table-column prop="BeOnDutyTime" label="上班打卡时间" min-width="80">
          </el-table-column>
          <el-table-column prop="BeOnResult" label="上班打卡结果" min-width="80">
            <template slot-scope="scope">
              <p v-if="scope.row.BeOnResult!='缺卡'">{{scope.row.BeOnResult}}</p>
              <p v-if="scope.row.BeOnResult=='缺卡'" class="pclick"
                @click="updateEveryday(scope.row.BeOnTime,scope.row.Id,OnAndOffDuty=1)">{{scope.row.BeOnResult}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="OffTime" label="下班考勤时间" min-width="80">
          </el-table-column>
          <el-table-column prop="OffDutyTime" label="下班打卡时间" min-width="80">
          </el-table-column>
          <el-table-column label="下班打卡结果" min-width="80">
            <template slot-scope="scope">
              <p v-if="scope.row.OffResult!='缺卡'">{{scope.row.OffResult}}</p>
              <p v-if="scope.row.OffResult=='缺卡'" class="pclick"
                @click="updateEveryday(scope.row.OffTime,scope.row.Id,OnAndOffDuty=2)">{{scope.row.OffResult}}</p>
            </template>
          </el-table-column>
        </el-table>
        <table v-if='layerType==4' style="width: 100%;" border="0" cellspacing="0" cellpadding="0" key="dTable">
          <tr height="60">
            <td>状态</td>
            <td>
              <el-select v-model='updateMsg.RecordStatus' placeholder="不限" @change='getBeLateTime'>
                <el-option label='正常' value='1'></el-option>
                <el-option label='迟到' v-if='isXb' value='2'></el-option>
              </el-select>
            </td>
            <td>考勤时间</td>
            <td>
              <el-input class='w217' v-model='updateMsg.SBTime' readonly></el-input>
            </td>
          </tr>
          <tr height="60" v-if='isXb'>
            <td>迟到时间</td>
            <td>
              <el-input class='w217' v-model='updateMsg.BeLateTime' :readonly="isAllowUpdate"></el-input>
            </td>
          </tr>
        </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button v-if='sureBtn' class="normalBtn" type="primary" @click="outerVisible = false">确定</button>
        <button v-if='!sureBtn' class="normalBtn" type="primary" @click="outerVisible = false">取消</button>
        <button v-if='!sureBtn' class="normalBtn" type="primary" @click="saveUpdate()">保存</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        column: true,
        column1: true,
        column2: true,
        column3: true,
        column4: true,
        column5: true,
        column6: true,
        column7: true,
        column8: true,
        column9: true,
        layerType: '',
        outerVisible: false,
        loading: true,
        sureBtn: true,
        isXb: true,
        isUpdate: false,
        isAllowUpdate: true,
        DKday: '',
        dialogTitle: '',
        form: {},
        //分页
        total: 0,
        pageSize: '',
        currentPage: 1,
        //请求数据
        msg: {
          pageIndex: 1,
          pageSize: 15,
          BranchId: '-1',
          DepartmentId: '-1',
          EmployeeId: '-1',
          MonthTime: '',
        },
        exportMsg: {
          BranchId: '-1',
          DepartmentId: '-1',
          EmployeeId: '-1',
          MonthTime: '',
        },
        companyMsg: {
          Status: '0',
          is_show: '0',
          RB_Group_Id: '0',
        },
        departmentMsg: {
          RB_Group_Id: '0',
          RB_Branch_Id: '-1',
          Status: '0',
          ParentId: '-1',
          Tier: '0',
        },
        employeeMsg: {
          RB_Group_id: '0',
          RB_Branch_id: '-1',
          departmentId: '0',
          IsLeave: '-1',
        },
        updateMsg: {
          RecordId: '',
          OnAndOffDuty: '',
          RecordStatus: '',
          BeLateTime: '0',
          DKTime: '',
          SBTime: '',
        },
        //返回数据
        dataList: [],
        companyList: [],
        departmentList: [],
        employeeList: [],
        datesArr: [],
        newArr: [],
        CDList: [],
        leaveList: [],
        everdayList: [],
      }
    },
    methods: {
      exportExcel() { //导出报表
        this.exportMsg.BranchId = this.msg.BranchId;
        this.exportMsg.DepartmentId = this.msg.DepartmentId;
        this.exportMsg.EmployeeId = this.msg.EmployeeId;
        this.exportMsg.MonthTime = this.msg.MonthTime;
        this.apipost('User_get_GetMonthRecordExcel', this.exportMsg, res => {
          if (res.data.resultCode == 1) {
            const link = document.createElement('a');
            let _loadUrl = this.domainManager().DomainUrl
            link.href = _loadUrl + res.data.data;
            document.body.appendChild(link);
            link.click();
          }
        }, err => {})
      },
      exportExcelByheping() {
        this.exportMsg.BranchId = this.msg.BranchId;
        this.exportMsg.DepartmentId = this.msg.DepartmentId;
        this.exportMsg.EmployeeId = this.msg.EmployeeId;
        this.exportMsg.MonthTime = this.msg.MonthTime;
        this.apipost('User_get_GetMonthRecordExcelForHPZY', this.exportMsg, res => {
          if (res.data.resultCode == 1) {
            const link = document.createElement('a');
            let _loadUrl = this.domainManager().DomainUrl
            link.href = _loadUrl + res.data.data;
            document.body.appendChild(link);
            link.click();
          }
        }, err => {})
      },
      getCDList(month, id, type, name, title) {
        this.layerType = 1;
        this.sureBtn = true;
        this.apipost('User_get_GetRecordForStatusList', {
          MonthTime: month,
          EmployeeId: id,
          Status: type
        }, res => {
          if (res.data.resultCode == 1) {
            this.outerVisible = true;
            this.dialogTitle = name + '，' + month + title;
            this.CDList = res.data.data
          }
        }, err => {})
      },
      getLeave(month, id, type, name, title) {
        this.layerType = 2;
        this.sureBtn = true;
        this.apipost('User_get_GetAskLeaveInfo', {
          MonthTime: month,
          EmployeeId: id,
          AskLeaveType: type
        }, res => {
          if (res.data.resultCode == 1) {
            this.outerVisible = true;
            this.dialogTitle = name + '，' + month + title;

            this.leaveList = res.data.data
          }
        }, err => {})
      },
      getEverydayList(month, id, time, name, title) {
        this.layerType = 3;
        this.sureBtn = true;
        this.apipost('User_get_GetDayRecord', {
          EmployeeId: id,
          CurrentTime: time
        }, res => {
          if (res.data.resultCode == 1) {
            this.outerVisible = true;
            this.dialogTitle = name + '，' + month + '-' + title;
            this.DKday = month + '-' + title;

            this.everdayList = res.data.data
          }
        }, err => {})
      },
      updateEveryday(kqtime, id, OnAndOffDuty) {
        this.layerType = 4;
        this.sureBtn = false;
        this.updateMsg.RecordId = id;
        if (OnAndOffDuty == 2) {
          this.isXb = false;
        } else {
          this.isXb = true;
        }
        this.updateMsg.OnAndOffDuty = OnAndOffDuty;
        this.updateMsg.SBTime = kqtime;
        this.updateMsg.DKTime = this.DKday.substring(0, 10);

      },
      saveUpdate() {
        this.apipost('User_post_SetDayRecord', this.updateMsg, res => {
          if (res.data.resultCode == 1) {
            this.$message.success('修改成功!')
            this.outerVisible = false;
            this.getList();
            this.updateMsg.RecordStatus = '';
            this.updateMsg.BeLateTime = '0';
          }
        }, err => {})
      },
      getBeLateTime() {
        if (this.updateMsg.RecordStatus == "1") {
          this.isAllowUpdate = true;
          this.updateMsg.BeLateTime = '0';
        } else {
          this.isAllowUpdate = false;
        }
      },
      getCompany() {
        this.apipost('admin_get_BranchGetList', this.companyMsg, res => {
          if (res.data.resultCode == 1) {
            this.companyList = res.data.data;

          }
        }, err => {})
      },
      linkageDepartment() {
        this.departmentMsg.RB_Branch_Id = this.msg.BranchId;
        this.employeeMsg.RB_Branch_id = this.msg.BranchId;
        this.msg.DepartmentId = '-1';
        this.msg.EmployeeId = '-1';
        this.getDepartment();
        this.linkageEmployeeMsg()
      },
      getDepartment() {
        this.apipost('admin_get_DepartmentGetList', this.departmentMsg, res => {
          if (res.data.resultCode == 1) {
            this.departmentList = res.data.data;
          }
        }, err => {})
      },
      linkageEmployeeMsg() {
        this.employeeMsg.departmentId = this.msg.DepartmentId;
        this.msg.EmployeeId = '-1';
        this.getEmployee();
      },
      getEmployee() {
        this.apipost('app_get_company_employee', this.employeeMsg, res => {
          if (res.data.resultCode == 1) {
            this.employeeList = res.data.data;

          }
        }, err => {})
      },
      getList() {
        if (!this.msg.MonthTime) {
          return this.$message.error('请选择时间');
        }
        this.dataList = []
        this.loading = true;
        this.apipost('User_get_GetMonthRecordList', this.msg, res => {
          if (res.data.resultCode == 1) {
            this.loading = false;
            this.$nextTick(() => {
              this.dataList = res.data.data.pageData;
            });
            this.total = res.data.data.count;
            this.datesArr = res.data.data.columnData;
            this.newArr.length = 0;
            for (let i = 0; i < this.datesArr.length; i++) {
              this.newArr.push({
                'value': this.datesArr[i],
                "title": this.datesArr[i].substring(this.datesArr[i].length - 2, this.datesArr[i].length) +
                  '（' + this.getWeekByDay(this.datesArr[i]) + ')'
              })
            }
          }
        }, err => {})
      },
      getWeekByDay(dayValue) {
        var day = new Date(Date.parse(dayValue.replace(/-/g, '/')));
        var today = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
        return today[day.getDay()];
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1
      }
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.departmentMsg.RB_Group_Id = this.employeeMsg.RB_Group_id = this.companyMsg.RB_Group_Id = userInfo
      .RB_Group_id; //集团
      let date = new Date(),
        y = date.getFullYear(),
        m = date.getMonth() < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      this.msg.MonthTime = y + '-' + m;
      this.getList()
      this.getCompany()
      this.getDepartment()
      this.getEmployee()
    }
  }
</script>

<style>
  .rowDiv {
    padding: 25px 0 15px 0;
    font-size: 12px;
    color: #666;
  }

  .el-table .el-table__row {
    font-size: 12px !important;
  }

  .el-table__row td {
    padding: 5px 0;
  }

  .flexOne .has-gutter tr th,
  .el-table th.is-leaf {
    background: #EAEAEA !important;
  }

  .cell>p.pclick {
    text-decoration: underline;
    color: #E95252;
  }

  .cell>p.pclick:hover {
    text-decoration: underline;
    color: #E95252;
    cursor: pointer;
  }

</style>