<template>
  <div class="startPacking">
    <el-card>
      <el-row class="content-area">

        <!-- 左侧 -->
        <el-col :span="6" class="left-area">
          <el-row v-for="item in testData" :key="item.key" class="title-info">
            <div>
              <p>{{item.title}}</p>
            </div>
            <div>
              <p>111</p>
              <p>111</p>
              <p>111</p>
            </div>
          </el-row>
        </el-col>

        <!-- 右侧 -->
        <el-col :span="18" class="right-area">

          <!-- 操作 -->
          <el-row class="table-title">
            <div>当前装柜：第一部分</div>
            <div>
              <el-input v-model="qrCode" placeholder="请输入二维码/条码编号"></el-input>
              <el-button type="primary">确定</el-button>
              <el-button type="primary" @click="handlerClick('batchInput','批量输入')">批量输入</el-button>
              <el-button type="primary" @click="handlerClick('correction','装柜纠错')">装柜纠错</el-button>
              <el-button type="primary" @click="handlerClick('correctionOrder','批量装柜纠错')">批量装柜纠错</el-button>
            </div>
          </el-row>

          <!-- 表格 -->
          <el-row>
            <el-table v-loading="loading" :data="listData">
              <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="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" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button type="primary" size="small">移出</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>

        </el-col>
      </el-row>
    </el-card>

    <!-- 统计 -->
    <el-row>
      <el-col :span="6" class="totle-info">
        <div>
          <p>总计：</p>
          <p>111</p>
        </div>
        <div>
          <p>容量：</p>
          <p>111</p>
        </div>
        <div>已装0箱</div>
      </el-col>
    </el-row>

    <!-- 操作 -->
    <el-row class="button-area">
      <el-button type="primary" @click="handlerClick('supplementOrder','补单')">补单</el-button>
      <el-button type="primary">申请封柜</el-button>
      <el-button type="primary" @click="handlerClick('modifyCabinet','修改柜信息')">修改柜信息</el-button>
      <el-button type="primary">封柜审核中</el-button>
    </el-row>

    <!-- 对话框 -->
    <el-dialog custom-class="shipping-dialog" :title="dialogConfig.title" :visible.sync="dialogConfig.dialogVisible" :fullscreen="dialogConfig.fullscreen" :width="dialogConfig.width" :modal-append-to-body=false append-to-body destroy-on-close>
      <!-- 已装未装订单 -->
      <template v-if="dialogConfig.type === 'orderTable'">
        <el-table :data="[]">
          <el-table-column label="已装" align="center" prop="selfNo" />
          <el-table-column label="未装" align="center" prop="cubNo" />
        </el-table>
      </template>
      <!-- 补单 -->
      <template v-if="dialogConfig.type === 'supplementOrder'">
        <supplementOrder />
      </template>
      <!-- 修改柜信息 -->
      <template v-if="dialogConfig.type === 'modifyCabinet'">
        <el-form ref="modifyForm" :rules="rules" :model="modifyCabinetObj" label-width="80px">
          <el-form-item label="起运仓库" prop="warehouse">
            <el-select v-model="modifyCabinetObj.warehouse" placeholder="请选择起运仓库">
            </el-select>
          </el-form-item>
          <el-form-item label="预计时间" prop="estimatedTime">
            <el-date-picker type="date" placeholder="请选择日期" v-model="modifyCabinetObj.estimatedTime"></el-date-picker>
          </el-form-item>
          <el-form-item label="选择柜型" prop="cabinetType">
            <el-select v-model="modifyCabinetObj.cabinetType" placeholder="请选择柜型">
            </el-select>
          </el-form-item>
          <el-form-item label="柜号">
            <el-input v-model="modifyCabinetObj.cabinetNo" placeholder="请输入柜号" clearable />
          </el-form-item>
        </el-form>
        <el-row class="operate-button">
          <el-button type="primary" @click="onSubmit('modifyForm')">下一步</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-row>
      </template>
      <!-- 装柜纠错 -->
      <template v-if=" dialogConfig.type === 'correction'">
        <el-form ref="correctionForm" :rules="rules" :model="correctionObj" label-position="top">
          <el-form-item label="装柜纠错（二维码/条形码编号）" prop="qrCode">
            <el-input v-model="correctionObj.qrCode" placeholder="请输入二维码/条形码编号" clearable />
          </el-form-item>
        </el-form>
        <el-row class="operate-button">
          <el-button type="primary" @click="onSubmit('correctionForm')">提交</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-row>
      </template>
      <!-- 批量装柜纠错（订单号） -->
      <template v-if=" dialogConfig.type === 'correctionOrder'">
        <el-form ref="orderForm" :rules="rules" :model="orderObj" label-position="top">
          <el-form-item label="装柜纠错（订单号）" prop="orderNo">
            <el-input v-model="orderObj.orderNo" placeholder="请输入订单号" clearable />
          </el-form-item>
        </el-form>
        <el-row class="operate-button">
          <el-button type="primary" @click="onSubmit('orderForm')">提交</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-row>
      </template>
      <!-- 装柜批量输入 -->
      <template v-if=" dialogConfig.type === 'batchInput'">
        <el-form ref="batchForm" :rules="rules" :model="batchObj" label-position="top">
          <el-form-item label="" prop="qrCode">
            <el-input type="textarea" :rows="3" v-model="batchObj.qrCode" placeholder="请输入，多个以逗号分隔" clearable />
          </el-form-item>
        </el-form>
        <el-row class="operate-button">
          <el-button type="primary" @click="onSubmit('batchForm')">提交</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import supplementOrder from "./supplementOrder.vue";

/**
 * 开始装柜
 */
export default {
  name: "startPacking",
  components: {
    supplementOrder,
  },
  data() {
    return {
      // laoding
      loading: false,
      // 二维码/条码编号
      qrCode: "",
      // 表格数据
      listData: [
        {
          selfNo: "111aaa",
          cubNo: "11111111111111111111111111",
        },
        {
          selfNo: "111aaa",
          cubNo: "11111111111111111111111111",
        },
      ],
      // 左侧数据
      testData: [
        {
          key: 1,
          title: "第一部分",
        },
        {
          key: 2,
          title: "第二部分",
        },
      ],
      // 弹窗配置
      dialogConfig: {
        title: "",
        dialogVisible: false,
        width: "30%",
        type: "",
        fullscreen: false,
      },
      // 批量输入
      batchObj: {},
      // 批量纠错（订单号）
      orderObj: {},
      // 纠错
      correctionObj: {},
      // 修改柜信息
      modifyCabinetObj: {},
      // 修改柜信息校验
      rules: {
        warehouse: [{ required: true, message: "必填", trigger: "change" }],
        estimatedTime: [{ required: true, message: "必填", trigger: "change" }],
        cabinetType: [{ required: true, message: "必填", trigger: "change" }],
        qrCode: [{ required: true, message: "必填", trigger: "change" }],
        orderNo: [{ required: true, message: "必填", trigger: "change" }],
      },
    };
  },
  methods: {
    /** 点击事件统一入口 */
    handlerClick(type, title) {
      this.shwoDialog({ type, title });
    },
    /** 表格订单号点击 */
    orderClick(row) {
      this.shwoDialog({
        type: "orderTable",
        title: row.selfNo,
      });
    },
    /** 弹窗事件 */
    shwoDialog(config) {
      this.$set(this.dialogConfig, "title", config.title);
      this.$set(this.dialogConfig, "type", config.type);
      switch (config.type) {
        case "orderTable":
        case "modifyCabinet":
          this.$set(this.dialogConfig, "fullscreen", false);
          break;
        case "supplementOrder":
          this.$set(this.dialogConfig, "fullscreen", true);
          break;
      }
      this.$set(this.dialogConfig, "dialogVisible", true);
    },
    /** 关闭弹窗 */
    closeDialog() {
      this.$set(this.dialogConfig, "dialogVisible", false);
    },
    /** 修改提交 */
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.startPacking {
  p {
    margin: 0;
  }
  .content-area {
    display: flex;
    .left-area {
      border-right: 3px solid #e6ebf5;
      padding-right: 10px;
      .title-info {
        height: 100px;
        > div:first-child {
          font-size: 16px;
          background-color: #f2f2f2;
          line-height: 30px;
          text-align: center;
        }
        > :last-child {
          display: flex;
          > p {
            margin-right: 10px;
            color: #4f9cdd;
          }
        }
      }
    }
    .right-area {
      padding-left: 10px;
      .table-title {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        > div:first-child {
          flex: 1;
          font-size: 16px;
        }
        > div:last-child {
          display: flex;
          > .el-input {
            margin-right: 10px;
          }
        }
      }
      .order-href {
        color: #4f9cdd;
      }
    }
  }
  .totle-info {
    font-size: 20px;
    margin-top: 15px;
    > div {
      display: flex;
      margin-bottom: 5px;
    }
  }
  .button-area {
    text-align: center;
  }
}
</style>
