<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="card-title">{{$t('申请特价')}}</div>
      <div class="offer-header">
        <el-descriptions>
            <el-descriptions-item :label="$t('报价单号')">{{offer.number}}</el-descriptions-item>
            <el-descriptions-item :label="$t('始发地')">{{$l(departure, 'title')}}</el-descriptions-item>
            <el-descriptions-item :label="$t('目的地')">{{$l(objective, 'title')}}</el-descriptions-item>
            <el-descriptions-item :label="$t('运输方式')">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="offer.transportId" />
            </el-descriptions-item>
            <el-descriptions-item :label="$t('出货渠道')">
              {{channel ? $l(channel, 'name') : '/'}}
            </el-descriptions-item>

            <el-descriptions-item :label="$t('创建时间')">{{offer.createTime}}</el-descriptions-item>
            <el-descriptions-item :label="$t('状态')">
              <dict-tag :type="DICT_TYPE.ECW_OFFER_STATUS" :value="offer.status" />
            </el-descriptions-item>
        </el-descriptions>
      </div>

      <el-table v-loading="loading" :data="offer.offerProdRespVOList">
        <el-table-column :label="$t('序号')" align="center" prop="id" type="index"></el-table-column>
        <el-table-column
          :label="$t('品名')">
          <template v-slot="{row}">
            {{ row.prodTitleZh }}/{{ row.prodTitleEn }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('品牌')">
          <template v-slot="{row}">
            <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="row.brand"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('件数')" prop="num"></el-table-column>
        <el-table-column
          :label="$t('包装')">
          <template v-slot="{row}">
            <dict-tag :value="row.unit" :type="DICT_TYPE.ECW_PACKAGING_TYPE" />
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('原价')">
          <template v-slot="{row}">
            <template v-if="!row.originalSeaFreight">{{ $t('未报价') }}</template>
            <template v-else-if="row.charging ==1">
              {{$t('全包价')}}：{{ row.originalSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }}/{{ unitMap[row.seaFreightVolume] }}
            </template>
            <template v-else>
              {{$t('运费')}}：{{ row.originalSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }}/{{ unitMap[row.seaFreightVolume] }}
              <br>
              {{$t('清关费')}}：{{ row.originalClearanceFreight }} {{ currencyMap[row.clearanceFreightCurrency] }}/{{ unitMap[row.clearanceFreightVolume] }}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('成本价')">
          <template v-slot="{row}">
            <template v-if="!row.costSeaFreight">{{ $t('未报价') }}</template>
            <template v-else-if="row.charging">
              {{$t('全包价')}}：{{ row.costSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }}/{{ unitMap[row.seaFreightVolume] }}
            </template>
            <template v-else>
              {{$t('运费')}}：{{ row.costSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }}/{{ unitMap[row.seaFreightVolume] }}
              <br>
              {{$t('清关费')}}：{{ row.oneClearanceFreight }} {{ currencyMap[row.clearanceFreightCurrency] }}/{{ unitMap[row.clearanceFreightVolume] }}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('销售价')">
          <template v-slot="{row}">
            <template v-if="!row.oneSeaFreight">{{ $t('未报价') }}</template>
            <template v-else-if="row.charging">
              {{$t('全包价')}}：{{ row.oneSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }}/{{ unitMap[row.seaFreightVolume] }}
            </template>
            <template v-else>
              {{$t('运费')}}：{{ row.oneSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }}/{{ unitMap[row.seaFreightVolume] }}
              <br>
              {{$t('清关费')}}：{{ row.oneClearanceFreight }} {{ currencyMap[row.clearanceFreightCurrency] }}/{{ unitMap[row.clearanceFreightVolume] }}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('操作')">
          <template v-slot="{row}">
            <el-button v-hasPermi="['ecw:offer:discount']"  v-if="row.seaFreight > 0" size="mini" type="text" @click="showOfferProdId=row.offerProdId">{{$t('优惠申请')}}</el-button>
            <el-button v-hasPermi="['ecw:offer:commission']"  v-if="row.seaFreight > 0" size="mini" type="text" @click="showCommissionProd=row">{{$t('佣金规则')}}</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!-- <div style="text-align: center;margin-top: 80px">
        <el-button type="primary">{{ $t('申请重货优惠') }}</el-button>
        <el-button type="primary">{{ $t('申请泡货优惠') }}</el-button>
        <el-button type="primary">{{ $t('关闭窗口') }}</el-button>
      </div> -->
      <special-discount v-if="showOfferProdId"      :offerProdId="showOfferProdId"        @close="showOfferProdId=null"       @success="onSuccess" />
      <commossion v-if="showCommissionProd" :offer="offer" :offerProd="showCommissionProd" @close="showCommissionProd=null"  @success="onSuccess" />
    </el-card>
  </div>
</template>

<script>
import {DICT_TYPE, getDictDataLabel} from '@/utils/dict'
import {getOffer} from '@/api/ecw/offer'
import {getUnitList} from "@/api/ecw/unit"
import {getCurrencyList} from "@/api/ecw/currency"
import {getProductAttrList} from "@/api/ecw/productAttr"
import { parseTime } from '@/utils/ruoyi'
import {listByIds} from '@/api/ecw/region'
import {getChannel} from '@/api/ecw/channel'
import SpecialDiscount from '@/views/ecw/offer/components/SpecialDiscount'
import Commossion from '@/views/ecw/offer/components/Commossion'

export default {
  name: "OfferSpecial",
  components: {
    SpecialDiscount, Commossion
  },
  props: {
    offerId: String
  },
  data() {
    return {
      parseTime,
      DICT_TYPE,
      getDictDataLabel,
      // 遮罩层
      loading: true,
      list: [],
      total:0,
      params:{
        page:1,
        rows:20,
        offerId:0,
        type:2
      },
      relationId:0,
      creatorName:'test',
      offer: {
        number: '',
        offerProdRespVOList: []
      },
      unitList:[],
      currencyList:[],
      productAttrList:[],
      objective: null,
      departure: null,
      channel: null, // 渠道信息
      showOfferProdId: null, // 显示申请优惠的产品id
      showCommissionProd: null, // 修改佣金规则的产品ID
    };
  },
  watch:{

  },
  created() {
    this.getOffer()
    getUnitList().then(res => this.unitList = res.data)
    getCurrencyList().then(res => this.currencyList = res.data)
    getProductAttrList().then(res => this.productAttrList = res.data)
  },
  methods: {
    getOffer(){
      this.loading = true
      getOffer(this.offerId || this.$route.query.offerId).then(response => {
        this.offer = response.data
        this.getCity()
        this.getChannel()
      }).finally(() => {
        this.loading = false
      })
    },
    getChannel(){
      if(!this.offer.channelId) return
      getChannel(this.offer.channelId).then(res => {
        this.channel = res.data
      })
    },
    getCity(){
      listByIds({ids: [this.offer.objectiveId, this.offer.departureId].join(',')}).then(res => {
        this.objective = res.data.find(item => item.id == this.offer.objectiveId)
        this.departure = res.data.find(item => item.id == this.offer.departureId)
      })
    },
    getProductNamesByIds(ids){
      const result = []
      ids.split(',').forEach(e => {
        this.productAttrList.forEach(f => {
          if (parseInt(e) === f.id) {
            result.push(f.attrName)
          }
        })
      })
      return result.join(',')
    },
    onSuccess(){
      this.showOfferProdId = null
      this.showCommissionProd = null
    }
  },
  computed: {
    currencyMap(){
      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>
<style>
.card-title{
  font-size: 18px;
  font-weight: bold;
}
.offer-header{
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>