<template>
    <div v-loading="loading">
        <div class="white-box">
            <el-table class="withdraw-table" :data="tableData" :max-height="maxHeight" style="width: 100%;" :span-method="objectSpanMethod">
              <el-table-column width="120" label="Product Code" prop="SKU_CODE"></el-table-column><!--商品编号-->
              <el-table-column width="120" label="Product Name" prop="GOODS_TITLE"></el-table-column><!--商品名称-->
              <el-table-column width="120" label="Order Type" prop="ORDER_TYPE"></el-table-column>
              <el-table-column width="120" label="Product Price" prop="REAL_PRICE"><!--商品价格-->
              </el-table-column>
              <el-table-column width="120" label="Product BV"><!--商品BV-->
                <template slot-scope="props">
                  <span v-if="![4, 5, 6].includes(props.row.CATEGORY_TYPE)">{{ Math.round(props.row.REAL_PV * props.row.BUY_NUMS * 100) / 100 }}</span>
                  <span v-else>0</span>
                </template>
              </el-table-column>
                <el-table-column width="120" label="Qty" prop="BUY_NUMS"></el-table-column><!--数量-->

                <el-table-column width="120" label="Tax Rate" prop="TAX_RATE"></el-table-column><!--税率-->
                <el-table-column width="120" label="Tax" prop="TAX_AMOUNT"></el-table-column><!--税额-->
                <el-table-column width="120" label="Total Price" prop="TOTAL_AMOUNT"></el-table-column><!--税额-->
                <el-table-column width="150" label="Product Category" prop="CATEGORY"></el-table-column><!--商品分类-->
                <el-table-column width="120" label="Order Code" prop="SN"></el-table-column><!--订单编号-->
                <el-table-column width="120" label="Member Code" prop="USER_NAME"></el-table-column><!--会员编号-->
                <el-table-column width="120" label="Member Name" prop="REAL_NAME"></el-table-column><!--会员姓名-->
                <el-table-column width="130" label="Recipient name" prop="CONSIGNEE"></el-table-column><!--收货人-->
                <el-table-column width="120" label="Phone Number" prop="MOBILE"></el-table-column><!--收货电话-->
                <el-table-column width="150" label="Shipping Address" prop="FULL_ADDRESS"></el-table-column><!--收货地址-->
                <el-table-column label="Payment" prop="PAY_TYPE"></el-table-column>
                <el-table-column width="120" label="Created time" prop="CREATED_AT"></el-table-column>
                <el-table-column width="120" label="Pay time" prop="PAY_AT"></el-table-column>
                <el-table-column width="120"  label="Pay Status" prop="STATUS"></el-table-column>
                <el-table-column width="120" label="Action"><!--操作-->
                  <template slot-scope="scope">
                      <el-button type="primary" size="small" @click.native="handleOrderExportPDF(scope.row.SN)">Export PDF</el-button><!--导出 PDF-->
                  </template>
                </el-table-column>
            </el-table>
            <div class="white-box-footer">
                <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import network from '@/utils/network'
    import tool from '@/utils/tool'
    import Pagination from '@/components/Pagination'
    import {SERVER_API_HTTP_TYPE, SERVER_API_DOMAIN,SERVER_API_PORT} from '@/utils/config'
    export default {
        name: "order-list",
        components: {Pagination},
        mounted() {
            this.getData();

        },
        data() {
            return {
                loading: false,
                form:{

                },
                tableData:null,
                list: null,
                currentPage: 1,
                totalPages: 1,
                totalCount: 1,
                pageSize: 20,
                tool: tool,
                //订单号判断
                spanArr: [], // 用于存放需要合并的行的个数
                pos: 0, // 记录spanArr数组的下标
                maxHeight: tool.getTableHeight(),
            }
        },


        methods: {

  //
      objectSpanMethod(obj) {

        if (obj.columnIndex > 8) {
          // ⼆维数组存储的数据取出
          var _row = this.spanArr[obj.rowIndex];
          var _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col,
          };
        } else {
          return false;
        }
      },
      getSpanArr(orderList) {//传⼊你的列表数据
        this.pos = 0;
        orderList.forEach((item, index) => {

          //判断是否是第⼀项
          if (index === 0) {
            this.spanArr.push(1);
            this.pos = 0;
          } else {
            //不是第⼀项时，就根据标识去存储
            if (//orderSn，createdAt...是你的第⼀个数据、第⼆个数据...
              // orderList[index].CATEGORY === orderList[index - 1].CATEGORY &&
              orderList[index].CATEGORY === orderList[index - 1].CATEGORY &&
              orderList[index].ORDER_SN === orderList[index - 1].ORDER_SN &&
              orderList[index].USER_NAME === orderList[index - 1].USER_NAME &&
              orderList[index].REAL_NAME === orderList[index - 1].REAL_NAME &&
              orderList[index].CONSIGNEE === orderList[index - 1].CONSIGNEE &&
              orderList[index].MOBILE === orderList[index - 1].MOBILE &&
              orderList[index].PAY_AT === orderList[index - 1].PAY_AT &&
              orderList[index].STATUS === orderList[index - 1].STATUS &&
              orderList[index].PAY_TYPE === orderList[index - 1].PAY_TYPE &&
              orderList[index].CREATED_AT === orderList[index - 1].CREATED_AT
            ) {
              // 查找到符合条件的数据时每次要把之前存储的数据+1
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              // 没有符合的数据时，要记住当前的index
              this.spanArr.push(1);
              this.pos = index;
            }
          }
        });
      },






            handleCurrentChange (page) {
                this.getData(page, this.pageSize)
            },
            handleSizeChange (pageSize) {
                this.getData(this.currentPage, pageSize)
            },
            getData(page, pageSize) {
                 this.spanArr = [];
                 this.pos = 0;
                let _this = this
                network.getPageData(_this, 'shop/order-list', page, pageSize, {type: this.type}, function (response) {

                    _this.loading = false;

                    _this.list = response.list;

                    let settingObj=_this.list;

                    let settingArr = Object.keys(settingObj).map(key => {

                        //console.log(key); //为每个键名
                        return settingObj[key];  //把每个对象返回出去生成一个新的数组中相当于0:{id:1}
                    } );

                    _this.tableData=settingArr;
                   // console.log('11111',_this.tableData);
                    _this.getSpanArr(_this.tableData);

                });
            },
            // 导出PDF订单
            handleOrderExportPDF (orderSn) {
                network.getData(`shop/order-export/${orderSn}`).then(response => {
                    let { fileUrl, targetName } = response

                    let downloadElement = document.createElement('a')
                    downloadElement.target = '_blank'
                    downloadElement.href = SERVER_API_HTTP_TYPE + SERVER_API_DOMAIN + SERVER_API_PORT + '/' + fileUrl
                    // 下载后文件名
                    downloadElement.download = targetName
                    //点击下载
                    downloadElement.click()
                })
            },
        }
    }
</script>
<style scoped>

</style>
