<template>
  <el-dialog :title="$t('异常')" :before-close="()=>{$emit('update:showException',false)}" center
             :visible.sync="showException" fullscreen>
    <el-form ref="form" :model="form" label-width="200">
      <el-form-item :label="$t('包裹号')">
        {{ form.consNum }}
      </el-form-item>
      <el-form-item :label="$t('运输路线')">
        【
        <dict-tag :type="DICT_TYPE.ECW_CUSTOMER_TRANSPORT_TYPE" :value="form.transportId" />
        】
        从【{{ form.startTitleZh }}】发往【{{ form.destTitleZh }}】
      </el-form-item>
      <el-form-item :label="$t('异常类型')">
        <dict-tag :type="DICT_TYPE.CONS_EXCEPTION_TYPE" :value="form.exceptionType" />
      </el-form-item>
      <el-form-item :label="$t('异常描述')">
        {{ form.exceptionRemark }}
      </el-form-item>
      <el-form-item :label="$t('创建时间')">
        {{ form.createTime }}
      </el-form-item>
      <!--      <el-row>-->
      <!--        <el-col :span="8">-->
      <!--          <el-form-item :label="$t('跟进状态')">-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8">-->
      <!--          <el-form-item :label="$t('跟进人')">-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="8">-->
      <!--          <el-form-item :label="$t('跟进时间')">-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-form-item :label="$t('跟进备注')">-->
      <!--      </el-form-item>-->
      <el-form-item :label="$t('处理时间')">
        {{form.handlerTime}}
      </el-form-item>
      <el-form-item :label="$t('处理结果')" prop="handlerResult" :rules="[{ required: true}]">
        <el-select
          v-model="form.handlerResult"
          :placeholder="$t('请选择')"
          @change="handlerResultChange"
          :disabled="look"
          style="width: 240px"
          clearable
        >
          <template
            v-for="dict in getDictDatas(
                  form.exceptionType + '_result'
                )"
          >
            <el-option
              :disabled="dict.value == 'pending'"
              :key="dict.value"
              :label="$l(dict, 'label')"
              :value="dict.value"
            />
          </template>
        </el-select>
      </el-form-item>
      <el-row v-if="form.handlerResult==='goods_exists'">
        <el-col :span="8">
          <el-form-item :label="$t('新增品名中文')">
            {{ form.goodTitleZh }}
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="!look">
          <el-form-item
            label="中文品名"
            :rules="{
                required: true,
                message: $t('请选择产品'),
                trigger: 'blur',
              }"
          >
            <product-selector
              :status="0"
              v-model="form.productId2"
              @change="onProductChange($event)"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="form.handlerResult==='goods_exists'">
        <el-col :span="8">
          <el-form-item :label="$t('新增品名英文')">
            {{ form.goodTitleEn }}
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="!look">
          <el-form-item
            label="英文品名"
            :rules="{
                required: true,
                message: $t('请选择产品'),
                trigger: 'blur',
              }"
          >
            <product-selector
              lang="En"
              :status="0"
              v-model="form.productId1"
              @change="onProductChange($event)"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" v-if="!look">{{ $t("确 定") }}</el-button>
      <el-button @click="$emit('update:showException',false)">{{ $t("取 消") }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import imageUpload from "@/components/ImageUpload/index.vue"
import {
  getConsException,
  updateConsException
} from "@/api/ecw/consException"
import ProductSelector from "@/components/ProductSelector/index.vue"

export default {
  name: "exceptionHandling",
  components: { ProductSelector, imageUpload },
  props: {
    id: Number,
    showException: Boolean,
    look: Boolean
  },
  data() {
    return {
      form: {},
      productId1: null,
      productId2: null
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(validate => {
        if (validate) {
          console.log(this.form.handlerResult)
          if (this.form.handlerResult === "goods_absent") {
            this.$redirect(
              "/product/product-list?prodId=" + this.form.productId1
            )
          }
          if (this.form.handlerResult === "goods_exists") {
            this.form.exceptionStatus = 2
            this.form.productId = this.productId1
            this.form.mediaBusinessType = 1
            updateConsException(this.form).then(response => {
              this.$emit("update:showException", false)
              this.$emit("determine")
              this.$modal.msgSuccess("修改成功")
            })
          }
        }
      })
    },
    handlerResultChange(rows) {
      this.form.productId1 = null
      this.form.productId2 = null
      this.form.handlerResult = rows
    },
    onProductChange(product) {
      if (!product) {
        this.form.productId1 = null
        this.form.productId2 = null
        return false
      }
      this.form.productId1 = product.id
      this.form.productId2 = product.id
      console.log(product)
    }
  },
  watch: {
    showException(val) {
      if (val) {
        getConsException({id:this.id}).then(response => {
          this.form = response.data
        })
      } else {
        this.form = {}
      }
    }
  }
}
</script>

<style scoped>

</style>
