<template>
  <div class="app-container">
    <el-row type="flex" justify="center">
     <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="16">
       <el-card class="box-card">
         <div slot="header" class="clearfix" v-if="!readonly">
           <span>优惠申请</span>
         </div>
         <el-form v-if="!readonly" ref="form" :model="form" label-width="80px">
           <el-form-item label="商品类型">
             <span>{{ getProductAttrNameById(form.productType) }}</span>
           </el-form-item>
           <el-form-item label="商品名称">
             <span>{{ form.prodTitleZh }}</span>
           </el-form-item>
           <el-form-item label="英文名称">
             <span>{{ form.prodTitleEn }}</span>
           </el-form-item>
           <el-form-item label="线路">
             {{ `【${getDictDataLabel(DICT_TYPE.TRANSPORT_TYPE, form.transportId)}】${ getChannelNameById(form.channelId) }从【${form.departureName}】发往【${form.objectiveName}】`}}
           </el-form-item>
           <el-form-item label="是否预付">
             {{ form.isPayAdvance === 0 ? '是' : '否' }}
           </el-form-item>
           <el-form-item label="旧运费">
             <el-input v-model="form.orgSeaFreight" readonly>
               <div slot="prepend" style="width: 60px">{{ currentMap[form.orgSeaFreightCurrency] }}</div>
               <div slot="append" style="width: 60px">{{ unitMap[form.orgSeaFreightVolume] }}</div>
             </el-input>
           </el-form-item>
           <el-form-item label="旧清关费">
             <el-input v-model="form.orgClearanceFreight" readonly>
               <div slot="prepend" style="width: 60px">{{ currentMap[form.orgClearanceFreightCurrency] }}</div>
               <div slot="append" style="width: 60px">{{ unitMap[form.orgClearanceFreightVolume] }}</div>
             </el-input>
           </el-form-item>
           <el-form-item label="新运费" required>
             <el-input v-model.number="form.seaFreight">
               <el-select v-model="form.seaFreightCurrency" placeholder="请选择" slot="prepend" style="width: 100px">
                 <el-option
                   v-for="item in currencyList"
                   :key="item.id"
                   :label="item.titleZh"
                   :value="item.id">
                 </el-option>
               </el-select>
               <el-select v-model="form.seaFreightVolume" placeholder="请选择" slot="append" style="width: 100px">
                 <el-option
                   v-for="item in unitList"
                   :key="item.id"
                   :label="item.titleZh"
                   :value="item.id">
                 </el-option>
               </el-select>
             </el-input>
           </el-form-item>
           <el-form-item label="新清关费" required>
             <el-input v-model.number="form.clearanceFreight">
               <el-select v-model="form.clearanceFreightCurrency" placeholder="请选择" slot="prepend" style="width: 100px">
                 <el-option
                   v-for="item in currencyList"
                   :key="item.id"
                   :label="item.titleZh"
                   :value="item.id">
                 </el-option>
               </el-select>
               <el-select v-model="form.clearanceFreightVolume" placeholder="请选择" slot="append" style="width: 100px">
                 <el-option
                   v-for="item in unitList"
                   :key="item.id"
                   :label="item.titleZh"
                   :value="item.id">
                 </el-option>
               </el-select>
             </el-input>
           </el-form-item>
         </el-form>
         <div v-if="!readonly">
           <el-button type="primary" @click="handleSubmit">提交</el-button>
         </div>

         <el-descriptions border v-if="readonly" :column="1">
           <el-descriptions-item label="商品类型">{{ form.productType }}</el-descriptions-item>
           <el-descriptions-item label="商品名称">{{ form.prodTitleZh }}</el-descriptions-item>
           <el-descriptions-item label="英文名称">{{ form.prodTitleEn }}</el-descriptions-item>
           <el-descriptions-item label="线路">
             {{ `【${getDictDataLabel(DICT_TYPE.TRANSPORT_TYPE, form.transportId)}】${ getChannelNameById(form.channelId) }从【${form.departureName}】发往【${form.objectiveName}】`}}
           </el-descriptions-item>
           <el-descriptions-item label="是否预付">{{ form.isPayAdvance === 0 ? '是' : '否' }}</el-descriptions-item>
           <el-descriptions-item label="旧运费">{{ form.orgSeaFreight }} {{ currentMap[form.orgSeaFreightCurrency] }}/{{ unitMap[form.orgSeaFreightVolume] }}</el-descriptions-item>
           <el-descriptions-item label="旧清关费">{{ form.orgClearanceFreight }} {{ currentMap[form.orgClearanceFreightCurrency] }}/{{ unitMap[form.orgClearanceFreightVolume] }}</el-descriptions-item>
           <el-descriptions-item label="新运费">{{ form.seaFreight }} {{ currentMap[form.seaFreightCurrency] }}/{{ unitMap[form.seaFreightVolume] }}</el-descriptions-item>
           <el-descriptions-item label="新清关费">{{ form.clearanceFreight }} {{ currentMap[form.clearanceFreightCurrency] }}/{{ unitMap[form.clearanceFreightVolume] }}</el-descriptions-item>
         </el-descriptions>
       </el-card>
     </el-col>
    </el-row>
  </div>
</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 { getProductAttrList } from '@/api/ecw/productAttr'

export default {
  name: "specialDiscount",
  props: {
    offerProdId: String,
    id: Number,
    readonly: {
      type: Boolean,
      default: false
    }
  },
  components: {
    DictSelector
  },
  created() {
    // 临时
    if(this.$route.query.offerId){
      this.form.offerId = this.$route.query.offerId - 0
      // this.getOffer()
    }

    // 查看详情，列表进来的
    if(this.offerProdId){
      this.form.offerProdId = this.offerProdId - 0
      this.getOfferSpecial()
    }

    // 从流程查看详情
    if(this.id)
      this.getOfferSpecialByApproveId()

    getUnitList().then(res => this.unitList = res.data)
    getChannelList().then(res => this.channelList = res.data)
    getCurrencyList().then(res => this.currencyList = res.data)
    getProductAttrList().then(res => this.productAttrList = res.data)

  },
  data() {
    return {
      getDictDataLabel,
      DICT_TYPE,
      unitList:[],
      channelList:[],
      currencyList:[],
      productAttrList:[],
      form: {
        "applyResult": "",
        "applyStatus": 0,
        "channelId": 0,
        "clearanceFreight": 0,
        "clearanceFreightCurrency": 0,
        "clearanceFreightVolume": 0,
        "createTime": "",
        "departureId": 0,
        "departureName": "",
        "details": "",
        "finishBy": "",
        "finishTime": "",
        "followUpSalesmanId": "",
        "formId": "",
        "isPayAdvance": 0,
        "lineId": 0,
        "objectiveId": 0,
        "objectiveName": "",
        "offerApprovalId": 0,
        "offerId": 0,
        "offerProdId": 0,
        "orgClearanceFreight": 0,
        "orgClearanceFreightCurrency": 0,
        "orgClearanceFreightVolume": 0,
        "orgSeaFreight": 0,
        "orgSeaFreightCurrency": 0,
        "orgSeaFreightVolume": 0,
        "processingResults": "",
        "prodId": 0,
        "prodTitleEn": "",
        "prodTitleZh": "",
        "productType": 0,
        "seaFreight": 0,
        "seaFreightCurrency": 0,
        "seaFreightVolume": 0,
        "status": 0,
        "transportId": 0,
        "type": 0
      }
    }
  },
  methods: {
    handleSubmit(){
      createOfferSpecial({
        clearanceFreight: this.form.clearanceFreight,
        clearanceFreightCurrency: this.form.clearanceFreightCurrency,
        clearanceFreightVolume: this.form.clearanceFreightVolume,
        offerId: this.form.offerId,
        offerProdId: this.form.offerProdId,
        seaFreight: this.form.seaFreight,
        seaFreightCurrency: this.form.seaFreightCurrency,
        seaFreightVolume: this.form.seaFreightVolume,
      }).then(r => {
        this.$message.success(r.msg || '提交成功')
      })
    },
    getOfferSpecial(){
      getOfferSpecial(this.form.offerProdId).then(r => {
        this.form = r.data
      })
    },
    getOfferSpecialByApproveId(){
      getOfferSpecialByApproveId(this.id).then(r => {
        this.form = r.data
      })
    },
    getProductAttrNameById(id){
      return this.productAttrList.find(e => e.id === id)?.attrName || ''
    }
  },
  computed: {
    // 根据渠道id显示渠道名
    getChannelNameById(){
      return channelId => {
        const s = this.channelList.find(item => item.channelId == channelId) ?. nameZh
        return s ? '【' + s + '】' : ''
      }
    },
    currentMap(){
      let map = {}
      this.currencyList.forEach(item => {
        map[item.id] = item.titleZh
      })
      return map
    },
    unitMap(){
      let map = {}
      this.unitList.forEach(item => {
        map[item.id] = item.titleZh
      })
      return map
    }
  }
}
</script>

<style scoped>

</style>
