<template>
  <div style="padding: 20px 20px 20px 100px; background: #f4f4f4; margin: -10px 0">
    <el-table :data="list" border style="width: 100%" size="mini">
      <el-table-column :label="$t('序号')" width="90px" type="index" align="center"></el-table-column>
      <el-table-column prop="prodTitleZh" :label="$t('品名')" width="220px">
        <template slot-scope="{ row }">
          <div>{{ getProdTypeName(row.prodType) }}</div>
          <div>{{ row.prodTitleZh }}/{{ row.prodTitleEn }}</div>
        </template>
      </el-table-column>
      <!--<el-table-column prop="prodTitleEn" :label="$t('品名')" />-->
      <el-table-column prop="brand" :label="$t('品牌')" width="90px">
        <template slot-scope="{ row }">
          <template v-if="row.brandName">{{ row.brandName }}</template>
          <dict-tag v-else :type="DICT_TYPE.ECW_IS_BRAND" :value="row.brandType" />
        </template>
      </el-table-column>
      <el-table-column prop="brand" :label="$t('特性')" width="90px">
        <template slot-scope="{ row }">
          {{ showAttrText(row.warehouseInInfoVO ? row.warehouseInProdAttrIds : row.prodAttrIds) }}
        </template>
      </el-table-column>
      <el-table-column prop="sumNum" :label="$t('入仓信息')" width="220px">
        <template slot-scope="{ row }">
          <!--<el-link type="primary" @click.native="showWarehouseLogs(row,1)">{{row.warehouseInInfoVO ? row.warehouseInInfoVO.cartonsNum : 0}}</el-link>
          <div v-if="row.warehouseInInfoVO && row.warehouseInInfoVO.isMultiSpecification">({{$t('多规格')}})</div>-->
          <el-link type="primary" @click.native="$emit('showWarehouseLogs', row, 1)" v-if="row.warehouseInInfoVO"> {{ row.warehouseInInfoVO.cartonsNum }}{{ $t("箱") }} {{ row.warehouseInInfoVO.weight }}Kg {{ row.warehouseInInfoVO.volume }}m³ {{ row.warehouseInInfoVO.quantityAll }}{{ $t("个") }} </el-link>
          <div v-if="row.warehouseInInfoVO && row.warehouseInInfoVO.isMultiSpecification">({{ $t("多规格") }})</div>
        </template>
      </el-table-column>
      <el-table-column prop="warehouseType" :label="$t('类型')" width="120px" />
      <el-table-column prop="specificationType" :label="$t('包装')" width="120px" />
      <el-table-column prop="sumNum" :label="$t('收费数据')" width="220px">
        <template slot-scope="{ row }">
          <div v-if="row.warehouseInInfoVO">{{ row.chargeWeight }}Kg {{ row.chargeVolume }}m³</div>
        </template>
      </el-table-column>
      <el-table-column prop="" :label="`${$t('费用类型')}/${$t('模式')}`" width="200px">
        <template slot-scope="{ row }">
          <dict-tag :type="DICT_TYPE.ECW_PAY_ADVANCE" :value="row.isPayAdvance" />
          <div v-if="row.charging == 0">{{ $t("运费/清关费") }}</div>
          <div v-if="row.charging == 1">{{ $t("全包价") }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="" :label="$t('成交单价')" width="220px">
        <template slot-scope="{ row }">
          <template v-if="row.charging == 1">
            <template v-if="!row.originalSeaFreight">{{ $t("未报价") }}</template>
            <el-link type="primary" @click="showFeeDetail(row, 'clearance')" v-else>{{ $t("全包价") }} {{ row.oneSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }} / {{ unitMap[row.seaFreightVolume] }}</el-link>
          </template>
          <template v-else-if="!row.originalSeaFreight && !row.originalClearanceFreight">{{ $t("未报价") }}</template>
          <template v-else>
            <el-link type="primary" @click="showFeeDetail(row, 'freight')"> {{ $t("运费") }}：{{ row.oneSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }} / {{ unitMap[row.seaFreightVolume] }} </el-link>
            <el-link type="primary" @click="showFeeDetail(row, 'clearance')"> {{ $t("清关费") }}：{{ row.oneClearanceFreight }} {{ currencyMap[row.clearanceFreightCurrency] }} / {{ unitMap[row.clearanceFreightVolume] }} </el-link>
          </template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('特价')" align="center">
        <template v-slot="scope">{{ scope.row.specialPriceType ? "是" : "否" }}</template>
      </el-table-column>

      <el-table-column prop="firstInTime" :label="$t('首次入仓时间')" align="center" width="150"></el-table-column>
      <el-table-column prop="lastInTime" :label="$t('最后入仓时间')" align="center" width="150"></el-table-column>

      <el-table-column prop="" :label="$t('材质')">
        <template slot-scope="{ row }">
          <dict-tag :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" :value="row.material" />
        </template>
      </el-table-column>
      <el-table-column prop="" :label="$t('用途')">
        <template slot-scope="{ row }">
          <div v-if="row.usageIds">
            <div v-for="(item, index) in row.usageIds.split(',')">
              <dict-tag :type="DICT_TYPE.OREER_ITEM_USAGE" :value="item" />
              <span v-if="index + 1 != row.usageIds.split(',').length">,</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('原价')" width="180px">
        <template slot-scope="{ row }">
          <template v-if="row.charging == 1">
            <template v-if="!row.oneSeaFreight">{{ $t("未报价") }}</template>
            <template>{{ $t("全包价") }} {{ row.oneSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }} / {{ unitMap[row.seaFreightVolume] }}</template>
          </template>
          <template v-else-if="!row.oneSeaFreight && !row.oneClearanceFreight">{{ $t("未报价") }}</template>
          <template v-else-if="row.specialPriceType">
            <div style="color: red; font-weight: 700">
              {{ $t("原价") }}
            </div>
            <div>{{ $t("运费") }}：{{ row.originalSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }} / {{ unitMap[row.seaFreightVolume] }}</div>
            <div>{{ $t("清关费") }}：{{ row.originalClearanceFreight }} {{ currencyMap[row.clearanceFreightCurrency] }} / {{ unitMap[row.clearanceFreightVolume] }}</div>
            <div style="color: red; font-weight: 700">
              {{ $t("特价") }}
            </div>
            <div>{{ $t("运费") }}：{{ row.oneSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }} / {{ unitMap[row.seaFreightVolume] }}</div>
            <div>{{ $t("清关费") }}：{{ row.oneClearanceFreight }} {{ currencyMap[row.clearanceFreightCurrency] }} / {{ unitMap[row.clearanceFreightVolume] }}</div>
          </template>
          <template v-else>
            <div>{{ $t("运费") }}：{{ row.oneSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }} / {{ unitMap[row.seaFreightVolume] }}</div>
            <div v-if="row.oneClearanceFreight">{{ $t("清关费") }}：{{ row.oneClearanceFreight }} {{ currencyMap[row.clearanceFreightCurrency] }} / {{ unitMap[row.clearanceFreightVolume] }}</div>
            <div v-else>{{ $t("清关费未报价") }}</div>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="$t('费用详情')" :visible="!!showFeeDetailDialog" :before-close="closeFeeDetail">
      <el-row v-if="feeDetail">
        <el-col :span="12">
          <div>{{ feeDetail.charging ? $t("全包价") : $t("运费") }}</div>
          <div v-for="item in feeDetail.freight">
            {{ item.label }}: {{ item.value }}
            <template v-if="item.currency">
              {{ currencyMap[item.currency] }} / {{ unitMap[item.volume] }} <span v-if="item.remark">【{{ item.remark }}】</span>
            </template>
          </div>
        </el-col>
        <el-col :span="12" v-if="feeDetail.charging != 1">
          <div>
            {{ $t("清关费") }}
            <template v-if="transportId == 3 || transportId == 4">
              {{ $t("来自{source}", { source: feeDetail.airClearanceSource + feeDetail.sourceName }) }}
            </template>
          </div>
          <div v-for="item in feeDetail.clearance">
            {{ item.label }}: {{ item.value }}
            <template v-if="item.currency">
              {{ currencyMap[item.currency] }} / {{ unitMap[item.volume] }} <span v-if="item.remark">【{{ item.remark }}】</span>
            </template>
          </div>
        </el-col>
      </el-row>

      <div v-if="feeDetail && feeDetail.coupons && feeDetail.coupons.length" class="page-title">{{ $t("优惠详情") }}</div>
      <el-table v-if="feeDetail && feeDetail.coupons && feeDetail.coupons.length" :data="feeDetail.coupons">
        <el-table-column label="优惠ID" prop="couponId"></el-table-column>
        <el-table-column label="优惠名称">
          <template slot-scope="{ row }">
            {{ $l(row, "title") }}
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="{ row }">
            <dict-tag :type="DICT_TYPE.ECW_COUPON_TYPE" :value="row.type"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column label="运费优惠">
          <template slot-scope="{ row }">
            {{ row.freightReduceAmount }}
            {{ currencyMap[row.freightReduceCurrencyId] }}
          </template>
        </el-table-column>
        <el-table-column label="清关费优惠">
          <template slot-scope="{ row }">
            {{ row.clearanceReduceAmount }}
            {{ currencyMap[row.clearanceReduceCurrencyId] }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import Decimal from "decimal.js"
import { parseTime } from "@/utils/ruoyi"
export default {
  props: {
    list: {
      type: Array,
      required: true
    },
    attrList: {
      type: Array,
      required: true
    },
    prodTypeList: {
      type: Array,
      required: true
    },
    currencyMap: {
      type: Object,
      required: true
    },
    unitMap: {
      type: Object,
      required: true
    },
    transportId: {
      type: Number,
      required: false
    }
  },
  data() {
    return {
      feeDetail: null,
      showFeeDetailDialog: false
    }
  },
  computed: {
    getProdTypeName() {
      return (prodType) => {
        for (let index in this.prodTypeList) {
          let prodTypeItem = this.prodTypeList[index]
          if (prodTypeItem.id == prodType) {
            return this.$l(prodTypeItem, "title")
          }
        }
      }
    },
    // 显示特性
    showAttrText() {
      return (ids) => {
        if (!ids) return ""
        ids = !Array.isArray(ids) ? ids.split(",") : ids
        const attrMap = {}
        this.attrList.forEach((item) => {
          attrMap[item.id] = this.$l(item, "attrName")
        })
        return ids.map((id) => attrMap[id]).join(",")
      }
    }
  },
  created() {},
  methods: {
    closeFeeDetail() {
      this.showFeeDetailDialog = null
    },
    showFeeDetail(row, type) {
      console.log("showFeeDetail", row, type)
      this.showFeeDetailDialog = true
      const freight = [],
        clearance = []

      let freightFields = []
      let clearanceFields = []

      const brandType = row.warehouseInInfoVO ? row.feeType : row.brandType
      // 不是特价则显示其他字段
      freightFields = [
        // {field: 'oneSeaFreight', label: this.$t('成交单价')},
        { field: "originalSeaFreight", label: this.$t("默认单价（无牌无液无电）") },
        // {field: 'brandFreightPrice', label: this.$t('品牌加价')},
        { field: "liquidFreightPrice", label: this.$t("液体加价") },
        { field: "electrifiedFreightPrice", label: this.$t("带电加价") },
        { field: "discountFreightPrice", label: this.$t("优惠活动减免") },
        { field: "plainCommission", label: this.$t("明佣") },
        { field: "hiddenCommission", label: this.$t("暗佣") }
      ]

      // 批量加价
      if (row.markupSeaFreight) {
        freightFields.push({ field: "markupSeaFreight", label: this.$t("批量加价") })
      }

      // 品牌加价
      if (row["brandFreightPrice"] && row["brandFreightPrice"] > 0) {
        freightFields.push({ field: "brandFreightPrice", label: brandType == 1 ? this.$t("有品牌加价") : this.$t("中性品牌加价") })
      }

      // 有减免金额才显示优惠后单价
      if (row["discountFreightPrice"] && row["discountFreightPrice"] > 0) {
        freightFields.push({ field: "afterDiscountSeaFreight", label: this.$t("优惠后单价") })
      }
      // 包装加价
      if (row["packagingFreightPrice"] && row["packagingFreightPrice"] > 0) {
        freightFields.push({ field: "packagingFreightPrice", label: this.$t("包装加价") })
      }
      freightFields.push({ field: "oneSeaFreight", label: this.$t("成交单价") })
      console.log({ freightFields })
      freightFields.forEach((item) => {
        if (row[item.field]) {
          freight.push({
            label: item.label,
            value: row[item.field],
            currency: row.seaFreightCurrency,
            volume: row.seaFreightVolume,
            // 特价通过四个字段标识，任一为true则为特价
            remark: item.field == "oneSeaFreight" && (row.specialPriceType || row.splitCustomPriceType || row.channelManualPricing) ? this.$t("特价") : null
          })
        }
      })

      clearanceFields = [
        { field: "originalClearanceFreight", label: this.$t("默认单价（无牌无液无电）") },
        // {field: 'brandClearanceFeePrice', label: this.$t('品牌加价')},
        { field: "liquidClearanceFeePrice", label: this.$t("液体加价") },
        { field: "electrifiedClearanceFeePrice", label: this.$t("带电加价") },
        { field: "discountClearanceFeePrice", label: this.$t("优惠活动减免") }
      ]
      // 批量加价
      if (row.markupClearanceFreight) {
        clearanceFields.push({ field: "markupClearanceFreight", label: this.$t("批量加价") })
      }
      // 品牌加价
      if (row["brandClearanceFeePrice"] && row["brandClearanceFeePrice"] > 0) {
        clearanceFields.push({ field: "brandClearanceFeePrice", label: brandType == 1 ? this.$t("有品牌加价") : this.$t("中性品牌加价") })
      }
      if (row["discountClearanceFeePrice"] && row["discountClearanceFeePrice"] > 0) {
        clearanceFields.push({ field: "afterDiscountClearanceFreight", label: this.$t("优惠后单价") })
      }
      // 包装加价
      if (row["packagingClearanceFeePrice"] && row["packagingClearanceFeePrice"] > 0) {
        clearanceFields.push({ field: "packagingClearanceFeePrice", label: this.$t("包装加价") })
      }
      clearanceFields.push({ field: "oneClearanceFreight", label: this.$t("成交单价") })
      clearanceFields.forEach((item) => {
        if (row[item.field]) {
          clearance.push({
            label: item.label,
            value: row[item.field],
            currency: row.clearanceFreightCurrency,
            volume: row.clearanceFreightVolume,
            remark: (row.specialPriceType || row.splitCustomPriceType || row.channelManualPricing) && item.field == "oneClearanceFreight" ? this.$t("特价") : null
          })
        }
      })

      freight.push({
        label: this.$t("价格更新时间"),
        value: parseTime(row.lastFreightChargePriceTime)
      })
      clearance.push({
        label: this.$t("价格更新时间"),
        value: parseTime(row.lastClearanceChargePriceTime)
      })
      this.feeDetail = {
        freight,
        clearance,
        charging: row.charging,
        coupons: row.couponInfoVOList,
        airClearanceSource: [, this.$t("商品"), this.$t("渠道"), this.$t("商品线路价格"), this.$t("线路渠道")][row.airClearanceSource], // 1 商品 2 渠道 3 商品线路价格 4 线路渠道
        airClearanceInfo: JSON.parse(row.airClearanceInfo), //空运清关费来源数据详情,
        sourceName: row.airClearanceSource == 1 ? this.$l(row, "prodTitle") : this.order?.channelName
      }
    },
    // 获取储位名称
    getLocationName(locationArr) {
      if (!locationArr || !locationArr.length) return ""
      let arr = []
      locationArr.forEach((item) => {
        arr.push(`${item.areaName}${item.locationName || ""}`)
      })
      return Array.from(new Set(arr)).join(",")
    }
  }
}
</script>
