<template>
  <div class="xsfx" @click="xiaoshoufenxi">
    <div class="godetail"><img src="../../assets/bargound/shuangjiantou.png" alt="">&nbsp;销售分析</div>
    <div class="xsfxtwosmallbox">
      <div class="xsfxtwosmallbox1">
        <p>当日台次</p>
        <p class="dangri"><span style="color: rgb(44,214,204);font-size: 22px;">{{today_count}}</span>台</p><span
          class="iconfont icon-dangtianshichang" style="font-size: 32px;"></span>
      </div>
      <div class="xsfxtwosmallbox2">
        <p>本月累计</p>
        <p><span style="color: rgb(44,214,204);font-size: 22px;">{{month_count}}</span>台</p>
        <span class="iconfont icon-benyue" style="font-size: 32px;"></span>
      </div>
      <div class="xsfxtwosmallbox2">
        <p>单车毛利</p>
        <p><span style="color: rgb(44,214,204);font-size: 22px;">{{profit_amount}}</span>元</p>
        <span class="iconfont icon-lirun2" style="font-size: 32px;"></span>
      </div>
    </div>
    <div id="xsfxchart">
      <div id="xsfxchart1">

      </div>
      <!-- <p class="p1">完成率</p> -->
      <div id="xsfxchart2">
      </div>
      <!-- <p class="p2">完成率</p> -->
    </div>

  </div>
</template>
<script>
import * as echarts from 'echarts';
import { monthlydata } from "../../servuces/prove";
export default {
  data () {
    return {
      today_count: 0,
      month_count: 0,
      profit_amount: 0,
      count_QOQ: 0,
      profit_amount_QOQ: 0,
    }
  },
  mounted () {
    this.getData();
  },
  methods: {

    xsfxchart1 () {
      const xsfxchart1 = document.getElementById('xsfxchart1');
      const myChartxsfx1 = echarts.init(xsfxchart1);
      var value = this.count_QOQ;
      const xsfxoption1 = {
        series: [{
          type: 'gauge',
          radius: '100%',
          title: '111',
          //splitNumber: 10,
          min: 10,
          max: 100,
          startAngle: 225,
          endAngle: -45,
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: [
                [1, 'rgba(0,0,0,0)']
              ]
            }
          }, //仪表盘轴线
          axisTick: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.6)',
              width: 1
            },
            length: -4
          }, //刻度样式
          splitLine: {
            show: true,
            length: -10,
            lineStyle: {
              color: 'rgba(255,255,255,0.6)'
            }
          },
          axisLabel: {
            show: false,

          },
          pointer: {
            show: 0
          },
          detail: {
            show: 0
          }
        },

        {
          name: '台次环比',
          type: 'gauge',
          radius: '75%',
          startAngle: 225,
          endAngle: -45,
          min: 0,
          max: 100,
          axisLine: {
            show: true,
            lineStyle: {
              width: 10,
              color: [
                [
                  value / 100, new echarts.graphic.LinearGradient(
                    0, 0, 1, 0, [{
                      offset: 0,
                      color: 'rgb(53,156,100)',
                    },
                    {
                      offset: 1,
                      color: 'rgb(255,213,45)',
                    }
                  ]
                  )
                ],
                [
                  1, 'rgb(5,26,53)'
                ]
              ]
            }
          },
          axisTick: {
            show: 0,
          },
          splitLine: {
            show: 0,
          },
          axisLabel: {
            show: 0
          },
          pointer: {
            show: false,
            length: '105%'
          },
          detail: {
            show: true,
            offsetCenter: [0, '35%'],
            textStyle: {
              fontSize: 20,
              color: '#fff'
            },
            formatter: [
              '{name|台次环比}' + '',
              value + '%',
              '' + '{val|台次环比：{value}%}',
            ].join('\n'),
            rich: {
              name: {
                fontSize: 14,
                fontWeight: 200,
                color: '#fff',
              },
              val: {
                color: 'white',
                align: 'middle',
                padding: [20, 0, 0, 0]
              }
            }
          },
          itemStyle: {
            normal: {
              color: '#03b7c9',
            }
          },
          data: [{
            value: value
          }]
        }
        ]
      }
      xsfxoption1 && myChartxsfx1.setOption(xsfxoption1)
      window.addEventListener('resize', function () {
        myChartxsfx1.resize()
      })
    },
    xsfxchart2 () {
      const xsfxchart2 = document.getElementById('xsfxchart2')
      const myChartxsfx2 = echarts.init(xsfxchart2)
      var value = this.profit_amount_QOQ;
      const xsfxoption2 = {
        series: [{
          type: 'gauge',
          radius: '100%',

          min: 10,
          max: 100,
          startAngle: 225,
          endAngle: -45,
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: [
                [1, 'rgba(0,0,0,0)']
              ]
            }
          }, //仪表盘轴线
          axisTick: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.6)',
              width: 1
            },
            length: -4
          }, //刻度样式
          splitLine: {
            show: true,
            length: -10,
            lineStyle: {
              color: 'rgba(255,255,255,0.6)'
            }
          }, //分隔线样式
          axisLabel: {
            show: false,
            // distance: -30,
            // textStyle: {
            //   color: '#03b7c9',
            //   fontSize: '14',
            //   fontWeight: 'bold'
            // },
            // formatter: '{value}%'
          },
          pointer: {
            show: 0
          },
          detail: {
            show: 0
          }
        },

        // 内侧指针、数值显示
        {
          name: '利润环比',
          type: 'gauge',
          radius: '75%',
          startAngle: 225,
          endAngle: -45,
          min: 0,
          max: 100,
          axisLine: {
            show: true,
            lineStyle: {
              width: 10,
              color: [
                [
                  value / 100, new echarts.graphic.LinearGradient(
                    0, 0, 1, 0, [{
                      offset: 0,
                      color: 'rgb(53,156,100)',
                    },
                    {
                      offset: 1,
                      color: 'rgb(255,213,45)',
                    }
                  ]
                  )
                ],
                [
                  1, 'rgb(5,26,53)'
                ]
              ]
            }
          },
          axisTick: {
            show: 0,
          },
          splitLine: {
            show: 0,
          },
          axisLabel: {
            show: 0
          },
          pointer: {
            show: false,
            length: '105%'
          },
          detail: {
            show: true,
            offsetCenter: [0, '30%'],
            textStyle: {
              fontSize: 20,
              color: '#fff'
            },
            formatter: [
              '{name|利润环比}' + '',
              value + '%',
              '' + '{val|利润环比：{value}%}',
            ].join('\n'),
            rich: {
              name: {
                fontSize: 14,
                fontWeight: 200,
                color: '#fff',
                // fontWeight: 'bold'
              },
              val: {
                color: 'white',
                align: 'middle',
                padding: [20, 0, 0, 0]
              }
            }
          },
          itemStyle: {
            normal: {
              color: '#03b7c9',
            }
          },
          data: [{
            value: value,
          }]
        }
        ]
      }
      xsfxoption2 && myChartxsfx2.setOption(xsfxoption2)
      window.addEventListener('resize', function () {
        myChartxsfx2.resize()
      })
    },
    getData () {
      monthlydata().then(res => {
        this.today_count = res.data.today_count;
        this.month_count = res.data.month_count;
        this.profit_amount = res.data.profit_amount;
        this.count_QOQ = res.data.count_QOQ;
        this.profit_amount_QOQ = res.data.profit_amount_QOQ;
        this.xsfxchart1();
        this.xsfxchart2();
      })
    },
    xiaoshoufenxi(){
      this.$router.push('/xiaoshoufenxidetail')

    }
  }
}
</script>
<style scoped lang="scss">
.xsfx {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .godetail {
    margin-bottom: 5px;
  }

  .xsfxtwosmallbox {
    display: flex;
    justify-content: space-around;

    .xsfxtwosmallbox1,
    .xsfxtwosmallbox2 {
      width: 30%;
      padding: 10px;
      border: 1px solid rgb(69, 166, 196);
      position: relative;

      .iconfont {
        position: absolute;
        right: 5%;
        top: 30%;
        color: rgb(47, 218, 226);
      }
    }
  }

  #xsfxchart {
    width: 100%;
    height: 50%;
    display: flex;
    flex: 1;
    justify-content: space-evenly;
    position: relative;

    div {
      width: 45%;
      height: 100%;
      padding-top: 10px;

    }

    // .p1 {
    //   position: absolute;
    //   bottom: 3%;
    //   left: 20%
    // }

    // .p2 {
    //   position: absolute;
    //   bottom: 3%;
    //   left: 68%
    // }
  }
}
</style>