<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>{{$t('adm.adm_time')}}</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="$t('adm.adm_exportexcel')" @click="exportExcel()" />
        </li>
      </ul>
    </div>
    <el-table :data="dataList" stripe v-loading='loading'>
      <el-table-column fixed prop="EmName" :label="$t('system.query_name')" min-width="100">
      </el-table-column>
      <el-table-column prop="DepartmentName" :label="$t('admin.admin_Department')" min-width="120">
      </el-table-column>
      <el-table-column prop="EmployeeId" :label="$t('adm.adm_Jobnumber')" min-width="80">
      </el-table-column>
      <el-table-column prop="PostName" :label="$t('admin.admin_Post')" min-width="120">
      </el-table-column>
      <el-table-column v-for='(item,index) in newArr' :prop='item.value' :label="item.title" :key='index'
        min-width="120">
        <template slot-scope="scope">
          <p 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>
  </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()
          }
        },
        //分页
        total: 0,
        pageSize: '',
        currentPage: 1,
        loading: true,
        //请求数据
        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: [],
        datesArr: [],
        newArr: [],
      }
    },
    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_GetClockTimeRecordExcel', 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 => {})
      },
      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_GetClockTimeRecordList', this.msg, res => {
          if (res.data.resultCode == 1) {
            this.loading = false;
            this.$nextTick(() => {
              this.dataList = res.data.data.pageData;
            });
            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]) + ')'
              })
            }
            this.total = res.data.data.count;
          }
        }, 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 => {})
      },
      getWeekByDay(dayValue) {
        let _this = this;
        var day = new Date(Date.parse(dayValue.replace(/-/g, '/')));
        var today = new Array(_this.$t('adm.adm_Sunday'), _this.$t('adm.adm_Monday'), _this.$t('adm.adm_Tuesday'), _this
          .$t('adm.adm_Wednesday'), _this.$t('adm.adm_Thursday'), _this.$t('adm.adm_Friday'), _this.$t(
            'adm.adm_Saturday'));
        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 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;
  }

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

</style>