<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div style="padding: 0 20px 20px 20px;background-color:#fff;">
      <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 class="filter-container">
        <div style="display:flex;justify-content: space-between;background-color: #f5f5f5;padding:10px">
          <div style="line-height:200%">筛选查询</div>
          <div>
            <button @click="toggleFilter">收起筛选</button>
            <el-button plain @click="search" style="background-color: #3F9B6A;color: #fff;">查询</el-button>
            <el-button plain @click="resetting"  class="buttonHover"
               style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
          </div>
        </div>
        <div :class="fut?'formSearch':'collapsed'" ref="formSearch">
          <el-form :inline="true" :model="formInline" label-width="auto" style="padding: 10px 30px">
            <el-form-item label="区域">
          <el-select v-model="formInline.belongingGreenwaySection" placeholder="请选择"  style="margin-top:5px;width: 100%;">
                        <el-option :label="item.name" :value="item.code" v-for="(item,index) in lvdaoList"  :key="index" ></el-option>

                      </el-select>
            </el-form-item>
         <!--   <el-form-item label="交易项目" prop="affiliation">
              <el-select v-model="formInline.affiliation" placeholder="请选择" style="width: 168px;margin-right: 10px">
                <el-option label="1" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="商户名称">
              <el-input v-model="formInline.eqwe" placeholder="请输入"
                style="width: 168px;margin-right: 10px;" />
            </el-form-item> -->


          </el-form>
        </div>
      </div>

      <div style="display:flex;">
          <!-- <div style="width:50%">
            <div style="display:flex;">
              <div style="width:50%;padding:20px;">
                <div>最高营业额</div>
                <div style="font-size:20px;padding:15px 0;">9,646 <span style="margin-left:10px;">17.1%</span></div>
                <div ref="maxYe" style="height:100px;"></div>
              </div>
              <div style="width:50%;padding:20px;">
                <div>最低营业额</div>
                <div style="font-size:20px;padding:15px 0;">646 <span style="margin-left:10px;">10.1%</span></div>
                <div ref="minYe" style="height:100px;"></div>
              </div>
            </div>
            <div>
              <el-table
                        :data="tableData"
                         :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                      >
                        <el-table-column
                          label="排名"
                          min-width="4%"
                        >
                        <template slot-scope="scope">
                          {{scope.$index+1}}
                        </template>
                        </el-table-column>
                        <el-table-column
                          label="商户名称"
                          prop="shopName"
                          min-width="12%"
                        >
                        </el-table-column>
                        <el-table-column
                          label="营业额(元)"
                          prop=""
                          width="auto"
                          min-width="12%"
                        >
                        </el-table-column>
                        <el-table-column
                          label="周涨幅"
                          prop="name"
                          width="auto"
                          min-width="12%"
                        >

                        </el-table-column>
                      </el-table>
            </div>
          </div> -->

          <div style="width:100%;">
             <div ref="tongji" style="height:300px"></div>
          </div>
      </div>

      <div style="margin-top:20px;">
          <div style="padding:0 20px 20px 20px ;border-bottom:1px solid #F2F3F5">交易流水</div>
          <!-- <div style="display:flex;padding: 10px 0">
            <el-form :inline="true" :model="formInline" label-width="auto">
              <el-form-item label="用户名">
                <el-input v-model="formInline.searchType" placeholder="请输入"
                  style="width: 168px;margin-right: 10px;" />
              </el-form-item>
            </el-form>
            <el-button  @click="Modes " style="background-color: #3F9B6A;color: #fff;margin-top:4px;">查询
            </el-button>
          </div> -->
          <el-table
                    :data="tableData"
                     :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
                  >
                    <el-table-column
                      label="序号"
                      min-width="4%"
                    >
                    <template slot-scope="scope">
                      {{scope.$index+1}}
                    </template>
                    </el-table-column>
                    <el-table-column
                      label="合同编号"
                      prop="contractNumber"
                      min-width="12%"
                    >
                    </el-table-column>
                    <el-table-column
                      label="商户名称"
                      prop="shopName"
                      width="auto"
                      min-width="12%"
                    >
                    </el-table-column>
                    <el-table-column
                      label="品牌"
                      prop="name"
                      width="auto"
                      min-width="12%"
                    >

                    </el-table-column>
                    <el-table-column
                      label="营业期间"
                      prop=""
                      width="auto"
                      min-width="12%"
                    >
<template slot-scope="scope">
                      {{scope.row.businessStartDate}}-{{scope.row.businessEndDate}}
                    </template>
                    </el-table-column>
                    <el-table-column
                      label="营业额(元)"
                      prop="name"
                      width="auto"
                      min-width="12%"
                    >

                    </el-table-column>
                  </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import {aggregateQuery,lvdaoduan,consumerTrends} from '../../../api/online.js'
  export default {
    data() {
      return {
        value: new Date(),
        formInline: {
          belongingGreenwaySection:'',
        },
        fut: true,
        lvdaoList:[],
        tableData: [],
        pageindex: {
            belongingGreenwaySection:'LDQD0029',
        },
      }
    },
    mounted() {
      this.getAll()
      // this.max()
      // this.min()

    },
    methods: {
     async getAll(){
          const lvdao = await lvdaoduan()
             this.lvdaoList = lvdao.data
           const res=  await aggregateQuery(this.pageindex)
           this.tableData = res.data

            this.tong(res.data)
      },
      toggleFilter() {
        this.fut = !this.fut
      },
//       max() {
//         var chartDom = this.$refs.maxYe
//         var myChart = echarts.init(chartDom);

//         const option = {
//           color: ['#80FFA5'],
//           tooltip: {
//             trigger: 'axis',
//             axisPointer: {
//               type: 'cross',
//               label: {
//                 backgroundColor: '#6a7985'
//               }
//             }
//           },

//           grid: {
//             left: '0%',
//             right: '4%',
//             bottom: '1%',
//             top: '0%',
//             containLabel: true
//           },
//           xAxis: [{
//             type: 'category',
//             boundaryGap: false,
//             data: [],
//             axisLine: {
//               show: false
//             }, // 隐藏X轴线
// lineStyle: {
//         width: 0 // 将线条宽度设置为0以隐藏线条
//       },
//       itemStyle: {
//         borderWidth: 0 // 隐藏数据点的边框
//       },
//           }],
//            yAxis: [
//               {

//                 axisLine: { show: false }, // 隐藏Y轴线
//                 axisTick: { show: false }, // 隐藏Y轴刻度线
//                 splitLine: { show: false } ,// 隐藏Y轴分割线
//                 axisLabel: { show: false } // 隐藏Y轴刻度标签
//               }
//             ],
//           series: [{
//             name: 'Line 1',
//             type: 'line',
//             stack: 'Total',
//             smooth: true,
//             lineStyle: {
//               width: 0
//             },
//             showSymbol: false,
//             areaStyle: {
//               opacity: 0.8,
//               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
//                   offset: 0,
//                   color: 'rgb(128, 255, 165)'
//                 },
//                 {
//                   offset: 1,
//                   color: 'rgb(1, 191, 236)'
//                 }
//               ])
//             },
//             emphasis: {
//               focus: 'series'
//             },
//             data: [140, 232, 101, 264, 90, 340, 250]
//           }]
//         }
//         option && myChart.setOption(option)
//       },
      // min() {

      //         var chartDom = this.$refs.minYe
      //         var myChart = echarts.init(chartDom);

      //         const option = {
      //           color: ['#80FFA5'],
      //           tooltip: {
      //             trigger: 'axis',
      //             axisPointer: {
      //               type: 'cross',
      //               label: {
      //                 backgroundColor: '#6a7985'
      //               }
      //             }
      //           },

      //           grid: {
      //             left: '0%',
      //             right: '4%',
      //             bottom: '1%',
      //             top: '0%',
      //             containLabel: true
      //           },
      //           xAxis: [{
      //             type: 'category',
      //             boundaryGap: false,
      //             data: [],
      //             axisLine: {
      //               show: false
      //             }, // 隐藏X轴线
      // lineStyle: {
      //         width: 0 // 将线条宽度设置为0以隐藏线条
      //       },
      //       itemStyle: {
      //         borderWidth: 0 // 隐藏数据点的边框
      //       },
      //           }],
      //            yAxis: [
      //               {

      //                 axisLine: { show: false }, // 隐藏Y轴线
      //                 axisTick: { show: false }, // 隐藏Y轴刻度线
      //                 splitLine: { show: false } ,// 隐藏Y轴分割线
      //                 axisLabel: { show: false } // 隐藏Y轴刻度标签
      //               }
      //             ],
      //           series: [{
      //             name: 'Line 1',
      //             type: 'line',
      //             stack: 'Total',
      //             smooth: true,
      //             lineStyle: {
      //               width: 0
      //             },
      //             showSymbol: false,
      //             areaStyle: {
      //               opacity: 0.8,
      //               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //                   offset: 0,
      //                   color: 'rgb(128, 255, 165)'
      //                 },
      //                 {
      //                   offset: 1,
      //                   color: 'rgb(1, 191, 236)'
      //                 }
      //               ])
      //             },
      //             emphasis: {
      //               focus: 'series'
      //             },
      //             data: [140, 232, 101, 264, 90, 340, 250]
      //           }]
      //         }
      //         option && myChart.setOption(option)

      // },
      tong(datas){
                var chartDom = this.$refs.tongji
                var myChart = echarts.init(chartDom);
                let processedData = datas.map(item => ({
                  name: item.shopName,
                  value: item.earnestMoney || 0
                }))
                const option = {
         grid: {  // 图表距离边框的距离，可用百分比和数字（px）配置
            top: '5%',
            left: '3%',
            right: '10%',
            bottom: '5%',
            containLabel: true
        },

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

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

        series: [
          {

        data:processedData.map(item => item.value),
            type: 'line',
            symbol: 'circle', // 实心圆点
            smooth: 0.5, // 设置折线弧度
          }
        ],
        color: ['#3366CC'] // 三个折线的颜色
     }
                option && myChart.setOption(option)
      },
        resetting(){
this.formInline.belongingGreenwaySection = ''
this.getAll()

        },
       async search(){
          const res=  await aggregateQuery(this.formInline)
          this.tableData = res.data
           this.tong(res.data)

        },
    }
  }
</script>

<style lang="scss" scoped>
  .filter-container {
    border: 1px solid #EBEEF5;

  }

  .formSearch {
    max-height: 200px;
    /* 或者你想要的任何高度 */
    /* 过渡效果 */
    transition: height 0.3s ease-in-out;
    /* 动画的持续时间、类型 */
    overflow: hidden;
    /* 隐藏溢出的内容，这样高度变化时内容不会显示出来 */

  }

  .collapsed {
    margin-top: 0px;
    height: 0;
    transition: height 0.3s ease-in-out;
    /* 动画的持续时间、类型 */
    overflow: hidden;
    /* 隐藏溢出的内容，这样高度变化时内容不会显示出来 */
  }
</style>
