<!--
 * @Description: 分销订单信息
-->
<template>
  <el-dialog
    :title="subTitle"
    v-if="isShow"
    :visible.sync="isShow"
    width="90%"
    center
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
  >
    <div class="dialog">
      <!-- 表格 -->
      <!-- <el-button type="primary" style="margin-bottom: 10px;" @click="handleExport">导出</el-button> -->
      <div class="app-container-table-info">
        <el-table ref="tables" v-loading="isLoading" height="480px" :data="orderList" border>
          <el-table-column label="序号" align="center" type="index" width="60"></el-table-column>
          <el-table-column label="订单号" align="center" prop="orderId" width="170">
            <template slot-scope="scope">
              <span style="color: #1890ff;">{{ scope.row.orderId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="场次时间" align="center" prop="performDate" width="120" />
          <el-table-column label="场次" align="center" prop="timeSnapshot" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.timeSnapshot">{{ scope.row.timeSnapshot }} &nbsp;&nbsp;</span>
              <span>{{ scope.row.performTimeStart }} - {{ scope.row.performTimeEnd }}</span>
            </template>
          </el-table-column>
          <el-table-column label="票务名称" align="center" prop="goodsName" width="120" />
          <el-table-column label="支付时间" align="center" prop="payTime" width="170" />
          <el-table-column label="实付金额" align="center" prop="realPrice">
            <template slot-scope="scope">
              <span>{{ scope.row.realPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="购买数量" align="center" prop="retailNum" />
          <el-table-column label="核销数量" align="center" prop="usedNum" />
          <el-table-column label="佣金单价(元)" align="center" prop="retailPrice" width="120" />
          <el-table-column label="获得佣金" align="center" prop="brokeragePriceTotal" />
          <el-table-column label="新订单(改签/升舱)" align="center" prop="newOrderId" width="170">
            <template slot-scope="scope">
              <span style="color: #1890ff;">{{ scope.row.newOrderId }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

      </div>
      
    </div>
  </el-dialog>
</template>

<script>

import { 
  orderInfoList
} from '@/api/distribution/Withdrawl'

export default {
  name: "OrderInfo",
  data() {
    return {
      model: "ORDER",
      isShow: false,
      isLoading: false,
      subTitle: "分销订单信息",
      orderList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        withdrawIds: '',
      },
      total:0,
      
    };
  },
  methods: {
    // 打开弹框
    openDialog(title, obj) {
      this.isShow = true;
      this.subTitle = title;
      this.queryParams.withdrawIds = obj.withdrawIds;
      this.getList();
    },
    /** 获取子订单 */
    getList() {
      this.loading = true;
      orderInfoList(this.queryParams).then(res => {
        this.orderList = res.data.rows;
        this.total = res.data.total;
        this.isLoading = false;
      }).catch(()=>{
        this.orderList = [];
        this.isLoading = false;
      })
    },
    
    // 关闭弹框
    cancel() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.isShow = false;
    },
    
    
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  padding: 0 10px;
  // max-height: 90vh;
  // overflow-y: auto;
  
}

</style>
