<template>
    <div class="app-container">
        <el-row :gutter="24">
            <el-col :xs="12" :sm="12" :md="12" :lg="7">
                <el-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span><i></i>当月总交易入账</span>
                        <!-- <el-button style="float: right; padding: 3px 0" type="text">更多<i class="el-icon-arrow-right"></i></el-button> -->
                        <el-popover placement="right-start" width="500" trigger="click">
                            <el-descriptions class="margin-top" title="其他支付方式" :column="2" size="mini" border>
                                <el-descriptions-item v-if="all_total"
                                    v-for="(item, index) in all_total">
                                    <template slot="label">
                                        {{item.name}}
                                    </template>
                                    <div style="width: 130px;">￥{{cutMoneyFiter(item.total)}}</div>
                                </el-descriptions-item>
                            </el-descriptions>
                            <el-button style="float: right; padding: 3px 0" type="text" slot="reference">更多<i class="el-icon-arrow-right"></i></el-button>
                        </el-popover>
                    </div>
                    <div :style="'padding:0;background: url('+ruzhang+') no-repeat right;min-height:125px;'">
                        <h1 style="font-size:150%;margin:0; padding:0"><span
                                style="font-size: 14px;font-weight: 400;padding-right: 5px;">￥</span>{{cutMoneyFiter(all_total.reduce((sum, e) => sum + Number(e.total || 0), 0))}}</h1>
                        <div class="header_bottom">
                            <div class="header_bottom_item" v-for="(item,index) in all_total.slice(0,2)">
                                <div class="header_bottom_item_one">{{item.name}}入账</div>
                                <div class="header_bottom_item_two" :class="item.name == '支付宝' ? 'cblue' : ''">￥{{cutMoneyFiter(item.total)}}</div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="7">
                <el-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span><i></i>当月总交易笔数</span>
                        <el-popover placement="right-start" width="500" trigger="click">
                            <el-descriptions class="margin-top" title="其他支付方式" :column="2" size="mini" border>
                                <el-descriptions-item v-if="all_total"
                                    v-for="(item, index) in all_total">
                                    <template slot="label">
                                        {{item.name}}
                                    </template>
                                    <div style="width: 130px;">{{item.quantity}}笔</div>
                                </el-descriptions-item>
                            </el-descriptions>
                            <el-button style="float: right; padding: 3px 0" type="text" slot="reference">更多<i class="el-icon-arrow-right"></i></el-button>
                        </el-popover>
                    </div>
                    <div :style="'padding:0;background: url('+bishu+') no-repeat right;min-height:125px;'">
                        <h1 style="font-size:150%; margin:0; padding:0">{{all_total.reduce((sum, e) => sum + Number(e.quantity || 0), 0)}}<span
                                style="font-size: 14px;font-weight: 400;padding-left: 5px;">笔</span> </h1>
                        <div class="header_bottom">
                           <div class="header_bottom_item" v-for="(item,index) in all_total.slice(0,2)">
                               <div class="header_bottom_item_one">{{item.name}}笔数</div>
                               <div class="header_bottom_item_two" :class="item.name == '支付宝' ? 'cblue' : ''">{{item.quantity}}</div>
                           </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="10" v-show="isShow">
                <el-card shadow="always">
                    <div style="padding:0;min-height: 183px;">
                        <div class="top_text_type">
                            <div class="right_type" v-for="(item,index) in fuwuList">
                                <div class="right_type_main">
                                    <img :src="item.image"
                                        alt="">
                                    <div>
                                        <span style="color:rgb(42, 140, 218);">{{cutMoneyFiter(item.trade_sum)}}</span><br />
                                        <span>{{item.name}}</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="24"  v-show="isShow">
            <el-col :xs="24" :sm="24" :md="24" :lg="16">
                <el-card shadow="never" style="margin-top:20px;">
                    <div slot="header" class="clearfix"><i class="el-icon-pie-chart"
                            style="color: #1B99E9;padding-right:5px;font-size:18px;"></i><span>12小时 HIS账务净值统计（元）</span>
                    </div>
                    <div>
                        <div ref="chart1" style="height:300px; margin-bottom:10px"></div>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8">
                <el-card shadow="never" style="margin-top:20px;">
                    <div slot="header" class="clearfix"><span><i class="el-icon-pie-chart"
                            style="color: #1B99E9;padding-right:5px;font-size:18px;"></i>异常账分析</span>
                           <!-- <span style="float: right;color:#1890FF;font-size: 14px;">
                                <router-link
                                    :to="{ path: '/financial/recharge_exception', query: {}, fullPath: '/financial/recharge_exception' }">
                                更多<i class="el-icon-arrow-right"></i>
                                </router-link>
                            </span> -->
                    </div>
                    <div style="height: 310px;">
                        <router-link
                            :to="{ path: '/financial/recharge_exception', query: {}, fullPath: '/financial/recharge_exception' }">
                                <notice-bar ></notice-bar>
                         </router-link>
                        <div style="padding-top: 10px;">
                            <router-link
                                :to="{ path: '/financial/real_time', query: {}, fullPath: '/financial/real_time' }">
                            <div v-for="item in notList" style="padding: 9px 0;border-bottom:1px solid #e6ebf5"> <span v-html="item" style="font-size:15px;"></span> </div>
                            </router-link>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="24"  v-show="isShow">
            <el-col :xs="24" :sm="24" :md="24" :lg="12">
                <el-card shadow="never" style="margin-top:20px;">
                    <div slot="header" class="clearfix"><i class="el-icon-pie-chart"
                            style="color: #1B99E9;padding-right:5px;font-size:18px;"></i><span>当日 HIS账务支付渠道占比</span>
                            <el-popover placement="right-start" width="500" trigger="click">
                                <el-descriptions class="margin-top" :title="chene(index)" :column="2" size="mini" border v-for="(item,index) in HisZbList" :key="index" style="margin-bottom: 20px;">

                                    <el-descriptions-item
                                        v-for="(items, indexs) in item">
                                        <template slot="label">
                                            {{items.name}}
                                        </template>
                                        <div style="width: 130px;">￥{{cutMoneyFiter(items.value)}}</div>
                                    </el-descriptions-item>
                                </el-descriptions>
                                <el-button style="float: right; padding: 3px 0" type="text" slot="reference">更多<i class="el-icon-arrow-right"></i></el-button>
                            </el-popover>
                    </div>
                    <div>
                        <div ref="chart2" style="height:300px; margin-bottom:10px"></div>
                    </div>
                </el-card>
            </el-col>
          <!--  <el-col :xs="24" :sm="24" :md="24" :lg="9">
                <el-card shadow="never" style="margin-top:20px;">
                    <div slot="header" class="clearfix"><i class="el-icon-pie-chart"
                            style="color: #1B99E9;padding-right:5px;font-size:18px;"></i><span>当月 HIS账务净值</span></div>
                    <div class="piecontent">
                        <div class="pieleft">
                            <div style="margin-top:30px;">门诊<span
                                    style="color:#087FD7;padding-left: 10px;font-size: 18px;font-family: Source Han Sans CN;font-weight: 500;">{{cutMoneyFiter(MonthHisNetworth.menzhen)}}</span>
                            </div>
                            <div>住院<span
                                    style="color:#2FB987;padding-left: 10px;font-size: 18px;font-family: Source Han Sans CN;font-weight: 500;">{{cutMoneyFiter(MonthHisNetworth.zhuyuan)}}</span>
                            </div>
                        </div>
                        <div ref="chart3" style="width: 75%;height:300px; margin-bottom:10px"></div>
                    </div>
                </el-card>
            </el-col> -->

            <el-col :xs="24" :sm="24" :md="24" :lg="12">
                <el-card shadow="never" style="margin-top:20px;">
                    <div slot="header" class="clearfix"><i class="el-icon-pie-chart"
                            style="color: #1B99E9;padding-right:5px;font-size:18px;"></i><span>当日 HIS账务服务渠道占比</span>
                    </div>
                    <div>
                        <div ref="chart4" style="height:300px; margin-bottom:10px"></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- <h2>控制台</h2> -->

    </div>
</template>

<script>
    import NoticeBar from '@/components/NoticeBar'
    import {
        mapGetters
    } from 'vuex'
    import {
        getData,
    } from '@/api/index'
    export default {
        name: 'Index',
        components: {
            NoticeBar
        },
        data() {
            return {
                tableData:[],
                ruzhang: require('@/assets/images/ruzhang.png'),
                bishu: require('@/assets/images/bishu.png'),
                saleroomRankData: [],
                time: 0,
                isShow:false,
                notList:[
                        '任务类型：实时对账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;执行时间:2023-01-08 10:10:26      <br/>执行结果：<span style="color:red;">发现异常账1条</span>',
                        '任务类型：实时对账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;执行时间:2023-01-08 09:50:18      <br/>执行结果：<span style="color:green;">未发现异常账</span>',
                        '任务类型：实时对账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;执行时间:2023-01-08 09:30:23      <br/>执行结果：<span style="color:green;">未发现异常账</span>',
                        '任务类型：实时对账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;执行时间:2023-01-08 09:10:32      <br/>执行结果：<span style="color:red;">发现异常账1条</span>',
                        '任务类型：实时对账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;执行时间:2023-01-08 08:50:09      <br/>执行结果：<span style="color:green;">未发现异常账</span>',
                ],
                all_total:[],
                fuwuList:[],
                HisZbList:[],
                MonthHisNetworth:{
                    'zhuyuan':'0.00',
                    'menzhen':'0.00'
                }
            }
        },
        computed: {
            ...mapGetters(['avatar', 'name', 'groups_name']),
        },
        created() {
            // this.now()
            this.getDataInfo();


        },
        methods: {
            openTip(){

            },
            chene(index){
                if(index == 'WX'){
                    return '微信';
                }else if(index == 'ALI'){
                    return '支付宝'
                }else if(index == 'BANK'){
                    return '银联卡'
                }else if(index == 'SCC'){
                    return '医保卡';
                }
            },
            // 北京时间
            now() {
                this.time = new Date().getTime()
                setInterval(() => {
                    this.time = new Date().getTime()
                }, 1000)
            },
            getDataInfo(){
                getData({}).then(response => {
                    this.isShow = response.isShow
                    this.all_total = response.data.all_total
                    this.fuwuList = response.data.fuwu_list
                    this.HisZbList = response.data.day_payment_ratio;
                    if(this.MonthHisNetworth){
                        this.MonthHisNetworth.zhuyuan = response.data.month_his_networth.money[1].value;
                        this.MonthHisNetworth.menzhen = response.data.month_his_networth.money[0].value;
                    }
                    this.$nextTick(() => {
                        this.initCharts1(response.data.his_within_12hours)
                        this.initCharts2(response.data.day_payment_ratio)
                        this.initCharts3(response.data.month_his_networth)
                        this.initCharts4(response.data.day_fuwu_ratio)
                    });


                }).finally(() => {
                    this.loading = false
                })
            },
            initCharts1(item) {
                let myChart = this.$echarts.init(this.$refs.chart1);
                // 绘制图表
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    axisLabel:{
                        interval:0
                    },
                    legend: {

                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: {
                                type: ['line', 'bar'],
                                title: {
                                    line: '切换为折线图',
                                    bar: '切换为柱状图'
                                }
                            },
                        }
                    },
                    grid: {
                        x: 60,
                        x2: 40,
                        y2: 24
                    },
                    color: ['#087FD7', '#2FB987'],
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: item.hour
                    }],
                    yAxis: [{
                        type: 'value',
                    }],
                    series: [{
                            name: '门诊',
                            type: 'line',
                            data: item.menzhen,
                            smooth: true
                        },
                        {
                            name: '住院',
                            type: 'line',
                            data: item.zhuyuan,
                            smooth: true

                        }
                    ]
                })
            },
            initCharts2(item) {
                let myChart = this.$echarts.init(this.$refs.chart2);
                myChart.setOption({
                    title: [{
                            text: '微信',
                            left: '23%',
                            top: 170,
                            textStyle: {
                                fontSize: 14,
                                color: "#666666",
                            }
                        },
                        {
                            text: '支付宝',
                            right: '21%',
                            top: 170,
                            textStyle: {
                                fontSize: 14,
                                color: "#666666",
                            }
                        }
                    ],
                    color: ['#70C2FF', '#2FB987', '#F77D73'],
                    tooltip: {
                        trigger: 'item'
                    },

                    legend: {
                        left: 'center',
                        data: [
                            '充值',
                            '退款',
                            '净值',
                        ]
                    },
                    series: [
                        {
                            name: '微信',
                            type: 'pie',
                            radius: ['35%', '70%'],
                            center: ['25%', '60%'],
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 3
                            },
                            label: {
                              normal: {
                                show: true,
                                position: "outside", //outside 外部显示  inside 内部显示
                                formatter: '{b}\n\n{d}%', //自定义显示格式(b:name, c:value, d:百分比)
                                fontSize: 10 ,//字体大小
                              }
                            },
                            data: item.WX
                        },
                        {
                            name: '支付宝',
                            type: 'pie',
                            radius: ['35%', '70%'],
                            center: ['75%', '60%'],
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 3,
                            },
                            label: {
                              normal: {
                                show: true,
                                position: "outside", //outside 外部显示  inside 内部显示
                                formatter: '{b}\n\n{d}%', //自定义显示格式(b:name, c:value, d:百分比)
                                fontSize: 10 //字体大小
                              }
                            },
                            data: item.ALI,
                            emphasis: {
                              itemStyle: {
                                shadowBlur: 0,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                              }
                            }
                        }
                    ]
                })
            },
            initCharts3(item) {
                return ;
                let myChart = this.$echarts.init(this.$refs.chart3);
                myChart.setOption({
                    title: [{
                            text: '当月 HIS账务金额占比',
                            left: 15,
                            top: 'bottom',
                            textStyle: {
                                color: "#666666",
                                fontSize: 14
                            }
                        },
                        {
                            text: '当月 HIS账务笔数占比',
                            right: 20,
                            top: 'bottom',
                            textStyle: {
                                color: "#666666",
                                fontSize: 14
                            }
                        }
                    ],
                    color: ['#83C8FB', '#A1F0D4'],
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        left: 'center',
                        data: [
                            '门诊',
                            '住院',
                        ]
                    },
                    series: [{

                            name: '当月 HIS账务金额占比',
                            type: 'pie',
                            radius: ['20%', '40%'],
                            center: ['25%', '60%'],
                            label: {
                                   //echarts饼图内部显示百分比设置
                                    show: true,
                                    position: "outside", //outside 外部显示  inside 内部显示
                                    formatter: '{b}\n\n{d}%', //自定义显示格式(b:name, c:value, d:百分比)
                                    fontSize: 10 //字体大小
                            },
                            data: item.money,
                            emphasis: {
                              itemStyle: {
                                shadowBlur: 0,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                              }
                            }
                        },
                        {
                            name: '当月 HIS账务笔数占比',
                            type: 'pie',
                            radius: ['20%', '40%'],
                            center: ['75%', '60%'],
                            label: {
                                normal: {
                                    show: true,
                                    position: "outside", //outside 外部显示  inside 内部显示
                                    formatter: '{b}\n\n{d}%', //自定义显示格式(b:name, c:value, d:百分比)
                                    fontSize: 10 //字体大小
                                }
                            },
                            data: item.number,
                            emphasis: {
                              itemStyle: {
                                shadowBlur: 0,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                              }
                            }
                        }
                    ]
                })
            },
            initCharts4(item) {
                let myChart = this.$echarts.init(this.$refs.chart4);
                myChart.setOption({
                    title: [{
                            text: '净值',
                            left: 'center',
                            // left: '23%',
                            top: 170,
                            textStyle: {
                                fontSize: 14,
                                color: "#666666",
                            }
                        },
                        // {
                        //     text: '退款',
                        //     left: 'center',
                        //     bottom: 45,
                        //     textStyle: {
                        //         fontSize: 14,
                        //         color: "#666666",
                        //     }
                        // }
                    ],
                    color: ['#83C8FB', '#A1F0D4', '#FA9B94', '#AEA6F9', '#F8CE97', '#AAEAEB', '#F7AAF2','#2FB987'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        left: 'center',
                        data: item.data
                    },
                    series: [
                        // {
                        //     name: '退费',
                        //     type: 'pie',
                        //     selectedMode: 'single',
                        //     // minAngle: 20,           　　 //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
                        //     avoidLabelOverlap: true,   //是否启用防止标签重叠策略
                        //     radius: [0, '35%'],
                        //     center: ['50%', '60%'],
                        //     itemStyle: {
                        //         normal:{
                        //             labelLine:{
                        //                 length:50
                        //             }
                        //         }
                        //     },
                        //     label: {
                        //         normal: {
                        //           show: false,
                        //           formatter: '{b}  {d}%' //自定义显示格式(b:name, c:value, d:百分比)
                        //         }
                        //     },
                        //     data: item.REFUND
                        // },
                        {
                            name: '充值',
                            type: 'pie',
                            radius: ['35%', '65%'],
                            center: ['50%', '60%'],
                            minAngle: 10,           　　 //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
                            avoidLabelOverlap: true,   //是否启用防止标签重叠策略
                            label: {
                                normal: {
                                  show: true,
                                  formatter: '{b}\n\n{d}%' //自定义显示格式(b:name, c:value, d:百分比)
                                }
                            },
                            itemStyle: {
                                normal:{
                                    labelLine:{
                                        // length:70
                                    }
                                }
                            },
                            data: item.SUCCESS,
                            emphasis: {
                              itemStyle: {
                                shadowBlur: 30,
                                shadowOffsetX: 50,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                              }
                            }
                        }
                    ]
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
    .app-container {
        .header_bottom {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 35px 0 0 0;
        }

        .header_bottom_item {
            width: 50%;
            font-size: 14px;
        }

        .header_bottom_item_one {}

        .header_bottom_item_two {
            color: rgb(117, 205, 171);
            padding: 12px 0;
            font-weight: bold;
            font-size: 16px;
        }

        .top_text_type {
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            justify-content: inherit;
        }

        .top_text_type>.right_type {
            width: 33.333%;
            padding: 10px;
        }

        .top_text_type>.right_type>.right_type_main {
            display: flex;
            flex-wrap: wrap;
            font-size: 14px;

        }

        .top_text_type>.right_type>.right_type_main>img {
            width: 35px;
            height: 35px;
            margin-top: 5px;
            margin-right: 5px;
        }

        .cblue {
            color: #087FD7;
        }

        .piecontent {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .pieleft {
            width: 30%;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #666666;
            line-height: 60px;
        }
    }
</style>
