<style>
.Transaction{
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.Transaction .block,.Transaction .block .block-item div{
    display: flex;
    align-items: center;
}
.Transaction .block .block-item{
    height: 90px;
    padding: 15px;
    box-sizing: border-box;
    flex: 1;
    background-color: white;
    margin-right: 18px;
}
.Transaction .block .block-item:last-child{
    margin-right: 0
}
.Transaction .block .block-item p{
    margin-bottom: 20px
}
.Transaction .block .block-item div{
    justify-content: space-between
}
.line-box{
    margin-top: 20px;
}
.line-box>.el-col>div{
    padding: 20px;
    background-color: white
}
.perceItem{
    margin-bottom: 25px;
}
.perceItem .el-progress-bar__outer{
    border-radius: 0
}
.Linetext{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin:39px auto;
    color:#2C3343;
    width: 100px;
    height:70px;
}
.circleItem{
    width: 28%;
    text-align:center;
    display: inline-block;
}
.third  .perRow{
    display: flex;
    align-items: center;
}
</style>
<template>
    <div class="Transaction" v-loading="loading">
        <div class="block">
            <div class="block-item">
                <p class="font-size-12">交易额累计</p>
                <div>
                    <img src="../../assets/img/cust/qian.png" alt="">
                    <span>￥<span>{{datainfo.TotalPrice}}</span></span>
                </div>
            </div>
            <div class="block-item">
                <p class="font-size-12">交易人头数</p>
                <div>
                    <img src="../../assets/img/cust/head.png" alt="">
                    <span>{{datainfo.TotalGuestNum}}</span>
                </div>
            </div>
            <div class="block-item">
                <p class="font-size-12">积分</p>
                <div>
                    <img src="../../assets/img/cust/jifen.png" alt="">
                    <span>{{datainfo.Integral}}分</span>
                </div>
            </div>
            <div class="block-item">
                <p class="font-size-12">幸福存折余额</p>
                <div>
                    <img src="../../assets/img/cust/card.png" alt="">
                    <span>￥<span>{{datainfo.Client_Balance}}</span></span>
                </div>
            </div>
            <div class="block-item">
                <p class="font-size-12">优惠券</p>
                <div>
                    <img src="../../assets/img/cust/qianbao.png" alt="">
                    <span class="font-color-link cp" @click="CustomerAccountId = datainfo.CustomerAccountId, drawer = true">{{datainfo.CouponNum}}</span>
                </div>
            </div>
        </div>
        <el-row class="line-box" :gutter="18">
            <el-col :span="16">
                <div>
                    <div id="chartsMap" class="bgDiv" style="height:300px;width:100%;"></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="bgDiv" style="height:300px;overflow:auto">
                    <p style="color:#2C3343;margin-bottom:30px" class="font-14-blod">价格区间占比</p>
                    <div v-for="(item,index) in datainfo.priceList" :key="index" class="perceItem">
                        <el-row :gutter="18">
                            <el-col class="wap1" style="color:#9D9FA6;font-size:12px;margin-top: 2px;" :span="7">
                                <el-tooltip class="item" effect="dark" :content="item.TypeName" placement="top">
                                   <span>{{item.TypeName}}</span>
                                </el-tooltip>
                            </el-col>
                            <el-col :span="12" style="margin-top:4px"><el-progress :show-text="false" :stroke-width="14" :percentage="Number(item.Total)"></el-progress></el-col>
                            <el-col :span="5" class="wap1">
                                <el-tooltip class="item" effect="dark" :content="`${Number(item.Total)}%,${item.TotalGuestNum}人`" placement="top">
                                    <span style="color:#2C3343;font-size:14px">{{Number(item.Total)}}%,{{item.TotalGuestNum}}人</span>
                                </el-tooltip>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row class="line-box" :gutter="18">
            <el-col :span="9">
                <div class="bgDiv" style="height:320px;overflow:auto">
                    <p style="color:#2C3343;margin-bottom:30px" class="font-14-blod">返利红包预期收益</p>
                    <el-row>
                        <el-col :span="6">
                            <div>
                                <p style="color:#5D78FF"><span style="font-size:14px">￥</span><span style="font-size:14px">{{datainfo.yearTotalPrice}}</span></p>
                                <p style="color:#93959A;font-size:10px">本年预计收益</p>
                            </div>
                            <div style="margin-top:20px">
                                <p style="color:#2C3343"><span style="font-size:14px">￥</span><span style="font-size:12px">{{datainfo.allianceTotalYearPrice}}</span></p>
                                <p style="color:#93959A;font-size:10px">本年交易金额</p>
                            </div>
                            <div style="margin-top:20px">
                                <p style="color:#93959A"><span style="font-size:14px">￥</span><span style="font-size:12px">{{datainfo.yeayGoTotalPrice}}</span></p>
                                <p style="color:#93959A;font-size:10px">去年收益</p>
                            </div>
                        </el-col>
                        <el-col :span="18">
                            <div style="margin-bottom:20px" v-for="(item,index) in datainfo.list" :key="index+500">
                                <div>
                                    <p style="color:#7F8593;font-size:12px">年交易额达<span style="color:#7F8593">￥{{item.Money}}</span> 返{{item.Ratio}}‰</p>
                                </div>
                                <div>
                                      <el-row :gutter="23" justify="space-between">
                                        <el-col :span="16">
                                        <p style="margin-top:6px">
                                            <!-- 数据是：{{datainfo.totalYearPrice/item.Money>1?100:(datainfo.totalYearPrice/item.Money)*100}} -->
                                            <el-progress :color="colorMethod(item)" :show-text="false" :stroke-width="12" :percentage="datainfo.totalYearPrice/item.Money>1?100:(datainfo.totalYearPrice/item.Money)*100"></el-progress>
                                        </p>

                                        </el-col>
                                        <el-col :span="8">
                                            <span v-if="item.ActivateState==2"><img  style="width:20px;height:20px" src="../../assets/img/cust/gou.png" alt=""></span>
                                            <span style="font-size:12px;font-weight:bold;color:#2C3343" v-if="item.ActivateState==0">未开启</span>
                                            <span style="font-size:12px;font-weight:bold;color:#2C3343" v-if="item.ActivateState==1">还差 ¥{{item.PriceSpread}}满足</span>
                                        </el-col>
                                      </el-row>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="15">
                <!-- <div>
                    <div :style="{height:'100%',width:'30%'}" ref="myLineRank"></div>
                    <div :style="{height:'100%',width:'30%'}" ref="myLineRank1"></div>
                    <div :style="{height:'100%',width:'30%'}" ref="myLineRank2"></div>
                </div> -->
                 <div class="bgDiv" style="padding:20px 30px;height:320px;overflow:auto">
                    <p style="color:#2C3343;margin-bottom:30px" class="font-14-blod">交客线路占比</p>
                    <div v-for="(item,index) in datainfo.LineIdList" :key="index+100" class="circleItem">
                        <div style="height:126px;position:relative">
                            <div class="Linetext">
                                <p style="font-size:18px">{{Number(item.Total)}}<span style="font-size:14px">%</span></p>
                                <p style="font-size:14px">{{item.TypeName}}</p>
                            </div>
                            <el-progress :color="item.color" :show-text="false" type="circle" :stroke-width="16" :percentage="Number(item.Total)"></el-progress>
                        </div>
                        <div style="font-size:12px;color:#7F8593;margin-top:20px">收客{{item.TotalGuestNum}}人</div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-drawer
            :with-header="false"
            size='70%'
            :visible.sync="drawer"
            direction="rtl"
            :modal="false"
            :before-close="handleClose">
            <Coupon :CustomerAccountId="CustomerAccountId" @handleClose="drawer = false"/>
        </el-drawer>
    </div>
</template>
<script>
import Coupon from "./Coupon"
export default {
    components: {
        Coupon
    },
    props: ['CustomerId'],
    data() {
        return {
            colorList: ["#FFB822","#FD3995","#5D78FF","#59C5F8","#34BFA3"],
            datainfo: {},
            datedata:[],
            loading: false,
            date:[],
            drawer: false,
            CustomerAccountId: 0
        };
    },watch:{
        
    },
    mounted() {
        this.getData()
        // this.init()
    },
    methods: {
        handleClose(done) {
            done();
        },
        init() {
            let myChart = this.$echarts.init(this.$refs.myLineRank);
            let dataAlias = ["今年", "去年"];
            let data2 = [{
                name: "今年",
                value: '80'
            }, {
                name:"去年",
                value: '20',
            }];
            let data3 = [{
                name: "今年",
                value: '80'
            }, {
                name:"去年",
                value: '20',
            }];
            let option = {
                color:['#0D2481', '#E6ECF8'],
                tooltip: {
                    show:false
                },
                graphic: [
                    {
                        type: "text",
                        left:'center',
                        top: "center",
                        style: {
                            text: '日本线',
                            textAlign: "center",
                            fontSize: 14,
                            width: 120
                        }
                    }
                ],
                calculable: true,
                series: [
                {
                    name: "日本线",
                    type: "pie",
                    radius: ["70%", "90%"],
                    hoverAnimation: false,
                    legendHoverLink:false,
                    tooltip:false,
                    startAngle:90,
                    itemStyle: {
                        normal: {
                            label: {
                            show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    data: data2
                },
                {
                    type: "pie",
                    radius: ["50%", "60%"],
                    hoverAnimation: false,
                    legendHoverLink:false,
                    tooltip:false,
                    startAngle:90,
                    itemStyle: {
                    emphasis: {
                        barBorderRadius: 30
                    },
                    normal: {
                        label: {
                        show: false
                        },
                        labelLine: {
                        show: false
                        },
                    }
                    },
                    data: data3
                }
                ]
            };
            myChart.setOption(option);
        },
        colorMethod(item){
            if(item.ActivateState==2){
                return '#34BFA3';
            }
            if(item.ActivateState==1){
                return '#FFB822';
            }else{
                return '#ebeef5';
            }
        },
        getData(){
            this.loading=true;
            this.apipost2('app_customer_GetCustomerOrderInfo', {customerId:this.CustomerId}, res => {
                this.loading=false;
                if (res.data.resultCode == 1) {
                    res.data.data.LineIdList.forEach(item => {
                        this.colorList.forEach(color=>{
                            item.color=color;
                        })
                    });
                    this.datainfo = res.data.data;
                    res.data.data.yearMonthList.forEach(item=>{
                        this.date.push(item.TypeName.substr(2,8));
                        this.datedata.push(item.Total);
                    })
                    this.LineChart();
                } else {}
            }, err => {})
        },
        LineChart(){
            var that = this;
            var myChart = this.$echarts.init(document.getElementById('chartsMap'));
            var option={
                grid: {
                    left: '10%',
                    right: '5%',
                    bottom: 60
                },
                dataZoom: [{
                    startValue: this.date[0],
                    fillerColor:"rgba(13, 36, 129, .2)", //选中范围的填充颜色。
                    borderColor:"rgba(238, 238, 238, 1)", //边框颜色。
                }, {
                    type: 'inside'
                }],
                title: {
                    text: '近12月交易走势',
                    color:"#2C3343",
                    textStyle: {
                        fontSize: 14,
                        fontWeight: 'bold'
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.date
                },
                yAxis: {
                    type: 'value',
                    splitLine:{
                    show:true,
                    lineStyle:{
                        type:'dashed'
                    }
                    }
                },
                series: [{
                    data: that.datedata,
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        opacity: 0
                    },
                    lineStyle: {
                        color: "#0D2481",
                        shadowBlur: 2,
                        width: 1,
                        shadowColor: "#0D2481"
                    },
                    areaStyle: {
                        normal: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "rgba(13, 36, 129, 1)" },
                            { offset: .8, color: "rgba(13, 36, 129, 0)" }
                        ])
                        }
                    },
                }]
            };
            myChart.setOption(option);
        },
    }
}
</script>