<template>
    <el-container>
        <el-header>
            <div class="right-panel">
                <el-select v-model="queryType" @change="queryTypeChange" style="width:100px">
                    <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item">
                    </el-option>
                </el-select>
                <el-date-picker v-if="queryType == '月'" v-model="queryDate" type="month" placeholder="查询月期"
                    value-format="YYYY-MM" style="width:200px">
                </el-date-picker>
                <el-date-picker v-if="queryType == '年'" v-model="queryDate" type="year" placeholder="查询年份"
                    value-format="YYYY" style="width:200px">
                </el-date-picker>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
            </div>
        </el-header>
        <el-main>
            <el-card shadow="never" style="margin-bottom: 8px;">
                <el-row :gutter="10">
                    <el-col :lg="12">
                        <el-card shadow="never">
                            <div id="bachart1" style="width:100%;height:300px;"></div>
                        </el-card>
                    </el-col>
                    <el-col :lg="12">
                        <el-card shadow="never" style="position: relative;">
                            <el-button @click="handleExport('1')" class="tables" type="primary">导出</el-button>
                            <el-table :data="dataList" id="exportDiv1" :height="300">
                                <el-table-column type="index" width="50" />
                                <el-table-column label="物料名" prop="物料名">
                                </el-table-column>
                                <el-table-column label="月份" prop="月" v-if="queryType == '年'">
                                </el-table-column>
                                <el-table-column label="周" prop="周" v-else>
                                </el-table-column>
                                <el-table-column label="规格" prop="规格">
                                </el-table-column>
                                <el-table-column label="型号" prop="型号">
                                </el-table-column>
                                <el-table-column label="桶数" prop="合格数">
                                </el-table-column>
                                <el-table-column label="总重量" prop="总重量">
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                </el-row>
            </el-card>
            <el-card shadow="never" style="margin-bottom: 8px;">
                <el-row :gutter="10">
                    <el-col :lg="12">
                        <el-card shadow="never">
                            <div id="bachart2" style="width:100%;height:300px;"></div>
                        </el-card>
                    </el-col>
                    <el-col :lg="12">
                        <el-card shadow="never" style="position: relative;">
                            <el-button @click="handleExport('2')" class="tables" type="primary">导出</el-button>
                            <el-table :data="tableData10" id="exportDiv2" :height="300">
                                <el-table-column type="index" width="50" />
                                <el-table-column label="物料名" prop="物料名">
                                </el-table-column>
                                <el-table-column label="月份" prop="月" v-if="queryType == '年'">
                                </el-table-column>
                                <el-table-column label="周" prop="周" v-else>
                                </el-table-column>
                                <el-table-column label="规格" prop="规格">
                                </el-table-column>
                                <el-table-column label="型号" prop="型号">
                                </el-table-column>
                                <el-table-column label="数量" prop="数量">
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                </el-row>
            </el-card>
        </el-main>
    </el-container>
</template>
<script>
import * as echarts from "echarts";
import T from '@/components/scEcharts/echarts-theme-T.js';
echarts.registerTheme('T', T);
import scEcharts from '@/components/scEcharts';
function deepCopy(obj) {
    return JSON.parse(JSON.stringify(obj));
}
export default {
    name: 'chart',
    components: {
        scEcharts
    },
    data() {
        return {
            queryType: '月',
            queryDate: '',
            start_date: '',
            end_date: '',
            currentYear: '',
            currentMonth: '',
            xAxisOrigin: [],
            xAxisData: [],
            typeOptions: ['月', '年'],
            basicOption: {
                backgroundColor: 'transparent',
                title: {
                    text: '',
                },
                grid: {
                    top: '80px'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                lenged: [],
                series: [{
                    data: [0, 0, 0, 0, 0, 0, 0],
                    stack: 'Ad',
                    type: 'bar',
                    barWidth: '15px',
                }]
            },
            dataList: [],
            tableData10: [],
            firstWeekNum: 1,
            endWeekNum: 4,
            monthList: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        }
    },
    mounted() {
        let that = this;
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let days = new Date(year, month, 0).getDate();
        that.currentYear = year;
        that.currentMonth = month;
        that.firstWeekNum = that.getWeekOfYear(year,month,1);
        that.endWeekNum = that.getWeekOfYear(year,month,days);
        month = month < 10 ? '0' + month : month;
        that.start_date = year + '-' + month + '-01';
        that.end_date = year + '-' + month + '-' + days;
        that.queryDate = year + '-' + month;
        let duration = that.endWeekNum - that.firstWeekNum + 1;
        for (let i = 1; i <= duration; i++) {
            that.xAxisOrigin.push('第' + i + '周');
        }
        that.xAxisData = that.xAxisOrigin;
        that.getDataHL();
        that.getDataHLXH();
    },
    methods: {
        setChart(name, option = null) {
            // 根据name 渲染数据, option需填写，否则option为模拟数据
            var myChart = echarts.getInstanceByDom(document.getElementById(name));
            if (myChart == undefined) {
                myChart = echarts.init(document.getElementById(name), 'T');
            }
            if (option == null) {
                option = Object.assign({}, this.basicOption)
            }
            setTimeout(() => {
                try {
                    myChart.setOption(option);
                } catch (error) { }
            }, 500)
        },
        queryTypeChange(value) {
            console.log(value)
            this.queryDate = '';
        },
        getWeekOfYear(a,b,c) {
            var date1 = new Date(a, parseInt(b) - 1, c), //当前日期  
            date2 = new Date(a, 0, 1), //当年第一天  
            // d是当前日期是今年第多少天  
            d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
            // d + 当前年的第一天的周差距的和在除以7就是本年第几周  
            return Math.ceil((d + (date2.getDay() + 1 - 1)) / 7);
        },
        getDataHL() {
            let that = this;
            let obj = {
                query: { start_date: that.start_date, end_date: that.end_date, mgroup_name: "混料", is_count_utask: -1 },
            };
            let option = deepCopy(that.basicOption);
            option.xAxis.data = that.xAxisData;
            option.title.text = '混料统计';
            let exec = that.queryType == '月' ? 'lineWeek' : 'lineMonth';
            that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
                let dataList = res.data2.ds0 ? res.data2.ds0 : [];
                that.dataList = dataList;
                if (dataList.length > 0) {
                    option.series = [];
                    let seriesData = [], nameList = [];
                    dataList.forEach(ite => {
                        if (nameList.indexOf(ite.物料名) > -1) { } else {
                            nameList.push(ite.物料名);
                            seriesData.push([0,0,0,0,0,0,0,0,0,0,0,0])
                        }
                    })
                    dataList.forEach(item => {
                        let indexX = 0, indexY = 0;
                        if (that.queryType == '月') {
                            indexX = nameList.indexOf(item.物料名);
                            indexY = item.周 - that.firstWeekNum;
                        } else {
                            indexX = nameList.indexOf(item.物料名);
                            indexY = item.月 - 1;
                        }
                        seriesData[indexX][indexY] += item.合格数;
                    });
                    for (let n = 0; n < seriesData.length; n++) {
                        let obj = {};
                        obj.name = nameList[n];
                        obj.stack = 'Ad';
                        obj.type = 'bar';
                        obj.barWidth = '15px';
                        obj.data = seriesData[n];
                        option.series.push(obj)
                    }
                    that.setChart("bachart1", option);
                } else {
                    that.setChart("bachart1", option);
                }
            });
        },
        getDataHLXH() {
            let that = this;
            let option = deepCopy(that.basicOption);
            option.xAxis.data = that.xAxisData;
            option.title.text = '混料消耗统计';
            let obj = {
                query: { start_date: that.start_date, end_date: that.end_date, mio_type: "do_in", material_type: 30, material_id: "" },
            };
            let exec = that.queryType == '月' ? 'saleOutWeek' : 'saleOutMonth';
            that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
                // console.log('10生产车间统计:',res);
                let tableData10 = res.data2.ds0 ? res.data2.ds0 : [];
                that.tableData10 = tableData10;
                if (tableData10.length > 0) {
                    option.series = [];
                    let seriesData = [], nameList = [];
                    tableData10.forEach(ite => {
                        if (nameList.indexOf(ite.物料名) > -1) { } else {
                            nameList.push(ite.物料名);
                            seriesData.push([])
                        }
                    })
                    tableData10.forEach(item => {
                        let indexX = 0, indexY = 0;
                        if (that.queryType == '月') {
                            indexX = nameList.indexOf(item.物料名);
                            indexY = item.周 - that.firstWeekNum;
                        } else {
                            indexX = nameList.indexOf(item.物料名);
                            indexY = item.月 - 1;
                        }
                        seriesData[indexX][indexY] = item.合格数;
                    });
                    for (let n = 0; n < seriesData.length; n++) {
                        let obj = {};
                        obj.name = nameList[n];
                        obj.stack = 'Ad';
                        obj.type = 'bar';
                        obj.barWidth = '15px';
                        obj.data = seriesData[n];
                        option.series.push(obj)
                    }
                    that.setChart("bachart2", option);
                } else {
                    that.setChart("bachart2", option);
                }
            });
        },
        handleQuery() {
            let that = this;
            if (that.queryType == '月') {
                if (that.queryDate !== '' && that.queryDate !== null) {
                    let arr = that.queryDate.split('-');
                    let year = arr[0];
                    let month = arr[1];
                    let days = new Date(year, month, 0).getDate();
                    that.start_date = that.queryDate + '-01';
                    that.end_date = that.queryDate + '-' + days;
                    that.firstWeekNum = that.getWeekOfYear(year,month,1);
                    that.endWeekNum = that.getWeekOfYear(year,month,days);
                    let duration = that.endWeekNum - that.firstWeekNum + 1;
                    let xAxisData = [];
                    for (let i = 1; i <= duration; i++) {
                        xAxisData.push('第' + i + '周');
                    }
                    that.xAxisData = xAxisData;
                } else {
                    that.start_date = that.currentYear + '-' + that.currentMonth + '-01';
                    that.end_date = that.currentYear + '-' + that.currentMonth + '-' + new Date(that.currentYear, that.currentMonth, 0).getDate();
                    that.firstWeekNum = that.getWeekOfYear(that.currentYear,that.currentMonth,1);
                    that.xAxisData = that.xAxisOrigin;
                }
            } else {
                if (that.queryDate !== '' && that.queryDate !== null) {
                    that.start_date = that.queryDate + '-01-01';
                    that.end_date = that.queryDate + '-12-31';
                } else {
                    that.start_date = that.currentYear + '-01-01';
                    that.end_date = that.currentYear + '-12-31';
                }
                that.xAxisData = that.monthList;
            }
            that.getDataHL();
            that.getDataHLXH();
        },
        handleExport(val) {
            this.exportLoading = true;
            let id = '#exportDiv' + val;
            let name = val == '1' ? '混料统计' : '混料消耗统计';
            this.$XLSX(id, name);
            this.exportLoading = false;
        },
    },
}
</script>

<style scoped>
.tables {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 10;
}
</style>
