<template>
  <div class="shippingSea-dialog">
    <el-form ref="errorForm" :model="errorObj" label-width="140px">
      <el-form-item label="操作步骤">
        <el-select v-model="errorObj.opStep" placeholder="请选择操作步骤">
          <el-option v-for="type in this.getDictDatas(DICT_TYPE.BOX_SHIPPING_PROCESS)" :key="type.value" :label="type.label" :value="type.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="票异常">
        <el-select v-model="errorObj.billAbnId" placeholder="请选择票异常">
          <el-option v-for="type in this.getDictDatas(DICT_TYPE.BOX_SHIPPING_TICKET_EXCEPTION)" :key="type.value" :label="type.label" :value="type.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="异常情况">
        <el-input v-model="errorObj.abnDetail" type="textarea" rows="2" placeholder="请输入异常情况"></el-input>
      </el-form-item>
      <el-form-item label="异常时间" prop="arrivalTime" class="two-element">
        <el-date-picker type="date" placeholder="请选择日期" v-model="errorObj.abnStartTime" value-format="yyyy-MM-dd"></el-date-picker>
        <el-date-picker type="date" placeholder="请选择日期" v-model="errorObj.abnEndTime" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>

      <el-form-item label="是否更新订单状态">
        <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="中文内容">
        <el-input v-model="errorObj.contentZh" type="textarea" rows="2" placeholder="请输入中文内容"></el-input>
      </el-form-item>
      <el-form-item label="英文内容">
        <el-input v-model="errorObj.contentEn" type="textarea" rows="2" placeholder="请输入英文内容"></el-input>
      </el-form-item>
    </el-form>

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

<script>
import { abnormalCreate } from "@/api/ecw/boxSea";
import { serviceMsg } from "./shippingSea/utils";
/**
 * 异常登记
 */
export default {
  name: "regError",
  inheritAttrs: false,
  data() {
    return {
      // 异常对象
      errorObj: {},
      // 是否更新订单动态
      status: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "2",
          label: "否",
        },
      ],
    };
  },
  created() {
    const { currNode } = this.$attrs;
    this.errorObj = { opStep: currNode?.dataKey ?? undefined };
  },
  methods: {
    /** 提交 */
    onSubmit() {
      this.$refs["errorForm"].validate((valid) => {
        if (valid) {
          abnormalCreate({
            ...this.errorObj,
            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;
  }
  .two-element-formItem {
    display: flex;
    > :last-child {
      width: 100%;
      margin-left: 10px;
    }
  }
  .two-element {
    .el-form-item__content {
      display: flex;
      > :last-child {
        margin-left: 10px;
      }
    }
  }
}
</style>