
<template>
  <div class="dataList app-container">

    <div class="title-box">
        <div class="title">{{info.activityName}}</div>

        <div class="data-box">
            <div class="value">活动时间：{{info.activityStartTime}} 至 {{info.activityEndTime}}</div>
            <div class="value">报名时间：{{info.signupStartTime}} 至 {{info.signupEndTime}}</div>
            <div class="value">报名费用：{{info.price}}元</div>
        </div>
    </div>
  
    <div class="export-box">
         <el-button
            type="primary"
            size="small"
            :disabled="total == 0"
            @click="handleExport"
            :loading="downloadLoading"
        >
            导出数据
        </el-button>
    </div>
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      border
      v-loading="loading"
      style="width: 100%"
    >
    <template v-for="(item,index) in tableData[0]">
      <el-table-column
        v-if="index != 'ID'"
        :key="index"
        align="center"
        :label="index"
        :prop="index"
        show-overflow-tooltip
      >
      </el-table-column>
    </template>
      <!-- <el-table-column
        align="center"
        label="性别"
        prop="orderNo"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="手机号"
        prop="orderNo"
        show-overflow-tooltip
      >
      </el-table-column>
       <el-table-column
        align="center"
        label="报名时间"
        prop="orderNo"
        show-overflow-tooltip
      >
      </el-table-column>
       <el-table-column
        align="center"
        label="订单编号"
        prop="orderNo"
        show-overflow-tooltip
      >
      </el-table-column>
       <el-table-column
        align="center"
        label="支付金额（元）"
        prop="orderNo"
        show-overflow-tooltip
      >
      </el-table-column>
       <el-table-column
        align="center"
        label="状态"
        prop="orderNo"
        show-overflow-tooltip
      >
      </el-table-column>
       <el-table-column
        align="center"
        label="操作员"
        prop="orderNo"
        show-overflow-tooltip
      >
      </el-table-column> -->
      
       <el-table-column prop="address" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" v-if="scope.row.状态 == '待核销'" @click="handleAudit(scope.row)">核销</el-button>
          <el-button type="text" size="small" v-if="scope.row.状态 == '申请退款'" @click="handleRefund(scope.row)">退款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="query.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
  <script>
  import {debounce} from '@/utils/index'
  import {activityDetail,getSignUpData,refund,verification} from '@/api/activity'

  import {timeFormat} from '@/utils/index'
export default {
  name: "dataList",
  data() {
    return {
      tableData: [],
      loading: false,
      downloadLoading: false,
      list:[],
      info:{},
      query: {
        "activityId": '',
        "currentPage": 1,
        "pageSize": 10,
      },
      title: "",
      total: 0,
    };
  },
  methods: {
    filterType(val) {
       if(!val){
          return "无"
      }
      else if(val == 'APPLY_REFUND'){
          return "申请退款"
      }else if(val == 'CLOSE'){
          return "关闭订单"
        
      }else if(val == 'REFUNDED'){
          return "已退款"
        
      }else if(val == 'REFUSAL_REFUND'){
          return "拒绝退款"
        
      }else if(val == 'APPLY_REFUNDING'){
          return "退款中"
        
      }else if(val == 'USED'){
          return "已使用"
        
      }else if(val == 'WAIT_PAYMENT'){
          return "待付款"
        
      }else if(val == 'WAIT_USE'){
          return "待核销"
      }
    },
    handleAdd(){
        this.$router.push({
            path:'/operationManage/dataList/addActivity',
            query:{
            mode:'add',
            }
        })
    },
    handleExport() {
      this.downloadLoading = true
      let query = JSON.parse(JSON.stringify(this.query))
      query.currentPage = 1
      query.pageSize = this.total
       getSignUpData(query).then(res=>{
        this.loading = false
        if(res.state == 'Success'){
          this.list = []
          res.content.records.map(item=>{
            if(item.data.length){

              let obj = {}
              // obj.ID = item.data[0].serviceId
              obj.订单号 = item.data[0].orderNo
  
              item.data.map(i=>{
                if(i.content.length>1){
                  obj[i.dataName] = i.content.join(',')
  
                }else{
                  obj[i.dataName] = i.content
                }
              })
              obj.报名时间 = item.data[0].signupTime
              obj['支付金额（元）'] = this.info.price
              obj.状态 = this.filterType(item.data[0].status) 
              this.list.push(obj)
            }
          })
          this.Export()
        }
      })
      
    },
    Export(){
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = []
        for (const key in this.list[0]) {
          if (Object.hasOwnProperty.call(this.list[0], key)) {
            tHeader.push(key)
          }
        }
        const multiHeader = [[`活动时间：${this.info.activityStartTime} 至 ${this.info.activityEndTime}`,`报名时间：${this.info.signupStartTime} 至 ${this.info.signupEndTime}`,`报名费用：${this.info.price}元`]]
        tHeader.map((item,index)=>{
          if(!multiHeader[0][index]){
            multiHeader[0][index] = ''
          }
        })
        const data = this.formatJson(tHeader, this.list)
        // console.log(data);
        // let data = [[1,2,3,4,5]]
        excel.export_json_to_excel({
          multiHeader,
          header: tHeader,
          data,
          filename: this.info.activityName,
          // autoWidth: false,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    timeFormat(val){
      return timeFormat(val)
    },
    handleRefund(row){
      console.log(row);
       this.$confirm(`此操作将退款给用户, 是否继续?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
          refund({orderNo:row.订单号,id:row.ID}).then(res=>{
            if(res.state == 'Success'){
               this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
              });
            }
          })
        })
    },
    handleAudit(row){
         this.$confirm(`此操作将核销该数据, 是否继续?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
          verification({orderNo:row.订单号,id:row.ID}).then(res=>{
            if(res.state == 'Success'){
              this.handleCurrentChange(1)
                 this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
              });
            }
          })
        })
    },
    handleSizeChange(val) {
      this.query.currentPage = 1;
      this.query.pageSize = val;
      this.getSignUpData()
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.getSignUpData()
    },
    activityDetail(){
      this.loading = true
      let id = this.$route.query.id
      activityDetail({id}).then(res=>{
        this.loading = false
        if(res.state == 'Success'){
          this.info = res.content
        }
      })
    },
     getSignUpData(){
      this.loading = true
      this.query.activityId = this.$route.query.id
      getSignUpData(this.query).then(res=>{
        this.loading = false
        if(res.state == 'Success'){
          this.tableData = []
          let list = res.content.records
          list.map(item=>{
            console.log(item);
            if(item.data.length){
              let obj = {}
              
              obj.ID = item.data[0].serviceId 
              obj.订单号 = item.data[0].orderNo 
  
              item.data.map(i=>{
                if(i.content.length>1){
                  obj[i.dataName] = i.content.join(',')
  
                }else{
                  obj[i.dataName] = i.content
                }
              })
              obj.报名时间 = item.data[0].signupTime
              obj['支付金额（元）'] = this.info.price
              obj.状态 = this.filterType(item.data[0].status) 
              this.tableData.push(obj)
            }
          })
          this.total = res.content.total
        }
      })
    }
  },
  created() {
   this.activityDetail()
   this.getSignUpData()
  },
};
</script>
  
<style lang="scss" >
.dataList {
    .title-box{
        color: #222;
        .title{
            font-size: 18px;
            font-weight: 600;

        }
        .data-box{
            display: flex;
            align-items: center;
            font-size: 14px;
            padding: 20px 0;
            .value{
                margin-right: 20px;
            }
        }
    }

    .export-box{
        display: flex;
        justify-content: flex-end;
    }
}

</style>
  