<template>
  <div class="page-main">
    <div class="page-content">
      <t-tabs :animated="false" @change="changeTabs">
        <!-- 日报 -->
        <t-tab-panel label="日报" panel-id="tab-1">
          <div class="row mt-32">
            <div class="keep-row">
              <span>日期：</span>
              <t-date-picker v-model="dailyForm.workDay" style="width:200px" placeholder="请选择日期"></t-date-picker>
            </div>
            <div class="keep-row">
              <span>部门/员工：</span>
              <dept-staff-cascader v-model="dailyForm" @inited="handleDailyInited" @getOrgId="getDailyOrgId" @getDepId="getDailyDepId" @getStaffId="getDailyStaffId" />
            </div>
            <div class="search-btn">
              <t-button color="primary" @click="handSearchDay">查询</t-button>
              <t-button @click="resetDailyData">重置</t-button>
            </div>
          </div>
          <t-table :data="dailyTableData" :loading="loadDailyTable" size="sm" line class="table-detail">
            <t-table-column size="sm" type="selection"></t-table-column>
            <t-table-column size="sm" prop="name" label="姓名"></t-table-column>
            <t-table-column size="sm" prop="userid" label="员工编号"></t-table-column>
            <t-table-column size="sm" prop="duty" label="职务"></t-table-column>
            <t-table-column size="sm" prop="status" label="考勤状态">
              <template slot-scope="scope">
                <span :class="getStatusClass(scope.row.goToWorkStatus)">{{ scope.row.goToWorkStatus }}</span>
                <span :class="getStatusClass(scope.row.goOffWorkStatus)">{{ scope.row.goOffWorkStatus }}</span>
              </template>
            </t-table-column>
          </t-table>
          <t-pager :page-size="dailyForm.pageSize" :current="dailyForm.current" :total="dailyTotal" :sizer-range="[ 5, 10, 20, 30 ]" class="pager" show-elevator @on-change="onChangeDay"></t-pager>
        </t-tab-panel>
        <!-- 月报 -->
        <t-tab-panel label="月报" panel-id="tab-2">
          <div class="row mt-32">
            <div class="keep-row">
              <span>月份：</span>
              <t-date-picker v-model="monthlyForm.month" style="width:200px" type="month" placeholder="请选择月份"></t-date-picker>
            </div>
            <div class="keep-row">
              <span>部门/员工：</span>
              <dept-staff-cascader v-model="monthlyForm" @getOrgId="getMonthOrgId" @getDepId="getMonthDepId" @getStaffId="getMonthStaffId" />
            </div>
            <div class="search-btn">
              <t-button color="primary" @click="handSearchMonth">查询</t-button>
              <t-button @click="resetMonthData">重置</t-button>
            </div>
          </div>
          <t-button class="export-excel" color="primary">
            <t-icon size="14" class="icon-txt" icon="upload-outline"></t-icon>导出至Excel
          </t-button>

          <t-table :data="monthTableData" :loading="loadMonthTable" size="sm" line class="table-detail">
            <t-table-column type="selection"></t-table-column>
            <t-table-column width="75" prop="name" label="姓名"></t-table-column>
            <t-table-column width="90" prop="userid" label="员工编号"></t-table-column>
            <t-table-column width="90" prop="duty" label="职务"></t-table-column>
            <t-table-column width="120" prop="daysAttendance" label="出勤天数(天)"></t-table-column>
            <t-table-column width="120" prop="timesLate" label="迟到次数(次)">
              <template slot-scope="scope">
                <span v-if="scope.row.timesLate===0" size="sm">{{ scope.row.timesLate }}</span>
                <span v-else class="abnormalState">{{ scope.row.timesLate }}</span>
              </template>
            </t-table-column>
            <t-table-column width="110" prop="hoursLate" label="迟到时长(h)">
              <template slot-scope="scope">
                <span v-if="scope.row.hoursLate===0" size="sm">{{ scope.row.hoursLate }}</span>
                <span v-else class="abnormalState">{{ scope.row.hoursLate }}</span>
              </template>
            </t-table-column>
            <t-table-column width="120" prop="timesLeftearly" label="早退次数(次)">
              <template slot-scope="scope">
                <span v-if="scope.row.timesLeftearly===0" size="sm">{{ scope.row.timesLeftearly }}</span>
                <span v-else class="abnormalState">{{ scope.row.timesLeftearly }}</span>
              </template>
            </t-table-column>
            <t-table-column width="120" prop="hoursLeftearly" label="早退时长(h)">
              <template slot-scope="scope">
                <span v-if="scope.row.hoursLeftearly===0" size="sm">{{ scope.row.hoursLeftearly }}</span>
                <span v-else class="abnormalState">{{ scope.row.hoursLeftearly }}</span>
              </template>
            </t-table-column>
            <t-table-column width="120" prop="timesAbsence" label="旷工次数(次)">
              <template slot-scope="scope">
                <span v-if="scope.row.timesAbsence===0" size="sm">{{ scope.row.timesAbsence }}</span>
                <span v-else class="abnormalState">{{ scope.row.timesAbsence }}</span>
              </template>
            </t-table-column>
            <t-table-column width="120" prop="daysAbsence" label="旷工时长(天)">
              <template slot-scope="scope">
                <span v-if="scope.row.daysAbsence===0" size="sm">{{ scope.row.daysAbsence }}</span>
                <span v-else class="abnormalState">{{ scope.row.daysAbsence }}</span>
              </template>
            </t-table-column>
            <t-table-column prop="operation" label="操作" fixed="right">
              <template slot-scope="scope">
                <a class="link" size="sm" @click="handleClick(scope.row)">详情</a>
              </template>
            </t-table-column>
          </t-table>
          <t-pager :page-size="monthlyForm.pageSize" :current="monthlyForm.current" :total="monthlyTotal" :sizer-range="[ 5, 10, 20, 30 ]" class="pager" show-elevator @on-change="onChangeMonth"></t-pager>
        </t-tab-panel>
      </t-tabs>
    </div>
    <attendance-dialog :visibled.sync="attendanceModal" :data="modalData" :loading="loadDetail" />
  </div>
</template>

<script>
import atdapi from '@/api/attendance'
import formatDateTime from '@/utils/formatDateTime.js'
import AttendanceDialog from '../components/AttendanceDialog'
import DeptStaffCascader from '../components/DeptStaffCascader'
export default {
  components: { AttendanceDialog, DeptStaffCascader },
  data () {
    const now = new Date()
    return {
      attendanceModal: false,
      modalData: {},
      tabName: 'tab-1',
      dailyTableData: [],
      monthTableData: [],
      data: '',
      loadDetail: false,
      loadDailyTable: false,
      loadMonthTable: false,
      // 公司、部门、员工、列表
      companyTypesList: [],
      departmentTypesList: [],
      getStaffTypesList: [],
      monthlyTotal: 0,
      dailyTotal: 0,
      monthlyForm: {
        month: formatDateTime(new Date().setMonth(now.getMonth() - 1), 'yyyy-MM'),
        userid: null,
        depId: '',
        orgId: '',
        current: 1,
        pageSize: 10
      },
      dailyForm: {
        workDay: formatDateTime(now, 'yyyy-MM-dd'),
        userid: null,
        depId: '',
        orgId: '',
        current: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    getDailyOrgId(id) {
      this.dailyForm.orgId = id
    },
    getDailyDepId(id) {
      this.dailyForm.depId = id
    },
    getDailyStaffId(id) {
      this.dailyForm.userid = id
    },
    getMonthOrgId(id) {
      this.monthlyForm.orgId = id
    },
    getMonthDepId(id) {
      this.monthlyForm.depId = id
    },
    getMonthStaffId(id) {
      this.monthlyForm.userid = id
    },
    handleDailyInited () {
      // this.getDailyTable()
    },
    changeTabs (tabName) {
      this.tabName = tabName
    },
    // 搜索
    handSearchDay () {
      if (this.dailyForm.workDay && this.dailyForm.orgId) {
        this.dailyForm.current = 1
        this.getDailyTable()
      } else { return this.$Message.warning('请选择时间和部门') }
    },
    handSearchMonth () {
      if (this.monthlyForm.month && this.monthlyForm.orgId) {
        this.monthlyForm.current = 1
        this.getMonthTable()
      } else { return this.$Message.warning('请选择时间和部门') }
    },
    // 分页
    onChangeDay (val) {
      this.dailyForm.current = val
      this.getDailyTable()
    },
    onChangeMonth (val) {
      this.monthlyForm.current = val
      this.getMonthTable()
    },
    // // 向服务器发送请求获取公司类型列表数据
    // async getCompanyTypesList () {
    //   const res = await commonApi.getCompanyTypesList()
    //   if (res.status === 200) {
    //     this.companyTypesList = res.data.data
    //   } else {
    //     this.$Message.danger('公司类型列表数据获取失败！')
    //   }
    // },
    // // 获取部门列表
    // async queryCycleChildOrg (id) {
    //   const res = await commonApi.queryCycleChildOrg(id)
    //   if (res.status === 200) {
    //     const data = []
    //     // 递归 实现tree组件所需部门数据结构
    //     this.nextDepartment(res.data, data)
    //     // 深拷贝data
    //     const data1 = JSON.parse(JSON.stringify(data))
    //     // 用部门id映射关系代替code与parentCode父子映射关系
    //     data.forEach(item => {
    //       // 删除pid为"-1"的的pid属性，否则tree渲染的时候没有根节点渲染不出来
    //       if (item.pid === '-1') {
    //         delete item.pid
    //       }
    //       item.id = item.orgId
    //       data1.some((item1) => {
    //         if (item.pid === item1.id) {
    //           item.pid = item1.orgId
    //         } else {
    //           return false
    //         }
    //       })
    //     })
    //     // eslint-disable-next-line no-return-assign
    //     this.departmentTypesList = data.filter(item => item.data = item.id)
    //   } else {
    //     this.$Message.danger('部门类型列表数据获取失败！')
    //   }
    // },
    // // 向服务器发送请求获取用户类型列表数据
    // async getStaffTypesList (id) {
    //   const res = await commonApi.getStaffTypesList(id)
    //   if (res.status === 200) {
    //     this.staffTypesList = res.data.data
    //   } else {
    //     this.$Message.danger('用户类型列表数据获取失败！')
    //   }
    // },
    // // 如果部门还有下级 递归
    // nextDepartment (data, arr) {
    //   if (data.length > 0) {
    //     data.forEach(item => {
    //       arr.push({
    //         orgId: item.id + '',
    //         id: item.code,
    //         label: item.name,
    //         pid: item.parentCode
    //       })
    //       this.nextDepartment(item.departments, arr)
    //     })
    //   }
    // },
    // 重置日报数据
    resetDailyData() {
      this.$nextTick(() => {
        this.dailyForm = {
          workDay: '',
          userid: null,
          depId: '',
          orgId: '',
          current: 1,
          pageSize: 10
        }
      })
    },
    // 重置月报数据
    resetMonthData() {
      this.monthlyForm = {
        month: '',
        userid: null,
        depId: '',
        orgId: '',
        current: 1,
        pageSize: 10
      }
    },
    // 获得月报表格数据
    getMonthTable () {
      this.loadMonthTable = true
      atdapi.getMonthAttendance({ params: this.monthlyForm }).then(res => {
        let tableData = res.data.data
        this.monthTableData = []
        tableData.forEach(element => {
          this.monthTableData.push(element)
        })
        this.monthlyTotal = res.data.total
      }).finally(() => {
        this.loadMonthTable = false
      })
    },
    // 获得日报表格数据
    getDailyTable () {
      this.loadDailyTable = true
      atdapi.getDayAttendance({ params: this.dailyForm }).then(res => {
        let tableData = res.data.data
        this.dailyTableData = []
        tableData.forEach(element => {
          this.dailyTableData.push(element)
        })
        this.dailyTotal = res.data.total
      }).finally(() => {
        this.loadDailyTable = false
      })
    },
    // 弹窗打开
    handleClick (data) {
      const { userid, beginDay, endDay } = data
      if (beginDay == null) {
        this.$Message.danger('未识别到有效的起止日期')
        return
      }
      this.loadDetail = true
      this.modalData = Object.assign({}, data)
      this.attendanceModal = true
      this.modalData.range = [beginDay, endDay]
      atdapi.getAttendanceDetail({
        params: { userid, beginDay, endDay }
      }).then(res => {
        const { detail } = res.data
        this.modalData.detail = detail
      }).finally(() => {
        this.loadDetail = false
      })
    },
    getStatusClass (status) {
      if (status === '未打卡') {
        return 'abnormalState'
      }
      return ''
    }
  }
}
</script>
<style lang="scss" scoped>
.page-main {
  margin: 20px 20px 16px 20px;
  .abnormalState {
    color: #eda30f;
    font-size: 14px;
  }
  .keep-row {
    display: flex;
    align-items: center;
    margin-left: 24px;
  }
  .search-btn {
    margin-left: auto;
    margin-right: 15px;
  }
  .icon-txt {
    margin-right: 8px;
  }
  .export-excel {
    margin-top: 24px;
    display: flex;
    align-items: center;
  }
  .table-detail {
    margin-top: 20px;
  }
  .pager {
    margin-right: auto;
    margin: 21px 21px 0 0;
    float: right;
  }
}
</style>
