<!--
  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
-->

<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="region" style="margin-bottom:30px">
                        <el-select
                        v-model="form.region"
                        placeholder="请选择项目归属"
                        allow-create
                        clearable
                        default-first-option
                        filterable>
                          <el-option
                          v-for="item of projectFrom"
                            :key="item"
                            :label="item"
                            :value="item"
                          />
                        </el-select>
                </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="getWeekReportInfo('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 style="text-align:center">
                                <el-tag>本次查询日报状态</el-tag>
                              </div>
                <el-table
                  :data="Dailys.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                  v-loading = "loading"
                  style="width: 100%">
                  <el-table-column
                    label="姓名"
                    prop="userId">
                  </el-table-column>
                  <el-table-column
                    label="提交日期"
                    prop="dateAt">
                  </el-table-column>
                  <el-table-column
                    label="是否通过"
                    prop="dailyReportStatus">
                  </el-table-column>
                </el-table>
                <div class="pagination"><el-pagination
                    @size-change="handleSizeChange"
                    @current-change="current_change"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                    </el-pagination>
                </div>
                <div class="dailyReport" style="margin-top:40px">
                              <div style="text-align:center">
                                <el-tag>本次查询日报内容</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 } 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 {
  name: "weekSelect",
  data() {
    return {

        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:[],
        Arr:[],

        projectId:"",
        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,

        loading:false,
        SystemDate : "",

        currentPage:1,
        total:0,
        pagesize:5,
        pageSizes:[5,10,20,30,50],
        form:{
            region:"",
            dateregion:""
        },
        Dailys: [],
        exportDailys:{},
        ServerDate : "",

        projectFrom:[],
        rules: {
          region: [
            { required: true, message: '请选择项目编号', trigger: 'change' }
          ],
          dateregion:[
              { 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);
            getB1(this.projectId,this.dateRegion.toString().split(',')[0],this.dateRegion.toString().split(',')[1]).then(response =>{
            this.Arr = response;
            this.transMeans(this.Arr);
            this.BX=this.Arr;
            this.b1loading=false;
            this.bxloading=false;
            });
    },
    btnb2click(){
            this.b2loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b2");
            this.tmpfields = getObjColumnsAndProps(1);
            getB2(this.projectId,this.dateRegion.toString().split(',')[0],this.dateRegion.toString().split(',')[1]).then(response =>{
            this.Arr = response;
            this.transMeans(this.Arr);
            this.BX=this.Arr;
            this.b2loading=false;
            this.bxloading=false;
            });
    },
    btnb3click(){
            this.b3loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b3");
            this.tmpfields = getObjColumnsAndProps(2);
            getB3(this.projectId,this.dateRegion.toString().split(',')[0],this.dateRegion.toString().split(',')[1]).then(response =>{
            this.Arr = response;
            this.transMeans(this.Arr);
            this.BX=this.Arr;
            this.b3loading=false;
            this.bxloading=false;
            });
    },
    btnb4click(){
            this.b4loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b4");
            this.tmpfields = getObjColumnsAndProps(3);
            getB4(this.projectId,this.dateRegion.toString().split(',')[0],this.dateRegion.toString().split(',')[1]).then(response =>{
            this.Arr = response;
            this.transMeans(this.Arr);
            this.BX=this.Arr;
            this.b4loading=false;
            this.bxloading=false;
            });
    },
    btnb6click(){
            this.b6loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b6");
            this.tmpfields = getObjColumnsAndProps(4);
            getB6(this.projectId,this.dateRegion.toString().split(',')[0],this.dateRegion.toString().split(',')[1]).then(response =>{
            this.Arr = response;
            this.transMeans(this.Arr);
            this.BX=this.Arr;
            this.b6loading=false;
            this.bxloading=false;
            });
    },
    btnb7click(){
            this.b7loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b7");
            this.tmpfields = getObjColumnsAndProps(5);
            getB7(this.projectId,this.dateRegion.toString().split(',')[0],this.dateRegion.toString().split(',')[1]).then(response =>{
            this.Arr = response;
            this.transMeans(this.Arr);
            this.BX=this.Arr;
            this.b7loading=false;
            this.bxloading=false;
            });
    },
    btnb8click(){
            this.b8loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b8");
            this.tmpfields = getObjColumnsAndProps(6);
            getB8(this.projectId,this.dateRegion.toString().split(',')[0],this.dateRegion.toString().split(',')[1]).then(response =>{
            this.Arr = response;
            this.transMeans(this.Arr);
            this.BX=this.Arr;
            this.b8loading=false;
            this.bxloading=false;
            });
    },
    btnb9click(){
            this.b9loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b9");
            this.tmpfields = getObjColumnsAndProps(7);
            getB9(this.projectId,this.dateRegion.toString().split(',')[0],this.dateRegion.toString().split(',')[1]).then(response =>{
            this.Arr = response;
            this.transMeans(this.Arr);
            this.BX=this.Arr;
            this.b9loading=false;
            this.bxloading=false;
            });
    },
    btnb10click(){
            this.b10loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b10");
            this.tmpfields = getObjColumnsAndProps(8);
            getB10(this.projectId,this.dateRegion.toString().split(',')[0],this.dateRegion.toString().split(',')[1]).then(response =>{
            this.Arr = response;
            this.transMeans(this.Arr);
            this.BX=this.Arr;
            this.b10loading=false;
            this.bxloading=false;
            });
    },
    btnb11click(){
            this.b11loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b11");
            this.tmpfields = getObjColumnsAndProps(9);
            getB11(this.projectId,this.dateRegion.toString().split(',')[0],this.dateRegion.toString().split(',')[1]).then(response =>{
            this.Arr = response;
            this.transMeans(this.Arr);
            this.BX=this.Arr;
            this.b11loading=false;
            this.bxloading=false;
            });
    },
    btnb12click(){
            this.b12loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b12");
            this.tmpfields = getObjColumnsAndProps(10);
            getB12(this.projectId,this.dateRegion.toString().split(',')[0],this.dateRegion.toString().split(',')[1]).then(response =>{
            this.Arr = response;
            this.transMeans(this.Arr);
            this.BX=this.Arr;
            this.b12loading=false;
            this.bxloading=false;
            });
    },
    btnb13click(){
            this.b13loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b13");
            this.tmpfields = getObjColumnsAndProps(11);
            getB13(this.projectId,this.dateRegion.toString().split(',')[0],this.dateRegion.toString().split(',')[1]).then(response =>{
            this.Arr = response;
            this.transMeans(this.Arr);
            this.BX=this.Arr;
            this.b13loading=false;
            this.bxloading=false;
            });
    },
    btnb14click(){
            this.b14loading=true;
            this.bxloading=true;
            //this.getColumnsInfo("b14");
            this.tmpfields = getObjColumnsAndProps(12);
            getB14(this.projectId,this.dateRegion.toString().split(',')[0],this.dateRegion.toString().split(',')[1]).then(response =>{
            this.Arr = response;
            this.transMeans(this.Arr);
            this.BX=this.Arr;
            this.b14loading=false;
            this.bxloading=false;
            });
    },
    btnb15click(){
            this.b15loading=true;
            this.bxloading=true;
           // this.getColumnsInfo("b15");
            //console.log(getObjColumnsAndProps(13));
            this.tmpfields = getObjColumnsAndProps(13);
            getB15(this.projectId,this.dateRegion.toString().split(',')[0],this.dateRegion.toString().split(',')[1]).then(response =>{
            this.Arr = response;
            this.transMeans(this.Arr);
            this.BX=this.Arr;
            this.b15loading=false;
            this.bxloading=false;
            });
    },
  current_change:function(currentPage){
        this.currentPage = currentPage;
      },
        handleSizeChange(val) {
        this.pagesize = Number(`${val}`);
      },
      getDates() {
          var nowDate = new Date();
          this.SystemDate = this.dateFormat("YYYY-mm-dd",nowDate);
          getNowDate().then(response =>{
            this.ServerDate = response.data;
          })
  },
  GetExport(){

          this.exportBtnLoading = true;
          getExport(this.projectId,this.dateRegion).then(res => {
          this.exportDailys = res.data;
          import('@/utils/Export2Excel').then(excel => {

          const list1 = this.exportDailys.b1s;
          const data1 = this.formatJson(filterVal[0], list1);
          const list2 = this.exportDailys.b2s;
          const data2 = this.formatJson(filterVal[1], list2);
          const list3 = this.exportDailys.b3s;
          const data3 = this.formatJson(filterVal[2], list3);
          const list4 = this.exportDailys.b4s;
          const data4 = this.formatJson(filterVal[3], list4);
          const list6 = this.exportDailys.b6s;
          const data6 = this.formatJson(filterVal[4], list6);
          const list7 = this.exportDailys.b7s;
          const data7 = this.formatJson(filterVal[5], list7);
          const list8 = this.exportDailys.b8s;
          const data8 = this.formatJson(filterVal[6], list8);
          const list9 = this.exportDailys.b9s;
          const data9 = this.formatJson(filterVal[7], list9);
          const list10 = this.exportDailys.b10s;
          const data10 = this.formatJson(filterVal[8], list10);
          const list11 = this.exportDailys.b11s;
          const data11 = this.formatJson(filterVal[9], list11);
          const list12 = this.exportDailys.b12s;
          const data12 = this.formatJson(filterVal[10], list12);
          const list13 = this.exportDailys.b13s;
          const data13 = this.formatJson(filterVal[11], list13);
          const list14 = this.exportDailys.b14s;
          const data14 = this.formatJson(filterVal[12], list14);
          const list15 = this.exportDailys.b15s;
          const data15 = this.formatJson(filterVal[13], list15);
          //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.projectId + "_"+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]))
    },

  getWeekReportInfo(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.projectId = this.form.region;
            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;
            selectDailyByProjectAndFromTo(this.projectId ,this.dateRegion[0],this.dateRegion[1]).then(res => {
            this.Dailys = res;
            this.total = res.length;
            if(this.total > 0){
              this.BXBtnDisabled = false;
            };

            this.transMeansdailyReportStatus(this.Dailys);
            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>
