// 链表监控 // 排队开始
<template>
  <div class="sale">
    <div class="top"></div>
    <el-dialog title="链表详情" :visible.sync="dialogTableVisible">
      <el-table
        :data="tableDataDetails"
        border
        style="width: 100%; margin-top: 20px"
        max-height="500px"
      >
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column prop="capacityNumber" label="车牌号" fit>
        </el-table-column>
        <el-table-column prop="resultStartTime" label="排队开始时间">
        </el-table-column>
        <el-table-column prop="listNodeOrder" 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="materialNumber" label="物资件数">
        </el-table-column>
        <el-table-column prop="driverTel" label="司机电话号码">
        </el-table-column>
        <el-table-column prop="sureTime" label="可进厂确认时间">
        </el-table-column>
        <el-table-column prop="gatepostName" label="进厂门岗">
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="链表详情" :visible.sync="spelldialogTableVisible">
      <el-table
        :data="tableDataSpellDetails"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px"
        @selection-change="handleSelectionChange"
        max-height="500px"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="capacityNumber" label="车牌号" fit>
        </el-table-column>
        <el-table-column prop="grid" label="拼数" fit> </el-table-column>
        <el-table-column prop="resultStartTime" label="排队开始时间">
        </el-table-column>
        <el-table-column prop="listNodeOrder" 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="materialNumber" label="物资件数">
        </el-table-column>
        <el-table-column prop="driverTel" label="司机电话号码">
        </el-table-column>
        <el-table-column prop="gatepostName" label="进厂门岗">
        </el-table-column>
        <el-table-column prop="sureTime" label="可进厂确认时间">
        </el-table-column>
      </el-table>
    </el-dialog>
    <div class="tabs">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="单拼车辆排队链表" name="first">
          <el-table
            :data="tableData1"
            border
            style="width: 100%; margin-top: 20px"
            max-height="500px"
          >
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column prop="count" label="排队数" fit> </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 fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="getDetails(scope)">
                  链表详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="多拼车辆排队链表" name="second">
          <el-table
            :data="tableData"
            border
            style="width: 100%; margin-top: 20px"
            max-height="500px"
          >
            <el-table-column prop="count" label="排队数"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="getSpellDetails(scope)"
                >
                  链表详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //存放每一行记录的合并数
      spanArr: [],
      tableDataSpellDetails: [],
      spelldialogTableVisible: false,
      dialogTableVisible: false,
      tableDataDetails: [],
      capacityNo: "",
      inputText: "",
      activeName: "first",
      tableData: [],
      tableData1: [],
      maplist: [],
      filterArr1: [],
      table1: false,
      //物资选中表格
      materialList: [],
      //物资选中暂存
      materialList1: [],
      //物资信息查询内容
      materialNameText: null,
      materialSpecificationText: null,
      materialModelText: null
    };
  },
  watch: {
    activeName() {}
  },
  mounted() {
    this.getSpellingArray();
    this.getNoSpellingArray();
  },
  methods: {
    //记录每一行的合并数
    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].resultTotalId === data[i - 1].resultTotalId) {
            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 === 9 ||
        columnIndex === 10 ||
        columnIndex === 12
      ) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    getDetails(scope) {
      console.log(scope.row.gridId);
      let map = {
        locationId: scope.row.gridId
      };
      this.axios.post("/api/v1/qms/getListMonitorMes", map).then(res => {
        console.log(res);
        this.tableDataDetails = res.data.data;
        this.dialogTableVisible = true;
      });
    },
    getSpellDetails(scope) {
      let map = {
        locationId: scope.row.gridId
      };
      this.axios
        .post("/api/v1/qms/getSpellingListMonitorMes", map)
        .then(res => {
          this.tableDataSpellDetails = res.data.data;
          this.getSpanArr(res.data.data);
          this.spelldialogTableVisible = true;
        });
    },
    handleClick() {
      if (this.activeName == "first") {
        this.getNoSpellingArray();
      } else {
        this.getSpellingArray();
      }
    },
    getNoSpellingArray() {
      this.axios
        .post("/api/v1/qms/listMonitor?isSpelling=0&i=" + new Date())
        .then(res => {
          this.tableData1 = res.data.data;
        });
    },
    getSpellingArray() {
      this.axios
        .post("/api/v1/qms/listMonitor?apiId=473&isSpelling=1&i=" + new Date())
        .then(res => {
          this.tableData = res.data.data;
        });
    },
    onclick() {
      this.$message.info("未开通");
    }
  }
};
</script>
<style lang="scss" scoped>
.sale {
  .top {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    padding-left: 40px;
    .el-form {
      display: flex;
      justify-content: center;
      align-items: center;
      .el-form-item__label {
        align-items: center;
        line-height: 80px;
      }
    }
  }
  .input {
    width: 250px;
    margin-right: 20px;
  }
  .tabs {
    margin-left: 20px;
    margin-top: 10px;
    .tabs /deep/ .el-tabs__nav {
      font-size: 40px;
    }
  }
}
</style>
