<template>
  <div class="app-container">
    <h2>{{ title }}-{{ order.orderNo }}</h2>

    <order-base-info :order="order"></order-base-info>

    <div style="margin-top: 20px; display: none">
      <span
        >{{ $t("储位") }}：{{
          ($refs.area ? $refs.area.selected : []).join(",")
        }}</span
      >
      <el-button
        type="primary"
        size="mini"
        @click="areaVisible = true"
        style="margin-left: 15px"
        >{{ $t("选择") }}</el-button
      >
    </div>

    <h2>{{ $t("货物信息") }}</h2>
    <el-table
      v-if="
        order.orderItemVOList &&
        order.orderItemVOList.length > 0 &&
        orderItemList &&
        orderItemList.length > 0
      "
      :data="order.orderItemVOList || []"
      style="width: 100%"
    >
      <el-table-column type="index" width="50" :label="$t('序号')">
      </el-table-column>
      <el-table-column prop="prodTitleZh" :label="$t('品名')">
        <template v-slot="{ row }">
          {{ row.prodTitleZh }}<br />
          {{ row.prodTitleEn }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('填单货物属性')">
        <template v-slot="{ row }">
          <span v-if="row.isWarehouseInAdd">{{ $t("非填单货物信息") }}</span>
          <template v-else>
            {{ $t("品牌") }}：{{
              [$t("无牌"), $t("有牌"), $t("中性")][row.brandType]
            }}<br />
            {{ $t("箱数") }}：{{ row.num }}<br />
            {{ $t("体积") }}：{{ row.volume }}m³<br />
            {{ $t("重量") }}：{{ row.weight }}Kg
          </template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('入库货物属性')">
        <template v-slot="{ row }">
          <template v-if="row.warehouseInInfoVO">
            {{ $t("品牌") }}：{{ row.brandName }}<br />
            {{ $t("箱数") }}：{{ row.warehouseInInfoVO.cartonsNum }}<br />
            {{ $t("体积") }}：{{ row.warehouseInInfoVO.volume }}m³<br />
            {{ $t("重量") }}：{{ row.warehouseInInfoVO.weight }}Kg
          </template>
          <span v-else>{{ $t("暂无入仓信息") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="expressNo"
        v-slot="{ row }"
        :label="$t('快递单号')"
      >
        {{
          row.expressNo ||
          (row.warehouseInInfoVO ? row.warehouseInInfoVO.expressNo : "")
        }}
      </el-table-column>
      <el-table-column prop="createTime" :label="$t('最后操作时间')">
        <template v-slot="{ row }">
          {{ parseTime(row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="diffType" v-slot="{ row }" :label="$t('状态')">
        <dict-tag
          v-if="row.warehouseInInfoVO && row.warehouseInInfoVO.diffType"
          :type="DICT_TYPE.ORDER_WAREHOUSE_IN_STATUS"
          :value="row.warehouseInInfoVO.diffType"
          class="red"
          :class="{ green: row.warehouseInInfoVO.diffType === 4 }"
        />
        <span :class="{ red: row.itemStatus === 3 }" v-else>{{
          row.itemStatus === 3 ? $t("少了") + row.num + $t("箱") : $t("待入仓")
        }}</span>
        <span
          class="red"
          v-if="row.warehouseInInfoVO && row.warehouseInInfoVO.cartonsNumDiff"
          >{{ row.warehouseInInfoVO.cartonsNumDiff }}{{ $t("箱") }}</span
        >
      </el-table-column>
      <el-table-column prop="address" :label="$t('操作')">
        <template v-slot="{ row, column, $index }">
          <warehouse
            v-if="isEdit"
            :edit="true"
            :order-item-a="order.orderItemVOList[$index]"
            :order-item-b="orderItemList[$index]"
            :title="$t('修改')"
            :order="order"
            :is-shipment="isShipment"
            @close="getList"
          ></warehouse>
          <template
            v-else-if="
              wareItem(row.orderItemId) &&
              wareItem(row.orderItemId).orderWarehouseInBackItemDoList &&
              wareItem(row.orderItemId).orderWarehouseInBackItemDoList.length >
                0
            "
          >
            <!--            <template v-if="!order.parentOrderId">-->
            <warehouse
              v-if="!isEdit"
              :order-item-a="order.orderItemVOList[$index]"
              :order-item-b="orderItemList[$index]"
              :title="$t('追加')"
              :order="order"
              :is-shipment="isShipment"
              @close="getList"
            ></warehouse>
            <el-button
              v-if="!isShipment"
              size="mini"
              type="text"
              @click="handleWarehousingReturn(row)"
              >{{ $t("退仓") }}</el-button
            >
            <!--            </template>-->
          </template>
          <warehouse
            v-else
            :order-item-a="order.orderItemVOList[$index]"
            :order-item-b="orderItemList[$index]"
            :title="$t('入仓')"
            :order="order"
            @close="getList"
          ></warehouse>
        </template>
      </el-table-column>
    </el-table>

    <el-card v-if="order.parentOrderId" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span style="font-size: 18px">{{ $t("标签箱号") }}</span>
      </div>

      <div
        v-for="(item, index) in label.orderLabelDtoList"
        :key="index"
        style="margin-bottom: 10px"
      >
        <el-input-number
          v-model="item.start"
          controls-position="right"
        ></el-input-number>
        -
        <el-input-number
          v-model="item.end"
          controls-position="right"
        ></el-input-number>
        <el-button
          icon="el-icon-minus"
          circle
          v-show="index !== 0"
          @click="label.orderLabelDtoList.splice(index, 1)"
          style="margin-left: 10px"
        ></el-button>
        <el-button
          icon="el-icon-plus"
          circle
          @click="handleLabelAdd(index)"
        ></el-button>
      </div>
      <div style="text-align: center">
        <el-button type="primary" @click="handleLabelSubmit">{{
          $t("修改箱号")
        }}</el-button>
      </div>
    </el-card>

    <h2 v-if="orderSpecialNeeds.length > 0">{{ $t("特殊需求") }}</h2>
    <el-form ref="form" :model="form" label-width="200px">
      <el-form-item
        :label="$i18n.locale === 'en_US' ? item.labelEn : item.label"
        v-for="(item, index) in orderSpecialNeeds"
        :key="item.value"
        style="width: 600px"
      >
        <el-input-number
          v-model="
            form.orderSpecialNeedReceivableReqVoList[index].receivableMoney
          "
          type="number"
          :min="0"
          step-strictly
          :placeholder="
            $t('请输入') +
            ($i18n.locale === 'en_US' ? item.labelEn : item.label)
          "
        ></el-input-number>
        <el-select
          v-model="
            form.orderSpecialNeedReceivableReqVoList[index]
              .receivableMoneyCurrency
          "
          :placeholder="$t('请选择')"
          style="width: 100px"
        >
          <el-option
            v-for="item in currencyList"
            :key="item.id"
            :label="$i18n.locale === 'en_US' ? item.titleEn : item.titleZh"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <h2>{{ $t("订单数据") }}</h2>
      <el-form-item :label="$t('总方数')" style="width: 380px">
        <el-input
          v-model="form.sumVolume"
          :placeholder="$t('请输入总方数')"
          readonly
        >
          <span slot="append">m³</span>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('总重量')" style="width: 380px">
        <el-input
          v-model="form.sumWeight"
          :placeholder="$t('请输入总重量')"
          readonly
        >
          <span slot="append">kg</span>
        </el-input>
      </el-form-item>

      <el-card style="margin-top: 15px">
        <div slot="header" class="clearfix">
          <span style="font-size: 18px">{{ $t("入仓影像") }}</span>
        </div>
        <div>
          <image-and-video-upload
            readonly
            :fileSize="50"
            :isShowTip="true"
            :value="form.urls"
          ></image-and-video-upload>
        </div>
      </el-card>
      <div
        style="text-align: center; margin-top: 15px"
        v-if="!(order.status !== 3 && isEdit) && !isShipment"
      >
        <el-button @click="escapeBol = true" type="primary">{{
          $t("转异")
        }}</el-button>
        <el-button type="primary" @click="finishVisible = true">{{
          $t("完成入仓")
        }}</el-button>
      </div>
    </el-form>

    <warehouse-area-dialog
      ref="area"
      :visible.sync="areaVisible"
      v-model="form.orderLocationCreateReqVOList"
      :order-id="orderId"
      :warehouse-id="warehouseId"
      :is-editing="isEdit"
    ></warehouse-area-dialog>

    <!--  完成入仓  -->
    <el-dialog
      :title="$t('确认入仓')"
      :visible.sync="finishVisible"
      width="300px"
    >
      <div style="text-align: center">{{ $t("在完成入仓前，您还可以") }}</div>
      <div style="text-align: center; padding: 15px 0">
        <!--        <el-button type="info" @click="areaVisible = true">{{$t('选择储位')}}</el-button>-->
        <el-button type="info" @click="isShowPrintTag = true">{{
          $t("打印标签")
        }}</el-button>
      </div>
      <div style="text-align: center">
        <el-button type="primary" @click="handleSubmit()">{{
          $t("确 定")
        }}</el-button>
      </div>
    </el-dialog>
    <!--转异对话框 lanbm 2024-06-19 添加注释-->
    <el-dialog
      :title="order.orderNo + $t('订单转异')"
      center
      :visible.sync="escapeBol"
    >
      <el-form
        label-position="top"
        label-width="200"
        ref="exceptionForm"
        :model="form"
        :rules="exceptionRules"
      >
        <el-form-item :label="$t('原因类型')" prop="manualExceptionType">
          <dict-selector
            v-model="form.manualExceptionType"
            form-type="checkbox"
            :type="DICT_TYPE.MANUAL_EXCEPTION_TYPE"
            multiple
          ></dict-selector>
        </el-form-item>
        <el-form-item :label="$t('附件')">
          <image-upload v-model="form.exceptionUrls"></image-upload>
        </el-form-item>
        <el-form-item :label="$t('详细信息')">
          <el-input v-model="form.descZh" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleException">{{
          $t("确认并完成入仓")
        }}</el-button>
        <el-button @click="escapeBol = false">{{ $t("取消") }}</el-button>
      </span>
    </el-dialog>

    <print-tag
      v-if="isShowPrintTag"
      :order-id="orderId"
      @close="isShowPrintTag = false"
    ></print-tag>

    <print-warehouse-receipt
      v-if="isShowPrint"
      :order-id="orderId"
      @close="isShowPrint = false"
    />
  </div>
</template>
<script>
import { getCurrencyList } from "@/api/ecw/currency";
import {
  getLabelByOrder,
  getLabelWaitInByOrder,
  getOrder,
  getOrderWarehouseIn,
  getSpecialListByOrderId,
  listByOrderId,
  orderWarehouseInFinish,
  orderWarehouseInUpdateLabel,
  rollbackDelete,
  warehousePictureList,
} from "@/api/ecw/order";
import orderBaseInfo from "@/components/OrderBaseInfo";
import WarehouseAreaDialog from "@/components/WarehouseAreaDialog";
import { DICT_TYPE } from "@/utils/dict";
import PrintTag from "@/views/ecw/order/components/PrintTag";
import PrintWarehouseReceipt from "@/views/ecw/order/components/PrintWarehouseReceipt";
import imageUpload from "@/components/ImageUpload";
import { parseTime } from "@/utils/ruoyi";
import ImageAndVideoUpload from "@/components/ImageAndVideoUpload";
import Warehouse from "@/views/ecw/order/warehousing/components/Warehouse";
export default {
  name: "Warehousing",
  components: {
    orderBaseInfo,
    WarehouseAreaDialog,
    PrintTag,
    PrintWarehouseReceipt,
    imageUpload,
    ImageAndVideoUpload,
    Warehouse,
  },

  mounted() {
    if (this.$route.query.id) {
      this.orderId = parseInt(this.$route.query.id || undefined);
      this.getOrderItemList();
      getSpecialListByOrderId(this.orderId).then(
        (r) => (this.specialList = r.data)
      );

      Promise.all([
        this.getOrder(),
        listByOrderId({ orderId: this.orderId }).then((r) => {
          this.form.orderLocationCreateReqVOList = r.data;
        }),
      ]).then(() => {
        // 等待仓库id和已选的储位后初始化储位信息
        this.$nextTick(() => {
          this.$refs.area.updateArea();
        });
      });
    }
    getCurrencyList().then((res) => (this.currencyList = res.data));
  },

  data() {
    return {
      parseTime,
      DICT_TYPE,
      areaVisible: false,
      finishVisible: false,
      warehousingVisible: false,
      form: {
        orderSpecialNeedReceivableReqVoList: [],
        orderLocationCreateReqVOList: [],
        exceptionUrls: [],
        descZh: "",
        manualExceptionType: [],
        urls: [],
        sumVolume: "",
        sumWeight: "",
      },
      currencyList: [],
      order: {},
      orderId: undefined,
      orderItemList: [],
      specialList: [],
      warehousing: undefined,
      isShowPrintTag: false,
      isShowPrint: false,
      escapeBol: false,

      label: {
        orderId: 0,
        orderLabelDtoList: [
          {
            end: 0,
            start: 0,
          },
        ],
      },
      exceptionRules: {
        manualExceptionType: [
          { required: true, message: "请勾选原因类型", trigger: "change" },
          {
            validator: (rule, value, callback) => {
              if (value.length <= 0) {
                callback(new Error("请勾选原因类型"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      },
    };
  },

  methods: {
    getOrderItemList() {
      this.orderItemList = [];
      return getOrderWarehouseIn(this.orderId).then(
        (r) => (this.orderItemList = r.data)
      );
    },
    getList() {
      this.getOrder();
      this.getOrderItemList();
    },
    getWarehousePictureList() {
      return warehousePictureList({
        bizId: this.order.orderId,
        type: 1,
      }).then((r) => {
        this.form.urls = r.data.map((i) => i.url);
      });
    },
    include() {
      return (state, arr) => {
        return arr.indexOf(state) > -1;
      };
    },
    exclude() {
      return (state, arr) => {
        return arr.indexOf(state) == -1;
      };
    },
    handleLabelSubmit() {
      orderWarehouseInUpdateLabel({
        ...this.label,
        orderId: this.orderId,
      }).then((r) => {
        if (r.code === 0) {
          this.$message.success(r.msg || this.$t("修改标签箱号成功"));
        }
      });
    },

    // 箱号标签回显
    getLabelByOrder() {
      getLabelByOrder(this.orderId).then((r) => {
        if (r.code === 0 && !!r.data && r.data.length > 0) {
          this.label.orderLabelDtoList = r.data;
        } else {
          // 没有历史数据，查默认值
          getLabelWaitInByOrder(this.orderId).then((r) => {
            console.log(r);
            if (r.code === 0 && !!r.data) {
              this.label.orderLabelDtoList = [r.data];
            }
          });
        }
      });
    },
    handleLabelAdd(index) {
      this.label.orderLabelDtoList.splice(index + 1, 0, {
        end: "",
        start: "",
      });
    },
    getTowSum() {
      // let sumVolume = 0
      // let sumWeight = 0
      // this.order.orderItemVOList.forEach(e => {
      //   if (e?.warehouseInInfoVO?.volume) sumVolume += e.warehouseInInfoVO.volume
      //   if (e?.warehouseInInfoVO?.weight) sumWeight += e.warehouseInInfoVO.weight
      // })
      this.form.sumVolume = this.order.sumVolume; // || sumVolume
      this.form.sumWeight = this.order.sumWeight; // || sumWeight
    },
    getOrder() {
      return getOrder(this.orderId)
        .then((r) => {
          this.order = r.data;
          this.getTowSum();
        })
        .then(() => {
          this.getLabelByOrder();
          this.getWarehousePictureList();
        });
    },
    specialHas0() {
      let result = false;
      this.form.orderSpecialNeedReceivableReqVoList.forEach((e) => {
        if (e.receivableMoney === "0" || e.receivableMoney === "") {
          result = true;
        }
      });
      return result;
    },
    handleException() {
      this.$refs.exceptionForm.validate((valid) => {
        if (valid) {
          this.handleSubmit();
        } else {
          this.$message.warning("请勾选原因类型");
        }
      });
    },
    async handleSubmit() {
      if (this.specialHas0()) {
        const confirm = await this.$confirm(
          this.$t("有特需费用为0或未填写，请问是否继续？"),
          this.$t("注意"),
          {
            confirmButtonText: this.$t("继续"),
            cancelButtonText: this.$t("取消"),
            type: "warning",
          }
        );
        if (confirm !== "confirm") {
          return;
        }
      }
      let form = {
        orderSpecialNeedReceivableReqVoList:
          this.form.orderSpecialNeedReceivableReqVoList,
        orderLocationCreateReqVOList: this.form.orderLocationCreateReqVOList,
        orderId: this.order.orderId,
        // urls: this.form.urls,
        sumVolume: this.form.sumVolume,
        sumWeight: this.form.sumWeight,
        isAppend: this.isAdd,
      };

      // 标签箱号
      if (this.order.parentOrderId) {
        form.labelList = this.label.orderLabelDtoList || [];
      }

      if (this.escapeBol) {
        form.exceptionUrls =
          this.form.exceptionUrls.length !== 0
            ? this.form.exceptionUrls?.split(",")
            : [];
        form.descZh = this.form.descZh;
        form.manualExceptionType = this.form.manualExceptionType.join(",");
      }
      orderWarehouseInFinish(form).then((r) => {
        if (r.code === 0) {
          this.escapeBol = false;
          this.finishVisible = false;
          const message = !r.data
            ? this.$t("该订单已成功入仓，是否打印？")
            : `<h3>${this.$t("货物已入仓，存在异常")}</h3>${this.$t(
                "该订单已成功入仓，是否打印？"
              )}`;
          this.$confirm(message, this.$t("货物已入仓"), {
            confirmButtonText: this.$t("是"),
            cancelButtonText: this.$t("否"),
            dangerouslyUseHTMLString: true,
          })
            .then(() => {
              this.isShowPrint = true;
            })
            .catch(() => {
              // this.$store.dispatch('tagsView/delVisitedView')
              this.$message.success(this.$t("入仓成功"));
              this.$tab.closePage();
            });
        }
      });
    },
    handleWarehousingReturn(item) {
      this.$confirm(
        item.prodTitleZh + this.$t("退仓后不可恢复，是否确认退仓？"),
        this.$t("确定要退仓？"),
        {
          confirmButtonText: this.$t("确定"),
          cancelButtonText: this.$t("取消"),
          type: "warning",
        }
      )
        .then(() => {
          rollbackDelete({
            orderId: item.orderId,
            orderItemId: item.orderItemId,
          }).then(() => {
            this.$message({
              type: "success",
              message: this.$t("货物退仓成功!"),
            });

            this.getOrderItemList();
            this.getOrder();
          });
        })
        .catch((e) => {});
    },
  },

  watch: {
    orderSpecialNeeds(val) {
      val.forEach((e) => {
        this.form.orderSpecialNeedReceivableReqVoList.push({
          id: e.id,
          receivableMoney: e.transFee || "",
          receivableMoneyCurrency: e.transCurrency || 3,
        });
      });
    },
  },

  computed: {
    // 根据orderItemId获取入仓item
    wareItem() {
      return (orderItemId) => {
        return this.orderItemList.find(
          (item) => item.orderItemId == orderItemId
        );
      };
    },
    isAdd() {
      return this.$route.path === "/order/warehousing-add";
    },
    isEdit() {
      return this.$route.path === "/order/warehousing-update";
    },
    title() {
      return this.$i18n.locale === "en_US"
        ? this.$route.meta.titleEn
        : this.$route.name;
    },
    orderSpecialNeedsDict() {
      return this.$store.state.dict.dictDatas.order_special_needs;
    },
    orderSpecialNeeds() {
      const result = [];
      this.specialList.forEach((e) => {
        const t = this.orderSpecialNeedsDict.find(
          (f) => f.value === e.advanceType
        );
        if (t) {
          result.push({ ...e, label: t.label, labelEn: t.labelEn });
        }
      });
      return result;
    },
    warehouseId() {
      return this.order?.logisticsInfoDto?.startWarehouseId;
    },
    isShipment(){
      return this.$route.query?.shipment==1
    }
  },
};
</script>

<style scoped lang="scss">
@import "src/assets/styles/element-variables";
.red {
  color: $--color-danger;
}
.green {
  color: $--color-success;
}
</style>