<template>
    <div class="app-container">
        <el-header>
            <div class="left-panel">
                 <el-select
                  v-model="query.belong_dept"
                  placeholder="车间"
                  clearable
                  style="margin-left: 2px; width: 200px"
                >
                  <el-option
                  v-for="item in deptOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  ></el-option>
                </el-select>
                <el-select
                    v-model="query.type"
                    placeholder="查询类型"
                    clearable
                    @change="typeCange"
                  >
                    <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    ></el-option>
                  </el-select>

                <el-date-picker
                    v-model="query.year"
                    type="year"
                    value-format="YYYY"
                    format="YYYY"
                    placeholder="年份"
                    v-if="query.type==1"
                />
                <el-date-picker
                    v-model="query.month"
                    type="month"
                    value-format="YYYY-MM"
                    format="YYYY-MM"
                    placeholder="月份"
                    v-if="query.type==0"
                />

                <!-- <el-date-picker
                    v-model="query.day"
                    type="date"
                    value-format="YYYY-MM-DD"
                    format="YYYY-MM-DD"
                    placeholder="日"
                    v-if="query.type==0"
                /> -->
                <el-button
                type="primary"
                icon="el-icon-search"
                @click="getTableData"
                ></el-button>
                <el-button
                    type="primary"
                    @click="exportExcel()"
                    :loading = "exportLoading"
                    >导出xlsx
                </el-button>
                <el-button
                    type="primary"
                    @click="handlePrint"
                    >打印
                </el-button>
            </div>
        </el-header>
        <el-card style="margin-top:5px">
            <!-- <div ref="print" id="myReport" class="printContainer">
                <h3 style="text-align: center;">{{tableTime}}</h3>
                <table border="1"  cellspacing="0" :key="timeStamp" id="myTable" class="myTable">
                    <thead class="myTableHead">
                        <tr colspan="7"> <th colspan="7">{{tableName}}</th></tr>
                        <tr>
                            <template v-for="(date,ind) in tableHead" :key="ind">
                                <th>{{date}}</th>
                            </template>
                        </tr>
                    </thead>
                    <tr v-for="(item,index) in tableDatas" :key="index">
                        
                        <td v-if="index==0" rowspan="7">{{item[0]}}</td>
                        <td v-else-if="index==7" rowspan="8">{{item[0]}}</td>
                        <td v-else-if="index==15" rowspan="3">{{item[0]}}</td>
                        <td class="numCell" v-if="index==11||index==13" rowspan="2">{{item[1]}}</td>
                        <td class="numCell" v-if="index==0||index==15" rowspan="3">{{item[1]}}</td>
                        <td class="numCell" v-else-if="index==3||index==7" rowspan="4">{{item[1]}}</td>
                        <td class="numCell">{{item[2]}}</td>
                        <td class="numCell">{{item[3]}}</td>
                        <td class="numCell">{{item[4]}}</td>
                        <td class="numCell">{{item[5]}}</td>
                        <td class="numCell">{{item[6]}}</td>
                    </tr>
                </table>
            </div> -->
            <div class="tableContainer">
                <table border="1"  cellspacing="0" :key="timeStamp" id="myTable1" class="myTable">
                    <thead class="myTableHead">
                        <tr>
                            <th :colspan="titleLength">{{ tableName }}</th>
                        </tr>
                        <tr>
                            <th rowspan="41">日期</th>
                            <th :colspan="header4.length">{{deptName}}</th>
                        </tr>
                        <tr>
                            <th :colspan="item.lengths*4" v-for="(item,index) in header2Obj" :key="index">{{ item.name }}</th>
                        </tr>
                        <tr>
                            <th colspan="4" v-for="item in header3" :key="item">{{item}}</th>
                        </tr>
                        <tr>
                            <th v-for="item in header4" :key="item">{{item}}</th>
                        </tr>
                    </thead>
                    <tr v-for="(item,index) in tableDatas3" :key="index">
                        <td v-for="(item1,index1) in item" :key="index1" class="numCell">{{item1}}</td>
                    </tr>
                </table>
            </div>
        </el-card>
    </div>
  </template>
<script>
    export default {
        data() {
            return {
                timeStamp:0,
                query:{
                    type:0,
                    year:'',
                    month:'',
                    search_type:'',
                },
                options:[
                    {id:0,name:'日报表'},
                    {id:1,name:'月报表'},
                ],
                titleLength:1,
                mgroupOptions:[],
                tableTime:'',
                tableName:'质检日报表',
                tableHead:['车间','物料','检验项目','平均值','检次','合次','合格率'],
                tableDatas:[
                    ['原料车间','辅料','细度', , , , , , ],
                    ['原料车间','辅料','Fe2O3', , , , , , ],
                    ['原料车间','辅料','水分', , , , , , ],
                    ['原料车间','干混生料','细度', , , , , , ],
                    ['原料车间','干混生料','Fe2O3', , , , , , ],
                    ['原料车间','干混生料','水分', , , , , , ],
                    ['原料车间','干混生料','CaO', , , , , , ],

                    ['烧成车间','入窑生料','CaO', , , , , , ],
                    ['烧成车间','入窑生料','Fe2O3', , , , , , ],
                    ['烧成车间','入窑生料','细度'],
                    ['烧成车间','入窑生料','水分'],
                    ['烧成车间','熟料','立升重'],
                    ['烧成车间','熟料','f-CaO'],
                    ['烧成车间','煤粉','细度'],
                    ['烧成车间','煤粉','水分'],

                    ['水泥车间','出磨水泥','比表面积'],
                    ['水泥车间','出磨水泥','SO3'],
                    ['水泥车间','出磨水泥','掺量'],
                ],
                exportLoading:false,
                header2:[],
                header3:[],
                header4:[],
                tableData:[],
                header2Obj:[],
                deptOptions:[],
                arrLength:[0,0,0],
            };
        },
        mounted() {
            var myDate = new Date();
            let month = myDate.getMonth()+1;
            let days = myDate.getDate()-1;
            if(month<10){
                month = '0'+month;
            }
            if(days<10){
                days = '0'+days;
            }
            this.query.day = myDate.getFullYear()+'-'+month+'-'+days;
            this.getGroup();
        },
        methods: {
            typeCange(value){
                if(value==1){
                    this.tableName = '质检日报表'
                }else if(value==1){
                    this.tableName = '质检月报表'
                }else{
                    this.tableName = '质检年报表'
                }
            },
            deptChange(e){
                let that = this;
                that.deptOptions.forEach(item=>{
                    if(item.id==e){
                        that.deptName = item.name;
                    }
                })
            },
			getGroup() {
                let that = this;
				that.$API.system.dept.list.req({ page_size: 3 , type:'dept'}).then(res=>{
					that.deptOptions = res.results;
                    that.deptName = res.results[0].name;
                    that.query.belong_dept = res.results[0].id;
                    this.getTableData();
				});
			},
            getTableData(){
                let that = this;
                that.tableDatas3 = [];
                that.header2Obj=[];
                that.header2 = [];//物料
                that.header3 = [];//检测项
                that.header4 = [];//检测项
                let params = {};
                let arr = [];
                if(that.query.type==0){//日
                    arr = that.query.month.split('-');
                    params.year_s = arr[0];
                    params.month_s = arr[1];
                    params.type = 'day_s'
                }else if(that.query.type==1){//月
                    params.type = 'month_s'
                    params.year_s = that.query.year;
                }
                params.mgroup__belong_dept = that.query.belong_dept;
                // that.$API.enm.enstat.req(params).then(res=>{
                //     let data = res.results;
                //     let list = [];
                //     data.forEach(item => {
                //         let index = item.day_s;
                //         if(list[index]){}else{
                //             list[index] = [];
                //         }
                //         list[index].push(item);
                //     })
                //     let header2=[],header2Obj=[],header3=[],header4=[];
                //     list = list.filter(item=>{
                //         return item
                //     })
                //     console.log(list)
                //     console.log('000000000000000')
                //     //list按天分好的数组
                //     list.forEach((item0,index0)=>{
                //         //data1某一天的数据
                //         let data1 = item0;
                //         let dayData=[],wrapData = [[],[],[]];
                //         dayData[0]= data1[0].day_s!=null?data1[0].year_s+'.'+data1[0].month_s+'.'+data1[0].day_s:data1[0].year_s+'.'+data1[0].month_s;
                //         data1.forEach(item1 => {
                //             if(item1.belong_dept_name=='原料车间'){
                //                 wrapData[0].push(item1)
                //             }else if(item1.belong_dept_name=='烧成车间'){
                //                 wrapData[1].push(item1)
                //             }else if(item1.belong_dept_name=='水泥车间'){
                //                 wrapData[2].push(item1)
                //             }
                //         });
                //         //wrapData按车间分的数组
                //         for(let i=0;i<wrapData.length;i++){
                //             let data2 = wrapData[i];
                //             //一个车间的数据
                //             for(let j=0;j<data2.length;j++){
                //                 //一个工段的检测项目
                //                let data3 = data2[j].qua_data;
                //                //四个工段
                //                data3.forEach(item3=>{
                //                     if(index0==0){
                //                         header3.push(item3.testitem_name)
                //                         if(header2.indexOf(item3.material_name)>-1){
                //                             let indexObj = header2.indexOf(item3.material_name);
                //                             header2Obj[indexObj].length = header2Obj[indexObj].length+1;
                //                         }else{
                //                             header2.push(item3.material_name);
                //                             header2Obj.push({name:item3.material_name,length:1})
                //                         }
                //                         console.log(header2)
                //                         console.log(header2Obj)
                //                         header4.push('平均值')
                //                         header4.push('检次')
                //                         header4.push('合次')
                //                         header4.push('及格率')
                //                     }
                //                     dayData.push(item3.val_avg)
                //                     dayData.push(item3.num_test)
                //                     dayData.push(item3.num_ok)
                //                     let pass = item3.rate_pass*100+'%'
                //                     dayData.push(pass)
                //                })
                //             } 
                //         }
                //         if(index0==0){
                //             that.header2Obj=header2Obj;
                //             that.header2 = header2;//物料
                //             that.header3 = header3;//检测项
                //             that.header4 = header4;//检测项
                //             console.log(header2)
                //             console.log(header3)
                //             console.log(header4)
                //         }
                //         that.tableData.push(dayData)
                //     })
                //     // debugger;
                //     // console.log(that.tableData)
                //     // that.time = 
                //     // that.tableName = res.name;
                //     // let data = res.data.ds0;
                //     // that.tableHead = data[0];
                //     // that.tableDatas = data.slice(1,data.length);
                //     // for(let i=0;i<that.tableDatas.length;i++){
                //     //     that.tableDatas[i][3] = that.tableDatas[i][3].tofixed(2);
                //     //     that.tableDatas[i][4] = that.tableDatas[i][4].tofixed(2);
                //     //     that.tableDatas[i][5] = that.tableDatas[i][5].tofixed(2);
                //     //     that.tableDatas[i][6] = that.tableDatas[i][6].tofixed(2);
                //     // }
                //     // that.tableDatas;
                // })
                this.$API.enm.enstat.req(params).then((res) => {
                    let data = res.results;
                    let wrapArr = [];
                    let innerArr = [];
                    let ind = 0;
                    //1、将相同日期或月份/年份的数据放到一组
                    let header2=[],header2Obj=[],header3=[],header4=[];
                    data.forEach(item => {
                        if(that.query.type==0){//日统计 
                            ind = item.day_s-1;
                        }else if(that.query.type==1){//月统计
                            ind = item.month_s-1;
                        }
                        if(wrapArr[ind]){
                        }else{
                            wrapArr[ind] = [];
                        }
                        if(that.deptName=='原料车间'){
                            wrapArr[ind].push(item)
                        }else if(that.deptName=='烧成车间'){
                            if(item.mgroup_name=='回转窑'){
                                wrapArr[ind][1]=item
                            }else{
                                wrapArr[ind][0]=item
                            }
                        }else{
                            wrapArr[ind].push(item)
                        }
                    });
                    wrapArr = wrapArr.filter(item=>{
                        return item
                    })
                    wrapArr.forEach((item1,index1)=>{
                        if(item1!=undefined){
                            console.log(item1)//一天的数据
                            let itemArr = [];
                            let header2tem=[],header2Objtem=[],header3tem=[],header4tem=[];
                            let time =item1[0].day_s!=null? item1[0].year_s+'.'+item1[0].month_s+'.'+item1[0].day_s:item1[0].year_s+'.'+item1[0].month_s;
                            itemArr.push(time)
                            //遍历每个工段
                            item1.forEach(item2=>{
                                let data2 =item2.qua_data;
                                //遍历一个工段的物料检验数据
                                data2.forEach((item3,index3)=>{
                                    //item3一个检验数据
                                    if(header2tem.indexOf(item3.material_name)>-1){
                                        let indexObj = header2tem.indexOf(item3.material_name);
                                        header2Objtem[indexObj].lengths = header2Objtem[indexObj].lengths+1;
                                    }else{
                                        header2tem.push(item3.material_name);
                                        header2Objtem.push({name:item3.material_name,lengths:1})
                                    }
                                    header3tem.push(item3.testitem_name)
                                    header4tem.push('平均值')
                                    header4tem.push('检次')
                                    header4tem.push('合次')
                                    header4tem.push('及格率')
                                    let indexObj = header2tem.indexOf(item3.material_name);
                                    debugger;
                                    if(indexObj>0&&index3==0){
                                        let inde = indexObj-1;
                                        let ind =header2Objtem[inde].lengths*4+1;
                                        itemArr[ind] = item3.val_avg.toFixed(2);
                                        itemArr.push(item3.num_test)
                                        itemArr.push(item3.num_ok)
                                        let pass = (item3.rate_pass*100).toFixed(2);
                                        pass= pass+'%';
                                        itemArr.push(pass)
                                    }else{
                                        itemArr.push(item3.val_avg.toFixed(2))
                                        itemArr.push(item3.num_test)
                                        itemArr.push(item3.num_ok)
                                        let pass = (item3.rate_pass*100).toFixed(2);
                                        pass= pass+'%';
                                        itemArr.push(pass)
                                    }
                                    that.titleLength =itemArr.length;
                                })
                            })
                            innerArr.push(itemArr)
                            console.log('0000000000000');
                            console.log(itemArr);
                            console.log(header2tem);
                            console.log(header2Objtem);
                            console.log(header3tem);
                            console.log(header4tem);
                            console.log('1111111111111');
                            if(header2tem.length>header2.length){
                                header2 = header2tem;
                            }
                            if(header2Objtem.length>header2Obj.length){
                                header2Obj=header2Objtem;
                            }
                            if(header3tem.length>header3.length){
                                header3 = header3tem;
                            }
                            if(header4tem.length>header4.length){
                                header4 = header4tem;
                            }
                        }
                    })
                    that.tableDatas3 = innerArr;
                    that.header2Obj=header2Obj;
                    that.header2 = header2;//物料
                    that.header3 = header3;//检测项
                    that.header4 = header4;//检测项
                });
            },
            handlePrint() {
                this.$PRINT('#myReport');
            },
            exportExcel() {
                this.exportLoading = true;
                this.$XLSX('#myTable', this.tableName)
                this.exportLoading = false;
            },
        }
    };
</script>
<style>
    .printContainer{
        width: 1075px;
    }
    .tableContainer{
        overflow-x: scroll;
    }
  
</style>