<template>
  <el-dialog
    :title="'【' + settlement.settleName + '】结算账单详情信息'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    v-if="visible"
    @close="dialogClose"
    :fullscreen="true">

    <el-collapse v-model="activeNames">
      <el-collapse-item title="材质结算详情" name="detail">
        <div class="main-container">
          <!-- 表格 -->
          <div class="table-con transport-table">
            <el-table
              ref="waveTable"
              :data="detailList"
              border
              header-cell-class-name="table-header"
              row-class-name="table-row-low"
              style="width: 100%">
              <el-table-column
                align="left"
                prop="prodName"
                width="300px"
                label="产品名称">
                <template slot-scope="scope">
                  <span class="table-cell-text">{{ scope.row.prodName }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="skuName"
                label="订单材质">
                <template slot-scope="scope">
                  <span class="table-cell-text">{{ scope.row.skuName }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="订单数量"
                align="center"
                prop="orderNums">
                <template slot-scope="scope">
                  <span>{{scope.row.orderNums }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="材质张数"
                align="center"
                prop="skuNums">
                <template slot-scope="scope">
                  <span>{{scope.row.skuNums }}</span>
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                prop="skuPrice"
                label="材质单价">
                <template slot-scope="scope">
                  <span>{{scope.row.skuPrice }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="skuAmount"
                label="小计金额">
                <template slot-scope="scope">
                  <span>{{scope.row.skuAmount }}</span>
                </template>
              </el-table-column>

              <!--<el-table-column
                align="center"
                :label="$t('crud.menu')"
                width="150"
              >
                <template slot-scope="scope">
                  <div style="display: inline-block;float: left;">
                    &lt;!&ndash;                  <el-button size="mini" @click="downloadWavePrintOrderPdf(scope.row)" :loading="wavePrintOrderPdfDownloadLoading" :disabled="scope.row.productionStatus == 0">下载PDF包</el-button>&ndash;&gt;
                    &lt;!&ndash;                  <el-button size="mini" :loading="wavePrintOrderInfoDownloadLoading" @click="downloadWavePrintOrderInfo(scope.row)" :disabled="scope.row.productionStatus == 0">下载订单信息</el-button>&ndash;&gt;
                    &lt;!&ndash;                  <el-button size="mini" @click="openScanDialog(scope.row)" :disabled="scope.row.productionStatus == 0">扫描发货</el-button>&ndash;&gt;
                  </div>
                  <div
                    class="default-btn text-btn operate-btn"
                    @click="openWaveDetailDialog(scope.row)">详情</div>
                  <div
                    class="default-btn text-btn"
                    @click="openWaveModifyDialog(scope.row)">
                    编辑
                  </div>
                </template>
              </el-table-column>-->
            </el-table>
          </div>

          <!-- 分页 -->
          <el-pagination
            v-if="detailList.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </div>
      </el-collapse-item>
    </el-collapse>

  </el-dialog>
</template>

<script>
  import {downloadXls} from "@/utils/excel";
  export default {
    components: {},
    data () {
      return {
        theData: null, // 保存上次点击查询的请求条件
        thirdSettleId: null,
        detailList: [],
        deliveryList: [],
        delivery: {},
        settlement: {},
        activeNames: 'detail',
        detailListLoading: false,
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 50 // 每页显示多少条
        },
        visible: false,
      }
    },
    created () {
      // this.getDetailDataList()
    },
    methods: {
      init (settlement) {
        this.visible = true;
        this.settlement = settlement;
        this.$nextTick(() => {
          if(settlement.thirdSettleId){
            //获取sku结算详情
            //获取快递结算详情
            this.getDetailDataList(this.page);
          }
        });
      },
      // 获取数据列表
      getDetailDataList (page, newData = false) {
        this.detailListLoading = true
        this.$http({
          url: this.$http.adornUrl('/printSettlement/thirdPrintSettlementDetail/page'),
          method: 'GET',
          params: this.$http.adornParams(
            Object.assign(
              {
                current: page == null ? this.page.currentPage : page.currentPage,
                size: page == null ? this.page.pageSize : page.pageSize,
                'thirdPrintSettlementId': this.settlement.thirdSettleId,
                'printChannel': this.settlement.printChannel
              },
            )
          )
        }).then(({data}) => {
          this.detailList = data.records
          this.page.total = data.total
          this.detailListLoading = false
        })
      },
      dialogClose(){

      },
      handleSizeChange (val) {
        this.page.pageSize = val
        this.getDetailDataList(this.page, false)
      },
      handleCurrentChange (val) {
        this.page.currentPage = val
        this.getDetailDataList(this.page, false)
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
