<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: ["#409efe", "#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: "#409efe",
              shadowBlur: 2,
              width: 1,
              shadowColor: "#409efe",
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#409efe" },
                  { offset: 0.8, color: "rgba(13, 36, 129, 0)" },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
