<script>
import imageUpload from '@/components/ImageUpload/index.vue'
import { batchException } from '@/api/ecw/order'

export default {
  name: 'TurnException',
  components: { imageUpload },
  props:{
    orderNo: {
      type: String,
      default: ''
    },
    orderId: {
      type: [String, Number],
      default: ''
    }
  },
  data(){
    return {
      showDialog: false,
      form: {
        manualExceptionType: [],
        exceptionUrls: "",
        descZh: ''
      }
    }
  },
  computed:{
    rules(){
      return {
        manualExceptionType: [
          { required: true, message: this.$t("请勾选原因类型"), trigger: "change" },
          {
            validator: (rule, value, callback) => {
              if (value.length <= 0) {
                callback(new Error("请勾选原因类型"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      }
    }
  },
  methods:{
    handleException(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.handleSubmit();
        }
      });
    },
    async handleSubmit(){
      this.showDialog = false
      await batchException({
        orderNo: this.orderNo,
        manualExceptionType: this.form.manualExceptionType.join(','),
        exceptionUrls: this.form.exceptionUrls?.split(",") || [],
        descZh: this.form.descZh,
        orderIds: [this.orderId]
      })
      this.$message.success(this.$t('操作成功'))
      this.$emit('done')
    },
    handleCancel(){
      this.showDialog = false
      this.$emit('cancel')
    },
    show(){
      this.showDialog = true
      // 初始化表单
      for(const key in Object.keys(this.form)){
        this.form[key] = this.form[key] instanceof Array ? [] : ''
      }
    }
  }
}
</script>

<template>
  <el-dialog
    :title="orderNo + $t('订单转异')"
    center
    :visible="showDialog"
    @close="handleCancel"
  >
    <el-form
      label-position="top"
      label-width="200"
      ref="form"
      :model="form"
      :rules="rules"
    >
      <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="handleCancel">{{ $t("取消") }}</el-button>
      </span>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>