<template>
  <div class="shippingSea-dialog">
    <el-form ref="errorForm" :model="errorObj" label-width="140px">
      <el-form-item :label="$t('操作步骤')">
        <el-select v-if="flag=='sea'" v-model="errorObj.opStep" :placeholder="$t('请选择操作步骤')">
          <el-option v-for="type in this.getDictDatas(DICT_TYPE.BOX_SHIPPING_PROCESS)" :key="type.value" :label="$l(type, 'label')" :value="type.value"></el-option>
        </el-select>
        <el-select v-if="flag=='seaAir'" v-model="errorObj.opStep" :placeholder="$t('请选择操作步骤')">
          <el-option v-for="type in this.getDictDatas(DICT_TYPE.BOX_SEA_AIR)" :key="type.value" :label="$l(type, 'label')" :value="type.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('票异常')">
        <el-select v-model="errorObj.billAbnId" :placeholder="$t('请选择票异常')">
          <el-option v-for="type in this.getDictDatas(DICT_TYPE.BOX_SHIPPING_TICKET_EXCEPTION)" :key="type.value" :label="$l(type, 'label')" :value="type.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('异常情况')">
        <el-input v-model="errorObj.abnDetail" type="textarea" rows="2" :placeholder="$t('请输入异常情况')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('异常时间')" prop="arrivalTime" class="three-element">
        <el-date-picker type="datetime" :placeholder="$t('请选择日期')" v-model="errorObj.abnStartTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        <el-date-picker type="datetime" :placeholder="$t('请选择日期')" v-model="errorObj.abnEndTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        <div class="delayTime">{{$t('延迟时间')}}：{{delayDay}}{{$t('天')}}</div>
      </el-form-item>

      <el-form-item :label="$t('通知人')">
        <userSelect v-model="errorObj.notifyUsers" :placeholder="$t('请选择通知人')" :allUsers="this.$attrs.allUsers" multiple />
      </el-form-item>

      <!-- <el-form-item :label="$t('是否更新订单状态')">
        <el-radio-group v-model="errorObj.orderStatus">
          <el-radio v-for="item in status" :key="item.value" :label="item.value">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('中文内容')">
        <el-input v-model="errorObj.contentZh" type="textarea" rows="2" :placeholder="$t('请输入中文内容')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('英文内容')">
        <el-input v-model="errorObj.contentEn" type="textarea" rows="2" :placeholder="$t('请输入英文内容')"></el-input>
      </el-form-item> -->
    </el-form>

    <el-row class="operate-button">
      <el-button type="success" @click="onSubmit">{{$t('提交')}}</el-button>
      <el-button @click="$emit('closeDialog')">{{$t('关闭')}}</el-button>
    </el-row>
  </div>
</template>

<script>
import { abnormalCreate } from "@/api/ecw/boxSea";
import { serviceMsg } from "./shippingSea/utils";
import userSelect from "./shippingSea/nodePage/common/userSelect.vue";
import dayjs from "dayjs";

/**
 * 异常登记
 */
export default {
  name: "regError",
  inheritAttrs: false,
  components: { userSelect },
  data() {
    return {
      // 异常对象
      errorObj: {},
      // 是否更新订单动态
      status: [
        {
          value: "1",
          label: this.$t("是"),
        },
        {
          value: "2",
          label: this.$t("否"),
        },
      ],
      flag: "sea",
      delayDay: 0,
    };
  },
  created() {
    const { currNode } = this.$attrs;
    this.errorObj = { opStep: currNode?.dataKey ?? undefined };
    if (this.$attrs.shipmentObj.bosType == "seaAir") {
      this.flag = "seaAir";
    }
  },
  watch: {
    // 异常开始时间
    "errorObj.abnStartTime"(val) {
      this.compareDate(val, this.errorObj.abnEndTime);
    },
    // 异常结束时间
    "errorObj.abnEndTime"(val) {
      this.compareDate(this.errorObj.abnStartTime, val);
    },
  },
  methods: {
    // 时间比较
    compareDate(abnStartTime, abnEndTime) {
      this.delayDay = 0;
      let date1 = null,
        date2 = null;
      if (abnStartTime) date1 = dayjs(abnStartTime);
      if (abnEndTime) date2 = dayjs(abnEndTime);
      if (date1 && date2) {
        this.delayDay = date2.diff(date1, "day");
      }
    },
    /** 提交 */
    onSubmit() {
      this.$refs["errorForm"].validate((valid) => {
        if (valid) {
          abnormalCreate({
            ...this.errorObj,
            delayDays: this.delayDay,
            notifyUsers: this.errorObj.notifyUsers?.join(",") ?? "",
            shipmentId: this.$attrs.shipmentObj.id,
          }).then((res) => {
            serviceMsg(res, this).then(() => {
              this.$emit("closeDialog", "error");
            });
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
// 海运操作统一弹窗样式
.shippingSea-dialog {
  // 页面内元素弹窗form控件宽度设置
  .el-form-item__content {
    > div:not(.el-input-number) {
      width: 100%;
    }
  }
  .operate-button {
    text-align: center;
  }
  .three-element {
    .el-form-item__content {
      display: flex;
      > .el-date-editor {
        margin-right: 10px;
      }
      > .delayTime {
        width: 300px;
      }
    }
  }
}
</style>