<template>
  <el-dialog :title="orderNo + $t('订单转异')" center :visible.sync="show" v-bind="$attrs" :close-on-click-modal="false" :before-close="cancel">
    <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="cancel">{{$t('取消')}}</el-button>
      </span>
  </el-dialog>
</template>
<script>
import imageUpload from "@/components/ImageUpload/index.vue";
import {batchException} from "@/api/ecw/order";
export default {
  components: {imageUpload},
  props:{
    orderNo:{
      type: String,
    },
    orderId:{
      type: Number,
    }
  },
  data(){
    return {
      show: false,
      form: {
        manualExceptionType: [],
        exceptionUrls: '',
        descZh: ''
      },
      exceptionRules:{}
    }
  },
  async created(){
    this.$nextTick()
    this.show = true
  },
  methods:{
    cancel(){
      this.show = false
      this.$emit('cancel');
    },
    handleException(){
      if(!this.form.manualExceptionType.length){
        return this.$message.error(this.$t('请选择异常类型'))
      }
      batchException({
        orderIds: [this.orderId],
        manualExceptionType: this.form.manualExceptionType.join(","),
        exceptionUrls: this.form.exceptionUrls?.split(",") || [],
        descZh: this.form.descZh
      }).then(res=>{
        this.$message.success(this.$t('操作成功'));
        this.show = false
        this.$emit('success');
      })
    }
  }
}
</script>
<style scoped lang="scss">

</style>