<template>
    <div class="app-container">
        <el-header>
            <div class="left-panel">
                <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">
            <table border="1" width="1000" cellspacing="0" :key="timeStamp" id="myTable" class="myTable">
                <thead class="myTableHead">
                    <tr>
                        <th colspan="10">电石渣工段生产报告</th>
                    </tr>
                    <tr>
                        <th colspan="2">参数</th>
                        <th>上个小时</th>
                        <th>昨日</th>
                        <th>本月</th>
                        <th>本年</th>
                        <th>月目标值</th>
                        <th>月完成度</th>
                        <th>年目标值</th>
                        <th>年完成度</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item) in tableDatas" :key="item">
                        <td class="numCell">{{item[0]}}</td>
                        <td class="numCell">{{item[1]}}</td>
                        <td class="numCell hoursItem" @click="itemClick('hours',item)" >{{item[2]}}</td>
                        <td class="numCell daysItem" @click="itemClick('days',item)">{{item[3]}}</td>
                        <td class="numCell monthItem" @click="itemClick('month',item)">{{item[4]}}</td>
                        <td class="numCell yearItem" @click="itemClick1('year',item)">{{item[5]}}</td>
                        <td class="numCell">{{item[6]}}</td>
                        <td class="numCell">{{item[7]}}</td>
                        <td class="numCell">{{item[8]}}</td>
                        <td class="numCell">{{item[9]}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <sc-dialog v-model="chartShow" draggable title="电石渣工段">
            <div class="searchHead" v-if="type=='hours'">
                <el-date-picker
                    v-model="query.start_time"
                    type="date"
                    placeholder="选择时间"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :picker-options="pickerOptions"
                />
                <span class="middleText">至</span>
                <el-date-picker
                    v-model="query.end_time"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    start-placeholder="结束日期"
                    :picker-options="pickerOptions"
                />
                <el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
            </div>
            <div class="searchHead" v-if="type=='days'">
                <el-date-picker
                    v-model="query.start_time"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    start-placeholder="开始日期"
                    :picker-options="pickerOptions"
                />
                <el-date-picker
                    v-model="query.end_time"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    start-placeholder="结束日期"
                    :picker-options="pickerOptions"
                />
                <el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
            </div>
            <div class="searchHead" v-if="type=='month'">
                <el-date-picker
                    v-model="query.start_time"
                    type="month"
                    format="YYYY-MM"
                    value-format="YYYY-MM"
                    start-placeholder="开始月份"
                    :picker-options="pickerOptions"
                />
                <el-date-picker
                    v-model="query.end_time"
                    type="month"
                    format="YYYY-MM"
                    value-format="YYYY-MM"
                    start-placeholder="结束月份"
                    :picker-options="pickerOptions"
                />
                <el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
            </div>
            <div class="searchHead" v-if="type=='year'">
                <el-date-picker
                    v-model="query.start_time"
                    type="year"
                    format="YYYY"
                    value-format="YYYY"
                    start-placeholder="开始日期"
                    :picker-options="pickerOptions"
                />
                <el-date-picker
                    v-model="query.end_time"
                    type="year"
                    format="YYYY"
                    value-format="YYYY"
                    start-placeholder="结束日期"
                    :picker-options="pickerOptions"
                />
                <el-button type="primary" class="searchBtn" @click="dataSearch">查询</el-button>
            </div>
            <scEcharts height="360px" :option="myOption" v-if="chartShow"></scEcharts>
        </sc-dialog>
        <charts 
            v-if="asynDialog"
            :type="type" 
            :title="title"
            :modelValue="modelValue"
            :showClose="showClose"
            :echartType='echartType'
            @closed="asynDialog = false"
        ></charts>
      </el-card>
    </div>
  </template>
<script>
    import scEcharts from "@/components/scEcharts";
	import { defineAsyncComponent } from 'vue'
    export default {
        components: {
            scEcharts,
            charts: defineAsyncComponent(() => import("@/components/scEnm/lineChartsdialog.vue")),
        },
        data() {
            return {
                chartShow: false,
                myOption: null,
                timeStamp:0,
                listQuery:{
                    belong_dept:'',
                    task2__year:'',
                    page:0
                },
                query:{
                    time:''
                },
                tableDatas:[
                    ['产量','总产量（t）',0,0,0,0,0,0,0,0],
                    ['能耗','单位产品分布电耗（KW·h/t）',1,1,1,1,1,1,1,1],
                    ['成本','电石渣成本（元/吨）',2,2,2,2,2,2,2,2],
                ],
                tableName:'生产报告',
                modelValue:true,
                type:'hours',
                title:'电石渣工段',
                apiObj:'',
                showClose:true,
                echartType:'line',
                asynDialog:false,
            };
        },
        mounted() {
        },
        methods: {
            
            itemClick(type,item){
                this.type=type;
                this.asynDialog = true;
            },
            itemClick1(type,item){
                this.chartShow = false;
                this.$API.bi.dataset.exec
                .req('3322567213885833216')
                .then((res) => {
                this.myOption = JSON.parse(res.echart_options);
                debugger;
                console.log(this.myOption)
                this.chartShow = true;
                });
            },
            handlePrint() {
                this.$PRINT('#myReport');
            },
            exportExcel() {
                this.exportLoading = true;
                this.$XLSX('#myTable', this.tableName)
                this.exportLoading = false;
            },
        }
    };
</script>
<style>
    .printContainer{
        width: 1075px;
    }
</style>