<template>
    <div class="app-container">
        <el-header>
            <div class="left-panel">
                 <el-select
                  v-model="query.belong_dept"
                  placeholder="车间"
                  clearable
                  @change="deptChange"
                  class="headerSearch"
                >
                  <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
                    class="headerSearch"
                    @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="年份"
                    class="headerSearch"
                    v-if="query.type==1"
                />
                <el-date-picker
                    v-model="query.month"
                    type="month"
                    value-format="YYYY-MM"
                    format="YYYY-MM"
                    placeholder="月份"
                    class="headerSearch"
                    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"
					v-auth="'export_excel'"
                    >导出xlsx
                </el-button>
                <el-button
                    type="primary"
                    @click="handlePrint"
                    >打印
                </el-button>
            </div>
        </el-header>
        <el-card style="margin-top:5px">
            <div class="tableContainer">
                <table border="1"  cellspacing="0" :key="timeStamp" id="myTable" class="myTable">
                    <thead class="myTableHead">
                        <tr>
                            <th rowspan="41">日期</th>
                            <th :colspan="header4.length">{{tableName}}</th>
                        </tr>
                        <tr>
                            <th :colspan="item2.lengths*4" v-for="(item2,index) in header2Obj" :key="index">{{ item2.name }}</th>
                        </tr>
                        <tr>
                            <th colspan="4" v-for="item3 in header3" :key="item3">{{item3}}</th>
                        </tr>
                        <tr>
                            <th v-for="item4 in header4" :key="item4">{{item4}}</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:'',
                deptName:'',
                typeName:'质检日报表',
                tableName:'',
                tableDatas:[
                    ['原料车间','辅料','细度', , , , , , ],
                    ['原料车间','辅料','Fe2O3', , , , , , ],
                    ['原料车间','辅料','水分', , , , , , ],
                    ['原料车间','干混生料','细度', , , , , , ],
                    ['原料车间','干混生料','Fe2O3', , , , , , ],
                    ['原料车间','干混生料','水分', , , , , , ],
                    ['原料车间','干混生料','CaO', , , , , , ],

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

                    ['水泥车间','出磨水泥','比表面积'],
                    ['水泥车间','出磨水泥','SO3'],
                    ['水泥车间','出磨水泥','掺量'],
                ],
                tableDatas3:[],
                exportLoading:false,
                header2:[],
                header3:[],
                header4:[],
                tableData:[],
                header2Obj:[],
                deptOptions:[],
            };
        },
        watch: {
            header3: {
                handler(newV, OldV) {
                    this.header3 = newV;
                }
            }
        },
        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.month = myDate.getFullYear()+'-'+month
            this.query.day = myDate.getFullYear()+'-'+month+'-'+days;
            this.getGroup();
        },
        methods: {
            typeCange(value){
                let that = this;
                if(value==1){
                    this.typeName = '质检日报表'
                }else if(value==1){
                    this.typeName = '质检月报表'
                }
                that.tableName = that.deptName+that.typeName;
            },
            deptChange(e){
                let that = this;
                that.deptOptions.forEach(item=>{
                    if(item.id==e){
                        that.deptName = item.name;
                        that.tableName = item.name+that.typeName;
                    }
                })
            },
			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.tableName =that.deptName+that.typeName;
                    that.query.belong_dept = res.results[0].id;
                    this.getTableData();
				});
			},
            getTableData(){
                let that = this;
                that.tableDatas3 = [];
               
                that.header3 = [];
                if(that.deptName=='原料车间'){
                    that.header2Obj=[{name:'辅料',lengths:3},{name:'干混生料',lengths:4}];
                    that.header2 = ['辅料','干混生料'];//物料
                    // that.header3 = ['细度','Fe2O3','水分','细度','Fe2O3','水分','CaO'];//检测项
                    that.header4 = ['平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率'];//检测项
                }else if(that.deptName=='烧成车间'){
                    that.header2Obj=[{name:'入窑生料',lengths:4},{name:'熟料',lengths:4}];
                    that.header2 = ['入窑生料','熟料'];//物料
                    // that.header3 = ['CaO','Fe2O3','细度','水分','立升重','f-CaO','细度','水分'];//检测项
                    that.header4 = ['平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率'];//检测项
                }else{
                    that.header2Obj=[{name:'出磨水泥',lengths:3}];
                    that.header2 = ['出磨水泥'];//物料
                    // that.header3 = ['比表面积','SO3','掺量'];//检测项
                    that.header4 = ['平均值','检次','合次','合格率','平均值','检次','合次','合格率','平均值','检次','合次','合格率'];//检测项
                }
                let params = {page: 0};
                let arr = [];
                if(that.query.type==0){//日
                    console.log(that.query.month)
                    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;
                this.$API.enm.enstat.req(params).then((res) => {
                    let data = res;
                    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
                    })
                    console.log(wrapArr,'warpArr')
                    wrapArr.forEach((item1,index1)=>{
                        if(item1!=undefined){//一天的数据
                            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)
                            //遍历每个工段
                            console.log(item1)
                            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);
                                    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).toFixed(2);
                                        pass= pass+'%';
                                        itemArr.push(pass)
                                    }else{
                                        itemArr.push(Number(item3.val_avg).toFixed(2));
                                        itemArr.push(item3.num_test);
                                        itemArr.push(item3.num_ok)
                                        let pass = Number(item3.rate_pass).toFixed(2);
                                        pass= pass+'%';
                                        itemArr.push(pass)
                                    }
                                    that.titleLength =itemArr.length;
                                })
                            })
                            innerArr.push(itemArr)
                            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;
                            }
                        }
                    })
                    if(header2Obj.length>0){
                        that.header2Obj=header2Obj;
                    }
                    that.header2 = header2.length>0?header2:that.header2;//物料
                    if(header3.length>0){
                        that.header3 =header3;//检测项
                    }
                    if(header4.length>0){
                        that.header4 = header4;
                    }
                    this.$forceUpdate();
                    innerArr.forEach(item=>{
                        if(item.length>1){
                            that.tableDatas3.push(item)
                        }
                    })
                });
            },
            handlePrint() {
                this.$PRINT('#myReport');
            },
            exportExcel() {
                this.exportLoading = true;
                this.$XLSX('#myTable', this.tableName)
                this.exportLoading = false;
            },
        }
    };
</script>
<style>
    .tableContainer{
        overflow-x: scroll;
    }
  
</style>