// 排队取消
<template>
  <div class="sale">
    <div class="top">
      <span>车牌号：</span>
      <el-input
        placeholder="请输入内容"
        class="input"
        v-model="inputText"
        clearable
      >
      </el-input>
      <el-button type="primary" class="btn" @click="onclick(0)">
        <i class="el-icon-search"></i>查询
      </el-button>
      <!-- <el-button type="primary" class="btn1" @click="onclick(1)">
        <i class="el-icon-plus"></i>新增排队取消
      </el-button> -->
    </div>
    <div class="tab">
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        :fit="true"
        border
        style="width: 100%; margin-top: 20px"
        max-height="250px"
      >
        <el-table-column
          type="index"
          width="50"
          label="序号"
          fixed
        ></el-table-column>
        <el-table-column prop="orderNumber" label="运输订单号">
        </el-table-column>
        <el-table-column prop="capacityNumber" label="车牌号">
        </el-table-column>
        <el-table-column prop="resultCancelTime" label="取消时间">
        </el-table-column>
        <el-table-column prop="resultCancelReason" label="取消理由">
        </el-table-column>
        <el-table-column prop="materialName" label="物资名称">
        </el-table-column>
        <el-table-column prop="materialSpecification" label="物资规格">
        </el-table-column>
        <el-table-column prop="materialModel" label="物资型号">
        </el-table-column>
        <el-table-column prop="gatepostName" label="进厂门岗">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputText: "",
      tableData: []
    };
  },
  mounted() {
    this.information();
  },
  methods: {
    information() {
      this.axios.post("/api/v1/qms/getQueueCancel").then(res => {
        this.tableData = res.data.data;
        this.getSpanArr(this.tableData);
      });
    },
    onclick(num) {
      if (num == 0) {
        this.option.requestUrl =
          "/api/v1/qms/getQueueCancel?apiId=131&con=" +
          this.inputText +
          "&i=" +
          new Date();
      } else if (num == 1) {
        this.$router.push({
          path: "/addqueueFCancel"
        });
      }
    },
    //记录每一行的合并数
    getSpanArr(data) {
      //每次调用方法初始化
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].orderNumber === data[i - 1].orderNumber) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex === 0 ||
        columnIndex === 1 ||
        columnIndex === 2 ||
        columnIndex === 3 ||
        columnIndex === 4 ||
        columnIndex === 8
      ) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    }
  }
};
</script>
<style lang="scss">
.sale {
  .top {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    padding-left: 40px;
  }
  .input {
    width: 250px;
    margin-right: 20px;
  }
  .btn1 {
    margin-left: 20px;
  }
}
</style>