<template>
  <div class="page-main1">
    <div class="page-content">
      <t-tabs v-model="activePanel" :animated="false">
        <!-- 日报 -->
        <t-tab-panel label="日报" panel-id="tab-1">
          <div class="track-container">
            <div class="search-container">
              <div class="search-ctn">
                <div>
                  <div style="display: flex;">
                    <t-date-picker v-model="dailyForm.workDay" style="width:200px" placeholder="请选择日期"></t-date-picker>
                    <template>
                      <t-button style="margin-left:10px" color="primary" icon="search-outline" @click="handSearchDay">查询</t-button>
                    </template>
                    <t-button icon="filter-outline" style="margin: 0 10px;" @click="slideVisible0 = !slideVisible0"></t-button>
                  </div>
                </div>
                <div class="btns">
                  <t-button>
                    <t-icon size="14" icon="upload-outline"></t-icon> 导出至Excel
                  </t-button>
                  <t-dropdown :visibled="customVisibled0" trigger-mode="custom">
                    <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
                    <div slot="popper">
                      <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                        <t-checkbox-group v-model="social0" vertical @change="checkAllGroupChange">
                          <t-checkbox v-for="(item) in columns0" :key="item.label" :value="item.label" :label="item.label">
                            <span>{{ item.label }}</span>
                          </t-checkbox>
                        </t-checkbox-group>
                        <div style="padding-bottom: 10px">
                          <t-checkbox :indeterminate0="indeterminate0" :checked.sync="checkAll0" @click.prevent.native="handleCheckAll">全选
                          </t-checkbox>
                        </div>
                        <t-button color="primary" size="sm" @click="onCloseClick">确认</t-button>
                      </div>
                    </div>
                  </t-dropdown>
                  <t-button color="secondary" icon="loading" class="reset-btn" @click="resetDailyData"></t-button>
                </div>
              </div>
              <div class="animate-demo-wrapper">
                <transition name="slide-up">
                  <div v-show="slideVisible0" class="transition-box allCondition">
                    <div class="input-rule">
                      <span>部门/员工：</span>
                      <dept-staff-cascader v-model="dailyForm" @inited="handleDailyInited" @getOrgId="getDailyOrgId" @getDepId="getDailyDepId" @getStaffId="getDailyStaffId" />
                    </div>

                  </div>
                </transition>
              </div>
            </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 v-if="columns0[0].show" size="sm" prop="name" label="姓名"></t-table-column>
            <t-table-column v-if="columns0[1].show" size="sm" prop="userid" label="员工编号"></t-table-column>
            <t-table-column v-if="columns0[2].show" size="sm" prop="duty" label="职务"></t-table-column>
            <t-table-column v-if="columns0[3].show" 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="track-container">
            <div class="search-container">
              <div class="search-ctn">
                <div>
                  <div style="display: flex;">
                    <t-date-picker v-model="monthlyForm.month" style="width:200px" type="month" placeholder="请选择月份"></t-date-picker>
                    <template>
                      <t-button style="margin-left:10px" color="primary" icon="search-outline" @click="handSearchMonth">查询</t-button>
                    </template>
                    <t-button icon="filter-outline" style="margin: 0 10px;" @click="slideVisible1 = !slideVisible1"></t-button>
                  </div>
                </div>
                <div class="btns">
                  <t-button>
                    <t-icon size="14" icon="upload-outline"></t-icon> 导出至Excel
                  </t-button>
                  <t-dropdown :visibled="customVisibled1" trigger-mode="custom">
                    <t-button slot="trigger" color="secondary" icon="tile-four-outline" class="trigger-button" @click="onTriggerClick"></t-button>
                    <div slot="popper">
                      <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                        <t-checkbox-group v-model="social1" vertical @change="checkAllGroupChange">
                          <t-checkbox v-for="(item) in columns1" :key="item.label" :value="item.label" :label="item.label">
                            <span>{{ item.label }}</span>
                          </t-checkbox>
                        </t-checkbox-group>
                        <div style="padding-bottom: 10px">
                          <t-checkbox :indeterminate0="indeterminate1" :checked.sync="checkAll1" @click.prevent.native="handleCheckAll">全选
                          </t-checkbox>
                        </div>
                        <t-button color="primary" size="sm" @click="onCloseClick">确认</t-button>
                      </div>
                    </div>
                  </t-dropdown>
                  <t-button color="secondary" icon="loading" class="reset-btn" @click="resetMonthData"></t-button>
                </div>
              </div>
              <div class="animate-demo-wrapper">
                <transition name="slide-up">
                  <div v-show="slideVisible1" class="transition-box allCondition">
                    <div class="input-rule">
                      <span>部门/员工：</span>
                      <dept-staff-cascader v-model="monthlyForm" @getOrgId="getMonthOrgId" @getDepId="getMonthDepId" @getStaffId="getMonthStaffId" />
                      <div class="search-btn">
                      </div>

                    </div>
                  </div>
                </transition>
              </div>
            </div>
          </div>
          <t-table :data="monthTableData" :loading="loadMonthTable" size="sm" line class="table-detail">
            <t-table-column type="selection"></t-table-column>
            <t-table-column v-if="columns1[0].show" width="75" prop="name" label="姓名"></t-table-column>
            <t-table-column v-if="columns1[1].show" width="90" prop="userid" label="员工编号"></t-table-column>
            <t-table-column v-if="columns1[2].show" width="90" prop="duty" label="职务"></t-table-column>
            <t-table-column v-if="columns1[3].show" width="120" prop="daysAttendance" label="出勤天数(天)"></t-table-column>
            <t-table-column v-if="columns1[4].show" 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 v-if="columns1[5].show" 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 v-if="columns1[6].show" 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 v-if="columns1[7].show" 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 v-if="columns1[8].show" 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 v-if="columns1[9].show" 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 width="120" 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 {
      slideVisible0: false,
      slideVisible1: false,
      indeterminate0: true,
      indeterminate1: true,
      checkAll0: true,
      checkAll1: true,
      social0: ['姓名', '员工编号', '职务', '考勤状态'],
      social1: ['姓名', '员工编号', '职务', '出勤天数(天)', '迟到次数(次)', '迟到时长(h)', '早退次数(次)', '早退时长(h)', '旷工次数(次)', '旷工时长(天)'],
      columns0: [
        {
          label: '姓名',
          show: true
        }, {
          label: '员工编号',
          show: true
        }, {
          label: '职务',
          show: true
        }, {
          label: '考勤状态',
          show: true
        }
      ],
      columns1: [
        {
          label: '姓名',
          show: true
        }, {
          label: '员工编号',
          show: true
        }, {
          label: '职务',
          show: true
        }, {
          label: '出勤天数(天)',
          show: true
        }, {
          label: '迟到次数(次)',
          show: true
        }, {
          label: '迟到时长(h)',
          show: true
        }, {
          label: '早退次数(次)',
          show: true
        }, {
          label: '早退时长(h)',
          show: true
        }, {
          label: '旷工次数(次)',
          show: true
        }, {
          label: '旷工时长(天)',
          show: true
        }
      ],
      customVisibled0: false,
      customVisibled1: false,
      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
      },
      isFirstCreatedMonth: true,
      isFirstCreatedDaily: true,
      // 当前tab
      activePanel: 'tab-1'
    }
  },
  watch: {
    activePanel () {
      this.customVisibled0 = false
      this.customVisibled1 = false
    }
  },
  methods: {
    checkAllGroupChange () {
      if (this.activePanel === 'tab-1') {
        if (this.social0.length === 4) {
          this.indeterminate0 = false
          this.checkAll0 = true
        } else if (this.social0.length > 0) {
          this.indeterminate0 = true
          this.checkAll0 = false
        } else {
          this.indeterminate0 = false
          this.checkAll0 = false
        }
      } else {
        if (this.social1.length === 10) {
          this.indeterminate1 = false
          this.checkAll1 = true
        } else if (this.social1.length > 0) {
          this.indeterminate1 = true
          this.checkAll1 = false
        } else {
          this.indeterminate1 = false
          this.checkAll1 = false
        }
      }
    },
    handleCheckAll () {
      if (this.activePanel === 'tab-1') {
        if (this.indeterminate0) {
          this.checkAll0 = false
        } else {
          this.checkAll0 = !this.checkAll0
        }
        this.indeterminate0 = false
        if (this.checkAll0) {
          this.social0 = ['姓名', '员工编号', '职务', '考勤状态']
        } else {
          this.social0 = []
        }
      } else {
        if (this.indeterminate1) {
          this.checkAll1 = false
        } else {
          this.checkAll1 = !this.checkAll1
        }
        this.indeterminate1 = false
        if (this.checkAll1) {
          this.social1 = ['姓名', '员工编号', '职务', '出勤天数(天)', '迟到次数(次)', '迟到时长(h)', '早退次数(次)', '早退时长(h)', '旷工次数(次)', '旷工时长(天)']
        } else {
          this.social1 = []
        }
      }
    },
    onTriggerClick () {
      if (this.activePanel === 'tab-1') {
        this.customVisibled0 = true
      } else {
        this.customVisibled1 = true
        // 我加了一个这个事件 避免点击事件时对话框不显示
        window.scrollTo(0, 1)
      }
    },
    onCloseClick () {
      if (this.activePanel === 'tab-1') {
        this.columns0.forEach(e => {
          e.show = this.social0.indexOf(e.label) >= 0
        })
        this.customVisibled0 = false
      } else {
        this.columns1.forEach(e => {
          e.show = this.social1.indexOf(e.label) >= 0
        })
        this.customVisibled1 = false
      }
    },
    getDailyOrgId (id) {
      this.dailyForm.orgId = id
    },
    getDailyDepId (id) {
      this.dailyForm.depId = id
      // 第一次创建获取日报表格数据
      if (this.isFirstCreatedDaily) {
        this.isFirstCreatedDaily = false
        this.getDailyTable()
      }
    },
    getDailyStaffId (id) {
      this.dailyForm.userid = id
    },
    getMonthOrgId (id) {
      this.monthlyForm.orgId = id
    },
    getMonthDepId (id) {
      this.monthlyForm.depId = id
      // 第一次创建获取月报表格数据
      if (this.isFirstCreatedMonth) {
        this.isFirstCreatedMonth = false
        this.getMonthTable()
      }
    },
    getMonthStaffId (id) {
      this.monthlyForm.userid = id
    },
    handleDailyInited () {
      // this.getDailyTable()
    },
    // 搜索
    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-main1 {
  margin: 20px 20px 16px 20px;
  .abnormalState {
    color: #eda30f;
    font-size: 14px;
  }
  .track-container {
    width: 100%;
    margin: 24px 0;
    // padding: 20px;
    box-sizing: border-box;
    .search-container {
      width: 100%;
      .search-ctn {
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        display: flex;
        position: relative;
        > div {
          // margin: 0 20px 16px 0;
          line-height: 2;
        }
        .btns {
          margin-left: auto;
          display: block;
          button {
            margin: 0 2px;
          }
        }
      }
    }
    .table-pager {
      margin: 20px auto;
    }
    .allCondition {
      display: flex;
      justify-content: space-between;
      border: 1px solid rgba(0, 0, 0, 0.09);
      background-color: #f8f9fa;
      flex-wrap: wrap;
      padding: 20px;
      margin: 5px auto;
      .input-rule {
        display: flex;
        flex: 1;
        width: 80%;
        min-width: 80%;
        max-width: 80%;
        padding: 10px 0 10px 20px;
        > span {
          line-height: 32px;
        }
      }
    }
  }
  .table-detail {
    margin-top: 20px;
  }
  .pager {
    margin-right: auto;
    margin: 21px 21px 0 0;
    float: right;
  }
}
</style>
