<template>
  <div class="content-main">
    <el-table
      id="out-table"
      border
      :data="tableData"
      :span-method="objectSpanMethod"
      style="width: 100%"
    >
      <el-table-column
        :label="
          '\xa0\xa0\xa0\xa0承储企业:' +
          formdata.sskdmc +
          '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0协议编号:' +
          formdata.xybh +
          '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0轮出数量:' +
          toFixedNum(formdata.lcsl) +
          '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0轮入数量:' +
          toFixedNum(formdata.lrsl) +
          '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0状态:' +
          formdata.jkqzt +
          '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0单位:吨'
        "
      >
        <!-- <template slot="header">
          <span class="textMar">承储企业：{{ formdata.ssqymc }}</span>
          <span class="textMar">协议编号：{{ formdata.xybh }}</span>
          <span class="textMar">轮出数量：{{ toFixedNum(formdata.lcsl) }}</span>
          <span class="textMar">轮入数量：{{ toFixedNum(formdata.lrsl) }}</span>
          <span class="textMar">状态：{{ formdata.ztmc }}</span>
          <span style="float: right">单位：吨</span>
        </template> -->
        <el-table-column prop="orderNum" label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.orderNum }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="firstSettleMentDate"
          label="首次结算日期"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.outContent">
              {{ scope.row.outContent }}
            </span>
            <span v-else>
              {{ scope.row.firstSettleMentDate }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="outWareHouse" label="轮出仓" align="center">
        </el-table-column>

        <el-table-column prop="outAmount" label="协议轮出数量" align="center">
          <template slot-scope="scope">
            {{
              String(scope.row.outAmount).indexOf(".") > -1
                ? parseFloat(scope.row.outAmount).toFixed(3)
                : scope.row.outAmount
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="overheadEndDateContent"
          label="截止日"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="inDate" label="轮入日期" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.inContent">
              {{ scope.row.inContent }}
            </span>
            <span v-else>
              {{ scope.row.inDate }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="inWareHouse" label="轮入仓" align="center">
        </el-table-column>
        <el-table-column prop="inAmount" label="轮入数量" align="center">
          <template slot-scope="scope">
            {{
              String(scope.row.inAmount).indexOf(".") > -1
                ? parseFloat(scope.row.inAmount).toFixed(3)
                : scope.row.inAmount
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="架空期内完成情况"
          width="70px"
          align="center"
        >
        </el-table-column>
      </el-table-column>
    </el-table>
    <!-- </el-row> -->

    <el-row style="text-align: center; margin-top: 20px">
      <el-button
        type="primary"
        size="small"
        class="iconfont iconfanhui"
        @click="$router.go(-1)"
      >
        返回</el-button
      >
    </el-row>
  </div>
</template>

<script>
import { overheadPeriod } from "@/api/earlyWarning/overheadWarning/index";
import { toFixedNum } from "@/utils";
export default {
  data() {
    return {
      tableData: [],
      formdata: {},
    };
  },
  methods: {
    toFixedNum: toFixedNum,
    getDetailList() {
      this.formdata = JSON.parse(this.$route.query.data);
      if (this.$route.query.type == 1 && this.formdata.clfs == "自动处理") {
        this.formdata.jkqzt = "全部完成";
      }
      let data = {
        lhxybm: this.$route.query.lhxybm,
      };
      overheadPeriod(data).then((res) => {
        if (res.infoCode == 200) {
          this.tableData = res.data;

          console.log(this.tableData, "this.tableData");
        }
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        column.label == "序号" ||
        column.label == "截止日" ||
        column.label == "架空期内完成情况"
      ) {
        return {
          rowspan: row.mergeRows,
          colspan: 1,
        };
      } else if (column.label == "轮出仓" && row.smFlag) {
        return {
          rowspan: 1,
          colspan: 8,
        };
      } else if (
        (column.label == "首次结算日期" && row.outContent) ||
        (column.label == "轮入日期" && row.inContent)
      ) {
        return {
          rowspan: 1,
          colspan: 3,
        };
      } else if (
        ((column.label == "轮出仓" || column.label == "协议轮出数量") &&
          row.outContent) ||
        ((column.label == "轮入仓" || column.label == "轮入数量") &&
          row.inContent)
      ) {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    },
  },

  created() {
    this.getDetailList();
  },
};
</script>

<style lang="scss" scoped>
</style>
