<template>
  <div class="flexOne">
    <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 :picker-options="pickerOptions0" v-model='msg.StartTime' class='w135'
              value-format="yyyy-MM-dd" type="date"></el-date-picker>
            -
            <el-date-picker :picker-options="pickerOptions1" v-model='msg.EndTime' class='w135'
              value-format="yyyy-MM-dd" type="date"></el-date-picker>
          </span>
        </li>

        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getList()" />
          <input type="button" class="normalBtn" value="导出报表" @click="exportExcel()" />
        </li>
      </ul>
    </div>

    <el-table :data="dataList" stripe style="width: 100%" v-loading='loading'>
      <el-table-column fixed prop="EmName" :label="$t('system.query_name')" min-width="100">
      </el-table-column>
      <el-table-column fixed prop="EmployeeId" label="工号" min-width="80">
      </el-table-column>
      <el-table-column prop="DepartmentName" :label="$t('admin.admin_Department')" min-width="120">
      </el-table-column>
      <el-table-column prop="PostName" :label="$t('admin.admin_Post')" min-width="100">
      </el-table-column>
      <el-table-column prop="DateStr" label="日期" min-width="150">
      </el-table-column>
      <el-table-column prop="BeOnDutyTime" label="上班打卡时间" min-width="150">
      </el-table-column>
      <el-table-column prop="BeOnResult" label="上班打卡状态" min-width="150">
      </el-table-column>
      <el-table-column prop="OffDutyTime" label="下班打卡时间" min-width="150">
      </el-table-column>
      <el-table-column prop="OffResult" label="下班打卡状态" min-width="150">
      </el-table-column>
      <el-table-column label="上班关联审批单号" min-width="200">
        <template slot-scope="scope">
          <p @click="getWorkflow(scope.row.BeOnRelevance,scope.row.BeOnRelevanceType)">{{scope.row.BeOnRelevance}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="OffRelevance" label="下班关联审批单号" min-width="200">
        <template slot-scope="scope">
          <p @click="getWorkflow(scope.row.OffRelevance,scope.row.OffRelevanceType)">{{scope.row.OffRelevance}}</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>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions0: {
          disabledDate: (time) => {
            let endTime = new Date(this.msg.EndTime)
            return time.getTime() > Date.now() || time.getTime() > endTime.getTime()
          }
        },
        pickerOptions1: {
          disabledDate: (time) => {
            let starTime = new Date(this.msg.StartTime)
            return time.getTime() > Date.now() || time.getTime() < starTime.getTime()
          }
        },
        loading: true,
        //分页
        total: 0,
        pageSize: '',
        currentPage: 1,
        //请求数据
        msg: {
          pageIndex: 1,
          pageSize: 15,
          BranchId: '-1',
          DepartmentId: '-1',
          EmployeeId: '-1',
          StartTime: '',
          EndTime: '',
        },
        exportMsg: {
          BranchId: '-1',
          DepartmentId: '-1',
          EmployeeId: '-1',
          StartTime: '',
          EndTime: '',
        },
        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',
        },
        //返回数据
        dataList: [],
        companyList: [],
        departmentList: [],
        employeeList: [],
      }
    },
    methods: {
      exportExcel() {
        this.exportMsg.BranchId = this.msg.BranchId;
        this.exportMsg.DepartmentId = this.msg.DepartmentId;
        this.exportMsg.EmployeeId = this.msg.EmployeeId;
        this.exportMsg.StartTime = this.msg.StartTime;
        this.exportMsg.EndTime = this.msg.EndTime;
        this.apipost('User_get_GetEveryDayAttendanceRecordExcel', 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 => {})
      },
      getWorkflow(id, type) {
        if (id != null && type != null) {
          this.apipost('app_user_workflow_GetAuditInfo', {
            WorkFlowId: id,
            TemplateType: type
          }, res => {

          }, err => {})
        }

      },
      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() {
        this.loading = true;
        let endTime = new Date(this.msg.EndTime)
        let starTime = new Date(this.msg.StartTime)
        if (endTime - starTime > 2.6784e9) {
          this.$alert(this.$t('adm.adm_timenomorethan'), this.$t('tips.tips'))
          return
        }
        this.apipost('User_get_GetEveryDayAttendanceRecordList', 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;
          }
        }, err => {})
      },
      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 myDate = new Date();
      let _year = myDate.getFullYear();
      let _month = myDate.getMonth() >= 9 ? myDate.getMonth() + 1 : '0' + (myDate.getMonth() + 1);
      let _date = myDate.getDate() > 9 ? myDate.getDate() : '0' + myDate.getDate();
      this.msg.StartTime = _year + '-' + _month + '-' + '01';
      this.msg.EndTime = _year + '-' + _month + '-' + _date;
      this.getList()
      this.getCompany()
      this.getDepartment()
      this.getEmployee()
    }
  }
</script>

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

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

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

</style>