<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-select  placeholder="全部"
                style="width: 168px;margin-right: 15px">
                <el-option label="1" value="1" />
              </el-select>
              </el-form-item>
              <el-form-item label="票种">
              <el-select  placeholder="全部"
                style="width: 168px;margin-right: 15px">
                <el-option label="1" value="1" />
              </el-select>
              </el-form-item>
            <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='padding:20px 10px;background-color:#fff;margin-bottom: 10px;'>
            <div style="display:flex;font-size:14px;justify-content: space-around">
              <div style="width:15%;border-right:1px solid #F2F3F5">
                <div style="margin-bottom: 10px;font-weight: 600;">渠道数量</div>
                <div style="font-weight: 600;">3</div>
              </div>
              <div style="width:15%;border-right:1px solid #F2F3F5">
                 <div style="margin-bottom: 10px;font-weight: 600;">票种数量</div>
                <div style="font-weight: 600;">3</div>
              </div>
              <div style="width:15%;border-right:1px solid #F2F3F5">
                 <div style="margin-bottom: 10px;font-weight: 600;">退票总数(张)</div>
                 <div style="font-weight: 600;">1000</div>
              </div>
              <div style="width:15%;border-right:1px solid #F2F3F5">
                <div style="margin-bottom: 10px;font-weight: 600;">退票总额(元)</div>
                 <div style="font-weight: 600;">100.00</div>
              </div>
              <div>
                <div style="margin-bottom: 10px;font-weight: 600;">平均退票率(%)</div>
                 <div style="font-weight: 600;">10</div>
              </div>

            </div>
          </div>
             <div style="background-color: #fff;padding: 10px;margin-bottom: 20px;">
          <div style="display: flex;margin-bottom: 20px;">
            <div style="width: 100%;padding: 10px 0;">各渠道票种销售及退票统计</div>
            <el-select  placeholder="全部证件"
              style="width: 120px;margin-right: 15px">
              <el-option label="1" value="1" />
            </el-select>
            <!-- <el-button     style="background-color: #3F9B6A;color: #fff;height: 27.5px;">导出</el-button> -->
          </div>
          <div class="table">
            <el-table
            :summary-method="getSummaries"
              :span-method="objectSpanMethod"
               show-summary
              :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
               :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
            >
              <el-table-column prop="id" label="序号" />
              <el-table-column label="渠道" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>站内信</span>
                </template>
              </el-table-column>
              <el-table-column prop="id" label="票种">
                <template slot-scope="scope">
                  <span>站内信</span>
                </template>
              </el-table-column>
              <el-table-column prop="amount1" label="退票数(张)" />
              <el-table-column prop="amount2" label="退票金额(元)" />
              <el-table-column prop="amount3" label="退票率(%)" />
              <!-- <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text"   style="background-color: transparent;color: #3F9B6A;;border: none;">详情</el-button>
                  <el-button type="text"   style="background-color: transparent;color: #3F9B6A;;border: none;">删除</el-button>
                </template>
              </el-table-column> -->
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="fenye">

            <el-pagination class="pagination" :hide-on-single-page="flag" background small :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total,prev, pager,next" :total="total "
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
       </div>
        </div>
      </div>

  </div>
</template>

<script>

export default {
  data() {
    return {
      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: '345',
                amount1: '234',
                amount2: '3.2',
                amount3: 10
              }, {
                id: '1',
                name: '12',
                amount1: '165',
                amount2: '4.43',
                amount3: 12
              }, {
                id: '2',
                name: '123',
                amount1: '324',
                amount2: '1.9',
                amount3: 9
              }, {
                id: '2',
                name: '444',
                amount1: '6',
                amount2: '2.2',
                amount3: 17
              }, {
                id: '3',
                name: '123',
                amount1: '5',
                amount2: '4.1',
                amount3: 15
              }],
      rules: {
        noticeType: [
          { required: true, message: '请选择消息类型', trigger: 'change' }
        ]
      },

    }
  },
  mounted() {
    this.getAll()
  },
  methods: {
    getSummaries(param) {
          const { columns, data } = param;
          const sums = [];
          columns.forEach((column, index) => {
            if (index === 0) {
              sums[index] = '总计';
              return;
            }
            if (['销售数量(张)', '客单价(元)', '销售金额(元)'].includes(column.label)) {
              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);
              } else {
                sums[index] = '';
              }
            } else {
              sums[index] = '';
            }
          });

          return sums;
        }
        },
        handleCurrentChange(val) {
          this.currentPage = val
        },
        handleSizeChange(val) {
          this.pageSize = val
        },
         objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0) {
                  if (rowIndex % 2 === 0) {
                    return {
                      rowspan: 2,
                      colspan: 1
                    };
                  } else {
                    return {
                      rowspan: 0,
                      colspan: 0
                    };
                  }
                }
              }
 }
</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 .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;
}
  .pagination {
      text-align: right;
      line-height: 20px;
    }
  .greens {
      color: #3F9B6A;
    }

    /deep/ .el-table__row {
      font-size: 14px;
      color:#000000e6;
      height:42px;
    }

    .fenye {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
    ::v-deep .el-pagination__total{
          position: absolute;
          left: 60px;
    }
    ::v-deep .buttonHover:hover{
      color:#3f9b6a !important;
      border-color: #c5e1d2 !important;
      background-color: #ecf5f0 !important;
      outline: none;
    }
</style>
<style>
.el-tooltip__popper {
  max-width: 50%;
}
</style>
