<!-- 计费账单 -->
<template>
  <div id="detailsStatement">
    <div class="top">
      <el-form inline="true">
        <el-form-item>
          <el-input v-model="shipName" placeholder="请输入船名"></el-input>
        </el-form-item>
        <el-form-item>
          <span class="demonstration">结算日期</span>
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="onClick">查询</el-button>
        </el-form-item>
        <el-form-item>
          <span class="totalWillTonage">合计已预开票吨位</span>
          <el-input
            v-model="totalWillTonageedValue"
            disabled
            style="width:80px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <span class="totalWillTonage">合计已预开金额</span>
          <el-input
            v-model="totalWillTonageedMoney"
            disabled
            style="width:80px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <span class="totalWillTonage">合计本次实际开票吨位</span>
          <el-input
            v-model="totalActuallyTonageedValue"
            disabled
            style="width:80px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <span class="totalWillTonage">合计本月实际开票金额</span>
          <el-input
            v-model="totalActuallyTonageedMoney"
            disabled
            style="width:80px"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="未结算" name="first">
          <el-table
            :data="tableData"
            ref="tableRef"
            border
            stripe
            style="width: 100%; margin-top: 20px"
            max-height="800px"
            :row-style="{ height: '30px' }"
            :cell-style="{ fontWeight: '700' }"
            :summary-method="getSummaries"
            show-summary
            class="table"
          >
            <el-table-column
              prop="index"
              width="50"
              label="序号"
              align="center"
              :resizable="false"
            >
              <template slot-scope="scope">{{ scope.row.group + 1 }}</template>
            </el-table-column>
            <el-table-column
              prop="materialTypeName"
              label="品种"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="shipName"
              label="船名"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="portName"
              label="放货港口"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="carrierName"
              label="承运单位"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="leavePortDate"
              label="离港日期"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="loadShipTon"
              label="装船吨位"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="loadShipPer"
              label="装船比例"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="billTon"
              label="结算吨位"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="enFatoryTon"
              label="到厂湿吨"
              width="200px"
              align="center"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.enFatoryTon"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="contractPrice"
              label="合同单价"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="statementAmount"
              label="金额(元)"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="willTonanged"
              label="已预开票吨位"
              width="200px"
              align="center"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.willTonanged"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="willMoneyed"
              label="已预开票金额"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="actuallyMoney"
              label="本次实际开票吨位"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="actuallyMoney"
              label="本次实际开票吨位"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="actuallyMonthMoney"
              label="本月实际开票金额"
              width="200px"
              align="center"
            >
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已结算" name="second">
          <el-table
            :data="tableData1"
            ref="tableRef1"
            border
            stripe
            style="width: 100%; margin-top: 20px"
            max-height="800px"
            :row-style="{ height: '30px' }"
            :cell-style="{ fontWeight: '700' }"
            :summary-method="getSummaries"
            show-summary
            class="table"
          >
            <el-table-column
              prop="index"
              width="50"
              label="序号"
              align="center"
              :resizable="false"
            >
              <template slot-scope="scope">{{ scope.row.group + 1 }}</template>
            </el-table-column>
            <el-table-column
              prop="materialTypeName"
              label="品种"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="shipName"
              label="船名"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="portName"
              label="放货港口"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="carrierName"
              label="承运单位"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="leavePortDate"
              label="离港日期"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="loadShipTon"
              label="装船吨位"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="loadShipPer"
              label="装船比例"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="billTon"
              label="结算吨位"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="enFatoryTon"
              label="到厂湿吨"
              width="200px"
              align="center"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.enFatoryTon"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="contractPrice"
              label="合同单价"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="statementAmount"
              label="金额(元)"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="willTonanged"
              label="已预开票吨位"
              width="200px"
              align="center"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.willTonanged"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="willMoneyed"
              label="已预开票金额"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="actuallyMoney"
              label="本次实际开票吨位"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="actuallyMoney"
              label="本次实际开票吨位"
              width="200px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="actuallyMonthMoney"
              label="本月实际开票金额"
              width="200px"
              align="center"
            >
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      totalWillTonageedValue: 0,
      totalWillTonageedMoney: 0,
      totalActuallyTonageedMoney: 0,
      totalActuallyTonageedValue: 0,
      shipName: null,
      tableData: null,
      spanArr: [],
      mergeList: [
        "index",
        "carrierName",
        "portName",
        "shipName",
        "materialTypeName",
        "enFatoryTon"
      ],
      activeName: "first",
      tableTitle: "结算账单报表"
    };
  },
  methods: {
    //根据表格据汇总顶部展示
    getTotalArr(data) {
      this.totalWillTonageedValue = data.reduce((pre, item) => {
        return pre + item.willTonanged;
      }, 0);
      this.totalWillTonageedMoney = data.reduce((pre, item) => {
        return pre + item.willMoneyed;
      });
      this.totalActuallyTonageedValue = data.reduce((pre, item) => {
        return pre + item.actuallyMoney;
      });
      this.totalActuallyTonageedMoney = data.reduce((pre, item) => {
        return pre + item.actuallyMonthMoney;
      });
    },
    onClick() {},
    //获取未结算账单数据
    getNoDetailsStament() {},
    getDetailsStamented() {},
    //合并表格数据
    getSpanArr(data) {
      //每次调用方法初始化
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          data[i].group = i;
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].saleOrderId === data[i - 1].saleOrderId) {
            this.spanArr[this.pos] += 1;
            data[i].group = data[i - 1].group;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
            data[i].group = data[i - 1].group + 1;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.mergeList.includes(column.property)) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    //导出账单数据
    exportAllReportToExcel() {
      console.log(this.$refs.tableRef);
      const loading = this.$loading({
        lock: true,
        text: "正在导出Excel",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      var title = this.tableTitle;
      let tHeader = [];
      let filterVal = [];
      let data = [];
      if (this.activeName == "first") {
        data = this.$refs.tableRef.$children;
      } else {
        data = this.$refs.tableRef1.$children;
      }
      data.forEach(item => {
        if (item.label != undefined && item.prop != undefined) {
          if (tHeader.indexOf(item.label) === -1) {
            tHeader.push(item.label);
          }
          if (filterVal.indexOf(item.prop) === -1) {
            filterVal.push(item.prop);
          }
        }
      });
      this.downloadLoading = true;
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require("@/assets/excel/Export2Excel.js"); //这里必须使用绝对路径，使用@/+存放export2Excel的路径
        let data = this.tableData.map(v => filterVal.map(j => v[j])); //3.formatJson格式转换
        export_json_to_excel(tHeader, data, title); // (title)导出的表格名称
      });
      loading.close();
    }
  },
  mounted() {
    this.getNoDetailsStament();
    this.getDetailsStamented();
  }
};
</script>
<style lang="scss" scoped>
#detailsStatement {
  .top {
    margin-left: 10px;
    margin-top: 30px;
  }
}
</style>
