<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="card-title">申请特价</div>
      <!-- 列表 -->
      <div class="offer-header">
        <span style="font-size: 15px;">订单号：{{ offer.number }}</span>
      </div>

      <el-table v-loading="loading" :data="offer.offerProdRespVOList">
        <el-table-column label="序号" align="center" prop="id" type="index"></el-table-column>
        <el-table-column
          prop="prodTitleZh"
          label="品名">
          <template v-slot="{row}">
            {{ row.prodTitleZh }}/{{ row.prodTitleEn }}
          </template>
        </el-table-column>
        <el-table-column
          prop="prodAttrIds"
          label="填单货物属性">
          <template v-slot="{row}">
            {{ getProductNamesByIds(row.prodAttrIds) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="入库货物属性">
          <template v-slot="{row}">
            品牌：{{ row.brand ? '有' : '无' }}<br>
            箱数：{{ row.num }}<br>
            体积：{{ row.volume }}m³<br>
            重量：{{ row.weight }}Kg
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          :formatter="(_, __, v) => parseTime(v)"
          label="最后操作时间">
        </el-table-column>
        <el-table-column
          label="原价">
          <template v-slot="{row}">
            运费：{{ row.originalSeaFreight }} {{ currentMap[row.seaFreightCurrency] }}/{{ unitMap[row.seaFreightVolume] }}
            <br>
            清关费：{{ row.originalClearanceFreight }} {{ currentMap[row.clearanceFreightCurrency] }}/{{ unitMap[row.clearanceFreightVolume] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="成本价">
          <template v-slot="{row}">
            运费：{{ row.seaFreight }} {{ currentMap[row.seaFreightCurrency] }}/{{ unitMap[row.seaFreightVolume] }}
            <br>
            清关费：{{ row.clearanceFreight }} {{ currentMap[row.clearanceFreightCurrency] }}/{{ unitMap[row.clearanceFreightVolume] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="销售价">
          <template v-slot="{row}">
            运费：{{ row.seaFreight }} {{ currentMap[row.seaFreightCurrency] }}/{{ unitMap[row.seaFreightVolume] }}
            <br>
            清关费：{{ row.clearanceFreight }} {{ currentMap[row.clearanceFreightCurrency] }}/{{ unitMap[row.clearanceFreightVolume] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          :formatter="(v) => ['取消报价', '特价审批中', '需求确认(草稿)', '跟进中', '赢单', '输单', '报价完成', '审批通过', '审批拒绝'][v.status]"
          label="审核状态">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作">
          <template v-slot="{row}">
            <el-button size="mini" type="text" v-hasPermi="['ecw:offer:update']" @click="$router.push(`/offer/discount/${row.offerProdId}?offerId=${row.offerId}`)">优惠申请</el-button>
            <!--            <el-button size="mini" type="text" v-hasPermi="['ecw:offer:update']">佣金规则</el-button>-->
            <!--            <el-button size="mini" type="text" v-hasPermi="['ecw:offer:update']">管理折扣</el-button>-->
          </template>
        </el-table-column>

      </el-table>

      <div style="text-align: center;margin-top: 80px">
        <el-button type="primary">申请重货优惠</el-button>
        <el-button type="primary">申请泡货优惠</el-button>
        <el-button type="primary">关闭窗口</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import {DICT_TYPE, getDictDataLabel} from '@/utils/dict'
import {getUnitList} from "@/api/ecw/unit"
import {getCurrencyList} from "@/api/ecw/currency"
import {getProductAttrList} from "@/api/ecw/productAttr"
import { parseTime } from '@/utils/ruoyi'
import {getOrder} from "@/api/ecw/order"
export default {
  name: "OrderSpecial",
  components: {
  },
  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:[],
    };
  },
  created() {
    if(this.offerId){
      this.params.offerId = this.offerId
      this.getOrder()
    }
    getUnitList().then(res => this.unitList = res.data)
    getCurrencyList().then(res => this.currencyList = res.data)
    getProductAttrList().then(res => this.productAttrList = res.data)
  },
  methods: {
    getOrder(){
      this.loading = true
      getOrder(this.offerId).then(response => {
        this.loading = false
        this.offer = response.data
      })
    },
    getProductNamesByIds(ids){
      const result = []
      ids.split(',').forEach(e => {
        this.productAttrList.forEach(f => {
          if (parseInt(e) === f.id) {
            result.push(f.attrName)
          }
        })
      })
      return result.join(',')
    }
  },
  computed: {
    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>
.card-title{
  font-size: 18px;
  font-weight: bold;
}
.offer-header{
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>