<template>
  <el-dialog visible :close-on-click-modal="false" :before-close="closeDialog" :title="$t('优惠申请')">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item :label="$t('商品类型')">
        <span>{{ getProductTypeNameById(form.productType) }}</span>
      </el-form-item>
      <el-form-item :label="$t('商品名称')">
        <span>{{ form.prodTitleZh }}</span>
      </el-form-item>
      <el-form-item :label="$t('英文名称')">
        <span>{{ form.prodTitleEn }}</span>
      </el-form-item>
      <el-form-item :label="$t('线路')">
        {{ `【${getDictDataLabel(DICT_TYPE.TRANSPORT_TYPE, form.transportId)}】${ getChannelNameById(form.channelId) }从【${form.departureName}】发往【${form.objectiveName}】`}}
      </el-form-item>
      <el-form-item :label="$t('是否预付')">
        <dict-tag :type="DICT_TYPE.ECW_YESNO" :value="form.isPayAdvance" />
      </el-form-item>
      
      <el-row v-if="!form.charging">
        <el-col :span="12">
          <el-form-item :label="$t('旧运费')">
            {{form.orgSeaFreight}} {{ currentMap[form.seaFreightCurrency] }} / {{ unitMap[form.seaFreightVolume] }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('旧清关费')">
            {{form.orgClearanceFreight}} {{ currentMap[form.clearanceFreightCurrency] }} / {{ unitMap[form.clearanceFreightVolume] }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="!form.charging">
        <el-col :span="12">
          <el-form-item :label="$t('新运费')" style="width: 400px" prop="seaFreight">
            <el-input v-model="form.seaFreight" type="number" class="w-100" />
            {{ currentMap[form.seaFreightCurrency] }} / {{ unitMap[form.seaFreightVolume] }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('新清关费')" style="width: 400px" prop="clearanceFreight">
            <el-input v-model="form.clearanceFreight" type="number" class="w-100" />
            {{ currentMap[form.clearanceFreightCurrency] }} / {{ unitMap[form.clearanceFreightVolume] }}
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item :label="$t('旧全包价')" v-if="form.charging">
        {{form.orgSeaFreight}} {{ currentMap[form.seaFreightCurrency] }} / {{ unitMap[form.seaFreightVolume] }}
      </el-form-item>
      <el-form-item :label="$t('新全包价')" style="width: 400px" prop="seaFreight"  v-if="form.charging">
        <el-input v-model="form.seaFreight" type="number" class="w-100" />
        {{ currentMap[form.seaFreightCurrency] }} / {{ unitMap[form.seaFreightVolume] }}
      </el-form-item>
      
    </el-form>
    <div class="page-title">{{ $t('审批流程') }}</div>
    <work-flow xmlkey="sheet_sale" v-model="ccIdArr" />
    <div v-if="form.applyStatus != 1">
      <el-button type="primary" @click="handleSubmit" :disabled="!submitable">{{ $t('提交') }}</el-button>
    </div>
    <div v-else>
      <el-button type="primary" @click="$router.push('/bpm/process-instance/detail?id=' + form.formId)">
        <dict-tag :type="DICT_TYPE.APPLY_STATUS" :value="form.applyStatus" />
      </el-button>
      <el-button type="primary" @click="cancelAudit">{{ $t('取消审核') }}</el-button>
      <el-button type="default" @click="closeDialog">{{ $t('返回') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {createOfferSpecial, getOfferSpecial, getOfferSpecialByApproveId} from "@/api/ecw/offer"
import {DICT_TYPE, getDictDataLabel} from "@/utils/dict"
import DictSelector from "@/components/DictSelector"
import {getUnitList} from "@/api/ecw/unit"
import {getChannelList} from "@/api/ecw/channel"
import { getCurrencyList } from '@/api/ecw/currency'
import { getProductTypeList } from '@/api/ecw/productType'
import WorkFlow from '@/components/WorkFlow'
import {cancelProcessInstance} from '@/api/bpm/processInstance'

export default {
  name: "specialDiscount",
  props: {
    offerProdId: Number,
  },
  components: {
    DictSelector, WorkFlow
  },
  created() {
    // 查看详情，列表进来的
    if(this.offerProdId){
      this.getOfferSpecial()
    }

    getUnitList().then(res => this.unitList = res.data)
    getChannelList().then(res => this.channelList = res.data)
    getCurrencyList().then(res => this.currencyList = res.data)
    getProductTypeList().then(res => this.productTypeList = res.data)

  },
  data() {
    return {
      getDictDataLabel,
      DICT_TYPE,
      unitList:[],
      channelList:[],
      currencyList:[],
      productTypeList:[],
      ccIdArr: [],
      form: {
        type: 1
      },
      orignal: {}, // 原始数据，用来判断是否做了修改
      rules:{
        seaFreight      : {required: true, message: this.$t('运费不能为空')},
        clearanceFreight: {required: true, message: this.$t('清关费不能为空')}
      }
    }
  },
  watch:{
    ccIdArr(){
      this.$set(this.form, 'ccIds', this.ccIdArr.join(','))
    }
  },
  methods: {
    handleSubmit(){
      this.$refs.form.validate().then(res => {
        createOfferSpecial(Object.assign({}, this.form, {type: 1})).then(res => {
          this.$message.success(this.$t('提交成功'))
          this.$emit('success')
        })
      })
    },
    getOfferSpecial(){
      getOfferSpecial(this.offerProdId, {type: 1}).then(r => {
        this.form = r.data
        this.orignal = r.data
      })
    },
    getProductTypeNameById(id){
      return this.$l(this.productTypeList.find(e => e.id === id), 'title')
    },
    closeDialog(){
      this.$emit('close')
    },
    cancelAudit(){
      this.$prompt(this.$t('请输入取消原因？'), this.$t("取消审批"), {
        type: 'warning',
        confirmButtonText: this.$t("确定"),
        cancelButtonText: this.$t("取消"),
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/, // 判断非空，且非空格
        inputErrorMessage: this.$t("取消原因不能为空"),
      }).then(({ value }) => {
        return cancelProcessInstance(this.form.formId, value);
      }).then(() => {
        this.$modal.msgSuccess(this.$t("取消成功"));
        this.closeDialog()
      })
    },
  },
  computed: {
    // 是否可以提交
    submitable(){
      let submitable = false;
      [
        ['orgClearanceFreight', 'clearanceFreight'],
        ['orgSeaFreight', 'seaFreight']
      ].forEach(item => {
        if(this.form[item[0]] != this.form[item[1]]){
          submitable = true
        }
      })
      return submitable
    },
    // 根据渠道id显示渠道名
    getChannelNameById(){
      return channelId => {
        const s = this.channelList.find(item => item.channelId == channelId) ?. nameZh
        return s ? this.$t('【') + s + this.$t('】') : ''
      }
    },
    currentMap(){
      let map = {}
      this.currencyList.forEach(item => {
        map[item.id] = this.$l(item, 'title')
      })
      return map
    },
    unitMap(){
      let map = {}
      this.unitList.forEach(item => {
        map[item.id] = this.$l(item, 'title')
      })
      return map
    }
  }
}
</script>