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

      <el-table v-loading="loading" :data="order.orderItemVOList">
        <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}">
            品牌：{{ ['无牌', '有牌', '中性'][row.brandType] }}<br>
            箱数：{{ row.num }}<br>
            体积：{{ row.volume }}m³<br>
            重量：{{ row.weight }}Kg
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="入库货物属性">
          <template v-slot="{row}">
            <template v-if="row.warehouseInInfoVO">
              品牌：{{ ['无牌', '有牌', '中性'][row.brandType] }}<br>
              箱数：{{ row.warehouseInInfoVO.cartonsNum }}<br>
              体积：{{ row.warehouseInInfoVO.volume }}m³<br>
              重量：{{ row.warehouseInInfoVO.weight }}Kg
            </template>
          </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:order:update']" @click="$router.push(`/order/discount/${row.prodId}?orderId=${row.orderId}`)">优惠申请</el-button>
            <el-button size="mini" type="text" v-hasPermi="['ecw:order:update']">佣金规则</el-button>
            <el-button size="mini" type="text" v-hasPermi="['ecw:order: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: {
    orderId: [String, Number]
  },
  data() {
    return {
      parseTime,
      DICT_TYPE,
      getDictDataLabel,
      // 遮罩层
      loading: true,
      list: [],
      total:0,
      params:{
        page:1,
        rows:20,
        orderId:0,
        type:2
      },
      relationId:0,
      creatorName:'test',
      order: {
        number: '',
        orderItemVOList: []
      },
      unitList:[],
      currencyList:[],
      productAttrList:[],
    };
  },
  created() {
    if(this.orderId){
      this.params.orderId = this.orderId
      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.orderId).then(response => {
        this.loading = false
        this.order = 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;
}
.order-header{
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
