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

    <!-- 自编号 -->
    <el-row>
      <p style="color:#D9001B;" v-if="pageData.boxCustomsBackVO&&pageData.boxCustomsBackVO.overMachineStatus==2&&pageData.boxCustomsBackVO.overMachineAbnormalStatus==2&&pageData.boxCustomsBackVO.weightMisreport==1">
        {{$t('过机重量异常')}}:{{$t('机场误差3%以内')}}
      </p>
      <p style="color:#D9001B;" v-if="pageData.boxCustomsBackVO&&pageData.boxCustomsBackVO.overMachineStatus==2&&pageData.boxCustomsBackVO.overMachineAbnormalStatus==2&&pageData.boxCustomsBackVO.weightMisreport==2">
        {{$t('过机重量异常')}}:{{$t('我司误差超10kg')}}
      </p>
      <p style="color:#D9001B;" v-if="pageData.boxCustomsBackVO&&pageData.boxCustomsBackVO.overMachineStatus==2&&pageData.boxCustomsBackVO.overMachineAbnormalStatus==2&&pageData.boxCustomsBackVO.overWeight>0">
        {{$t('过机重量异常')}}:{{$t('超过机场重量')}}{{pageData.boxCustomsBackVO.overWeight}}kg
      </p>
      <p style="color:#D9001B;" v-if="pageData.boxCustomsBackVO&&pageData.boxCustomsBackVO.overMachineStatus==2&&pageData.boxCustomsBackVO.overMachineAbnormalStatus==2&&pageData.boxCustomsBackVO.weightMisreport==3">
       {{$t('过机重量异常')}}: {{$t('过机放行-未找到重货订单')}}
      </p>
      <p style="color:#D9001B;" v-if="pageData.boxCustomsBackVO&&pageData.boxCustomsBackVO.overMachineStatus==2&&pageData.boxCustomsBackVO.overMachineAbnormalStatus==2&&pageData.boxCustomsBackVO.weightMisreport==4">
       {{$t('过机重量异常')}}: {{$t('过机放行-已找到重货订单')}}:<span v-for="order in strToArray(pageData.boxCustomsBackVO.overOrders)" :key="order">{{ getOrders(order) }}</span>
      </p>
    </el-row>
    <el-row class="number-area">
      <p class="label-font"><span style="color:red">*</span>{{$t('到仓时间')}}：</p>
      <el-date-picker type="datetime" :placeholder="$t('请选择日期')" v-model="ulWarehouseTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
    </el-row>
    <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>
      <el-form inline>
        <el-form-item :label="$t('订单号')">
          <el-input v-model="queryParams.orderNo" :placeholder="$t('请输入订单号')" clearable></el-input>
        </el-form-item>
        <el-form-item :label="$t('始发仓')">
          <el-select v-model="queryParams.startWarehouseIds" :placeholder="$t('请选择始发仓')" clearable multiple>
            <el-option v-for="item in exportWarehouseList" :label="$l(item, 'title')" :value="$l(item, 'title')" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('目的仓')">
          <el-select v-model="queryParams.destWarehouseIds" :placeholder="$t('请选择目的仓')" clearable multiple>
            <el-option v-for="item in importWarehouseList" :label="$l(item, 'title')" :value="$l(item, 'title')" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('订单状态')">
          <dict-selector :type="DICT_TYPE.ORDER_STATUS" v-model="queryParams.status" :filter="statusDictFilter" clearable />
        </el-form-item>
        <el-form-item>
          <el-button @click="batchUnLoad" :disabled="!multipleSelection.length">{{$t('选中订单一键卸柜')}}</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <!-- 表格 -->
    <el-row class="table-area">
      <el-table v-loading="loading" :data="filteredOrderList" border max-height="500px" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column :label="$t('序号')" align="center" width="50" prop="tidanNum" />
        <el-table-column :label="$t('订单号')" align="center" prop="orderNo">
          <template slot-scope="scope">
                  <div>
                    <a href="javascript:void(0);" class="order-href" @click="orderClick(scope.row)">{{scope.row.orderNo}}</a>
                  </div>
                  <div style="color:blue;fontWeight:bold;">
                    {{ scope.row.isExternalWarehouse === 1 ? '(' + $t('外部仓') + ')' : ''}}
                  </div>
                </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">
          <template slot-scope="scope">
                  <div>
                    <a href="javascript:void(0);" class="order-href" @click="orderClick(scope.row)">{{scope.row.installNum}}</a>
                  </div>
                  <div style="color:blue;fontWeight:bold;">
                    {{ scope.row.isExternalWarehouse === 1 ? '(' + $t('外部仓') + ')' : ''}}
                  </div>
                </template>
        </el-table-column>
        <el-table-column :label="$t('到仓箱数')" align="center" prop="unloadNum">
          <template slot-scope="scope">
                  <div>
                    <a href="javascript:void(0);" class="order-href" @click="orderClick(scope.row)">{{scope.row.unloadNum}}</a>
                  </div>
                  <div style="color:blue;fontWeight:bold;">
                    {{ scope.row.isExternalWarehouse === 1 ? '(' + $t('外部仓') + ')' : ''}}
                  </div>
                </template>
        </el-table-column>
        <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="startWarehouseName" />
        <el-table-column :label="$t('目的仓')" align="center" prop="destWarehouseName" />
        <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">
            {{scope.row.statusMsg}}
          </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" width="170" class-name="small-padding fixed-width">
          <template slot-scope="scope"  >
            <div class="number-area">
              <el-button type="danger" size="small" @click="openError(scope.row)">{{$t('异常')}}</el-button>
              <el-button v-if="pageData.boxCustomsBackVO&&pageData.boxCustomsBackVO.overMachineStatus==2&&pageData.boxCustomsBackVO.overMachineAbnormalStatus==2" plain type="primary" size="small" @click="$router.push('/order/warehousing-update?id='+scope.row.orderId)">{{$t('入仓修改 ')}}</el-button>
            </div>
          </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('closeDialog')">{{$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('closeDialog')">{{$t('返回')}}</el-button>
      </div>
    </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>
      <!-- 已装未装订单 -->
      <template v-if="dialogConfig.type === 'orderTable'">
        <el-table :data="orderList" height="500px" border>
          <el-table-column :label="$t('实装')" align="center" prop="loadTag" />
          <el-table-column :label="$t('到仓')" align="center" prop="unloadTag" />
        </el-table>
      </template>
    </el-dialog>
    <!-- 对话框 -->
    <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>
    <el-dialog :title="$t('批量到仓选中订单')" :visible="batchUnloading" :before-close="handleCloseBatchUnloading" append-to-body>
      <template v-for="item in batchLogs">
        <div>{{item}}</div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import unloadingError from "./unloadingError.vue";
import {
  loadGoodsList,
  airBatchUnload,
  airAllUnload,
  orderTagList,
  approvalCreate,
  approvalCancel,
  getSectionList,
  airSingleUnload,
  boxGoodsDetail
} from "@/api/ecw/boxSea";
import { serviceMsg, getTotlContent, toReviewDetail } from "../../utils";
import WorkFlow from "@/components/WorkFlow";
import Decimal from "decimal.js";
import { getWarehouseList } from '@/api/ecw/warehouse'
import Template from '@/views/cms/template/index.vue'

/**
 * 开始卸柜
 */
export default {
  name: "startUnloading",
  inheritAttrs: false,
  components: { Template, unloadingError, WorkFlow },
  data() {
    return {
      // 标签号
      labelNo: "",
      // 当前部分
      currPart: "",
      // loading
      loading: false,
      // 页面数据
      pageData: {},
      // 弹窗配置
      dialogConfig: {
        title: "",
        dialogVisible: false,
        width: "30%",
        type: "",
        fullscreen: false,
      },
      dialogVisible: false,
      // 已装/未装
      orderList: [],
      // 自编号
      selfNo: this.$attrs.shipmentObj.selfNo,
      // 当前行
      currRow: {},
      // 部分
      sectionList: [],
      // 已选部分
      sectionId: "0",
      // 部分订单商品
      sectionObj: {
        secStatistics: {},
        sectionOrderList: [],
        totalStatistics: {},
      },
      selectedUsers: [],
      sectionOrderList: [],
      ulWarehouseTime: null,
      warehouseList:[],
      // 筛选参数
      queryParams:{
        orderNo: '',
        startWarehouseIds:[],
        destWarehouseIds:[],
        status: null
      },
      // 表格选中的
      multipleSelection: [],
      // 是否正在批量卸柜
      batchUnloading: false,
      // 批量操作的日志
      batchLogs:[]
    };
  },
  created() {
    getWarehouseList().then(res => this.warehouseList = res.data)
    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 }),
        };
      });
    });
    boxGoodsDetail({
      shipmentId: this.$attrs.shipmentObj.id,
      secId: 0
    }).then((res) => {
      this.sectionOrderList = res.data.sectionOrderList
    })
  },
  methods: {
    getTotlContent,
    getOrders(id) {
      let order = this.sectionOrderList.find((item) => item.orderId == id)
      if (order) {
        return order.orderNo
      }
      return ''
    },
    strToArray(str) {
      if (!str) return []
      let array = str?.split(',') ?? []
      return array.map((item) => {
        return Number(item)
      })
    },
    /* 获取卸柜数据 */
    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;
      });
    },
    /** 表格订单号点击 */
    orderClick(row) {
      orderTagList({ orderId: row.orderId }).then((res) => {
        const { data = {} } = res;
        this.orderList = [];
        // 取最长的list
        let dataLength = data.loadList.length;
        if (data.unLoadList.length > dataLength) {
          dataLength = data.unLoadList.length;
        }

        // 组装数据，用一个table组件渲染
        for (let index = 0; index < dataLength; index++) {
          this.orderList.push({
            loadTag: data.loadList[index],
            unloadTag: data.unloadCabinetList[index],
          });
        }
      });
      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":
          this.$set(this.dialogConfig, "fullscreen", false);
          break;
      }
      this.$set(this.dialogConfig, "dialogVisible", true);
    },
    /* 单个卸柜 */
    modifyUnload() {
      if (!this.labelNo) {
        this.$message.error(this.$t("请输入箱号标签"));
        return;
      }
      airSingleUnload({
        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;
      }
      if (!this.ulWarehouseTime) {
        this.$message.error(this.$t("请选择到仓时间"));
        return;
      }
      airBatchUnload({
        orderNo: this.labelNo,
        shipmentId: this.$attrs.shipmentObj.id,
        unloadTime: this.ulWarehouseTime
      }).then((res) => {
        serviceMsg(res, this).then((res) => {
          this.labelNo = "";
          this.getLoadGoodsList();
        });
      });
    },
    /* 一键卸柜 */
    modifyAllUnload() {
      if (!this.ulWarehouseTime) {
        this.$message.error(this.$t("请选择到仓时间"));
        return;
      }
      this.$confirm(this.$t("确认到仓？"), this.$t("提示"), {
        type: "warning",
      })
        .then((_) => {
          airAllUnload({ shipmentId: this.$attrs.shipmentObj.id, unloadTime: this.ulWarehouseTime }).then((res) => {
            serviceMsg(res, this).then((res) => {
              this.getLoadGoodsList();
            });
          });
        })
        .catch((_) => {});
    },
    /** 提交 */
    onSubmit() {
    //  let flag = false
    //  this.pageData.sectionOrderList.forEach(item=>{
    //   if(![118428,15].includes(item.status)){
    //      flag = true
    //    }
    //  })
    //  if(flag){
    //    this.$message.error(this.$t("存在未到港或未清关的订单"));
    //   return
    //  }
      if(this.getUnLoadNumCount>0){
        approvalCreate({
            shipmentId: this.$attrs.shipmentObj.id,
            approvalStatus: 0,
            approvalType: 15, // 卸柜
            copyUserId: this.selectedUsers,
          }).then((res) => {
            serviceMsg(res, this).then(() => {
              this.cancel("submit");
            });
        });
      }else{
        this.$message.error(this.$t("货物到仓数小于实装数，请确认"));
      }

    },
    /** 取消 */
    cancel(type) {
      this.$emit('closeDialog', type)
    },
    /* 关闭弹窗 */
    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("submit");
        });
      });
    },
    // 获取异常类型
    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");
    },
    // 表格多选
    handleSelectionChange(selection) {
      console.log({selection})
      this.multipleSelection = selection
    },
    async batchUnLoad(){
      if(!this.multipleSelection?.length){
        return this.$message(this.$t('请先选择订单'))
      }
      if(!this.ulWarehouseTime){
        return this.$message(this.$t('请选择卸柜时间'))
      }
      console.log('批量卸柜')
      this.batchUnloading = true
      this.batchLogs = []
      for(const item of this.multipleSelection){
        if(!this.batchUnloading)break;
        const time = new Date()
        const timeStr = [time.getHours(), time.getMinutes(), time.getSeconds()].map(item => item.toString().padStart(2, '0')).join(':')
        await airBatchUnload({
          orderNo: item.orderNo,
          shipmentId: this.$attrs.shipmentObj.id,
          unloadTime: this.ulWarehouseTime
        }).then((res) => {
          this.batchLogs.push(`${timeStr} 订单号：${item.orderNo}卸柜成功`)
        }).catch((err) => {
          this.batchLogs.push(`${timeStr} 订单号：${item.orderNo}卸柜失败` + JSON.stringify(err))
        });
      }
      this.batchLogs.push("批量卸柜完成")
      this.getLoadGoodsList();
    },
    handleCloseBatchUnloading(){
      this.batchUnloading = false
    },
    // 过滤订单状态筛选字典内容
    statusDictFilter(item){
      if(item.cssClass && item.cssClass != 'air'){
        return false
      }
      return true
    },
  },
  computed: {
    exportWarehouseList(){
      /* tradeType 1 进口，2出口，3进出口 */
      return this.warehouseList.filter(item => item.tradeType == 2 || item.tradeType == 3)
    },
    importWarehouseList(){
      return this.warehouseList.filter(item => item.tradeType == 1 || item.tradeType == 3)
    },
    filteredOrderList(){
      if(!this.pageData?.sectionOrderList?.length) return []
      return this.pageData.sectionOrderList.filter((item) => {
        if(this.queryParams.orderNo && item.orderNo.indexOf(this.queryParams.orderNo) == -1)return false
        if(this.queryParams.startWarehouseIds?.length && this.queryParams.startWarehouseIds.indexOf(item.startWarehouseName) === -1){
          return false
        }
        if(this.queryParams.destWarehouseIds?.length && this.queryParams.destWarehouseIds.indexOf(item.destWarehouseName) === -1){
          return false
        }
        if(this.queryParams.status && this.queryParams.status != item.status){
          return false
        }
        return true
      })
    },
    /* 是否审核中 */
    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>