<template>
  <div class="app-startUnloading">

    <!-- 自编号 -->
    <el-row class="number-area">
      <p class="label-font">自编号：</p>
      <p class="label-font">CNG2510</p>
      <el-input v-model="labelNo" placeholder="请输入标签号"></el-input>
      <div>
        <el-button>批量输入</el-button>
        <el-button>一键卸柜</el-button>
      </div>
    </el-row>

    <!-- 当前部分 -->
    <el-row class="number-area">
      <p class="label-font">当前部分：</p>
      <el-select v-model="currPart" placeholder="请选择当前部分">
      </el-select>
      <p>
        <span>13箱</span>
        <span>10.83m3</span>
        <span>210kg</span>
      </p>
    </el-row>

    <!-- 表格 -->
    <el-row>
      <el-table v-loading="loading" :data="list">
        <el-table-column label="序号" type="index" width="50" />
        <!-- <el-table-column label="订单号" align="center" prop="selfNo">
          <template slot-scope="scope">
            <a href="javascript:void(0);" class="order-href" @click="orderClick(scope.row)">{{ scope.row.selfNo }}</a>
          </template>
        </el-table-column> -->
        <el-table-column label="订单号" align="center" prop="cubNo" />
        <el-table-column label="商品信息" align="center" prop="cubNo" />
        <el-table-column label="实装箱数" align="center" prop="cabinetId" />
        <el-table-column label="卸柜箱数" align="center" prop="transportType" />
        <el-table-column label="清关状态" align="center" prop="squareNumber" />
        <el-table-column label="体积" align="center" prop="weight" />
        <el-table-column label="重量" align="center" prop="weight" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="danger" size="small" @click="openError">异常</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!-- 总计 -->
    <el-row>
      <div>
        <p>
          <span>总计：</span>
          <span>33箱子</span>
          <span>10.83m3</span>
          <span>210kg</span>
        </p>
      </div>
      <div>
        <p>
          <span>已卸：</span>
          <span>16</span>
        </p>
      </div>
    </el-row>

    <el-row>
      <el-button type="success">卸柜完成</el-button>
    </el-row>

    <!-- 对话框 -->
    <el-dialog custom-class="shipping-dialog" title="异常" :visible.sync="dialogVisible" width="500px" :modal-append-to-body=false append-to-body destroy-on-close>
      <unloadingError @closeDialog="dialogVisible = false" />
    </el-dialog>
  </div>
</template>

<script>
import unloadingError from "./unloadingError.vue";
/**
 * 开始卸柜
 */
export default {
  name: "startUnloading",
  components: { unloadingError },
  data() {
    return {
      // 标签号
      labelNo: "",
      // 当前部分
      currPart: "",
      // loading
      loading: false,
      // 表格数据
      list: [{}],
      // 弹窗配置
      dialogVisible: false,
    };
  },
  watch: {},
  methods: {
    /** 提交 */
    onSubmit() {
      this.$refs["unloadingForm"].validate((valid) => {
        if (valid) {
          // TODO 判断是否已经卸柜
          this.$message.warning("请先通过卸柜审批");
        }
      });
    },
    /** 取消 */
    cancel() {
      this.$emit("closeDialog");
    },
    // 打开异常
    openError() {
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-startUnloading {
  p {
    margin: 0;
    > span {
      margin-right: 5px;
    }
  }
  .el-row {
    margin-bottom: 15px;
  }
  .label-font {
    font-size: 16px;
    font-weight: bolder;
  }
  .number-area {
    display: flex;
    align-items: center;
    > * {
      margin-right: 10px;
    }
    > .el-input {
      width: 200px;
    }
  }
}
</style>
