<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="工号">
              <a-input placeholder="请输入工号" v-model="queryParam.workNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="人员">
              <a-input placeholder="请输入人员" v-model="queryParam.realname"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="部门">
              <a-input placeholder="请输入部门" v-model="queryParam.departNames"></a-input>
            </a-form-item>
          </a-col>
          
         <!-- <a-col :md="6" :sm="8">
            <a-form-item label="班次">
              <a-input placeholder="请输入班次" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col> -->
          
          <a-col :md="5" :sm="8">
            <a-form-item label="班次" style="width: 300px">
                  <!-- <j-search-select-tag
                    placeholder="请做出你的选择"
                    v-model="asyncSelectValue"
                    dict="geke_shift,name,name"
                    :async="true">
                  </j-search-select-tag> -->
                  
                  <a-select v-model="queryParam.name" placeholder="请选择班次">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="休息">休息</a-select-option>
                    <a-select-option value="固定上下班">固定上下班</a-select-option>
                    <a-select-option value="自由上下班">自由上下班</a-select-option>
                    <a-select-option v-for="(item,index) in shiftlist" :value="item.name">{{item.name}} （{{item.startDate}}-{{item.endDate}})
                    </a-select-option>
                  </a-select>
                  
                </a-form-item>
          </a-col>
          
          <a-col :md="6" :sm="10">
            <a-form-item label="日期">
              <a-range-picker
                style="width: 210px"
                format="YYYY-MM-DD"
                :placeholder="['开始时间', '结束时间']"
                @change="onDateChange"
                @ok="onDateOk"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <!-- <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button> -->

            </span>
          </a-col>

        </a-row>

        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="生成月报日期">
              <a-month-picker format="YYYY-MM" placeholder="请输入生成月报日期" v-model="queryParam.nowDate" />
              <!-- <a-input placeholder="请输入生成月报日期" v-model="queryParam.nowDate"></a-input> -->
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="monthReport" icon="reload" style="margin-left: 8px">生成当月考勤月报</a-button>
            </span>
          </a-col>
          

        </a-row>
      </a-form>
    </div>


    <!-- table区域-begin -->
    <div>

      <a-table class="j-table-force-nowrap" ref="table" size="middle" bordered rowKey="pkId" :columns="columns"
        :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange" :scroll="{ x: 3000 }">

        <span slot="latetimeState" slot-scope="text, record, index">
          <!-- <a-tag color="pink" v-if="record.latetimeX > 0 || record.latetimeS > 0 ">异常</a-tag>
          <a-tag color="#87d068" v-if="record.latetimeX <= 0 && record.latetimeS <= 0 ">正常</a-tag> -->
          
          <a-tag color="pink" v-if="record.latetimeS < 0 || record.latetimeX > 0
          || record.shiftRealTimeS == '' || record.shiftRealTimeS == null || (record.ifwork !=0 && record.attendanceCount < 2)
           || (record.name != null && record.name != '' && (record.gotoTime == null || record.gotoTime == ''))
          && (record.setInfo == '' || record.setInfo == null)">
          异常
          </a-tag>
          <a-tag color="#87d068" v-else>正常</a-tag>
        </span>
        <span slot="realShiftTime" slot-scope="text, record, index">
          <!-- ruleType 上班类型 1.固定时间上下班，2.按班次上下班，3.自由上下班 -->
          <span v-if="record.ruleType == '2' ">
            {{record.name}} {{record.shiftRealTimeS}}-{{record.shiftRealTimeX}}
          </span>
          <span v-else>{{record.name}}</span>
        </span>


        <span slot="action" slot-scope="text, record">
          <a @click="jiaozhun(record)">校准</a>
          
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <!-- <ViewClockIn-modal ref="modalForm" @ok="modalFormOk"></ViewClockIn-modal> -->
  </a-card>
</template>

<script>
  import {
    httpAction,
    getFileAccessHttpUrl,
    getAction,
    deleteAction
  } from '@/api/manage'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import {
    monthReport,jiaozhun
  } from '@/api/api'
  import moment from 'moment';
  import 'moment/locale/zh-cn';

  export default {
    name: 'ViewClockInList',
    mixins: [JeecgListMixin],
    components: {
      JDictSelectTag
    },
    data() {
      return {
        moment,
        shiftlist: null,
        description: '考勤日报',
        // 表头
        columns: [
          /* {
            title: '行号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          }, */
          {
            title: '日期',
            align: 'center',
            dataIndex: 'viewDate', fixed: 'left', width: 100
          },
          {
            title: '人员',
            align: 'center',
            dataIndex: 'realname', fixed: 'left', width: 100
          },{
            title: '部门',
            align: 'center',
            dataIndex: 'departNames', fixed: 'left', width: 200
          },
          // {
          //   title: '工号',
          //   align: 'center',
          //   dataIndex: 'workNo'
          // },
          {
            title: '班次',
            align: 'center',
            fixed: 'left', width: 160,
            scopedSlots: {
              customRender: 'realShiftTime'
            }
          },
          // {
          //   title: '上班时间',
          //   align: 'center',
          //   dataIndex: 'shiftTimeS'
          // },
          {
            title: '最早打卡时间',
            align: 'center',
            dataIndex: 'gotoTime'
          },
          // {
          //   title: '下班时间',
          //   align: 'center',
          //   dataIndex: 'shiftTimeX'
          // },
          {
            title: '最晚打卡时间',
            align: 'center',
            dataIndex: 'closingTime'
          }, {
            title: '打卡次数',
            align: 'center',
            dataIndex: 'attendanceCount', width: 100
          }, {
            title: '考勤状态',
            align: 'center', width: 100,
            scopedSlots: {
              customRender: 'latetimeState'
            }
          },
          /* {
            title: '迟到分钟',
            align: 'center',
            dataIndex: 'latetimeS',
            customRender: function(t, r, index) {
              if (t > 0) {
                return t;
              } else {
                return 0;
              }
            }
          },
          {
            title: '早退分钟',
            align: 'center',
            dataIndex: 'latetimeX',
            customRender: function(t, r, index) {
              if (t > 0) {
                return t;
              } else {
                return 0;
              }
            }
          }, 
          {
            title: '上班打卡',
            align: 'center',
            dataIndex: 'gotoState'
          },
          {
            title: '下班打卡',
            align: 'center',
            dataIndex: 'closingState'
          },*/
          {
            title: '加班开始时间',
            align: 'center',
            dataIndex: 'durationBeginDate'
          },
          {
            title: '加班结束时间',
            align: 'center',
            dataIndex: 'durationEndDate'
          },
          {
            title: '加班事由',
            align: 'center',
            dataIndex: 'demo'
          },
          {
            title: '加班时长',
            align: 'center',width: 100,
            dataIndex: 'duration'
          },
          {
            title: '请假开始时间',
            align: 'center',
            dataIndex: 'holidayStartDate'
          },
          {
            title: '请假结束时间',
            align: 'center',
            dataIndex: 'holidayEndDate'
          },
          {
            title: '请假类型',
            align: 'center',width: 100,
            dataIndex: 'holidayType'
          }
          // ,
          // {
          //   title: '操作',
          //   dataIndex: 'action',
          //   align: 'center',
          //   scopedSlots: { customRender: 'action' },
          // }
        ],
        url: {
          list: '/viewClockIn/viewClockIn/list',
          shift: "/shift/shift/lists"
        },
      }
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },
    created() {　　　　//实例被创建时候执行
        this.queryShift();
    },
    methods: {
      onDateChange: function (value, dateString) {
        console.log(dateString[0],dateString[1]);
        this.queryParam.beginViewDate=dateString[0];
        this.queryParam.endViewDate=dateString[1];
      },
      onDateOk(value) {
        // console.log(value);
      },
      onChange(date, dateString) {
            // console.log(date, dateString);
            // this.value = "2021-01-01"
      },
      queryShift() {
        httpAction(this.url.shift, "", "get").then((res) => {
          if (res.success) {
            this.shiftlist = res.result;
            console.log(res.result);
          }
        }).finally(() => {
      
        })
      },
      jiaozhun(record) {
        // alert(record.viewDate);
        // alert(record.username);
        let that = this;
        this.$confirm({
                title: '校准后原打卡时间将失效',
                content: '上班打卡时间：'+record.shiftTimeS+'； 下班打卡时间：'+record.shiftTimeX,
                onOk: function () {
                  jiaozhun({shiftTimeS:record.shiftTimeS,shiftTimeX:record.shiftTimeX,viewDate:record.viewDate,username:record.username}).then((res) => {
                    if (res == 'true') {
                      that.$message.success("已成功校准");
                      that.loadData();
                    } else {
                      that.$message.warning(res);
                    }
                  });
                },
                onCancel() {},
              });
        
        
      },
      monthReport() {
        let ids = "";
        var conText = ";"
        let sqp1 = this.getQueryParams();
        if(sqp1['nowDate'] == 'undefined' || sqp1['nowDate'] == null || sqp1['nowDate'] == ''){
          this.$message.warning('请选择生成月报日期！');
          return false;
        }
        let nowDate = moment(sqp1['nowDate']).format('YYYY-MM');
        let that = this;
        
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ",";
        }
        if(ids == ""){
          conText = "是否生成所有员工" + nowDate + "月报？";
        }else{
          conText = "是否生成所选员工" + nowDate + "月报？ 所选数量：" + this.selectedRowKeys.length;
        }
        // console.log(ids);
        that.$confirm({
           title: "确认操作",
           content: conText,
           onOk: function () {
             monthReport({nowDate:nowDate,userIds:ids}).then((res) => {
               if (res.success) {
                 that.$message.success("已成功生成"+nowDate+"考勤月报");
                 // that.$message.success("已成功生成"+nowDate+"考勤月报");
                 that.loadData();
               } else {
                 that.$message.warning(res.message);
               }
             });
           }
        });
      
       
       
       

      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>