<template>
  <div class="content-main">
    <h2
      style="
        font-weight: 600;
        font-size: 24px;
        text-align: center;
        margin-bottom: 10px;
      "
    >
      手续费统计表
    </h2>
    <el-row class="row_form">
      <el-col :span="12">
        <span>场次：{{detailInfo.apcc}}</span>
      </el-col>
      <el-col :span="12">
        <span>交易日期：{{detailInfo.cjrq}}</span>
      </el-col>
    </el-row>
    <el-row class="row_form">
      <el-col :span="12">
        <span v-if="showType == '0,1'">交易方式：采购</span>
        <span v-else>交易方向：{{detailInfo.jyfxmc}}</span>
      </el-col>
      <el-col :span="12">
        <span>交易方式：{{detailInfo.jyfsmc}}</span>
      </el-col>
    </el-row>
    <el-row class="row_form">
      <el-col :span="12">
        <span>委托单位：{{detailInfo.wtfmc}}</span>
      </el-col>
      <el-col :span="12">
        <span></span>
      </el-col>
    </el-row>
    <el-row class="row_table">
      <el-table :data="tableData" border stripe tooltip-effect="dark" :span-method="objectSpanMethod">
        <el-table-column
          prop="htbh"
          label="合同编号"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="cjdw"
          label="成交单位"
          width="200"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="cjdj"
          label="成交单价(元/吨)"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{(/^[0-9]+$/).test(Number(scope.row.cjdj)) ? scope.row.cjdj : Number(scope.row.cjdj).toFixed(2)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="cjsl"
          label="成交数量(吨)"
          width="110"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              String(scope.row.cjsl).indexOf(".") > -1
                ? Number(scope.row.cjsl).toFixed(3)
                : scope.row.cjsl
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="je"
          label="成交额(元)"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.je == null"></span>
            <span v-else>{{
              String(scope.row.je).indexOf(".") > -1
                ? Number(scope.row.je).toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })
                : Number(scope.row.je).toLocaleString()
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sxf"
          label="手续费(元)"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.sxf == null"></span>
            <span v-else>{{
              String(scope.row.sxf).indexOf("¥") > -1?scope.row.sxf:
              (String(scope.row.sxf).indexOf(".") > -1
                ? Number(scope.row.sxf).toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })
                : Number(scope.row.sxf).toLocaleString())
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="djjybzj"
          label="冻结交易保证金(元)"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.djjybzj == null"></span>
            <span v-else>{{
              String(scope.row.djjybzj).indexOf(".") > -1
                ? Number(scope.row.djjybzj).toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })
                : Number(scope.row.djjybzj).toLocaleString()
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="djlybzj"
          label="冻结履约保证金(元)"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.djlybzj == null"></span>
            <span v-else>{{
              String(scope.row.djlybzj).indexOf(".") > -1
                ? Number(scope.row.djlybzj).toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })
                : Number(scope.row.djlybzj).toLocaleString()
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sjjke"
          label="实际交款额(元)"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.sjjke == null"></span>
            <span v-else>{{
              calculateSum(scope.row,'sjjke')
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="kqtje"
          label="可清退金额(元)"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.kqtje == null"></span>
            <span v-else>{{
              calculateSum(scope.row,'kqtje')
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="cjrq"
          label="完成时间"
          width="140"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
    </el-row>
    <el-row class="row_form" v-if="showType == '0,1'">
      <el-col :span="12">
        <!-- <span>交易方向：{{detailInfo.jyfxmc}}</span> -->
        <span>交易方向：销售</span>
      </el-col>
      <el-col :span="12">
        <span>交易方式：{{detailInfo.jyfsmc}}</span>
      </el-col>
    </el-row>
    <el-row class="row_form" v-if="showType == '0,1'">
      <el-col :span="12">
        <span>委托单位：{{detailInfo.wtfmc}}</span>
      </el-col>
      <el-col :span="12">
        <span></span>
      </el-col>
    </el-row>
    <el-row class="row_table" v-if="showType == '0,1'">
      <el-table :data="tableData2" border stripe tooltip-effect="dark" :span-method="objectSpanMethod">
        <el-table-column
          prop="htbh"
          label="合同编号"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="cjdw"
          label="成交单位"
          width="200"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="cjdj"
          label="成交单价(元/吨)"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{(/^[0-9]+$/).test(Number(scope.row.cjdj)) ? scope.row.cjdj : Number(scope.row.cjdj).toFixed(2)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="cjsl"
          label="成交数量(吨)"
          width="110"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              String(scope.row.cjsl).indexOf(".") > -1
                ? Number(scope.row.cjsl).toFixed(3)
                : scope.row.cjsl
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="je"
          label="成交额(元)"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.je == null"></span>
            <span v-else>{{
              String(scope.row.je).indexOf(".") > -1
                ? Number(scope.row.je).toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })
                : Number(scope.row.je).toLocaleString()
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sxf"
          label="手续费(元)"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.sxf == null"></span>
            <span v-else>{{
              String(scope.row.sxf).indexOf("¥") > -1?scope.row.sxf:
              (String(scope.row.sxf).indexOf(".") > -1
                ? Number(scope.row.sxf).toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })
                : Number(scope.row.sxf).toLocaleString())
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="djjybzj"
          label="冻结交易保证金(元)"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.djjybzj == null"></span>
            <span v-else>{{
              String(scope.row.djjybzj).indexOf(".") > -1
                ? Number(scope.row.djjybzj).toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })
                : Number(scope.row.djjybzj).toLocaleString()
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="djlybzj"
          label="冻结履约保证金(元)"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.djlybzj == null"></span>
            <span v-else>{{
              String(scope.row.djlybzj).indexOf(".") > -1
                ? Number(scope.row.djlybzj).toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })
                : Number(scope.row.djlybzj).toLocaleString()
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sjjke"
          label="实际交款额(元)"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.sjjke == null"></span>
            <span v-else>{{
              calculateSum2(scope.row,'sjjke')
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="kqtje"
          label="可清退金额(元)"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.kqtje == null"></span>
            <span v-else>{{
              calculateSum2(scope.row,'kqtje')
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="cjrq"
          label="完成时间"
          width="140"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
    </el-row>
    <footer>
      <el-button
        type="primary"
        class="iconfont iconfanhui"
        @click="$router.push('index')"
        >返回</el-button
      >
    </footer>
  </div>
</template>

<script>
import {
  statisticalDetail,
} from "@/api/transaction/statisticalReport/commissionStatistical/index";
// import { getToken } from "@/utils/auth";

export default {
  computed: {
    // myHeader() {
    //   return {
    //     token: getToken(),
    //   };
    // },
  },
  data() {
    return {
      detailInfo:[],
      showType:"",
      tableData:[],
      tableData2:[],
    };
  },
  created() {
    this.showType = this.$route.query.type
    this.getDetailList()
  },
  methods: {
    //查看详情
    getDetailList() {
      this.detailInfo = JSON.parse(this.$route.query.data)
      let data = {
        apcc: this.$route.query.apcc,
      };
      statisticalDetail(data).then((res) => {
        if (res.infoCode == "200") {
          this.tableData = res.data.list;
          this.tableData2 = res.data.listForGxsx;
        }
      });
    },
    calculateSum(row,type) {
      const data = this.tableData
      const index = data.findIndex(item => item.htbh === row.htbh)
      let sjjkesum = 0
      let kqtjesum = 0
      for (let i = index; i >= 0; i++) {
        if (data[i].cjdw === row.cjdw) {
          sjjkesum += Number(data[i].sjjke)
          kqtjesum += Number(data[i].kqtje)
        } else {
          break
        }
      }
      if (type == 'sjjke') {
        return String(sjjkesum).indexOf(".") > -1
          ? Number(sjjkesum).toLocaleString(undefined, {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })
          : Number(sjjkesum).toLocaleString();
      }
      if (type == 'kqtje') {
        return String(kqtjesum).indexOf(".") > -1
          ? Number(kqtjesum).toLocaleString(undefined, {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })
          : Number(kqtjesum).toLocaleString();
      }
    },
    calculateSum2(row,type) {
      const data = this.tableData2
      const index = data.findIndex(item => item.htbh === row.htbh)
      let sjjkesum = 0
      let kqtjesum = 0
      for (let i = index; i >= 0; i++) {
        if (data[i].cjdw === row.cjdw) {
          sjjkesum += Number(data[i].sjjke)
          kqtjesum += Number(data[i].kqtje)
        } else {
          break
        }
      }
      if (type == 'sjjke') {
        return String(sjjkesum).indexOf(".") > -1
          ? Number(sjjkesum).toLocaleString(undefined, {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })
          : Number(sjjkesum).toLocaleString();
      }
      if (type == 'kqtje') {
        return String(kqtjesum).indexOf(".") > -1
          ? Number(kqtjesum).toLocaleString(undefined, {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })
          : Number(kqtjesum).toLocaleString();
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      if (columnIndex === 8 || columnIndex === 9) { // 列索引为 1，即第二列
        // 获取当前行所在的数据数组
        const data = this.tableData
        // 计算相同项的数量
        let rowspan = 1;
        for (let i = rowIndex + 1; i < data.length; i++) {
          if (data[i].cjdw === row.cjdw) { // 与当前行的成交单位相同
            rowspan++;
          } else {
            break; // 遇到不相同的成交单位，停止计数
          }
        }
        if (rowIndex>0 && rowIndex<data.length-1) {
          if (rowspan>1 && data[rowIndex].cjdw != data[rowIndex-1].cjdw) {
            return { rowspan, colspan: 1 }
          }else if(data[rowIndex].cjdw == data[rowIndex-1].cjdw){
            return { rowspan:0, colspan: 1 }
          }else{
            return { rowspan:1, colspan: 1 }
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.row_form{
  padding: 15px 20px;
  font-size: 16px;
}
.row_table{
  padding: 15px 0;
}
footer {
  text-align: center;
  margin: 20px auto;
}
</style>
