<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="pageIndex">
             <el-form-item label="渠道">
               <el-select  placeholder="全部"
                 v-model="pageIndex.ticketChannel"
                 style="width: 120px;margin-right: 15px">
                <el-option v-for="(item,index) in type" :label="item==1?'有赞':'其他'" :value="item" />
               </el-select>
               </el-form-item>
               <el-form-item label="票种">
                 <el-select  placeholder="全部"   v-model="pageIndex.ticketType"
                   style="width: 120px;margin-right: 15px">
              <el-option v-for="(item,index) in listType" :label="item" :value="item" />
                 </el-select>
                 </el-form-item>
             <el-form-item label="日期">
               <el-date-picker
                 v-model="pageIndex.list"
                 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"  style="background-color: #3F9B6A;color: #fff;">查询</el-button>
               <el-button  @click="clear" class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
             </el-form-item>

           </el-form>
         </div>
     </div>
     <div style="margin-bottom: 20px;">
       <el-button  style="background-color: #3F9B6A;color: #fff" @click="daochu">导出</el-button>
     </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 class="table">
            <el-table
            :summary-method="getSummaries"

               show-summary
              :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
             :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
            >
        <el-table-column label="序号" min-width="50">
             <template slot-scope="scope">
                 {{scope.$index +1}}
                                 </template>
             </el-table-column>
             <el-table-column prop="ticketChannel" label="渠道" min-width="60">
<template slot-scope="scope">
			    {{scope.row.ticketChannel == '1'?'有赞':'其他'}}
			                    </template>
             </el-table-column>
        <el-table-column prop="ticketType" label="票种" min-width="60"/>
        <el-table-column prop="ticketName" label="票名" min-width="150" :show-overflow-tooltip="true"/>
        <el-table-column prop="num" label="销售数量(张)" />
        <el-table-column prop="ticketPrice" label="客单价(元)" />
        <el-table-column prop="price" 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>
import {getSalesParticular,excelToSalesParticular} from '@/api/piaowu'
export default {
  data() {
    return {
		flag:false,
      list: [],
      total: 1,
      pageSize: 10,
      currentPage: 1,
      tipsList: [],
       tableData: [],
 pageIndex:{
        list: [],
            page: 1,
            pageSize: 10,
            startTime:"",
            endTime:"",
            ticketChannel:"",
            ticketType:""
        },
		type:[],
		listType:[]

    }
  },
  mounted() {
    this.getAll()
	getSalesParticular(this.pageIndex).then(res=>{
		this.type = this.extractAndDeduplicateTicketChannels(res.data)
		this.listType = this.listype(res.data)
	})
  },
  methods: {
    async getAll(){
      let res =   await getSalesParticular(this.pageIndex)
      this.tableData = res.data
      this.total = res.data.length


      },
	  extractAndDeduplicateTicketChannels(arr) {
	  	const ticketChannels = [];
	  	for (let i = 0; i < arr.length; i++) {
	  		if (arr[i].hasOwnProperty('ticketChannel')) {
	  			ticketChannels.push(arr[i].ticketChannel);
	  		}
	  	}
	  	return [...new Set(ticketChannels)];
	  },
	  listype(arr) {
	  	const ticketChannels = [];
	  	for (let i = 0; i < arr.length; i++) {
	  		if (arr[i].hasOwnProperty('ticketType')) {
	  			ticketChannels.push(arr[i].ticketType);
	  		}
	  	}
	  	return [...new Set(ticketChannels)];
	  },
      search(){
        if(this.pageIndex.list.length !=0){
          this.pageIndex.startTime = this.pageIndex.list[0]
          this.pageIndex.endTime = this.pageIndex.list[1]
        }
        this.getAll()
      },
      clear(){
        this.pageIndex = {
          list: [],
              page: 1,
              pageSize: 10,
              startTime:"",
              endTime:"",
              ticketChannel:"",
              ticketType:""
          }
          this.getAll()
      },
    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;

        },
       async daochu(){
  let res = await excelToSalesParticular(this.pageIndex)
  if(!res){
    return
  }
  const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
  const fileName = '销售额明细表.xls'
  if ('download' in document.createElement('a')) {
     // 非IE下载
     const elink = document.createElement('a')
     elink.download = fileName
     elink.style.display = 'none'
     elink.href = URL.createObjectURL(blob)
     document.body.appendChild(elink)
     elink.click()
     URL.revokeObjectURL(elink.href) // 释放URL 对象
     document.body.removeChild(elink)
   } else {
    // IE10+下载
    navigator.msSaveBlob(blob, fileName)
  }
  this.$message({
    message: '导出成功',
    type: 'success'
  })

        },
        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 .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>
