<template>
    <div>
        <el-card :body-style="cardBodyStyle">
            <el-form :model="query" label-position="right" label-width="auto">
                <div>
                    <el-row :gutter="10" style="margin-bottom: 5px;">
                        <el-col :span="5">
                            <el-form-item label="时间" style="margin-bottom: 0px;margin-left: 14px">
                                <el-select v-model="query.month" placeholder="请选择月份" clearable>
                                    <el-option v-for="item in monthes" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </el-card>
        <!-- <ButtonBox @search="search"></ButtonBox> -->
        <el-card :body-style="cardBodyStyle">
            <el-button type="primary" @click="updateCharts" ref="refreshButton" plain="true">查询</el-button>
        </el-card>
        <div>
            <el-row :gutter="0">
                <el-col :span="12">
                    <el-card>
                        <div>
                            <div style="display: flex;align-items: center;justify-content: center;font-size: 20px;">
                                资金收入合计 : {{ tableDataSR }} 元
                            </div>
                            <el-divider></el-divider>
                            <div
                                style="display: flex;align-items: center;justify-content: center; font-size: 20px;color: rgb(133, 190, 234);">

                            </div>
                            <el-table :data="tableDataSRDetail" border height="200">
                                <el-table-column align label="供应商" prop="TRADE_PARTNER_NAME"></el-table-column>
                                <el-table-column align label="金额" prop="AMT"></el-table-column>
                            </el-table>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card>
                        <div style="display: flex;align-items: center;justify-content: center;font-size: 20px;">
                            资金支出合计 : {{ tableDataZC }} 元
                        </div>
                        <el-divider></el-divider>
                        <div
                            style="display: flex;align-items: center;justify-content: center; font-size: 20px;color: rgb(133, 190, 234);">
                        </div>
                        <el-table :data="tableDataZCDetail" border height="200">
                            <el-table-column align label="客户" prop="TRADE_PARTNER_NAME"></el-table-column>
                            <el-table-column align label="金额" prop="AMT"></el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-row :gutter="0">
                <el-col :span="12">
                    <el-card :body-style="cardBodyStyle">
                        <el-table :data="tableDataCG" border height="485">
                            <el-table-column align label="供应商" prop="FHDWMC"></el-table-column>
                            <el-table-column align label="物料名称" prop="WUZIMC"></el-table-column>
                            <el-table-column align label="吨位" prop="JZ"></el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card>
                        采购柱状图
                        <div id="ColumnChartCG" style="width: 100%; height: 410px; margin-bottom: 20px;"></div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-row :gutter="0">
                <el-col :span="12">
                    <el-card :body-style="cardBodyStyle">
                        <el-table :data="tableDataXS" border height="485">
                            <el-table-column align label="客户" prop="SHDWMC"></el-table-column>
                            <el-table-column align label="物料名称" prop="WUZIMC"></el-table-column>
                            <el-table-column align label="吨位" prop="JZ"></el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card>
                        销售柱状图
                        <div id="ColumnChartXS" style="width: 100%; height: 410px; margin-bottom: 20px;"></div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <el-card :body-style="cardBodyStyle">
            <el-table :data="tableDataKC" border>
                <el-table-column align label="物料" prop="itemNm"></el-table-column>
                <el-table-column align label="干重数量" prop="qty"></el-table-column>
                <el-table-column align label="湿重数量" prop="qtyWet"></el-table-column>
            </el-table>
        </el-card>
        <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
            background="background" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template>

<script setup>
import {
    ref,
    reactive,
    onMounted,
    getCurrentInstance
} from 'vue'
import {
    Search
} from '@element-plus/icons-vue'

const {
    proxy
} = getCurrentInstance()
import style from '@/tools/style'
const cardBodyStyle = ref(style.card)
import ButtonBar from "@/components/ButtonBar.vue";
import ButtonBox from "@/components/ButtonBox.vue";
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus'

const refreshButton = ref(null)
onMounted(() => {
    const refreshButton = document.getElementById('refreshButton');
    if (refreshButton) {
        refreshButton.addEventListener('click', updateCharts);
    }
    initCharts()
    getTableDataCG()
    getTableDataXS()
    getTableDataKC()
    getIncomeData()
    getIncomeDataDetail()
    getExpenditureData()
    getExpenditureDataDetail()
})

// 查询条件
const query = ref({
    month: String(new Date().getMonth() + 1)
})
const monthes = [
    {
        value: 1,
        label: '一月'
    },
    {
        value: 2,
        label: '二月'
    },
    {
        value: 3,
        label: '三月'
    },
    {
        value: 4,
        label: '四月'
    },
    {
        value: 5,
        label: '五月'
    },
    {
        value: 6,
        label: '六月'
    },
    {
        value: 7,
        label: '七月'
    },
    {
        value: 8,
        label: '八月'
    },
    {
        value: 9,
        label: '九月'
    },
    {
        value: 10,
        label: '十月'
    },
    {
        value: 11,
        label: '十一月'
    },
    {
        value: 12,
        label: '十二月'
    }
]
const tableDataCG = ref([])
const tableDataXS = ref([])
const tableDataKC = ref([])
const tableDataSR = ref([])
const tableDataZC = ref([])
const tableDataSRDetail = ref([])
const tableDataZCDetail = ref([])
// ==================================================== 数据 ====================================================
const updateCharts = async () => {
    await getTableDataCG()
    await getTableDataXS()
    getTableDataKC()
    getIncomeData()
    getIncomeDataDetail()
    getExpenditureData()
    getExpenditureDataDetail()
    if (ColumnChartCG) {
        ColumnChartCG.setOption({
            xAxis: {
                data: xData1.value
            },
            series: [{
                data: yData1.value // 生成新数据
            }]
        });
    }
    if (ColumnChartXS) {
        ColumnChartXS.setOption({
            xAxis: {
                data: xData2.value
            },
            series: [{
                data: yData2.value // 生成新数据
            }]
        });
    }
}
const xData1 = ref([]);
const yData1 = ref([]);
const name1 = ref([]);
// 采购表格数据
const getTableDataCG = () => {
    var url = 'sal/dataSummary/getTableDataCG'
    var params = {
        month: query.value.month
    }
    return proxy.$axios.get(url, params).then(res => {
        if (res.data.code == '0') {
            tableDataCG.value = res.data.data
            console.log(res.data.data)
            xData1.value = res.data.data.map(item => item.FHDWMC)
            yData1.value = res.data.data.map(item => item.JZ)
            name1.value = res.data.data.map(item => item.WUZIMC)
            console.log(name1.value)
        } else {
            ElMessage.error('操作失败!' + res.data.msg)
        }

    })
}
const xData2 = ref([]);
const yData2 = ref([]);
const name2 = ref([]);
// 销售表格数据
const getTableDataXS = () => {
    var url = 'sal/dataSummary/getTableDataXS'
    var params = {
        month: query.value.month
    }
    return proxy.$axios.get(url, params).then(res => {
        if (res.data.code == '0') {
            tableDataXS.value = res.data.data
            xData2.value = res.data.data.map(item => item.SHDWMC)
            yData2.value = res.data.data.map(item => item.JZ)
            name2.value = res.data.data.map(item => item.WUZIMC)
            // console.log(res.data.data)
        } else {
            ElMessage.error('操作失败!' + res.data.msg)
        }
    })
}

// 库存数据
const getTableDataKC = () => {
    var url = 'sal/dataSummary/getTableDataKC'
    var params = {
        page: currentPage.value,
        rows: pageSize.value,
        month: query.value.month
    }
    proxy.$axios.get(url, params).then(res => {
        if (res.data.code == '0') {
            // console.log(res.data)
            tableDataKC.value = res.data.data.records
            totalRows.value = res.data.data.total
        } else {
            ElMessage.error('操作失败!' + res.data.msg)
        }
    })
}

const currentPage = ref(1)
const pageSizes = ref([5, 10, 20, 30, 40])
const pageSize = ref(5)
const totalRows = ref(0)
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableDataKC()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getTableDataKC()
}

// 资金收入数据
const getIncomeData = () => {
    var url = 'sal/dataSummary/getIncomeData'
    var params = {
        month: query.value.month
    }
    proxy.$axios.get(url, params).then(res => {
        if (res.data.code == '0') {
            // console.log(res.data.data)
            tableDataSR.value = res.data.data[0].AMT
        } else {
            ElMessage.error('操作失败!' + res.data.msg)
        }
    })
}

const getIncomeDataDetail = () => {
    var url = 'sal/dataSummary/getIncomeDataDetail'
    var params = {
        month: query.value.month
    }
    proxy.$axios.get(url, params).then(res => {
        if (res.data.code == '0') {
            // console.log(res.data.data)
            tableDataSRDetail.value = res.data.data
        } else {
            ElMessage.error('操作失败!' + res.data.msg)
        }
    })
}


// 资金支出数据
const getExpenditureData = () => {
    var url = 'sal/dataSummary/getExpenditureData'
    var params = {
        month: query.value.month
    }
    proxy.$axios.get(url, params).then(res => {
        if (res.data.code == '0') {
            tableDataZC.value = res.data.data[0].AMT
            console.log(res.data.data[0].AMT)
        } else {
            ElMessage.error('操作失败!' + res.data.msg)
        }
    })
}

// 资金支出数据
const getExpenditureDataDetail = () => {
    var url = 'sal/dataSummary/getExpenditureDataDetail'
    var params = {
        month: query.value.month
    }
    proxy.$axios.get(url, params).then(res => {
        if (res.data.code == '0') {
            tableDataZCDetail.value = res.data.data
        } else {
            ElMessage.error('操作失败!' + res.data.msg)
        }
    })
}




// ==================================================== Echarts 图 ====================================================
// 柱状图
let ColumnChartCG = null
let ColumnChartXS = null
const initCharts = () => {
    // 采购的柱状图
    const ColumnChartDomCG = document.getElementById('ColumnChartCG');
    if (ColumnChartDomCG) {
        ColumnChartCG = echarts.init(ColumnChartDomCG);
        const getData = async () => {
            await getTableDataCG()
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xData1.value,
                    axisLabel: {
                        margin: 10,
                        fontSize: 10,
                        interval: 0,
                        rotate: -20,
                        axisTick: {
                            alignWithLabel: true
                        }
                    },
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: yData1.value,
                        type: 'bar',

                    }
                ]
            };
            ColumnChartCG.setOption(option);
        }
        getData()
    }
    // 销售的柱状图
    const ColumnChartDomXS = document.getElementById('ColumnChartXS');
    if (ColumnChartDomXS) {
        ColumnChartXS = echarts.init(ColumnChartDomXS);
        const getData = async () => {
            await getTableDataXS()
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xData2.value,
                    axisLabel: {
                        margin: 10,
                        fontSize: 10,
                        interval: 0,
                        rotate: -20,
                        axisTick: {
                            alignWithLabel: true
                        }
                    },
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: yData2.value,
                        type: 'bar',
                    }
                ]
            };
            ColumnChartXS.setOption(option);
        }
        getData()
    }
}






</script>

<style scoped></style>