<template>
    <div class="fundSituation">
        <div class="fundSituation-left">
            <ul class="fundSituation-left-top">
                <dv-border-box-8>
                    <li><span>项目产值</span><span class="fundSituation-left-top__num" style="color: #B886F8">5000 w</span></li>
                </dv-border-box-8>
                <dv-border-box-8>
                    <li><span>项目预算</span><span class="fundSituation-left-top__num" style="color: #E4C447">1000 w</span></li>
                </dv-border-box-8>
                <dv-border-box-8>
                    <li><span>项目累计成本</span><span class="fundSituation-left-top__num" style="color: #00D98B">1000 w</span></li>
                </dv-border-box-8>
            </ul>
            <div class="fundSituation-left-bottom">
                <item-title :title="'各公司合同金额占比'"></item-title>
                <test-echarts :optionData="leftBottomPieOption" class="fundSituation-left-bottom__pie"></test-echarts>
            </div>
        </div>
        <div class="fundSituation-center">
            <div class="fundSituation-center-top">
                <item-title :title="'每日产值分析'"></item-title>
                <test-echarts :optionData="centerTopBarOption" class="fundSituation-center-top__bar"></test-echarts>
            </div>
            <div class="fundSituation-center-bottom">
                <item-title :title="'项目回款统计'"></item-title>
                <table class="fundSituation-center-bottom__table">
                    <thead>
                        <tr>
                            <th>分公司</th>
                            <th>回款比例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(tableItem, key) in tableData" :key="key"><td>{{ tableItem.name }}</td><td>{{ tableItem.huikuan }}</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="fundSituation-right">
            <div class="fundSituation-right-top">
                <item-title :title="'每日成本统计'"></item-title>
                <test-echarts :optionData="rightTopLineOption" class="fundSituation-right-top__line"></test-echarts>
            </div>
            <div class="fundSituation-right-bottom">
                <item-title :title="'成本总额统计'"></item-title>
                <test-echarts :optionData="rightBottomBarOption" class="fundSituation-right-bottom__bar"></test-echarts>
            </div>
        </div>
    </div>
</template>

<script>
import ItemTitle from '@/components/ItemTitle.vue'
import TestEcharts from '@/components/echarts/echarts.vue'

export default {
    name: 'fundSituation',

    components: {
        ItemTitle,
        TestEcharts
    },

    data() {
        return {
            leftBottomPieOption: {},
            centerTopBarOption: {},

            tableData: [
                {name: '三分公司', huikuan: '20%'},
                {name: '二分公司', huikuan: '22%'},
                {name: '环保新能源分公司', huikuan: '15%'},
                {name: '松北子公司', huikuan: '20%'}
            ],

            rightTopLineOption: {},
            rightBottomBarOption: {}
        }
    },

    methods: {
        leftBottomPie() {
            this.leftBottomPieOption = {
                color: ['#D97759', '#e4c477', '#DAA67B', '#4E9C8F'],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    data: ['三分公司','二分公司','环保新能源分公司','松北子公司'],
                    top: '3%',
                    left: 'center',
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '合同额占比',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 16
                            }
                        },
                        label: {
                            show: true,
                            position: 'outside',
                            lineHeight: 18,
                            color: '#fff',
                            formatter: (params) => {
                                return `${params.name}\n${params.value}`
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: [
                            { value: 1410, name: '三分公司' },
                            { value: 832, name: '二分公司' },
                            { value: 1278, name: '环保新能源分公司' },
                            { value: 3236, name: '松北子公司' }
                        ]
                    }
                ]
            }
        },

        centerTopBar() {
            this.centerTopBarOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    data: ['当日预算', '当日产值'],
                    left: 'center',
                    top: '2%',
                    textStyle: {
                        color: '#fff'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['08.22','08.23','08.24',	'08.25', '08.26'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 250,
                        interval: 50,
                        splitLine: {
                            lineStyle: {
                                color: ['#aaa'],
                                type: 'dashed'
                            }
                        }
                    },
                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '当日预算',
                        type: 'bar',
                        data: [100,	140, 230, 100, 130]
                    },
                    {
                        name: '当日产值',
                        type: 'line',
                        smooth: true,
                        data: [150,	100, 200, 140, 100]
                    }
                ]
            }
        },

        rightTopLine() {
            this.rightTopLineOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['人工', '材料'],
                    left: 'center',
                    top: '2%',
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    top: "13%",
                    left: "3%",
                    right: "8%",
                    bottom: "2%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['08.22','08.23',	'08.24',	'08.25',	'08.26']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                color: ['#aaa'],
                                type: 'dashed'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '人工',
                        type: 'line',
                        areaStyle: {
                            opacity: 0.3
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        smooth: true,
                        data: [100,	140, 230, 100, 130]
                    },
                    {
                        name: '材料',
                        type: 'line',
                        areaStyle: {
                            opacity: 0.3
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        smooth: true,
                        data: [150,	100, 200, 140, 100]
                    }
                ]
            }
        },

        rightBottomBar() {
            this.rightBottomBarOption = {
                color: ['#D97759', '#e4c477', '#DAA67B', '#4E9C8F'],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['人工', '材料'],
                    left: 'center',
                    top: '2%',
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    top: "13%",
                    left: "5%",
                    right: "8%",
                    bottom: "2%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['三分公司', '二分公司', '环保新能源分公司', '松北子公司'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            color: '#E8E8E8'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                color: ['#aaa'],
                                type: 'dashed'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '人工',
                        type: 'bar',
                        data: [100,	140, 230, 100],
                        barGap: '5%'
                    },
                    {
                        name: '材料',
                        type: 'bar',
                        data: [150, 100, 200, 140],
                        barGap: '5%'
                    }
                ]
            }
        }
    },

    mounted() {
        this.leftBottomPie()
        this.centerTopBar()
        this.rightTopLine()
        this.rightBottomBar()
    }
}
</script>

<style lang="scss">
.fundSituation {
    width: 100%;
    flex: 1;
    display: flex;
    padding: 10px 20px;
    .fundSituation-left {
        width: 30%;
        height: 100%;
        .fundSituation-left-top,
        .fundSituation-left-bottom {
            width: 100%;

            display: flex;
            flex-flow: column;
        }
        .fundSituation-left-top {
            width: 100%;
            height: 48%;
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            padding: 0 30px 20px;
            .dv-border-box-8 {
                height: 30%;
                border-radius: 10px;
                li {
                    background-color: rgba(64, 149, 229, 0.1);
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    flex-flow: column;
                    font-size: px2rem(26);
                    padding: 10px;
                    .fundSituation-left-top__num {
                        font-size: px2rem(40);
                    }
                }
            }
        }
        .fundSituation-left-bottom {
            height: 52%;
        }
        .fundSituation-left-bottom__pie {
            flex: 1;
        }
    }
    .fundSituation-center {
        width: 33%;
        height: 100%;
        .fundSituation-center-top,
        .fundSituation-center-bottom {
            width: 100%;
            height: 50%;

            display: flex;
            flex-flow: column;
        }
        .fundSituation-center-bottom {
            padding-bottom: 12px;
            .item-title {
                margin-bottom: 12px;
            }
        }
        .fundSituation-center-bottom__table {
            flex: 1;
            border-collapse: collapse;
            color: #D3F4FE;
            thead th:first-child {
                width: 30%;
                padding: 10px 0;
            }
            thead {
                background: rgba(13, 93, 152, 0.5);
            }
            th,
            td {
                border: 1px solid #579FD9;
                text-align: center;
            }
        }
    }
    .fundSituation-right {
        width: 37%;
        height: 100%;
        .fundSituation-right-top,
        .fundSituation-right-bottom {
            width: 100%;
            height: 50%;

            display: flex;
            flex-flow: column;
        }
    }
}
</style>