<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.personName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="账号">
              <a-input placeholder="请输入账号" v-model="queryParam.personId"></a-input>
            </a-form-item>
          </a-col>
          
          <a-col :md="6" :sm="8">
            <a-form-item label="是否同步">
               <a-select v-model="queryParam.syU8" placeholder="请选择是否同步">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="1">是</a-select-option>
                    <a-select-option value="0">否</a-select-option>
               </a-select>
            </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>
          
            </span>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="同步日期">
              <a-month-picker valueFormat="YYYY-MM"  @change="onChange" placeholder="请输入日期" v-model="queryParam.monthTime"></a-month-picker>
            </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="syMonthReport" icon="reload" style="margin-left: 8px">同步至U8</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="id" :columns="columns"
        :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <span slot="syU8" slot-scope="text, record, index">
          <a v-if="record.syU8 == 1 ">是</a>
          <a v-if="record.syU8 == 0 ">否</a>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

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

<script>
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import {getAction, postAction, deleteAction,putAction} from '@/api/manage'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import moment from 'moment';
  import 'moment/locale/zh-cn';

  export default {
    name: 'ViewClockInList',
    mixins: [JeecgListMixin],
    components: {
      JDictSelectTag
    },
    data() {
      return {
        moment,
        description: '考勤月报',
        // 表头
        columns: [
          {
            title: '日期',
            align: 'center',
            dataIndex: 'monthTime'
          },
          {
            title: '人员姓名',
            align: 'center',
            dataIndex: 'personName'
          },
          {
            title: '账号',
            align: 'center',
            dataIndex: 'personId'
          },
          {
            title: '考勤天数',
            align: 'center',
            dataIndex: 'workDay'
          },
          {
            title: '实际考勤天数',
            align: 'center',
            dataIndex: 'workDayReal'
          },
          {
            title: '旷工天数',
            align: 'center',
            dataIndex: 'missingNum'
          },
          {
            title: '加班时长（时）',
            align: 'center',
            dataIndex: 'duration'
          },
          {
            title: '事假时长（天）',
            align: 'center',
            dataIndex: 'holidayTimeSj'
          },
          {
            title: '病假时长（天）',
            align: 'center',
            dataIndex: 'holidayTimeBj'
          },
          {
            title: '是否同步U8',
            align: 'center',scopedSlots: {
              customRender: 'syU8'
            }
          }
        ],
        url: {
          list: '/viewClockIn/bdClockinMonth/list',
          syMonthReport: '/viewClockIn/viewClockIn/syMonthReport'
        },
      }
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },
    methods: {
      onChange(date, dateString) {
            console.log(date, dateString);
            // this.value = "2021-01-01"
      },
      syMonthReport() {
        let ids = "";
        var conText = "";
        let sqp1 = this.getQueryParams();
        if(sqp1['monthTime'] == 'undefined' || sqp1['monthTime'] == null || sqp1['monthTime'] == ''){
          this.$message.warning('请选择同步月份！');
          return false;
        }
        let nowDate = moment(sqp1['monthTime']).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;
        }
        
        that.$confirm({
           title: conText,
           content: "同步后不可修改，请确认操作！",
           onOk: function () {
             putAction(that.url.syMonthReport, {viewDate:nowDate,ids:ids}).then((res) => {
               if (res.success) {
                 that.$message.success("同步成功");
                 that.loadData();
               }else{
                 that.$message.warning(res.message);
               }
             }).finally(() => {
                   
             })
           }
        });
       
       
       
       

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