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

    <!-- 自编号 -->
    <el-row class="number-area">
      <p class="label-font">{{$t('自编号')}}：</p>
      <p class="label-font">{{selfNo}}</p>
      <el-input v-model="labelNo" :placeholder="$t('请输入')"></el-input>
      <div>
        <el-button type="primary" @click="modifyUnload">{{$t('提交')}}</el-button>
        <el-button type="primary" @click="modifyBatchUnload">{{$t('批量输入')}}</el-button>
        <el-button type="primary" @click="modifyAllUnload">{{$t('一键卸柜')}}</el-button>
      </div>
    </el-row>

    <!-- 当前部分 -->
    <el-row class="number-area">
      <p class="label-font">{{$t('当前部分')}}：</p>
      <el-select :placeholder="$t('请选择')" v-model="sectionId" @change="sectionChange">
        <el-option key="0" :label="$t('全部')" value="0"></el-option>
        <el-option v-for="item in sectionList" :key="item.id" :label="item.title" :value="item.id"></el-option>
      </el-select>
      <p>
        {{getSectionInfo}}
      </p>
    </el-row>

    <!-- 表格 -->
    <el-row class="table-area">
      <el-table v-loading="loading" :data="pageData.sectionOrderList" border max-height="500px">
        <el-table-column :label="$t('序号')" align="center" width="50" prop="tidanNum" />
        <el-table-column :label="$t('订单号')" align="center" prop="orderNo">
          <template slot-scope="scope">
            {{ scope.row.orderNo }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('商品信息')" align="center" prop="goodsList" width="200px">
          <template slot-scope="scope">
            <section class="table-goodList">
              <div v-for="(item, index) in scope.row.goodsList" :key="index" class="goodList-div">
                <p>{{$t('品名')}}：{{$l(item, 'prodTitle')}}</p>
                <p>{{$t('品牌')}}：【<template v-if="item.brandName">{{item.brandName}}</template>
                  <dict-tag v-else :type="DICT_TYPE.ECW_IS_BRAND" :value="item.feeType" />{{ $t('】') }}</p>
              </div>
            </section>
          </template>
        </el-table-column>
        <el-table-column :label="$t('报关方式')" align="center" prop="customsType">
          <template slot-scope="scope">
            <div :class="scope.row.customsType !== 1 ? 'custom_type_red' : ''">
              <dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="scope.row.customsType" />
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('实装箱数')" align="center" prop="installNum" />
        <el-table-column :label="$t('卸柜箱数')" align="center" prop="unloadNum" />
        <el-table-column :label="$t('清关状态')" align="center" prop="">
          <template slot-scope="scope">{{clearStatus(scope.row)}}</template>
        </el-table-column>
        <el-table-column :label="$t('体积')" align="center" prop="volume" />
        <el-table-column :label="$t('重量')" align="center" prop="weight" />
        <el-table-column :label="$t('订单状态')" align="center" prop="">
          <template slot-scope="scope">
            {{getOrderError(scope.row, 'orderStatus')}}
          </template>
        </el-table-column>
        <el-table-column :label="$t('异常状态')" align="center" prop="">
          <template slot-scope="scope">
            <el-button v-if="scope.row.exceptionList" type="text" size="small" @click="handleError(scope.row)" icon="el-icon-edit">{{getOrderError(scope.row, 'errorStatus')}}</el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('异常类型')" align="center" prop="">
          <template slot-scope="scope">
            {{getUnloadError(scope.row.exceptionList)}}
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="danger" size="small" @click="openError(scope.row)">{{$t('异常')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!-- 总计 -->
    <el-row>
      <div class="label-font">
        <p>
          <span>{{$t('总计')}}：</span>
          <span>{{getTotlContent(pageData.totalStatistics)}}</span>
        </p>
      </div>
      <div class="label-font">
        <p>
          <span>{{$t('已卸')}}：</span>
          <span>{{getUnLoadNumCount}}</span>
        </p>
      </div>
    </el-row>

    <!-- 审核流程 -->
    <el-row class="process-area">
      <div class="process">
        <div>{{$t('审批流程')}}</div>
        <work-flow xmlkey="unload_container" v-model="selectedUsers"></work-flow>
      </div>
      <!-- 操作 -->
      <div v-if="!isUnderReview">
        <el-button type="success" @click="onSubmit">{{$t('卸柜完成')}}</el-button>
        <el-button plain type="primary" @click="$emit('closeStart')">{{$t('返回')}}</el-button>
      </div>
      <div v-if="isUnderReview">
        <el-button type="primary" @click="jumpReviewDetail">{{$t('卸柜审核中')}}</el-button>
        <el-button plain type="primary" @click="canclAudit">{{$t('取消审核')}}</el-button>
        <el-button plain type="primary" @click="$emit('closeStart')">{{$t('返回')}}</el-button>
      </div>
    </el-row>

    <!-- 对话框 -->
    <el-dialog custom-class="shipping-dialog" :title="$t('异常')" :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,
  approvalCancel,
  getSectionList,
  singleUnload,
} from "@/api/ecw/boxSea";
import { serviceMsg, getTotlContent, toReviewDetail } from "../../utils";
import WorkFlow from "@/components/WorkFlow";
import Decimal from "decimal.js";

/**
 * 开始卸柜
 */
export default {
  name: "startUnloading",
  inheritAttrs: false,
  components: { unloadingError, WorkFlow },
  data() {
    return {
      // 标签号
      labelNo: "",
      // 当前部分
      currPart: "",
      // loading
      loading: false,
      // 页面数据
      pageData: {},
      // 弹窗配置
      dialogVisible: false,
      // 自编号
      selfNo: this.$attrs.shipmentObj.selfNo,
      // 当前行
      currRow: {},
      // 部分
      sectionList: [],
      // 已选部分
      sectionId: "0",
      // 部分订单商品
      sectionObj: {
        secStatistics: {},
        sectionOrderList: [],
        totalStatistics: {},
      },
      selectedUsers: [],
    };
  },
  created() {
    this.getLoadGoodsList();
    // 部分
    getSectionList({ shipmentId: this.$attrs.shipmentObj.id }).then((res) => {
      this.sectionList = res.data.map((item, index) => {
        return {
          ...item,
          title: this.$t("第{index}部分", { index: index + 1 }),
        };
      });
    });
  },
  methods: {
    getTotlContent,
    /* 获取卸柜数据 */
    getLoadGoodsList() {
      this.loading = true;
      let params = {
        secId: this.sectionId,
        shipmentId: this.$attrs.shipmentObj.id,
      };
      loadGoodsList(params).then((res) => {
        const { data } = res;
        this.pageData = data;
        this.loading = false;
      });
    },
    /* 单个卸柜 */
    modifyUnload() {
      if (!this.labelNo) {
        this.$message.error(this.$t("请输入箱号标签"));
        return;
      }
      singleUnload({
        orderNumCode: this.labelNo,
        shipmentId: this.$attrs.shipmentObj.id,
      }).then((res) => {
        serviceMsg(res, this).then((res) => {
          this.labelNo = "";
          this.getLoadGoodsList();
        });
      });
    },
    /* 批量输入 */
    modifyBatchUnload() {
      if (!this.labelNo) {
        this.$message.error(this.$t("请输入订单号"));
        return;
      }
      batchUnload({
        orderNo: this.labelNo,
        shipmentId: this.$attrs.shipmentObj.id,
      }).then((res) => {
        serviceMsg(res, this).then((res) => {
          this.labelNo = "";
          this.getLoadGoodsList();
        });
      });
    },
    /* 一键卸柜 */
    modifyAllUnload() {
      this.$confirm(this.$t("确认卸柜？"), this.$t("提示"), {
        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, // 卸柜
        copyUserId: this.selectedUsers,
      }).then((res) => {
        serviceMsg(res, this).then(() => {
          this.cancel();
        });
      });
    },
    /** 取消 */
    cancel() {
      this.$emit("closeStart", "submit");
    },
    /* 关闭弹窗 */
    closeDialog(type) {
      this.dialogVisible = false;
      if (type === "query") this.getLoadGoodsList();
    },
    /* 打开异常 */
    openError(row) {
      this.currRow = row;
      this.dialogVisible = true;
    },
    /* 清关状态 */
    clearStatus(row) {
      const { installNum, unloadNum } = row;
      if (installNum === unloadNum) {
        return this.$t("全部清关");
      }
      if (installNum >= unloadNum) {
        return this.$t("部分清关");
      }
      if (unloadNum === 0) {
        return this.$t("未清关");
      }
    },
    // 部分切换
    sectionChange() {
      this.getLoadGoodsList();
    },
    /* 取消审核 */
    canclAudit() {
      const { shipmentObj } = this.$attrs;
      approvalCancel({
        applyReason: this.$t("取消审核"),
        id: shipmentObj["cabinetUnloadApprovalInfo"].id,
        shipmentId: shipmentObj.id,
      }).then((res) => {
        serviceMsg(res, this).then(() => {
          this.cancel();
        });
      });
    },
    // 获取异常类型
    getUnloadError(exceptionList) {
      if (!exceptionList) return exceptionList;
      const codes = this.getDictDatas(this.DICT_TYPE.ORDER_ERROR_TYPE);
      let errorLabels = [];
      exceptionList.forEach((item) => {
        const errObj = codes.find(
          (cItem) => cItem.value === item.orderExceptionType
        );
        if (errObj) errorLabels.push(errObj.label);
      });
      return errorLabels.join(",");
    },
    // 订单异常
    getOrderError(row, type) {
      if (row.exceptionList && row.exceptionList.length) {
        return type === "orderStatus" ? this.$t("卸柜异常") : this.$t("待处理");
      }
      return type === "orderStatus" ? this.$t("已到港") : "";
    },
    // 处理异常
    handleError(row) {
      this.$emit("closeStart", "close");
      this.$router.push({
        path: `/order/pending?id=${row.orderId}`,
      });
    },
    jumpReviewDetail() {
      const { cabinetUnloadApprovalInfo } = this.$attrs.shipmentObj;
      toReviewDetail.apply(this, [cabinetUnloadApprovalInfo.bpmProcessId]);
      this.$emit("closeStart", "close");
    },
  },
  computed: {
    /* 是否审核中 */
    isUnderReview() {
      const { currNode, shipmentObj } = this.$attrs;
      return shipmentObj[currNode.keyName] === 183 ? true : false;
    },
    // 部分信息
    getSectionInfo() {
      const { totalStatistics, secStatistics } = this.pageData;
      if (!this.sectionId) {
        return getTotlContent(totalStatistics);
      } else {
        return getTotlContent(secStatistics);
      }
    },
    /* 已卸总数 */
    getUnLoadNumCount() {
      let count = 0;
      if (this.pageData.sectionOrderList) {
        this.pageData.sectionOrderList.forEach((item) => {
          count = Decimal.add(count, item.unloadNum).toNumber();
        });
      }
      return count;
    },
  },
};
</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 {
        border-bottom: 1px solid #e6ebf5;
        > p {
          text-align: left;
          > span {
            margin-right: 0px;
          }
        }
      }
      > div:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>