<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 }">
          <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 :label="$t('到仓货物属性')">
        <template v-slot="{ row }">
          <template v-if="row.warehouseCheckInfoVO">
            {{ $t("品牌") }}：{{ row.brandName }}<br />
            {{ $t("箱数") }}：{{ row.warehouseCheckInfoVO.cartonsNum }}<br />
            {{ $t("体积") }}：{{ row.warehouseCheckInfoVO.volume }}m³<br />
            {{ $t("重量") }}：{{ row.warehouseCheckInfoVO.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 :edit="true" :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>
    </el-form>
  </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/warehousingTo/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))
      this.getOrder()
      // Promise.all([
      //   this.getOrder(),
      //   listByOrderId({ orderId: this.orderId }).then((r) => {
      //     this.form.orderLocationCreateReqVOList = r.data
      //   })
      // ])
    }
    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: 7
      }).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/warehousingTo-add"
    },
    isEdit() {
      return this.$route.path === "/order/warehousingTo-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
    }
  }
}
</script>

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