<!--
  1.rows cut from 2100 to 550
  2.tables columns head request from mysql,not write in this file,
    so if change table columns,not need fix this file.
  3.unitid not need request from mysql , unitid save to cookie at login,
    when this page need use ,then get from cookie.
  4.{__ob__: Observer }，occur this error

     ---by Paul 2022-11-11
-->
<!--

  1.tables columns head request not from mysql,
    from the file "check.xlsx.full.js" use method "getObjColumnsAndProps"

     ---by Paul 2022-11-17
-->
<!--
//watch，也可以解决 {__ob__: Observer }，不用延时等了

     ---by Paul 2022-11-18
-->
<!--
// 增加区间查询和导出功能

     ---by Paul 2023-4-29
-->

<template>
    <div class="app-container">
    <el-row :gutter="5">
    <el-col :span="22" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>区间查询</span>
          </div>
          <div class="date">
            <span style="padding-left:0%">本机日期：</span><span>{{SystemDate}}</span>
            <span style="padding-left:2%">服务器日期：</span><span>{{ServerDate}}</span>
          </div>
          <div class="form">
                <el-form :rules="rules" ref="form" inline :model="form" label-width="100px" style="width:100%">
                  <el-form-item label="当前帐号：" prop="userId">
                      <el-input clearable v-model="form.userId" v-if="isAdmin"></el-input>
                      <el-input clearable :value="form.userId" v-else></el-input>
                  </el-form-item>

                <el-form-item label="起止时间：" prop="dateregion">
                    <el-date-picker
                      v-model="form.dateregion"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      value-format="yyyy-MM-dd"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="getDailyFromTo('form')" :loading="searchloading">&nbsp;查询&nbsp;</el-button>
                <el-button type="primary" icon="el-icon-document" @click="GetExport" :loading="exportBtnLoading" :disabled="BXBtnDisabled">&nbsp;导出&nbsp;</el-button>
              </el-form>

                <div class="dailyReport" style="margin-top:40px">
                              <div style="text-align:center">
                                <el-tag>{{strtag}}</el-tag>
                              </div>

                            <div style="text-align:center">
                                <el-button-group>
                                    <el-button type="primary"  @click="btnb1click" :loading="b1loading" :disabled="BXBtnDisabled" >B1</el-button>
                                    <el-button type="primary"  @click="btnb2click" :loading="b2loading" :disabled="BXBtnDisabled">B2</el-button>
                                    <el-button type="primary"  @click="btnb3click" :loading="b3loading" :disabled="BXBtnDisabled">B3</el-button>
                                    <el-button type="primary"  @click="btnb4click" :loading="b4loading" :disabled="BXBtnDisabled">B4</el-button>
                                    <el-button type="primary"  @click="btnb6click" :loading="b6loading" :disabled="BXBtnDisabled">B6</el-button>
                                    <el-button type="primary"  @click="btnb7click" :loading="b7loading" :disabled="BXBtnDisabled">B7</el-button>
                                    <el-button type="primary"  @click="btnb8click" :loading="b8loading" :disabled="BXBtnDisabled">B8</el-button>
                                    <el-button type="primary"  @click="btnb9click" :loading="b9loading" :disabled="BXBtnDisabled">B9</el-button>
                                    <el-button type="primary"  @click="btnb10click" :loading="b10loading" :disabled="BXBtnDisabled">B10</el-button>
                                    <el-button type="primary"  @click="btnb11click" :loading="b11loading" :disabled="BXBtnDisabled">B11</el-button>
                                    <el-button type="primary"  @click="btnb12click" :loading="b12loading" :disabled="BXBtnDisabled">B12</el-button>
                                    <el-button type="primary"  @click="btnb13click" :loading="b13loading" :disabled="BXBtnDisabled">B13</el-button>
                                    <el-button type="primary"  @click="btnb14click" :loading="b14loading" :disabled="BXBtnDisabled">B14</el-button>
                                    <el-button type="primary"  @click="btnb15click" :loading="b15loading" :disabled="BXBtnDisabled">B15</el-button>
                                </el-button-group>
                             </div>

                          <el-table
                                    :data="BX"
                                    border
                                    v-loading="bxloading"
                                    stripe
                                    lazy
                                    style="width: 100%">
                                    <el-table-column
                                        v-for="(index,item) in tmpfields"
                                        :key="index"
                                        :label="item"
                                        :prop="index"
                                        :show-overflow-tooltip="true">
                                    </el-table-column>
                          </el-table>
                 </div>
          </div>
        </el-card>
    </el-col>
    </el-row>
    </div>
</template>
<script>
import { getNowDate,getExportDailyFromTo } from "@/api/daily/daily";
//import { selectDailyByProjectAndFromTo,getB1,getB2,getB3,getB4,getB6,getB7,getB8,getB9,getB10,getB11,getB12,getB13,getB14,getB15,getExport } from "@/api/week/week";
import Cookies from "js-cookie";
//import { getColumns } from "@/api/comprehensive/search";
import {tHeader,filterVal,getObjColumnsAndProps} from "@/api/check.xlsx.full.js";

export default {

  data() {
    return {
        isAdmin: Cookies.get('id') === 'X9000' ? true : false,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        BXBtnDisabled:true,
        tmpfields:[],
        tmpcolumns:[],//by Paul 2022-11-10 current file not use
        tmpprops:[],//by Paul 2022-11-10 current file not use
        BX:[],

        dateRegion:"",
        searchloading:false,
        exportBtnLoading:false,

        b1loading:false,
        b2loading:false,
        b3loading:false,
        b4loading:false,
        b6loading:false,
        b7loading:false,
        b8loading:false,
        b9loading:false,
        b10loading:false,
        b11loading:false,
        b12loading:false,
        b13loading:false,
        b14loading:false,
        b15loading:false,

        ob1:{},
        ob2:{},
        ob3:{},
        ob4:{},
        ob6:{},
        ob7:{},
        ob8:{},
        ob9:{},
        ob10:{},
        ob11:{},
        ob12:{},
        ob13:{},
        ob14:{},
        ob15:{},

        SystemDate : "",
        form:{
            dateregion:"",
            userId:Cookies.get('id'),
        },
        ServerDate : "",
        bxloading:false,
        countRow:0,
        strtag:"查询结果数据列表",

        rules: {
          dateregion:[
              { required: true, message: '请选择起止日期', trigger: 'change' }
          ],
          userId:[
              { required: true, message: '请填员工帐号', trigger: 'change' }
          ]
        }
    };
},
created(){
    this.getDates();
    //this.getProject();
   // this.getProjectIDFromCookie;
},
/* mounted() {
    setTimeout(()=>{
       //这里就写你要执行的语句即可，先让数据库的数据加载进去数组中你在从数组中取值就好了
        //this.form.region = this.projectFrom;
       // console.log(this.projectFrom);
        this.getProjectIDFromCookie();
        this.form.region =  this.projectFrom[0];
    },1000)
 }, */
  //watch，也可以解决 {__ob__: Observer }，不用延时等了
// watch:{
//   ServerDate(val){
//    // console.log(val);
//         //this.getProjectIDFromCookie();
//       //  this.form.region =  this.projectFrom[0];
//   },
//   immediate: true,
//   deep: false
//  },
methods:{
  btnb1click(){
            this.b1loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b1");
            this.tmpfields = getObjColumnsAndProps(0);
            this.BX=this.ob1;
            this.b1loading=false;
            this.bxloading=false;

    },
    btnb2click(){
            this.b2loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b2");
            this.tmpfields = getObjColumnsAndProps(1);
            this.BX=this.ob2;
            this.b2loading=false;
            this.bxloading=false;

    },
    btnb3click(){
            this.b3loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b3");
            this.tmpfields = getObjColumnsAndProps(2);
            this.BX=this.ob3;
            this.b3loading=false;
            this.bxloading=false;

    },
    btnb4click(){
            this.b4loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b4");
            this.tmpfields = getObjColumnsAndProps(3);
            this.BX=this.ob4;
            this.b4loading=false;
            this.bxloading=false;

    },
    btnb6click(){
            this.b6loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b6");
            this.tmpfields = getObjColumnsAndProps(4);
            this.BX=this.ob6;
            this.b6loading=false;
            this.bxloading=false;

    },
    btnb7click(){
            this.b7loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b7");
            this.tmpfields = getObjColumnsAndProps(5);
            this.BX=this.ob7;
            this.b7loading=false;
            this.bxloading=false;

    },
    btnb8click(){
            this.b8loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b8");
            this.tmpfields = getObjColumnsAndProps(6);
            this.BX=this.ob8;
            this.b8loading=false;
            this.bxloading=false;

    },
    btnb9click(){
            this.b9loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b9");
            this.tmpfields = getObjColumnsAndProps(7);
            this.BX=this.ob9;
            this.b9loading=false;
            this.bxloading=false;

    },
    btnb10click(){
            this.b10loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b10");
            this.tmpfields = getObjColumnsAndProps(8);
            this.BX=this.ob10;
            this.b10loading=false;
            this.bxloading=false;

    },
    btnb11click(){
            this.b11loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b11");
            this.tmpfields = getObjColumnsAndProps(9);
            this.BX=this.ob11;
            this.b11loading=false;
            this.bxloading=false;

    },
    btnb12click(){
            this.b12loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b12");
            this.tmpfields = getObjColumnsAndProps(10);
            this.BX=this.ob12;
            this.b12loading=false;
            this.bxloading=false;

    },
    btnb13click(){
            this.b13loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b13");
            this.tmpfields = getObjColumnsAndProps(11);
            this.BX=this.ob13;
            this.b13loading=false;
            this.bxloading=false;

    },
    btnb14click(){
            this.b14loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b14");
            this.tmpfields = getObjColumnsAndProps(12);
            this.BX=this.ob14;
            this.b14loading=false;
            this.bxloading=false;

    },
    btnb15click(){
            this.b15loading=true;
            this.bxloading=true;
           // this.getColumnsInfo("b15");
            //console.log(getObjColumnsAndProps(13));
            this.tmpfields = getObjColumnsAndProps(13);
            this.BX=this.ob15;
            this.b15loading=false;
            this.bxloading=false;

    },
  //     getDates() {
  //         var nowDate = new Date();
  //         this.SystemDate = this.dateFormat("YYYY-mm-dd",nowDate);
  //         getNowDate().then(response =>{
  //           this.ServerDate = response.data;
  //         })
  // },
  GetExport(){
          this.exportBtnLoading = true;
          import('@/utils/Export2Excel').then(excel => {
          const data1 = this.formatJson(filterVal[0], this.ob1);
          const data2 = this.formatJson(filterVal[1], this.ob2);
          const data3 = this.formatJson(filterVal[2], this.ob3);
          const data4 = this.formatJson(filterVal[3], this.ob4);
          const data6 = this.formatJson(filterVal[4], this.ob6);
          const data7 = this.formatJson(filterVal[5], this.ob7);
          const data8 = this.formatJson(filterVal[6], this.ob8);
          const data9 = this.formatJson(filterVal[7], this.ob9);
          const data10 = this.formatJson(filterVal[8], this.ob10);
          const data11 = this.formatJson(filterVal[9], this.ob10);
          const data12 = this.formatJson(filterVal[10], this.ob12);
          const data13 = this.formatJson(filterVal[11], this.ob13);
          const data14 = this.formatJson(filterVal[12], this.ob14);
          const data15 = this.formatJson(filterVal[13], this.ob15);
          //console.log(data15);
          excel.export_json_to_excel_sheet({
            headers: tHeader,
            datas: [data1,data2,data3,data4,data6,data7,data8,data9,data10,data11,data12,data13,data14,data15],
            sheetnames: ['B1','B2','B3','B4','B6','B7','B8','B9','B10','B11','B12','B13','B14','B15'],
            multiHeader: [],
            autoWidth:false,
            filename: '日报导出表_'+ this.userId + "_" + this.dateRegion.toString().replace(",","至"),
          },this.$message({
                  showClose: true,
                  message: '导出成功，请下载完成后查看！',
                  type: 'success'
                }))
        this.exportBtnLoading = false
          // this.downloadLoading = false
        })
        // this.listLoading = false

  },
  formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },

  getDailyFromTo(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userId = this.form.userId;
            this.dateRegion = this.form.dateregion;

            //this.BXBtnDisabled = false;
            if(this.dateRegion[1] > this.ServerDate)
            {
                this.$message({
                  showClose: true,
                  message: '不能查询未来的数据！',
                  type: 'error'
                });
                return false;
            }else if(this.getDaysBetween(this.dateRegion[0],this.dateRegion[1]) > 365){
                this.$message({
                  showClose: true,
                  message: '只能查询最近一年的数据！',
                  type: 'error'
                });
                return false;
            }
            this.loading = true;
            this.searchloading = true;
            getExportDailyFromTo(this.userId,this.dateRegion).then(res => {
             //this.exportDailys = res.data;
           // this.Dailys = res;
            //this.total = res.length;
            //this.transMeansdailyReportStatus(this.Dailys);
            this.ob1 =  res.data.b1s;
            this.transMeans(this.ob1);
            this.ob2 =  res.data.b2s;
            this.transMeans(this.ob2);
            this.ob3 =  res.data.b3s;
            this.transMeans(this.ob3);
            this.ob4 =  res.data.b4s;
            this.transMeans(this.ob4);
            this.ob6 =  res.data.b6s;
            this.transMeans(this.ob6);
            this.ob7 =  res.data.b7s;
            this.transMeans(this.ob7);
            this.ob8 =  res.data.b8s;
            this.transMeans(this.ob8);
            this.ob9 =  res.data.b9s;
            this.transMeans(this.ob9);
            this.ob10 =  res.data.b10s;
            this.transMeans(this.ob10);
            this.ob11 =  res.data.b11s;
            this.transMeans(this.ob11);
            this.ob12 =  res.data.b12s;
            this.transMeans(this.ob12);
            this.ob13 =  res.data.b13s;
            this.transMeans(this.ob13);
            this.ob14 =  res.data.b14s;
            this.transMeans(this.ob14);
            this.ob15 =  res.data.b15s;
            this.transMeans(this.ob15);
            this.countRow = this.ob1.length + this.ob2.length + this.ob3.length + this.ob4.length
                             + this.ob6.length+ this.ob7.length+ this.ob8.length+ this.ob9.length
                             + this.ob10.length+ this.ob11.length+ this.ob12.length+ this.ob13.length
                             + this.ob14.length+ this.ob15.length
            if (this.countRow  > 0){
                this.BXBtnDisabled = false;
                this.strtag ="本次查询结果数据总条数为： " + this.countRow
                this.btnb15click()
            }else{true
                this.BXBtnDisabled = true;
                this.strtag ="本次查询结果数据总条数为： " + this.countRow
            }

           // console.log(res.data)
            this.loading = false;
            this.searchloading = false;
            });
          } else {
            return false;
          }
        });
      },
getDaysBetween(startDate, enDate) {
  const sDate = Date.parse(startDate)
  const eDate = Date.parse(enDate)
  if (sDate > eDate) {
    return 0
  }
  if (sDate === eDate) {
    return 1
  }
  const days = (eDate - sDate) / (1 * 24 * 60 * 60 * 1000)
  return days
},
transMeans(arr){
      for(let i = 0; i < arr.length ; i++ ){
              if(arr[i].agreeSign == "2"){
                 arr[i].agreeSign = "已删除";
              }
              if(arr[i].agreeSign == "0"){
                 arr[i].agreeSign = "未同意";
              }
              if(arr[i].agreeSign == "1"){
                 arr[i].agreeSign = "同意";
              }
            }
    },
    transMeansdailyReportStatus(arr){
      for(let i = 0; i < arr.length ; i++ ){
              if(arr[i].dailyReportStatus == "2"){
                 arr[i].dailyReportStatus = "已删除";
              }
              if(arr[i].dailyReportStatus == "0"){
                 arr[i].dailyReportStatus = "未同意";
              }
              if(arr[i].dailyReportStatus == "1"){
                 arr[i].dailyReportStatus = "同意";
              }
            }
    },
    getColumnsInfo(tableName){
      getColumns(tableName).then(res => {
      // console.log(res.data);
      this.tmpfields = res.data;
       // console.log(res.columns);
      this.tmpcolumns = res.columns;
       //console.log(res.props);
      this.tmpprops = res.props;
    });
  },
     async getDates() {
        var nowDate = new Date();
        this.SystemDate = this.dateFormat("YYYY-mm-dd",nowDate);
        await getNowDate().then(response =>{
           this.ServerDate = response.data;
          });

  },
  getProjectIDFromCookie() {
      const unitid = Cookies.get("unitid");
      //console.log(unitid);
      const arrunitid = unitid.split("|");
      //console.log(arrunitid);
      for (let index = 0; index < arrunitid.length; index++) {
        this.projectFrom[index] = arrunitid[index]+"P" + this.ServerDate.substr(0,4);// 这个参于计算了，不只是用于绑定Vue控件，会产生--Ob-- ObServer的问题
      }
    },
dateFormat(fmt, date) {
    let ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
  }
}
}
</script>
<style>
.date{
  margin-bottom: 35px;
  margin-top: 25px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.pagination{
  margin:20px auto;
  padding-left: 36%;
}
</style>
