<template>
  <el-dialog :visible="show" @close="handleClose" :title="$t('海外仓修改申请')" width="1000px">
    <el-form label-position="left" label-width="150px" :model="form" :disabled="applyStatus === 1">
      <el-row :gutter="20">
        <!-- 订单号 -->
        <el-col :span="8">
          <el-form-item :label="$t('订单号')">
            <span>{{ order.orderNo }}</span>
          </el-form-item>
        </el-col>
        <!-- 总箱数 -->
        <el-col :span="8">
          <el-form-item :label="$t('总箱数')">
            <span>{{ order.sumNum }}</span>
          </el-form-item>
        </el-col>
        <!-- 体积 -->
        <el-col :span="8">
          <el-form-item :label="$t('体积')">
            <span>{{ order.sumVolume }}m³</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 重量 -->
        <el-col :span="8">
          <el-form-item :label="$t('重量')">
            <span>{{ order.sumWeight }}Kg</span>
          </el-form-item>
        </el-col>
        <!-- 总控箱数 -->
        <el-col :span="8">
          <el-form-item :label="$t('总控货箱数')">
            <span>{{ order.sumNum }}</span>
          </el-form-item>
        </el-col>
        <!-- 剩余放货箱数 -->
        <el-col :span="8">
          <el-form-item :label="$t('剩余放货箱数')">
            <span>{{ order.sumNum - order.releaseNum }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 邮库/到仓时间 -->
        <el-col :span="8">
          <el-form-item :label="$t('卸柜/到仓时间')">
            <span>{{ order.unloadTime }}</span>
          </el-form-item>
        </el-col>
        <!-- 订单限制修改收货人 -->
        <el-col :span="8">
          <el-form-item :label="$t('订单限制修改收货人')">
            <span>{{ order.isLimitUpdateConsignee ? $t("是") : $t("否") }}</span>
          </el-form-item>
        </el-col>
        <!-- 订单锁定收货人天数 -->
        <el-col :span="8" v-if="order.isLimitUpdateConsignee">
          <el-form-item :label="$t('订单锁定收货人天数')">
            <span>{{ order.lockConsigneeDay }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('增值服务')">
            <span>{{ order.orgIsOverseasWarehouse ? $t("海外仓") : $t("非海外仓") }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-if="order.isLimitUpdateConsignee">
        <!-- 放货锁定收货人到期时间 -->
        <el-col :span="12">
          <el-form-item :label="$t('放货锁定收货人到期时间')" label-width="180px">
            <span>{{ order.lockConsigneeTime }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider>{{ $t("修改信息") }}</el-divider>

      <el-row :gutter="20">
        <!-- 修改海外仓模式 -->
        <el-col :span="24">
          <el-form-item :label="$t('增值服务')">
            <el-tag>{{ form.newIsOverseasWarehouse ? $t("海外仓") : $t("非海外仓") }}</el-tag>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 修改原因 -->
        <el-col :span="24">
          <el-form-item :label="$t('修改原因')">
            <el-input type="textarea" v-model="form.reasonZh"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- 附件 -->
        <el-col :span="24">
          <el-form-item :label="$t('附件')">
            <file-upload v-model="form.annex" :fileType="fileType"></file-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <work-flow xmlkey="order_consignee_limit_change" v-model="form.ccIds"></work-flow>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">{{ $t("取消") }}</el-button>
      <el-button v-if="applyStatus === 1" type="primary" @click="handleGoBpm">{{ $t("审批中") }}</el-button>
      <el-button v-else type="primary" @click="handleSubmit" :loading="loading">{{ $t("确定") }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import WorkFlow from "@/components/WorkFlow/index.vue"
import FileUpload from "@/components/FileUpload/index.vue"
import { applyCargoControlApproval, getReleaseTypeUpdateInfo } from "@/api/ecw/orderCargoControl"
import dayjs from "dayjs"
import { getApproval } from "@/api/ecw/order"
export default {
  components: {
    FileUpload,
    WorkFlow
  },
  props: {
    order: Object
  },
  data() {
    return {
      // 是否显示弹窗
      show: true,
      fileType: ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "pdf", "jpg", "jpeg", "png", "mp4", "mov", "avi", "mp3"],
      applyStatus: 0, // 审批状态: 1 处理中 2 通过 3 不通过 4 已取消
      bpmId: null, // 审批流程ID
      form: {
        // 申请类型：此处应该是 61 放货限制修改申请 62 海外仓修改申请
        applyType: 62,
        newIsOverseasWarehouse: null,
        // 修改原因
        reasonZh: "",
        // 附件
        annex: "",
        ccIds: []
      },
      // 审批信息
      approvalDetail: null,
      loading: false
    }
  },
  mounted() {
    // 根据订单获取审批详情
    this.getApply()
  },
  methods: {
    getApply() {
      // 先重置
      this.applyStatus = 0
      getReleaseTypeUpdateInfo(this.order.orderId).then((res) => {
        const data = res.data
        console.log({ data })
        this.form.applyType = 62
        this.form.newIsOverseasWarehouse = data.newIsOverseasWarehouse
        this.form.reasonZh = data.reasonZh
        this.form.annex = data.annex
        this.form.ccIds =
          data.ccIds
            ?.split(",")
            .filter((item) => !!item)
            .map((item) => Number(item)) || []

        this.applyStatus = data.applyStatus
        this.bpmId = data.formId
      })
    },
    /* getApproval(){
      getApproval(this.id).then(res => {
        this.approvalDetail = res.data
      })
    }, */
    handleGoBpm() {
      console.log("跳转审批页面，待完善")
      this.handleClose()
      this.$router.push({
        path: "/bpm/process-instance/detail",
        query: {
          id: this.bpmId
        }
      })
    },
    handleClose() {
      this.show = false
      this.$emit("close")
    },
    handleSubmit() {
      const data = {
        ...this.form,
        ccIds: this.form.ccIds.join(","),
        orderId: this.order.orderId
      }
      this.loading = true
      applyCargoControlApproval(data)
        .then((res) => {
          this.$message.success(this.$t("操作成功"))
          this.$emit("success")
          this.handleClose()
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>
