<template>
  <div>
    <el-table
      :show-summary="isShowSum"
      :data="tableData"
      :height="height"
      style="width: 100%"
      :span-method="objectSpanMethod"
      :border="true"
      :header-cell-style="headerCellStyle"
    >
      <el-table-column
        v-if="isShowBox"
        type="selection"
        width="50"
        align="center"
      >
      </el-table-column>
      <template>
        <column-item
          v-for="item in col"
          :key="item.label"
          :col="item"
        ></column-item>
      </template>
      <template #empty>
        <div class="empty" style="height:12.5rem;">
          <span class="empty-desc">暂无数据</span>
        </div>
      </template>
      <div slot="append">
        <div class="appendSlot">
          <span
            v-for="item in stockStringArr"
            :class="item.class"
            :key="item.value"
            >{{ item.value }}</span
          >
        </div>
      </div>
    </el-table>
  </div>
</template>
<script>
import ColumnItem from "./columnItem";
export default {
  name: "TableItem",
  components: {
    ColumnItem
  },
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 树型结构表头数据
    col: {
      type: Array,
      default: () => []
    },
    // 是否在表格下方显示合计
    isShowSum: {
      type: Boolean,
      default: false
    },
    // 判断单元格文字是居中还是左对齐显示,默认居中
    alignType: {
      type: String,
      default: "center"
    },
    // 设置表格高度,固定表头
    height: {
      type: String,
      default: null // 默认不固定表头
    },
    // 判断是否显示多选框
    isShowBox: {
      type: Boolean,
      default: false // 默认不展示
    }
  },
  data() {
    return {
      stockString: null,
      stockStringArr: []
    };
  },
  mounted() {
    this.getStockString();
  },
  methods: {
    getStockString() {
      let that = this;
      this.axios
        .post("/api/v1/wmsh/getLoadPortStockList?apiId=158&pageSize=1000&pageNum=1")
        .then(res => {
          console.log(res);
          if (res.status == "200") {
            let resultActualInstallations = 0;
            res.data.data.list.forEach(e => {
              resultActualInstallations =
                resultActualInstallations + e.gmTonnage;
            });

            this.stockString +=
              "万港库存" + resultActualInstallations.toFixed(2) + "吨：";
            this.stockStringArr.push({
              class: "normalFirst",
              value: "万港库存" + resultActualInstallations.toFixed(2) + "吨："
            });

            let materialName = res.data.data.list[0].materialName;
            this.stockStringArr.push({
              class: "black",
              value: materialName + res.data.data.list[0].totalTonnage + "吨："
            });
            this.stockString +=
              materialName + res.data.data.list[0].totalTonnage + "吨 ";

            res.data.data.list.forEach(e => {
              if (e.materialName == materialName) {
                this.stockString +=
                  " “" + e.resultForeignShipName + "”" + e.gmTonnage + "吨 ";
                this.stockStringArr.push({
                  class: "normal",
                  value:
                    " “" + e.resultForeignShipName + "”" + e.gmTonnage + "吨 "
                });
              } else {
                materialName = e.materialName;
                this.stockString +=
                  materialName + res.data.data.list[0].totalTonnage + "吨 ";
                this.stockString +=
                  "；" +
                  materialName +
                  e.totalTonnage +
                  "吨：" +
                  " “" +
                  e.resultForeignShipName +
                  "”" +
                  e.gmTonnage +
                  "吨 ";
                this.stockStringArr.push({
                  class: "black",
                  value: "；" + materialName + e.totalTonnage + "吨："
                });
                this.stockString +=
                  "；" +
                  materialName +
                  e.totalTonnage +
                  "吨：" +
                  " “" +
                  e.resultForeignShipName +
                  "”" +
                  e.gmTonnage +
                  "吨 ";
                this.stockStringArr.push({
                  class: "normal",
                  value:
                    " “" + e.resultForeignShipName + "”" + e.gmTonnage + "吨 "
                });
              }
            });
            console.log("arr:", this.stockStringArr);
          }
        });
    },
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      let columnIndexList1 = [5];
      let columnIndexList2 = [6];
      let columnIndexList3 = [7];
      let columnIndexList4 = [8];
      if (columnIndexList1.includes(columnIndex) && rowIndex == 0) {
        //如果有多个css样式，使用;隔开
        return "color:#fff;cursor: pointer;background-color:red !important";
      }
      if (columnIndexList2.includes(columnIndex) && rowIndex == 0) {
        //如果有多个css样式，使用;隔开
        return "color:#fff;cursor: pointer;background-color:green !important";
      }
      if (columnIndexList3.includes(columnIndex) && rowIndex == 0) {
        //如果有多个css样式，使用;隔开
        return "color:#fff;cursor: pointer;background-color:blue !important";
      }
      if (columnIndexList4.includes(columnIndex) && rowIndex == 0) {
        //如果有多个css样式，使用;隔开
        return "color:#000;cursor: pointer;background-color:yellow !important ";
      }
    },
    flitterData(arr) {
      var spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          // name 修改
          if (item.batchInfacoryId === arr[index - 1].batchInfacoryId) {
            // 第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr
      };
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 1) {
        // this.tableData  修改
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 4) {
        // this.tableData  修改
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 2) {
        // this.tableData  修改
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 3) {
        // this.tableData  修改
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (row.type === 1) {
        return {
          rowspan: 1,
          colspan: 17
        };
      }
    }
  }
};
</script>
<style>
/* 处理表格表头和内容错位问题 */
.el-table th.gutter {
  display: table-cell !important;
}
.el-table th,
.el-table td {
  padding: 0.4375rem 0 !important;
}
</style>
<style lang="scss" scoped>
.el-table {
  .appendSlot {
    margin-left: 10%;
    font-size: 18px;
    line-height: 20px;
    .normalFirst {
      margin-left: 42px;
    }
    // display: flex;
    // // align-items: center;
    // // justify-content: center;
    .black {
      font-weight: 700;
    }
  }
}
</style>
