<template>
  <!-- <div style="padding: 10px;background-color:#F2F3F5"> -->
  <div style="background-color:#fff">
    <div class="history">
      <div style="background-color:#Fff;padding:20px 20px 0 20px;display:flex;justify-content: space-between;">

          <!-- 顶部搜索 -->
          <div class="toolbar">
            <el-form ref="formParams" :inline="true" :model="formParams">
              <el-form-item label="日期">
                <el-date-picker
                  v-model="formParams.dates"
                  type="daterange"

                   style="width:220px"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>

              <el-form-item label-width="0">
                <el-button   @click="search"  style="background-color: #3F9B6A;color: #fff;">查询</el-button>
                <el-button  @click="clear('formParams')" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
      </div>
      <div style="background-color:#fff;padding: 20px 20px 0px;">
         <div style="background-color:#F2F3F5;padding: 5px;">
           <div style="background-color:#fff;display:flex;">
             <div style="padding:15px;width:49%;">
               <div style="margin-bottom:10px">商品消费数量分布图</div>
               <div style="height:250px" ref="myEchartsOne"></div>
             </div>
             <div style="padding:15px;width:49%;">
               <div style="margin-bottom:10px">商品消费表</div>
               <div style="height:250px" ref="myEchartsTwo"></div>
             </div>
           </div>
         </div>
      </div>
      <div style="background-color:#fff;padding: 20px 20px 0px;">
         <div style="background-color:#F2F3F5;padding: 5px;">
           <div style="background-color:#fff;padding:15px">商品消费排行榜</div>
           <div style="display:flex; ">
               <div style="width:100%;height:250px;background-color:#fff;padding: 0 20px;" ref="myEchartsThree" ></div>
               <!-- <div style="width:100%;height:250px;background-color:#fff;"></div> -->
           </div>
         </div>
      </div>
        <!-- 表格 -->
        <div class="content_table" style="padding: 15px 10px 10px 20px;background-color:#fff">
             <div style="background-color: #F2F3F5;padding:5px;margin-bottom: 20px;">
          <div style="background-color:#fff;padding:15px;">
            <div class="table">
              <el-table
                :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                 :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
              >
                <el-table-column prop="orderFormid" label="订单号" />
                <el-table-column  prop="customerName" label="下单用户">
                </el-table-column>
                <el-table-column prop="paymentMode" label="支付方式">
                  <template slot-scope="scope">
                    {{scope.row.paymentMode == 1?'微信':''}}
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="订单状态">
                  <template slot-scope="scope">
                      {{scope.row.state == 1?'待付款':scope.row.state == 2?'待发货':scope.row.state == 3?'待收货':scope.row.state == 4?'已完成':scope.row.state ==5?'已取消':scope.row.state == 6?'待成团':'代售后'}}
                      </template>
                  </el-table-column>
                <el-table-column prop="price" label="订单总金额" />
                <!-- <el-table-column prop="yh" label="优惠金额" /> -->
                <!-- <el-table-column prop="sf" label="订单实付金额" /> -->
                <el-table-column prop="paymentTime" label="下单时间" />
              </el-table>
            </div>
            <div class="fenye">

              <el-pagination class="pagination" :hide-on-single-page="flag" background small :current-page="currentPage"
                layout="total,prev, pager,next" :total="total"
                @current-change="handleCurrentChange" />
            </div>
          </div>
          <!-- 分页 -->

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

  </div>
</template>

<script>
import echarts from 'echarts'
  import {orderGetAll,
  salesRanking,commodityConsumption} from '@/api/psRanking'
  import { dashIndex, userVisitExport, orderConvertExport, hotProductsExport } from '@/api/dashboard'
export default {
  data() {
    return {
      list: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      formParams: {
        page: 1,
        pageSize: 10
      },
      tipsList: [{
        id: 1,
        name: '系统消息'
      },
      {
        id: 2,
        name: '公告'
      },
      {
        id: 3,
        name: '站内信'
      }],
       tableData: [],
       formInline: {
         searchType: '1',
         search: '', // 搜索字段
         state: '',
         // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
         dates: [], // 下单时间数组
         page: 1,
         shopName: '',
         pageSize: 10
       },
       bing:[

      ],
      yuantu:{
        names: [
        ],
        rates: [
        ]
      },
      form: {
        condition: 4
      },
      rules: {
        noticeType: [
          { required: true, message: '请选择消息类型', trigger: 'change' }
        ]
      },

    }
  },
  mounted() {
    // this.draws()


    this.getTu()
  },
  methods: {
   async getTu(){
  const res =  await orderGetAll(this.formInline)
 this.tableData =  res.data.list
 this.total = this.tableData.length
  const Orderlist = await salesRanking(res.data.list)
   const zhutu  =  await commodityConsumption(res.data.list)
   const remai = await dashIndex(this.form)

this.drawsTwo(zhutu.data)
 for(let i =0;i<remai.data.hotSellProducts.length;i++){
      this.yuantu.names.push(remai.data.hotSellProducts[i].productName)
        this.yuantu.rates.push(remai.data.hotSellProducts[i].number)
 }


 for(let i =0;i<Orderlist.data.length;i++){

   let item = {}
   item.name = Orderlist.data[i].product.productName
   item.value = Orderlist.data[i].bigDecimal
    this.bing.push(item)
      // this.bing[i].value = Orderlist.data[i].bigDecimal
      // this.bing[i].name = Orderlist.data[i].product.productName
 }
 this.draws(this.bing)
 this.draw(this.bing)

    },
 async search(){
   this.formInline.dates = this.formParams.dates
  const res =  await orderGetAll(this.formInline)
 this.tableData =  res.data.list
 this.total = this.tableData.length
  const Orderlist = await salesRanking(res.data.list)
   const zhutu  =  await commodityConsumption(res.data.list)
   const remai = await dashIndex(this.form)

this.drawsTwo(zhutu.data)
 for(let i =0;i<remai.data.hotSellProducts.length;i++){
      this.yuantu.names.push(remai.data.hotSellProducts[i].productName)
        this.yuantu.rates.push(remai.data.hotSellProducts[i].number)
 }


 for(let i =0;i<Orderlist.data.length;i++){
      this.bing[i].value = Orderlist.data[i].bigDecimal
      this.bing[i].name = Orderlist.data[i].product.productName
 }
 this.draws(this.bing)
 this.draw(this.bing)
 },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    draw(arr) {
      const myEchart = echarts.init(this.$refs.myEchartsOne, 'light')

     let option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '消费数量',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 12,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },

            data: arr
          }
        ]
      };
      myEchart.setOption(option)
    },
    drawsTwo(zhutu){
      const keys = Object.keys(zhutu);
      const values = Object.values(zhutu);
      console.log(keys,values)
      const myEchart = echarts.init(this.$refs.myEchartsTwo, 'light')
     let  option = {
        xAxis: {
          type: 'category',
          data: keys
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: values,
            type: 'bar'
          }
        ]
      }
      myEchart.setOption(option)
    },
    draws(arr) {
      console.log(arr)
      const myEchart = echarts.init(this.$refs.myEchartsThree, 'light')
      // const o = this.chartData
      const option = {
        // color: ["#74d1fd", "#009ae4", "#0071c1"],
        // 设置图表的位置
        grid: {
          x: 200, // 左间距
          y: 0, // 上间距
          x2: 60, // 右间距
          y2: 40 // 下间距
        },
        // 提示框组件
        tooltip: {
          trigger: 'axis', // 触发类型, axis: 坐标轴触发
          axisPointer: {
            // 指示器类型  'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器
            // 'cross' 十字准星指示器 其实是种简写，表示启用两个正交的轴的 axisPointer
            type: 'none'
          },
          textStyle: {
            color: '#cdd3ee' // 文字颜色
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式 折线（区域）图、柱状（条形）图、K线图
          // {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
          formatter: '{b}<br />{a0}: {c0}%'
        },
        // // 图例组件
        // legend: {
        //   textStyle: {
        //     // 文本样式
        //     fontSize: 16,
        //     color: "#cdd3ee"
        //   },
        //   top: 13, // 定位
        //   data: ["已完成", "进行中", "未完成"] // 图例的数据数组
        // },
        // X轴
        xAxis: {
          type: 'value', // 坐标轴类型,   'value' 数值轴，适用于连续数据
          // 坐标轴刻度
          axisTick: {
            show: false // 是否显示坐标轴刻度 默认显示
          },
          // 坐标轴轴线
          axisLine: {
            // 是否显示坐标轴轴线 默认显示
            show: false // 是否显示坐标轴轴线 默认显示
          },
          // 坐标轴在图表区域中的分隔线
          splitLine: {
            show: false // 是否显示分隔线。默认数值轴显示
          },
          // 坐标轴刻度标签
          axisLabel: {
            show: false // 是否显示刻度标签 默认显示
          }
        },
        yAxis: [
          // 左侧Y轴
          {
            // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据
            // 为该类型时必须通过 data 设置类目数据
            type: 'category',
            // 坐标轴刻度
            axisTick: {
              show: false // 是否显示坐标轴刻度 默认显示
            },
            // 坐标轴轴线
            axisLine: {
              // 是否显示坐标轴轴线 默认显示
              show: false, // 是否显示坐标轴轴线 默认显示
              lineStyle: {
                // 坐标轴线线的颜色
                color: '#cdd3ee'
              }
            },
            // 坐标轴在图表区域中的分隔线
            splitLine: {
              show: false // 是否显示分隔线。默认数值轴显示
            },
            // 坐标轴刻度标签
            axisLabel: {
              show: true, // 是否显示刻度标签 默认显示
              fontSize: 16, // 文字的字体大小
              color: '#cdd3ee', // 刻度标签文字的颜色
              // 使用字符串模板，模板变量为刻度默认标签 {value}
              formatter: '{value}'
            },
            // 类目数据，在类目轴（type: 'category'）中有效
            data: arr.map(item => item.name)
          }
        ],
        // 系列列表
        series: [
          {
            type: 'bar', // 系列类型
            name: '已完成',
            barMaxWidth: 20, // 柱条的最大宽度，不设时自适应
            // label: {
            //   show: true,
            //   position: "inside"
            // },
            itemStyle: {
              barBorderRadius: [10, 0, 0, 10] // 圆角半径, 单位px, 支持传入数组分别指定 4 个圆角半径
            },
            data:arr.map(item => item.value)// 系列中的数据内容数组
          }
        ]
      }

      myEchart.setOption(option)
    },

  }
 }
</script>

<style lang='scss' scoped>
.history{
  padding: 0px;
  min-height: calc(100vh - 50px - 20px);
}
 ::v-deep .el-form-item__label{
        font-weight: normal;
         font-size: 12px;

       }
       ::v-deep .btn .el-button:focus,
        .el-button:hover {
          border: 1px solid #3F9B6A;
        }
        ::v-deep .el-button {
           border: 1px solid #3F9B6A;
         }
          ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
           background-color: #3F9B6A;
         }
</style>
<style scoped>
.history /deep/ .el-table .cell.el-tooltip img {
  max-height: 100px;
}
  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    position: relative;
  }
  .pagination {
    text-align: right;
    line-height: 20px;
  }

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

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

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

 /deep/ .btn-prev {
   position: absolute;
   top: 4px;
   right: 69px;
 }
 .toolbar{
   .el-form-item{
     margin-bottom:0px;
   }
 }
</style>
<style>
.el-tooltip__popper {
  max-width: 50%;
}
</style>
