<template>
  <div class="billOfLadingAdd">
    <div class="top">
      <div class="material">
        <span> 物资名称： </span>
        <el-select v-model="materialId" placeholder="请选择">
          <el-option
            v-for="item in materialOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="Warehouse">
        <span> 仓库： </span>
        <el-select
          v-model="WarehouseId"
          placeholder="请选择"
          @change="onChange"
        >
          <el-option
            v-for="item in WarehouseOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="platform">
        <span> 月台： </span>
        <!-- 可以选择 -->
        <el-select v-if="disabled" v-model="platformId" placeholder="请选择">
          <el-option
            v-for="item in platformOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- 不可选择 -->
        <el-select v-else v-model="platformId" disabled placeholder="请选择">
        </el-select>
      </div>
      <div class="btn">
        <el-button type="primary" @click="ONclick">确认</el-button>
      </div>
    </div>
    <div class="bottom">
      <div class="table">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            v-for="(item, i) in tableTop"
            :key="i"
            stripe="true"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.row.serialNumber)"
                >删除</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="topClick(scope.row.serialNumber)"
                v-if="scope.row.serialNumber == 1"
                disabled
                >上移</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="topClick(scope.row.serialNumber)"
                v-else
                >上移</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="bottomClick(scope.row.serialNumber)"
                v-if="scope.row.serialNumber == tableNun"
                disabled
                >下移</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="bottomClick(scope.row.serialNumber)"
                v-else
                >下移</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="btn_bottom">
      <el-button @click="open">返回</el-button>
      <el-button type="primary" @click="addclick">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      materialId: "",
      WarehouseId: "",
      platformId: "",
      materialOptions: [],
      WarehouseOptions: [],
      platformOptions: [],
      tableNun: 0,
      materialOptionsnumber: 0,
      disabled: false,
      tableTop: [
        {
          prop: "serialNumber",
          label: "序号",
          width: "50",
        },
        {
          prop: "material",
          label: "物资名称",
          width: "140",
        },
        {
          prop: "ck",
          label: "仓库",
          width: "140",
        },
        {
          prop: "yt",
          label: "月台",
          width: "140",
        },
      ],
      tableData: [],
    };
  },
  created() {
    this.initialization();
    this.getWarehouse();
  },
  methods: {
    // 第一次进页面，根据运输订单号查询出所有的物资名称
    initialization() {
      this.axios
        .get("/api/v1/tms/getOrderMaterial/" + this.$route.params.orderId)
        .then((res) => {
          if (res.data.code == "200") {
            this.materialOptions = res.data.data;
            this.materialOptionsnumber = this.materialOptions.length;
          }
        });
      
    },
    // 查询所有仓库
    getWarehouse() {
      this.axios.get("/api/v1/tms/getUnloadPoint/1").then((res) => {
        if (res.data.code == "200") {
          this.WarehouseOptions = res.data.data;
        }
      });
    }, // 返回
    open() {
      // debugger
      if (this.materialOptionsnumber == 1) {
        if (this.materialOptions.length == 0) {
          this.prompt();
        } else {
          this.$router.push("/billOfLading");
        }
      } else if (this.materialOptionsnumber !== this.materialOptions.length) {
        this.prompt();
      } else {
        this.$router.push("/billOfLading");
      }
    },
    // 提示
    prompt() {
      this.$confirm("退出页面，数据将会清空！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.push("/billOfLading");
        })
        .catch(() => {});
    },
    // 提交物资次序给后端
    addclick() {
      if (this.materialOptions.length == 0) {
        this.axios
          .post("/api/v1/tms/updateLoadingIdAndLoadSq", {
            orderId: this.$route.params.orderId,
            list: this.tableData,
          })
          .then((res) => {
            if (res.data.code == "200") {
              this.$message({
                message: "提交成功！",
                type: "success",
              });
              this.$router.push("/billOfLading");
            }
          });
      } else {
        this.$message({
          message: "请选择完物资在提交！",
          type: "warning",
        });
      }
    },
    // 点击确认后把选择框的数据添加到tableData
    ONclick() {
      if (this.materialId && this.WarehouseId && this.platformId) {
        var materialName = null;
        var WarehouseName = null;
        var platformName = null;
        this.materialOptions.forEach((e) => {
          if (e.value == this.materialId) {
            materialName = e.label;
          }
        });
        this.WarehouseOptions.forEach((e) => {
          if (e.value == this.WarehouseId) {
            WarehouseName = e.label;
          }
        });
        this.platformOptions.forEach((e) => {
          if (e.value == this.platformId) {
            platformName = e.label;
          }
        });
        this.tableData.push({
          serialNumber: this.tableData.length + 1,
          materialId: this.materialId,
          material: materialName,
          WarehouseId: this.WarehouseId,
          ck: WarehouseName,
          platformId: this.platformId,
          yt: platformName,
        });
        this.fornumber();
        this.deletematerial();
        this.materialId = "";
        this.WarehouseId = "";
        this.platformId = "";
        this.disabled = false;
      } else {
        this.$message({
          message: "请全部选择之后在确认！",
          type: "warning",
        });
      }
    },
    // 选择仓库后，查询月台，
    onChange() {
      this.platformOptions = [];
      this.axios
        .get("/api/v1/tms/getPlatformIdByWarehouse/" + this.WarehouseId)
        .then((res) => {
          if (res.data.code == "200") {
            this.platformOptions = res.data.data;
            console.log(this.platformOptions.length);
            if (this.platformOptions.length !== 0) {
              this.disabled = true;
            }
          }
        });
    },
    //   上移
    topClick(index) {
      var kong = {};
      kong = this.tableData[index - 2];
      this.tableData[index - 2] = this.tableData[index - 1];
      this.tableData[index - 1] = kong;
      this.fornumber();
    },
    //   下移
    bottomClick(index) {
      var kong = {};
      kong = this.tableData[index];
      this.tableData[index] = this.tableData[index - 1];
      this.tableData[index - 1] = kong;
      this.fornumber();
    },
    //   删除当前
    handleDelete(index) {
      this.materialOptions.push({
        value:this.tableData[index-1].materialId,
        label:this.tableData[index-1].material
      })
      this.tableData.splice(index - 1, 1);
      this.fornumber();
    },
    //使serialNumber 的值永远比下标多一
    fornumber() {
      this.tableNun = this.tableData.length;
      for (var i = 0; i < this.tableData.length; i++) {
        this.tableData[i].serialNumber = i + 1;
      }
    },
    // 移除选过的物资
    deletematerial() {
      for (var i = 0; i < this.materialOptions.length; i++) {
        if (this.materialOptions[i].value == this.materialId) {
          this.materialOptions.splice(i, 1);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.billOfLadingAdd {
  .top {
    width: 100%;
    height: 6.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bottom {
    width: 37.5rem;
    margin: auto;
    padding-top: 3.125rem;
  }
  .btn_bottom {
    width: 100%;
    position: absolute;
    bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>