<template>
  <div class="container-fluid">
    <div class="form form-inline">
      <div class="form-group">
        <label class="control-label">{{ $t("lang.DelegationReport.taskIssuTime") }}：{{ $t("lang.DelegationReport.start") }}</label>
        <div class="form-group" style="margin-left: 10px;">
          <Date v-model="startDate" name="date" />
        </div>
      </div>
      <div class="form-group" style="margin-left: 10px;">
        <label class="control-label">{{ $t("lang.DelegationReport.end") }}</label>
        <div class="form-group" style="margin-left: 10px;">
          <Date v-model="endDate" name="date" />
        </div>
      </div>
    </div>
    <div class="form form-inline" style="margin-top: 10px;">
      <div class="form-group">
        <label class="control-label">{{ $t("lang.DelegationReport.taskCompletionTime") }}：{{ $t("lang.DelegationReport.start") }}</label>
        <div class="form-group" style="margin-left: 10px;">
          <Date v-model="taskCompleteStartDate" name="date" />
        </div>
      </div>
      <div class="form-group" style="margin-left: 10px;">
        <label class="control-label">{{ $t("lang.DelegationReport.end") }}</label>
        <div class="form-group" style="margin-left: 10px;">
          <Date v-model="taskCompleteEndDate" name="date" />
        </div>
      </div>
      <button type="button" class="btn btn-primary" style="margin-left: 10px;" @click="excelReport()">
        {{ $t("lang.DelegationReport.generateReport") }}
      </button>
    </div>
  </div>
</template>
<script>

export default {
  data: function () {
    return {
      startDate: null,
      endDate: null,
      taskCompleteStartDate: null,
      taskCompleteEndDate: null,
    };
  },

  watch: {
    
  },

  mounted: function () {
    
  },
  methods: {

    /**
       * 加载excel报表
       */
    excelReport: function () {
      let _self = this;
      let processReportNo = '20221031_140343';
      let locale = this.$i18n.locale;
      if(locale == 'zh-CN'){
        processReportNo = '20221031_140343';
      }
      if(locale == 'en-US'){
        processReportNo = '20221202_182715';
      }
      if (_self.startDate != null && _self.endDate != null) {
        let startDate = _self.startDate + ' 00:00:00';
        let endDate = _self.endDate + ' 23:59:59';
        let previewExcelUrl = '/static/x-spreadsheet/index.html?processReportNo=' + processReportNo + '&startDate=' + startDate + '&endDate=' + endDate;
        window.open(previewExcelUrl);
      }

      if(_self.taskCompleteStartDate != null && _self.taskCompleteEndDate != null){
        let taskCompleteStartDate = _self.taskCompleteStartDate + ' 00:00:00';
        let taskCompleteEndDate = _self.taskCompleteEndDate + ' 23:59:59';
        let previewExcelUrl = '/static/x-spreadsheet/index.html?processReportNo=' 
          + processReportNo + '&taskCompleteStartDate=' 
          + taskCompleteStartDate + '&taskCompleteEndDate=' 
          + taskCompleteEndDate;
        window.open(previewExcelUrl);
      }

      if (_self.startDate != null && _self.endDate != null && _self.taskCompleteStartDate != null && _self.taskCompleteEndDate != null) {
        let startDate = _self.startDate + ' 00:00:00';
        let endDate = _self.endDate + ' 23:59:59';
        let taskCompleteStartDate = _self.taskCompleteStartDate + ' 00:00:00';
        let taskCompleteEndDate = _self.taskCompleteEndDate + ' 23:59:59';
        let previewExcelUrl = '/static/x-spreadsheet/index.html?processReportNo=' 
          + processReportNo + '&startDate=' 
          + startDate + '&endDate=' + endDate + '&taskCompleteStartDate=' 
          + taskCompleteStartDate + '&taskCompleteEndDate=' + taskCompleteEndDate;
        window.open(previewExcelUrl);
      }
    },
  },
};
</script>

<style>
  .input-date {
    display: inherit;
  }
</style>