<template>
  <el-descriptions border :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>
</template>

<script>
import {createOfferSpecial, getOfferSpecial, getOfferSpecialByApproveId} from "@/api/ecw/offer"
import {DICT_TYPE, getDictDataLabel} from "@/utils/dict"
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: "specialDetail",
  props: {
    offerProdId: Number,
    id: [String, Number],
    readonly: {
      type: Boolean,
      default: false
    }
  },
  created() {
    // 从流程查看详情
    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:[],
      ccIdArr: [],
      form: {
        type: 1
      },
      rules:{
        seaFreight      : {required: true, message: '运费不能为空'},
        clearanceFreight: {required: true, message: '清关费不能为空'}
      }
    }
  },
  watch:{
    ccIdArr(){
      this.$set(this.form, 'ccIds', this.ccIdArr.join(','))
    }
  },
  methods: {
    handleSubmit(){
      this.$refs.form.validate().then(res => {
              console.log(this.form.type)

        createOfferSpecial(Object.assign({}, this.form, {type: 1})).then(res => {
          this.$message.success(r.msg || '提交成功')
        })
      })
    },
    getOfferSpecial(){
      getOfferSpecial(this.offerProdId, {type: 1}).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>
