<template>
  <div style="padding: 10px;">
    <div
      style="font-weight: bold;font-size: 14px;background-color:#fff;padding: 20px;display:flex;justify-content: space-between;align-items: center">
      <div>图表分析</div>
      <el-form :inline="true"  label-position="left">
        <el-form-item label="选择日期">
          <el-date-picker v-model="Time"   type="daterange"     value-format="yyyy-MM-dd" style="width: 240px;margin-top:5px"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
<el-form-item>
              <el-button
                style="background-color: #3F9B6A;color: #fff;"
                @click="onSubmit"
                >查询
              </el-button>
              <el-button
               class="buttonHover"
                 style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
                @click="resetting"
                >重置
              </el-button>
            </el-form-item>
      </el-form>
    </div>
    <div class="zhuti">
      <div style="display: flex;">
          <div style="width:100%;background-color: #fff;padding:20px 20px 10px 20px;margin-right:20px;">
            <div style="">支付渠道监控</div>
            <div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
            <div style="height:350px;width:100%" ref="shopBing">
            </div>
          </div>

      </div>

      <div style="margin-top:20px;">
        <div style="width:100%;background-color: #fff;padding:20px 20px 10px 20px;">
          <div style="">商户交易监控</div>
          <div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
          <div style="height:350px;width:100%" ref="jiankong">
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import {chartAnalysis} from '../../../api/online.js'
  import * as echarts from 'echarts';
  export default {
    data() {
      return {
        currentPage: 1,
        total: 100,
        flag: false,
        pageSize: 10,
        activeName: 'zfb',
        tabTitle: '',
        jiaosucc:78,
      pageindex:{
        startTime:"2024-09-11",
        endTime:"2024-11-09"
      },
      Time:[]
      }
    },
    computed: {},
    created() {

    },
    mounted() {
      this.getAll()
    },
    methods: {
      getAll(){
      chartAnalysis(this.pageindex).then(res=>{
             if(res.data.userTraffics &&res.data.paymentChannels ){
               this.kong(res.data.userTraffics)
               this.shopB(res.data.paymentChannels)
             }else{
               let data =[]
               this.kong(data)
               this.shopB(data)
             }

           })

            },
      shopB(datas){
        let Dom = this.$refs.shopBing
        let myChart = echarts.init(Dom)
   let processedData = datas.map(item => {
     let paymentModeName;
     if (item.paymentMode === 1) {
       paymentModeName = '微信';
     } else {
       paymentModeName = item.paymentMode;
     }
     return {
       name: paymentModeName,
       value: item.paymentQuantity
     }
   })

           let option = {
               tooltip: {
                 trigger: 'item'
               },
               legend: {
                 top: '38%',
                 left: 'right',
                 orient:'vertical'
               },
               series: [
                 {
                   name: '营业额',
                   type: 'pie',
                   radius: ['40%', '70%'],
                   avoidLabelOverlap: false,
                   itemStyle: {
                     borderRadius: 10,
                     borderColor: '#fff',
                     borderWidth: 2
                   },
                   label: {
                     show: false,
                     position: 'center',
                      fontSize:'16px'
                   },
                   emphasis: {
                     label: {
                       show: true,
                       fontSize: 40,
                     }
                   },
                   labelLine: {
                     show: false
                   },
                   data:processedData
                 }
               ]
           }
           option && myChart.setOption(option)
      },
      kong(datas){
                var chartDom = this.$refs.jiankong
                var myChart = echarts.init(chartDom)
                let processedData = datas.map(item => ({
                  name: item.shopName,
                  value: item.tradingVolume
                }))
                const option = {
         grid: {  // 图表距离边框的距离，可用百分比和数字（px）配置
            top: '5%',
            left: '3%',
            right: '10%',
            bottom: '5%',
            containLabel: true
        },

        xAxis: {
          name: '商家名称',
          type: 'category',
          data:processedData.map(item => item.name),
        },

        yAxis: {
          type: 'value',
          min:0, // 配置 Y 轴刻度最小值
          splitNumber:6,  // 配置 Y 轴数值间隔
        },

        series: [
          {
            name: '实际',
            type: 'line',
            symbol: 'circle', // 实心圆点
            smooth: 0.5, // 设置折线弧度
               data: processedData.map(item => item.value),
          }
        ],
        color: ['#3366CC'] // 三个折线的颜色
     }
                option && myChart.setOption(option)
      },
     onSubmit() {
       if(this.Time.length!=0){
          this.pageindex.startTime = this.Time[0]
         this.pageindex.endTime = this.Time[1]
           this.getAll()
       }
     },
     resetting(){
       this.pageindex= {
         startTime:"2024-09-11",
         endTime:"2024-11-09"
       },
       this.Time=[]
       this.getAll()
     },
      handleSizeChange() {

      },
      handleCurrentChange() {

      }
    }
  }
</script>

<style scoped>
  .zhuti {
    margin-top: 20px;
    /* padding: 10px 20px 20px 20px; */
    /* background-color: #Fff; */
    min-height: calc(100vh - 50px - 20px);
    position: relative;
  }

  /deep/ .el-form-item__content {
    line-height: 0;
  }

  

  ::v-deep .formSearch {
    position: relative;
    margin: 20px 0;
    display: flex;
    width: 100%;
    height: 30px;
    font-size: 12px;
    justify-content: space-between;

    .el-form-item__label {
      line-height: 28px;
      font-size: 12px;
      color: #000;
      font-weight: 100;
    }
  }

  .greens {
    color: #3F9B6A;
  }

  /deep/ .el-table__row {
    font-size: 12px;
  }

  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    position: relative;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3F9B6A;
  }

  .el-row {
    margin-bottom: 20px;
  }

  :last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /deep/ .bg-purple[data-v-0e3fe4ec] {
    background: #fff;
    height: 50px;
  }

  /deep/ .el-form--label-top .el-form-item__label {
    padding: 0;
  }

  .demo-input-suffix {
    display: flex;
    margin-right: 20px;
  }

  .pagination {
    text-align: right;
    line-height: 20px;
  }

  /deep/ .el-pagination__total {
    margin-top: 4px;
  }

  /deep/ .btn-prev {
    position: absolute;
    top: 4px;
    right: 266px;
  }

  /deep/ .el-pager {
    position: absolute;
    top: 4px;
    right: 40px;
  }

  /deep/ .btn-next {
    position: absolute;
    top: 4px;
    right: 10px;
  }

  ::v-deep .btn .el-button:focus,
  .el-button:hover {
    border: 1px solid #3F9B6A;
  }

  ::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: #3F9B6A
  }

  ::v-deep .dialog_css_Xq {
    .el-dialog__header {
      background-color: #fafafa;

    }

    .el-dialog__title {
      color: #000
    }
  }

  ::v-deep .el-tabs__item.is-active {
    color: #3F9B6A;
  }

  ::v-deep .el-tabs__active-bar {
    background-color: #3F9B6A;

  }

  .card_tree {
    padding: 20px 20px 10px 20px;
    margin-right: 20px;
    background-color: #fff;

    .card_title {
      color: #B0B0B0;
    }

    .card_body {
      font-size: 24px;
      margin-top: 10px;
      font-weight: 600;
    }

    .card_tu {
      height: 80px;
    }

    .card_foot {
      color: #B0B0B0;
    }
  }

  .card_liuliang {
    margin-top: 20px;

    margin-right: 20px;
    display: flex;

    .card_title {
      color: #B0B0B0;
      font-size: 12px;
      padding: 15px 0;
    }

    .card_body {
      font-size: 24px;
      font-weight: 600;
    }
  }
</style>
