<template>
  <div class="attendance-container">
    <div class="search-container">
      <div class="search-ctn">
        <div>
          <t-button-group>
            <!-- <t-button :class="timeType.day?'active':''" color="secondary" @click="changeType('day')">日</t-button>
            <t-button :class="timeType.week?'active':''" color="secondary" @click="changeType('week')">月</t-button>
            <t-button :class="timeType.month?'active':''" color="secondary" @click="changeType('month')">年</t-button> -->
            <t-button v-for="(item,index) in queryCondition.type" :class="index==queryCondition.currentIndex?'active':''" :key="index" color="secondary" @click="changeType(index)">{{ item }}</t-button>
          </t-button-group>
        </div>
        <div v-if="queryCondition.dateType">
          <t-date-picker v-model="queryCondition.singleDateVal" type= "date" style="width:120px" placeholder="时间" @date-change="onChangeDate"
          ></t-date-picker>
        </div>
        <div v-if="!queryCondition.dateType">
          <div>
            <t-date-picker v-model="queryCondition.singleDateVal" type="month" style="width:120px" placeholder="时间" @date-change="onChangeDate"
            ></t-date-picker>
          </div>
        </div>
        <div>
          <div class="label">姓名:</div>
          <div class="input-rule">
            <t-input v-model="queryCondition.alarmPerson" placeholder="请输入..."></t-input>
          </div>
        </div>
        <div class="btns">
          <t-button color="success" icon="search-outline" @click="onSearch">查询</t-button>
          <t-button color="secondary" icon="loading" class="reset-btn" @click="onReset">重置</t-button>
          <t-button color="secondary" icon="upload-outline" @click="toExport">导出至Excel</t-button>
        </div>
      </div>
    </div>
    <div>
      <t-table :data="table.data">
        <t-table-column prop="name" label="姓名"></t-table-column>
        <t-table-column prop="mainJobPositionId" label="职务"></t-table-column>
        <t-table-column v-if="queryCondition.currentIndex === 0" :formatter="time_formatter" prop="goToWorkTime" label="打卡时间"></t-table-column>
        <t-table-column v-if="queryCondition.currentIndex !== 0" prop="clockingDays" label="出勤天数（天）"></t-table-column>
        <t-table-column
          v-if="queryCondition.currentIndex === 1"
          fixed="right"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <a href="javascript:void(0)" size="sm" @click="detail(scope.row)">详情</a>
          </template>
        </t-table-column>
        <t-table-column
          v-if="queryCondition.currentIndex === 2"
          fixed="right"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <a href="javascript:void(0)" size="sm" @click="monthDetail(scope.row)">详情</a>
          </template>
        </t-table-column>
      </t-table>
      <t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
               :page-size.sync="table.pager.size"
               :sizer-range="[10,20,50]"
               class="px-24 pt-16 float-right"
               show-elevator show-sizer
               @on-size-change="onSizeChange"
               @on-change="onPagerChange">
      </t-pager>
    </div>
    <t-modal :visibled.sync="modal" :footer-visibled="false" class="modal" title="考勤详情" width="1200px">
      <div class="title">
        <div>姓名：{{ modalData.userName }}</div>
        <div>职务：{{ modalData.duty }}</div>
        <div>考勤时间：{{ modalData.date }}</div>
        <div>出勤天数：{{ modalData.days }}</div>
      </div>
      <div>
        <t-table :data="modalData.table">
          <t-table-column prop="workDay" label="日期"></t-table-column>
          <t-table-column :formatter="time_formatter" prop="goToWorkTime" label="打卡时间" ></t-table-column>
        </t-table>
      </div>
    </t-modal>
    <t-modal :visibled.sync="monthModal" :footer-visibled="false" class="modal" title="考勤详情" width="1200px">
      <div class="title">
        <div>姓名：{{ monthModalData.userName }}</div>
        <div>职务：{{ monthModalData.duty }}</div>
        <div>考勤时间：{{ monthModalData.date }}</div>
        <div>出勤天数：{{ monthModalData.days }}</div>
      </div>
      <div>
        <t-table :data="monthModalData.table.data">
          <t-table-column prop="workDay" label="日期"></t-table-column>
          <t-table-column :formatter="time_formatter" prop="goToWorkTime" label="打卡时间" ></t-table-column>
        </t-table>
<!--        <t-pager :total="monthModalData.table.pager.total" :current.sync="monthModalData.table.pager.currentPage"-->
<!--                 :page-size.sync="monthModalData.table.pager.size"-->
<!--                 :sizer-range="[10,20,50]"-->
<!--                 class="px-24 pt-16 float-right"-->
<!--                 show-elevator show-sizer-->
<!--                 @on-size-change="onModalSizeChange"-->
<!--                 @on-change="onModalPagerChange">-->
<!--        </t-pager>-->
      </div>
    </t-modal>
  </div>
</template>
<script>
import './attendance.scss'
import services from '../../conf/services'
export default {
  data() {
    return {
      table: {
        data: [],
        pager: {
          currentPage: 1,
          size: 10,
          total: 0
        }
      },
      queryCondition: {
        dateType: true,
        type: [
          '日', '周', '月'
        ],
        currentIndex: 0,
        singleDateVal: '',
        alarmPerson: ''
      },
      modal: false,
      modalData: {
        userName: '',
        duty: '',
        date: '',
        days: '',
        table: []
      },
      monthModal: false,
      monthModalData: {
        userName: '',
        EMPLOYEE_ID: '',
        duty: '',
        date: '',
        days: '',
        table: {
          data: [],
          pager: {
            currentPage: 1,
            size: 10,
            total: 0
          }
        }
      }
    }
  },
  mounted() {
    this.getList()
    this.queryCondition.singleDateVal = this.getTime(2)
  },
  methods: {
    changeType(index) {
      this.queryCondition.currentIndex = index
      // if (this.queryCondition.singleDateVal == '') {
      //
      // }
      this.queryCondition.singleDateVal = this.getTime(2)
      this.queryCondition.dateType = !(index === 2)
      this.table.pager.currentPage = 1
      this.getList()
    },
    onChangeDate(value) {
      console.log(value)
      this.onSearch()
    },
    onChange(value) {
      console.log('date change:' + value)
    },
    onReset() {
      this.queryCondition = {
        dateType: true,
        type: [
          '日', '周', '月'
        ],
        currentIndex: 0,
        singleDateVal: this.getTime(2),
        alarmPerson: ''
      }
      this.table.pager.currentPage = 1
      this.table.pager.size = 10
      this.getList()
    },
    getList() {
      var mark
      if (this.queryCondition.currentIndex === 0) {
        mark = 'day'
        if (this.queryCondition.singleDateVal == ''){
          this.queryCondition.singleDateVal = this.getTime(2)
        }
      } else if (this.queryCondition.currentIndex === 1) {
        mark = 'week'
        if (this.queryCondition.singleDateVal == ''){
          this.queryCondition.singleDateVal = this.getTime(2)
        }
      } else {
        mark = 'month'
        if (this.queryCondition.singleDateVal == '' || this.queryCondition.singleDateVal.length > 8 ){
          this.queryCondition.singleDateVal = this.getTime(1)
        }
      }
      var startDay = this.getBeforeDate(6, this.queryCondition.singleDateVal)

      this.$test
        .post(services.areaInOutRecord.GET_ATTENDANCE, {
          data: {
            mark: mark,
            currentDate: this.queryCondition.singleDateVal,
            startDay: startDay,
            userName: this.queryCondition.alarmPerson
          },
          pageNumber: this.table.pager.currentPage,
          pageSize: this.table.pager.size
        })
        .then((res) => {
          // 请求成功处理...
          this.table.data = res.data.data
          this.table.pager.total = res.data.total
        })
        .catch((res) => {
          // 请求失败处理...
        })
    },
    onSearch() {
      this.table.pager.currentPage = 1
      this.getList()
    },
    toExport() {

    },
    onPagerChange(page) {
      this.table.pager.currentPage = page
      this.getList()
    },
    onSizeChange(number) {
      this.table.pager.currentPage = 1
      this.table.pager.size = number
      this.getList()
    },
    onModalPagerChange(page) {
      this.monthModalData.table.pager.currentPage = page
      this.getMonthDetail()
    },
    onModalSizeChange(number) {
      this.monthModalData.table.pager.currentPage = 1
      this.monthModalData.table.pager.size = number
      this.getMonthDetail()
    },
    detail(row) {
      this.modal = true
      var data
      if (this.queryCondition.singleDateVal === '') {
        data = this.getTime(2)
      } else {
        data = this.queryCondition.singleDateVal
      }
      this.modalData.date = this.getBeforeDate(6, data) + ' ~ ' + data
      var beginDay = this.getBeforeDate(6, data)
      this.modalData.userName = row.name
      this.modalData.duty = row.mainJobPositionId
      this.modalData.days = row.clockingDays
      this.$test
        .post(services.areaInOutRecord.GET_ATTENDANCE_DETAILE, {
          data:{
            id:row.id+"",
            mark:'week',
            beginDay:beginDay,
            endDay:this.queryCondition.singleDateVal
          },
          pageNumber:0,
          pageSize:0
        })
        .then((res) => {
          // 请求成功处理...
          var arr = []
          res.data.forEach(e => {
            if (e.goToWorkTime)
              arr.push(e)
          })
          this.modalData.table = arr
        })
        .catch((res) => {
          // 请求失败处理...
        })
    },
    monthDetail(row) {
      this.monthModal = true
      if (this.queryCondition.singleDateVal === '') {
        this.monthModalData.date = this.getTime(1)
      } else {
        this.monthModalData.date = this.queryCondition.singleDateVal
      }
      this.monthModalData.userName = row.name
      this.monthModalData.duty = row.mainJobPositionId
      this.monthModalData.days = row.clockingDays
      this.monthModalData.EMPLOYEE_ID = row.EMPLOYEE_ID
      var lastDay = this.getLastDay(this.queryCondition.singleDateVal+'-01')
      this.$test
        .post(services.areaInOutRecord.GET_ATTENDANCE_DETAILE, {
          data:{
            id:row.id+"",
            mark:'month',
            beginDay:this.queryCondition.singleDateVal + '-01',
            endDay:lastDay
          },
          pageNumber:0,
          pageSize:0
        })
        .then((res) => {
          // 请求成功处理...
          var arr = []
          res.data.forEach(e => {
            if (e.goToWorkTime)
              arr.push(e)
          })
          this.monthModalData.table.data = arr
          // this.monthModalData.table.pager.total = res.data.total
        })
        .catch((res) => {
          // 请求失败处理...
        })
    },
    getMonthDetail() {
      // var params = new FormData()
      // params.append(
      //   'data',
      //   JSON.stringify({
      //     EMPLOYEE_ID: this.monthModalData.EMPLOYEE_ID,
      //     mark: 'month',
      //     currentDate: this.queryCondition.singleDateVal,
      //     pageNum: this.monthModalData.table.pager.currentPage,
      //     pageSize: this.monthModalData.table.pager.size
      //   })
      // )

    },
    getLastDay(d) {
      var now = Date.parse(d)
      var seperator1 = "-"
      var date=new Date(now)
      var new_month = date.getMonth()+1
      var new_year = date.getFullYear()
      var new_date = new Date(new_year,new_month,1)
      var currentdate = new_year + seperator1 + new_month + seperator1 +(new Date(new_date.getTime()-1000*60*60*24)).getDate()
      return currentdate
    },
    getTime(type) {
      var date = new Date()
      var year = date.getFullYear()
      var mon = date.getMonth() + 1
      var da = date.getDate()
      mon = mon < 10 ? '0' + mon : mon
      da = da < 10 ? '0' + da : da
      if (type === 1) {
        return year + '-' + mon
      } else {
        return year + '-' + mon + '-' + da
      }
    },
    // 根据传入的整数和时间计算一周前的日期
    getBeforeDate(days, date) {
      var now
      if (date !== '') {
        // var arr = date.split('-')
        now = Date.parse(date)
      } else {
        now = new Date().getTime()
      }
      var ago = now - 518400000 // 一天的毫秒数为86400000
      var agoData = new Date(ago)
      var year = agoData.getFullYear()
      var mon = agoData.getMonth() + 1
      var day = agoData.getDate()
      mon = mon < 10 ? '0' + mon : mon
      day = day < 10 ? '0' + day : day
      return year + '-' + mon + '-' + day
    },
    time_formatter(row, column) {
      if (row.goToWorkTime){
        var json_date = new Date(row.goToWorkTime).toJSON()
        return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      }
    }
  }
}
</script>