<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>交易方向：{{ 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"
        :show-summary="true"
        :summary-method="getSummary"
      >
        <el-table-column
          prop="htbh"
          label="合同编号"
          align="center"
          width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="cckmc"
          label="承储单位"
          align="center"
          min-width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="nch"
          label="仓号"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="pzmc"
          label="品种"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="nnf"
          label="生产年份"
          align="center"
          show-overflow-tooltip
        ></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="qpdj"
          label="起拍单价(元/吨)"
          width="120"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              /^[0-9]+$/.test(Number(scope.row.qpdj))
                ? Number(scope.row.qpdj).toFixed()
                : Number(scope.row.qpdj).toFixed(2)
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="cjdj"
          label="成交单价(元/吨)"
          min-width="120"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              /^[0-9]+$/.test(Number(scope.row.cjdj))
                ? Number(scope.row.cjdj).toFixed()
                : Number(scope.row.cjdj).toFixed(2)
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="cjdw"
          label="成交单位"
          align="center"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="je"
          label="成交额(元)"
          width="140"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{
              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="cjrq"
          label="完成时间"
          width="160"
          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/dealStatistical/index";

export default {
  computed: {
  },
  data() {
    return {
      detailInfo: [],
      tableData: [],
    };
  },
  created() {
    // if (this.$route.query.type == "show") {
    //   this.showType = true;
    //   this.contenteditable = false;
    //   this.detailF = false;
    //   this.scalePlanDetails(this.$route.query.xzbm);
    // }
    // if (this.$route.query.type == "update") {
    //   this.pop = true;
    //   this.showType = false;
    //   this.detailF = false;
    //   this.scalePlanDetails(this.$route.query.xzbm);
    // }
  },
  mounted() {
    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;
        }
      });
    },
    getSummary(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 5 || index === 9) {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = "";
          }
          if (index === 5) {
            sums[index] =
              String(sums[index]).indexOf(".") > -1
                ? Number(sums[index]).toFixed(3)
                : sums[index];
          }
          if (index === 9) {
            sums[index] =
              String(sums[index]).indexOf(".") > -1
                ? Number(sums[index]).toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })
                : Number(sums[index]).toLocaleString();
          }
        }
      });

      return sums;
    },
  },
};
</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;
}
// ::v-deep .el-table .el-table--scrollable-x .el-table__body-wrapper {
//   overflow-x: hidden !important;
//   z-index: 2 !important;
// }
// ::v-deep .el-table .el-table__footer-wrapper {
//   overflow-x: auto !important;
//   border-top: 1px solid #f4f4f4;
// }
</style>
