<template>
  <div class="detail-content">
    <div>
      <div
        v-if="!isDaochu"
        style="text-align: center; font-size: 25px; margin: 10px 0"
      >
        {{ $route.query.jyrq }}{{ $route.query.wtfmc }}{{ $route.query.jylxmc
        }}{{ $route.query.pzmc }}{{ $route.query.apcc }}手续费统计表
      </div>
      <table
        id="outTable"
        style="width: 100%; text-align: center"
        cellpadding="2"
        cellspacing="0"
        border="1"
      >
        <tr>
          <td v-if="isDaochu" colspan="11">
            {{ $route.query.jyrq }}{{ $route.query.wtfmc
            }}{{ $route.query.jylxmc }}{{ $route.query.pzmc
            }}{{ $route.query.apcc }}手续费统计表
          </td>
        </tr>
        <tr>
          <td>合同号</td>
          <td>成交单位</td>
          <td>单价(元/吨)</td>
          <td>数量(吨)</td>
          <td>成交金额(元)</td>
          <td>手续费(元)</td>
          <td>预交保证金(元)</td>
          <td>冻结资金(元)</td>
          <td>可清退保证金(元)</td>
          <td>交割日期</td>
          <td>备注</td>
        </tr>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.htbh }}</td>
          <td
            v-if="item.rowShow != 1"
            :rowspan="item.rowspanMerge"
            :key="index"
          >
            {{ item.cjdw }}
          </td>
          <td>{{ item.dj }}</td>
          <td>{{ item.sl }}</td>
          <td>{{ item.cjje }}</td>
          <td>{{ item.sxf }}</td>
          <td
            v-if="item.rowShow != 1"
            :rowspan="item.rowspanMerge"
            :key="index"
          >
            {{ item.yjbzj }}
          </td>
          <td>{{ item.djzj }}</td>
          <td
            v-if="item.rowShow != 1"
            :rowspan="item.rowspanMerge"
            :key="index"
          >
            {{ item.kqtbzj }}
          </td>
          <td>{{ item.jgrq }}</td>
          <td>{{ item.bz }}</td>
        </tr>
      </table>
      <!-- <el-table :data="tableData" border stripe tooltip-effect="dark">
        <el-table-column
          prop="htbh"
          label="合同号"
          align="center"
          width="60"
        ></el-table-column>
        <el-table-column
          prop="cjdw"
          label="成交单位"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="dj"
          label="单价(元/吨)"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="sl"
          label="数量(吨)"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="cjje"
          label="成交金额(元)"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="sxf"
          label="手续费(元)"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="yjbzj"
          label="预交保证金"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="djzj"
          label="冻结资金(元)"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="kqtbzj"
          label="可清退保证金(元)"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="jgrq"
          label="交割日期"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="bz"
          label="备注"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
      </el-table> -->
    </div>

    <el-row class="btn-footer">
      <el-button
        type="primary"
        icon="iconfont icondaochu11"
        v-if="isDaochu"
        @click="doDaochu"
        >导出</el-button
      >
      <el-button
        type="primary"
        icon="iconfont iconfanhui"
        @click="$router.push('index')"
        >返回</el-button
      >
    </el-row>
  </div>
</template>
  
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
import { selectTurnoverSxfDetail } from "@/api/transaction/trading/serviceChargeStatistics/index";

export default {
  data() {
    return {
      tableData: [],
      // tableData: [
      //   {
      //     htbh: "1",
      //     cjdw: "2",
      //     dj: "1",
      //     cjje: "1",
      //     sl: "1",
      //     sxf: "1",
      //     yjbzj: "1",
      //     djzj: "1",
      //     kqtbzj: "1",
      //     jgrq: "1",
      //     bz: "1",
      //     // rowspanMerge: 2,
      //   },
      //   {
      //     htbh: "1",
      //     cjdw: "2",
      //     dj: "1",
      //     cjje: "1",
      //     sl: "1",
      //     sxf: "1",
      //     yjbzj: "1",
      //     djzj: "1",
      //     kqtbzj: "1",
      //     jgrq: "1",
      //     bz: "1",
      //     // rowShow: 1,
      //   },
      //   {
      //     htbh: "1",
      //     cjdw: "1",
      //     dj: "1",
      //     cjje: "1",
      //     sl: "1",
      //     sxf: "1",
      //     yjbzj: "1",
      //     djzj: "1",
      //     kqtbzj: "1",
      //     jgrq: "1",
      //     bz: "1",
      //   },
      //   {
      //     htbh: "1",
      //     cjdw: "3",
      //     dj: "1",
      //     cjje: "1",
      //     sl: "1",
      //     sxf: "1",
      //     yjbzj: "1",
      //     djzj: "1",
      //     kqtbzj: "1",
      //     jgrq: "1",
      //     bz: "1",
      //   },
      //   {
      //     htbh: "1",
      //     cjdw: "3",
      //     dj: "1",
      //     cjje: "1",
      //     sl: "1",
      //     sxf: "1",
      //     yjbzj: "1",
      //     djzj: "1",
      //     kqtbzj: "1",
      //     jgrq: "1",
      //     bz: "1",
      //   },
      //   {
      //     htbh: "1",
      //     cjdw: "4",
      //     dj: "1",
      //     cjje: "1",
      //     sl: "1",
      //     sxf: "1",
      //     yjbzj: "1",
      //     djzj: "1",
      //     kqtbzj: "1",
      //     jgrq: "1",
      //     bz: "1",
      //   },
      // ],
      isDaochu: false,
    };
  },
  created() {
    if (this.$route.query.state == "daochu") {
      this.isDaochu = true;
    } else {
      this.isDaochu = false;
    }
    this.getDetail();

    // console.log(this.tableData, "this.tableData");
  },
  methods: {
    getDetail() {
      selectTurnoverSxfDetail({ jgbm: this.$route.query.jgbm }).then((res) => {
        if (res.infoCode == 200) {
          this.tableData = res.data;
          let str = "";
          let numSum = 1;
          let data = {
            htbh: "合计",
            cjdw: "",
            dj: "",
            cjje: 0,
            sl: 0,
            sxf: 0,
            yjbzj: "",
            djzj: "",
            kqtbzj: "",
            jgrq: "",
            bz: "",
          };
          this.tableData.map((item) => {
            this.$set(item, "rowspanMerge", 1);
            this.$set(item, "rowShow", "2");

            item.sxf = item.sxf ? Math.floor(item.sxf * 100) / 100 : 0;
            item.djzj = item.djzj ? Math.floor(item.djzj * 100) / 100 : 0;
            item.kqtbzj = item.kqtbzj ? Math.floor(item.kqtbzj * 100) / 100 : 0;
            item.yjbzj = item.yjbzj ? Math.floor(item.yjbzj * 100) / 100 : 0;
          });
          this.tableData.map((item, index) => {
            if (item.htbh != "委托方") {
              data.sl += +item.sl;
              data.cjje += +item.cjje;
              data.sxf += +item.sxf;
            }

            // debugger;
            if (item.cjdw == str) {
              numSum = numSum + 1;
              this.$set(item, "rowShow", "1");
            } else {
              if (numSum != 1) {
                this.$set(
                  this.tableData[+index - +numSum],
                  "rowspanMerge",
                  +numSum
                );
              }
              str = item.cjdw;
              numSum = 1;
            }
          });
          this.tableData.unshift(data);
        }
      });
    },
    doDaochu() {
      let text = document.getElementById("outTable");
      console.log(text, "----text");
      let vb = XLSX.utils.table_to_book(document.getElementById("outTable"));
      let vbout = XLSX.write(vb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([vbout], { type: "application/octet-stream" }),
          `手续费统计表.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") {
          console.log(e, vbout);
        }
      }
      return vbout;
    },
  },
};
</script>
  
<style scoped>
#outTable td {
  font-size: 16px;
}
.detail-content {
  padding: 20px 50px;
}
.btn-footer {
  text-align: center;
  margin: 20px;
}
</style>
  