<template>

  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="history">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>渠道额统计分析</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">销售总额统计</span></div>
      </div>
     <div >

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

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

             <el-form-item label-width="0">
               <el-button   @click="search('formParams')" 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 class="content_table" style="padding: 15px 10px 10px 20px;background-color:#F2F3F5">
          <div style="background-color: #fff;padding: 10px;margin-bottom: 20px;">
          <div style='padding:20px 10px;background-color:#fff;'>
            <div style="display:flex;font-size:14px;justify-content: space-around">
              <div style="width:10%;border-right:1px solid #F2F2F2">
                <div style="margin-bottom: 10px;font-weight: 600;">总销售额(元)</div>
                <div style="font-weight: 600;">100,000.00</div>
              </div>
              <div style="width:10%;border-right:1px solid #F2F2F2">
                <div style="margin-bottom: 10px;font-weight: 600;">美团销售总额(元)</div>
                <div style="font-weight: 600;">100,000.00</div>
              </div>
              <div style="width:10%;border-right:1px solid #F2F2F2">
                 <div style="margin-bottom: 10px;font-weight: 600;">大麦销售总额(元)</div>
                <div style="font-weight: 600;">100,000.00</div>
              </div>
              <div style="width:10%;border-right:1px solid #F2F2F2">
                 <div style="margin-bottom: 10px;font-weight: 600;">携程销售总额(元)</div>
                 <div style="font-weight: 600;">100,000.00</div>
              </div>
              <div style="width:10%;border-right:1px solid #F2F2F2">
                <div style="margin-bottom: 10px;font-weight: 600;">票种1销售总额(元)</div>
                 <div style="font-weight: 600;">100,000.00</div>
              </div>
              <div style="width:10%;border-right:1px solid #F2F2F2">
                <div style="margin-bottom: 10px;font-weight: 600;">票种1销售总额(元)</div>
                 <div style="font-weight: 600;">100,000.00</div>
              </div>
              <div style="width:10%">
                <div style="margin-bottom: 10px;font-weight: 600;">票种2销售总额(元)</div>
                 <div style="font-weight: 600;">100,000.00</div>
              </div>
            </div>
          </div>
       </div>
       <!-- 图表 -->
               <div style="display: flex;">
                      <div style="background-color: #fff;padding: 10px;margin-right: 10px;width: 32%;">
                        <div style="display: flex;border-bottom:1px solid #F2F2F2;justify-content: space-between;padding: 5px; 0 15px 0">
                          <div style="line-height: 200%;">总销售额趋势表</div>
                          <!-- <el-button   style="background-color: #fff;color: #000;">导出</el-button> -->
                        </div>
                        <div style="margin:10px 0 15px 0">
                           <el-date-picker

                                v-model="value1"
                                value-format="yyyy-mm-dd"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                              </el-date-picker>
                        </div>
                        <div style="color:#000">单位：张</div>
                        <!--    折线图-->
                          <div ref="container" style="width: 400px; height: 400px;"></div>

                      </div>
                      <div style="background-color: #fff;padding: 10px;margin-right: 10px;width: 32%;">
                        <div style="display: flex;border-bottom:1px solid #F2F2F2;justify-content: space-between;padding: 5px; 0 15px 0">
                          <div style="line-height: 200%;">渠道销售情况表</div>
                          <!-- <el-button   style="background-color: #fff;color: #000;">导出</el-button> -->
                        </div>
                        <div style="margin:10px 0 15px 0">
                             <el-radio-group v-model="radio1">
                                 <el-radio-button label="全部"></el-radio-button>
                                 <el-radio-button label="美团"></el-radio-button>
                                 <el-radio-button label="大麦"></el-radio-button>
                                 <el-radio-button label="携程"></el-radio-button>
                               </el-radio-group>
                        </div>
                        <div style="color:#000">单位：元</div>
                        <!--    柱状图-->
                          <div ref="container2" style="width: 400px; height: 400px;"></div>

                      </div>
                      <div style="background-color: #fff;padding: 10px;width: 32%;">
                        <div style="display: flex;border-bottom:1px solid #F2F2F2;justify-content: space-between;padding: 5px; 0 15px 0">
                          <div style="line-height: 200%;">票种销售额情况表</div>
                          <!-- <el-button   style="background-color: #fff;color: #000;">导出</el-button> -->
                        </div>
                        <div style="margin:10px 0 15px 0">
                           <el-radio-group v-model="radio2">
                               <el-radio-button label="全部"></el-radio-button>
                               <el-radio-button label="票种1"></el-radio-button>
                               <el-radio-button label="票种2"></el-radio-button>
                               <el-radio-button label="票种3"></el-radio-button>
                             </el-radio-group>
                        </div>
                        <div style="color:#000">单位：元</div>
                        <!--    柱状图-->
                          <div ref="container3" style="width: 400px; height: 400px;"></div>

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

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

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      value1:'',
      radio1:'',
      radio2:'',
      list: [],
      total: 1,
      pageSize: 10,
      currentPage: 1,
      formParams: {
        page: 1,
        pageSize: 10
      },
      tipsList: [{
        id: 1,
        name: '系统消息'
      },
      {
        id: 2,
        name: '公告'
      },
      {
        id: 3,
        name: '站内信'
      }],
       tableData: [{
                id: '1',
                name: '王小虎',
                amount1: '234',
                amount2: '3.2',
                amount3: 10
              }, {
                id: '4',
                name: '5',
                amount1: '165',
                amount2: '4.43',
                amount3: 12
              }, {
                id: '12987124',
                name: '6',
                amount1: '6',
                amount2: '1.9',
                amount3: 9
              }, {
                id: '234',
                name: '534',
                amount1: '621',
                amount2: '2.2',
                amount3: 17
              }, {
                id: '34',
                name: '623',
                amount1: '539',
                amount2: '4.1',
                amount3: 15
              }],
              chart1:null,
              chart2:null,
              chart3:null,
      rules: {
        noticeType: [
          { required: true, message: '请选择消息类型', trigger: 'change' }
        ]
      },

    }
  },
  mounted() {
    // this.getAll()
 this.echar(this.$refs.container)
        console.log(this.$refs.container2)
      this.echar2(this.$refs.container2)

      this.echar3(this.$refs.container3)
      this.resizeChart = () => {
          try {
            this.chart.resize()
            this.chart2.resize()
            this.chart3.resize()
          } catch (error) {
            console.log(error);
          }
        };
        window.addEventListener('resize', this.resizeChart, false); // false代表事件句柄在冒泡阶段执行

      // this.$nextTick(() => {
      // this.echar(this.$refs.container)
      // this.echar2(this.$refs.container2)
      // this.echar3(this.$refs.container3)
      //   this.resizeChart = () => {
      //     try {
      //       this.chart.resize()
      //       this.chart2.resize()
      //       this.chart3.resize()
      //     } catch (error) {
      //       console.log(error);
      //     }
      //   };
      //   window.addEventListener('resize', this.resizeChart, false); // false代表事件句柄在冒泡阶段执行
      // 	})
  },

  methods: {
    echar(diameter) {
      this.chart1 = echarts.init(diameter);
      // 指定图表的配置项和数据
      const option = {
         xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.chart1.setOption(option)
    },
    echar2(diameter) {
      this.chart2= echarts.init(diameter);
     let  option = {
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,

                itemStyle: {
                  color: '#000'
                }
              },
              {
                value: 150,
                itemStyle: {
                  color: '#a90000'
                }
              },
              80,
              70,
              110,
              130
            ],
            type: 'bar'
          }
        ]
      };
//       const labelOption = {
//         show: true,
//         position:'top',
//         distance: 15,
//         align: 'center',
//         verticalAlign: 'top',
//         rotate:top,
//         fontSize: 16,

//       }
//       // 指定图表的配置项和数据
//      let option = {
//   toolbox: {
//     show: true,
//     orient: 'vertical',
//     left: 'right',
//     top: 'center',
//   },
//   xAxis: [
//     {
//       type: 'category',
//       axisTick: { show: false },
//       data: ['2012', '2013', '2014', '2015', '2016']
//     }
//   ],
//   yAxis: [
//     {
//       type: 'value'
//     }
//   ],
//   series: [
//     {
//       name: 'Forest',
//       type: 'bar',
//       barGap: 0,
//       label: labelOption,
//       emphasis: {
//         focus: 'series'
//       },
//       data: [320, 332, 301, 334, 390]
//     },
//     {
//       name: 'Steppe',
//       type: 'bar',
//       label: labelOption,
//       emphasis: {
//         focus: 'series'
//       },
//       data: [220, 182, 191, 234, 290]
//     },
//     {
//       name: 'Desert',
//       type: 'bar',
//       label: labelOption,
//       emphasis: {
//         focus: 'series'
//       },
//       data: [150, 232, 201, 154, 190]
//     },
//     {
//       name: 'Wetland',
//       type: 'bar',
//       label: labelOption,
//       emphasis: {
//         focus: 'series'
//       },
//       data: [98, 77, 101, 99, 40]
//     }
//   ]
// }

      // 使用刚指定的配置项和数据显示图表。
      this.chart2.setOption(option)
    },
    echar3(diameter) {
      this.chart3 = echarts.init(diameter);
      // 指定图表的配置项和数据
     let  option = {
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,

                itemStyle: {
                  color: '#858564'
                }
              },
              {
                value: 150,
                itemStyle: {
                  color: '#65665'
                }
              },
              80,
              70,
              110,
              130
            ],
            type: 'bar'
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      this.chart3.setOption(option)
    },
    getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
              if (index === 0) {
                sums[index] = '总价';
                return;
              }
              const values = data.map(item => Number(item[column.property]));
              if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                    return prev + curr;
                  } else {
                    return prev;
                  }
                }, 0);
                sums[index] += ' 元';
              } else {
                sums[index] = 'N/A';
              }
            });

            return sums;
          }
        },
        handleCurrentChange(val) {
          this.currentPage = val
        },
        handleSizeChange(val) {
          this.pageSize = val
        },

 }
</script>

<style lang='scss' scoped>
.history{
 padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;

}
 ::v-deep .el-form-item__label{
        font-weight: normal;
         font-size: 14px;

       }
    ::v-deep .buttonHover:hover{
      color:#3f9b6a !important;
      border-color: #c5e1d2 !important;
      background-color: #ecf5f0 !important;
      outline: none;
    }

</style>
<style scoped>



</style>
<style>
.el-tooltip__popper {
  max-width: 50%;
}
</style>
