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

    <!-- 自编号 -->
    <el-row class="number-area">
      <p class="label-font">自编号：</p>
      <p class="label-font">{{selfNo}}</p>
      <el-input v-model="labelNo" placeholder="请输入标签号"></el-input>
      <div>
        <el-button type="primary" @click="modifyBatchUnload">批量输入</el-button>
        <el-button type="primary" @click="modifyAllUnload">一键卸柜</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 class="table-area">
      <el-table v-loading="loading" :data="pageData.sectionOrderList" border>
        <el-table-column label="序号" type="index" align="center" width="50" />
        <el-table-column label="订单号" align="center" prop="orderNo">
          <template slot-scope="scope">
            <a href="javascript:void(0);" class="order-href">{{ scope.row.orderNo }}</a>
          </template>
        </el-table-column>
        <el-table-column label="商品信息" align="center" prop="goodsList">
          <template slot-scope="scope">
            <section class="table-goodList">
              <div v-for="(item, index) in scope.row.goodsList" :key="index" class="goodList-div">
                <p>{{index+1}}：{{item.prodTitleZh}}</p>
              </div>
            </section>
          </template>
        </el-table-column>
        <el-table-column label="实装箱数" align="center" prop="installNum" />
        <el-table-column label="卸柜箱数" align="center" prop="unloadNum" />
        <el-table-column label="清关状态" align="center" prop="" />
        <el-table-column label="体积" align="center" prop="volume" />
        <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(scope.row)">异常</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!-- 总计 -->
    <el-row>
      <div class="label-font">
        <p>
          <span>总计：</span>
          <span>{{pageData.totalStatistics ? pageData.totalStatistics.num : 0}}箱</span>
          <span>{{pageData.totalStatistics ? pageData.totalStatistics.volume : 0}}m3</span>
          <span>{{pageData.totalStatistics ? pageData.totalStatistics.weight : 0}}kg</span>
        </p>
      </div>
      <div class="label-font">
        <p>
          <span>已卸：</span>
          <span>0</span>
        </p>
      </div>
    </el-row>

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

    <!-- 对话框 -->
    <el-dialog custom-class="shipping-dialog" title="异常" :visible.sync="dialogVisible" width="600px" :modal-append-to-body=false append-to-body>
      <unloadingError v-if="dialogVisible" @closeDialog="closeDialog" v-bind="$attrs" :currRow="currRow" />
    </el-dialog>
  </div>
</template>

<script>
import unloadingError from "./unloadingError.vue";
import {
  loadGoodsList,
  batchUnload,
  allUnload,
  approvalCreate,
  serviceMsg,
} from "@/api/ecw/boxSea";
/**
 * 开始卸柜
 */
export default {
  name: "startUnloading",
  inheritAttrs: false,
  components: { unloadingError },
  data() {
    return {
      // 标签号
      labelNo: "",
      // 当前部分
      currPart: "",
      // loading
      loading: false,
      // 页面数据
      pageData: {},
      // 弹窗配置
      dialogVisible: false,
      // 自编号
      selfNo: this.$attrs.shipmentObj.selfNo,
      // 当前行
      currRow: {},
    };
  },
  created() {
    this.getLoadGoodsList();
  },
  methods: {
    /* 获取卸柜数据 */
    getLoadGoodsList(params) {
      this.loading = true;
      params = {
        secId: 0,
        ...params,
        shipmentId: this.$attrs.shipmentObj.id,
      };
      loadGoodsList(params).then((res) => {
        const { data } = res;
        this.pageData = data;
        this.loading = false;
      });
    },
    /* 批量输入 */
    modifyBatchUnload() {
      if (!this.labelNo) {
        this.$message.error("请输入标签号");
        return;
      }
      batchUnload({
        orderNo: this.labelNo,
        shipmentId: this.$attrs.shipmentObj.id,
      }).then((res) => {
        serviceMsg(res, this).then((res) => {
          this.getLoadGoodsList();
        });
      });
    },
    /* 一键卸柜 */
    modifyAllUnload() {
      this.$confirm("确认卸柜？", "提示", {
        type: "warning",
      })
        .then((_) => {
          allUnload({ shipmentId: this.$attrs.shipmentObj.id }).then((res) => {
            serviceMsg(res, this).then((res) => {
              this.getLoadGoodsList();
            });
          });
        })
        .catch((_) => {});
    },
    /** 提交 */
    onSubmit() {
      approvalCreate({
        shipmentId: this.$attrs.shipmentObj.id,
        approvalStatus: 0,
        approvalType: 3, // 卸柜
      }).then((res) => {
        serviceMsg(res, this).then(() => {
          this.cancel();
        });
      });
    },
    /** 取消 */
    cancel() {
      this.$emit("closeStart");
    },
    /* 关闭弹窗 */
    closeDialog() {
      this.dialogVisible = false;
      this.getLoadGoodsList();
    },
    // 打开异常
    openError(row) {
      this.currRow = row;
      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;
    }
  }
  .table-area {
    .table-goodList {
      .goodList-div {
        > p {
          text-align: left;
        }
        > p:last-child {
          > span {
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
