// 链表监控
<template>
  <div class="sale">
    <div class="top">
      <!-- 框计算 -->
      <el-input placeholder="请输入内容" v-model="inputText" clearable>
      </el-input>
      <el-button type="primary" class="btn" @click="onclick(0)">
        <i class="el-icon-search"></i>查询
      </el-button>
    </div>
    <div class="tab">
      <dilTable v-bind.sync="option" ref="table">
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope" type="expand">
            <el-button
              @click="onclick(1, scope.row)"
              type="text"
              size="small"
              v-if="scope.row.count > 0"
            >
              查看详情
            </el-button>
            <el-button type="text" size="small" disabled v-else>
              查看详情
            </el-button>
          </template>
        </el-table-column>
        <!-- 排队详情下拉框 -->
        <el-table-column type="expand" width="1">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item v-model="gridId">
                <div v-if="false">{{ props }}</div>
                <div class="xq">
                  <div v-for="(item, i) in queueDetail" :key="i" class="box">
                    <!-- 头部 -->
                    <div class="index">
                      <span>{{ item.listNodeOrder }}</span>
                    </div>
                    <div class="img">
                      <!-- 车辆图片 -->
                      <div class="image">
                        <img :src="imgurl" />
                      </div>
                    </div>
                    <div class="time">
                      <!-- 车牌号 -->
                      <div class="carNumber">
                        {{ item.capacityNumber }}
                      </div>
                      <!-- 等待时间 -->
                      <div class="loadTime">
                        {{ item.minute }}
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
      </dilTable>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //车图
      imgurl: require("@/assets/img/car.png"),
      inputText: "",
      option: {
        // 表格请求数据的地址
        requestUrl: "/api/v1/qms/warehouseListMonitor?apiId=195",
      },
      //记录旧的row对象
      oldRow: "",
      //记录上一个展开的点击次数，单数为展开状态，复数为闭合状态
      oldRowCount: 1,
      //排队网格id
      gridId: "",
      queueDetail: [],
    };
  },
  methods: {
    onclick(num, row) {
      if (num == 0) {
        this.option.requestUrl =
          "/api/v1/qms/warehouseListMonitor?apiId=195&con=" + this.inputText;
      } else if (num == 1) {
        console.log(row);
        // 记录重复点击次数
        if (this.oldRow === row) {
          this.oldRowCount += 1;
        }
        // 切换当前详情表
        this.$refs.table.toggleRowExpansion(row);
        // 打开前关闭上一个详情表
        if (this.oldRow != "") {
          if (this.oldRow != row) {
            if (this.oldRowCount % 2 === 1) {
              this.$refs.table.toggleRowExpansion(this.oldRow);
            } else {
              this.oldRowCount = 1;
            }
          } else {
            this.oldRow = null;
            return;
          }
        }
        // 重置上一个点击对象
        this.oldRow = row;
        this.queueList(row.platformId);
      }
    },
    queueList(platformId) {
      var mapValue = {
        platformId: platformId,
      };
      console.log(mapValue);
      this.axios.post("/api/v1/qms/getListQueueMes", mapValue).then((res) => {
        this.queueDetail = res.data.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.sale {
  .top {
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
    padding-left: 2.5rem;
  }
  .tab {
    .xq {
      display: flex;
      .box {
        padding-right: 1.25rem;
        .index {
          display: flex;
          justify-content: center;
          span {
            background-color: #87ceeb;
            display: inline-block;
            width: 1.25rem;
            height: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            color: #fff;
          }
        }
        .img {
          display: flex;
          justify-content: center;
        }
        .time {
          display: flex;
          color: #fff;
          font-size: 0.75rem;
          .carNumber {
            background-color: #7eb9ff;
            height: 1.25rem;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .loadTime {
            background-color: #4b9eff;
            height: 1.25rem;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>