<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card v-show="showSearch">
      <el-form :model="queryParams" ref="queryForm" size="small" inline class="card">
        <el-form-item :label="$t('自编号')" prop="selfNo">
          <el-input v-model="queryParams.selfNo" clearable></el-input>
        </el-form-item>

        <el-form-item :label="$t('始发仓')" prop="startWarehouseIdList">
          <el-select v-model="queryParams.startWarehouseIdList" multiple :placeholder="$t('请选择始发仓')" clearable>
            <el-option v-for="item in exportWarehouseList" :label="$l(item, 'title')" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('目的国')" prop="destCountryId">
          <el-select v-model="queryParams.destCountryId" multiple :placeholder="$t('请选择目的国')" clearable>
            <el-option v-for="item in countryList" :key="item.guojia" :label="item.guojiaName" :value="item.guojia"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('目的城市')" prop="destCity">
          <el-select v-model="queryParams.destCity" multiple :placeholder="$t('请选择目的城市')" clearable>
            <el-option v-for="item in cityList" :key="item.shi" :label="item.shiName" :value="item.shi"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('目的仓')" prop="destWarehouseIdList">
          <el-select v-model="queryParams.destWarehouseIdList" multiple :placeholder="$t('请选择目的仓')" clearable>
            <el-option v-for="item in objWareHouseList" :key="item.id" :label="item.titleZh" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('自编号状态')" prop="boxStatus">
          <dict-selector multiple :type="DICT_TYPE.BOX_ORDER_SHIPMENT_STATE" v-model="queryParams.boxStatus" clearable></dict-selector>
        </el-form-item>
        <!-- <el-form-item :label="$t('结算时间')" prop="dateFilter">
          <el-date-picker v-model="dateFilter" type="datetimerange" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" value-format="yyyy-MM-dd HH:mm:ss" @change="handleQuery"> </el-date-picker>
        </el-form-item> -->
        <el-form-item :label="$t('是否结算')" prop="slStatus">
          <dict-selector :type="DICT_TYPE.SETTLEMENT_STATUS" v-model="queryParams.slStatus" clearable></dict-selector>
        </el-form-item>

        <!--提单制作  -->
        <el-form-item :label="$t('提单制作')" prop="ladingBillStatus">
          <dict-selector :type="DICT_TYPE.LADING_BILL_STATUS_DATA" v-model="queryParams.ladingBillStatus" clearable></dict-selector>
        </el-form-item>

        <el-form-item :label="$t('到港时间')" prop="daogangTime">
          <el-date-picker v-model="queryParams.daogangTime" type="datetimerange" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
        </el-form-item>

        <el-form-item :label="$t('卸柜/到仓时间')" prop="ulWarehouseTime">
          <el-date-picker v-model="queryParams.ulWarehouseTime" type="datetimerange" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
        </el-form-item>

        <el-form-item :label="$t('清关时间')" prop="qingguanTime">
          <el-date-picker v-model="queryParams.qingguanTime" type="datetimerange" range-separator="-" :start-placeholder="$t('开始日期')" :end-placeholder="$t('结束日期')" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery" :loading="loading">{{ $t("查询") }}</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">{{ $t("重置") }}</el-button>
          <el-button type="primary" :loading="exporting" icon="el-icon-download" @click="handleExport">{{ $t("导出搜索") }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="mb8">
      <el-descriptions v-show="showSearch" class="margin-top barTop" :title="$t('筛选合计信息:')" :column="2" :size="size" border>
        <el-descriptions-item>
          <template slot="label"> {{ $t("应收款-原币") }}: </template>
          <div v-if="totalSearch && totalSearch.receivableTotalSummary">
            <span class="unit" v-for="item in totalSearch.receivableTotalSummary" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
          </div>
        </el-descriptions-item>
        <!-- 结算 -->
        <el-descriptions-item>
          <template slot="label"> {{ $t("应收款") }}: </template>
          <div v-if="totalSearch && totalSearch.receivableTotalSettle">
            <span class="unit" v-for="item in totalSearch.receivableTotalSettle" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
          </div>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> {{ $t("应收款明细") }}: </template>
          <div>
            <span class="item" v-if="totalSearch && totalSearch.receivableDetailFreight">
              {{ $t("运费") }} <span class="unit" v-for="item in totalSearch.receivableDetailFreight" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
            </span>
            <span class="item" v-if="totalSearch && totalSearch.receivableDetailClearance">
              {{ $t("清关费") }} <span class="unit" v-for="item in totalSearch.receivableDetailClearance" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
            </span>
            <span class="item" v-if="totalSearch && totalSearch.receivableDetailOtherFee">
              {{ $t("额外费用") }} <span class="unit" v-for="item in totalSearch.receivableDetailOtherFee" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
            </span>
          </div>
        </el-descriptions-item>
        <!-- 目的国实 -->
        <el-descriptions-item>
          <template slot="label"> {{ $t("目的国实收") }}: </template>
          <div>
            <span class="item" v-if="totalSearch && totalSearch.receivableDestCountryFreight">
              {{ $t("运费") }} <span class="unit" v-for="item in totalSearch.receivableDestCountryFreight" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
            </span>
            <span class="item" v-if="totalSearch && totalSearch.receivableDestCountryClearance">
              {{ $t("清关费") }} <span class="unit" v-for="item in totalSearch.receivableDestCountryClearance" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
            </span>
            <span class="item" v-if="totalSearch && totalSearch.receivableDestCountryOtherFee">
              {{ $t("额外费用") }} <span class="unit" v-for="item in totalSearch.receivableDestCountryOtherFee" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
            </span>
            <span class="item" v-if="totalSearch && totalSearch.receivableDestCountryOtherFeeSub">
              {{ $t("额外费用(副币种)") }} <span class="unit" v-for="item in totalSearch.receivableDestCountryOtherFeeSub" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
            </span>
          </div>
        </el-descriptions-item>
        <!-- 始发国实收 -->
        <el-descriptions-item>
          <template slot="label"> {{ $t("始发国实收") }}: </template>
          <div>
            <span class="item" v-if="totalSearch && totalSearch.receivableStartCountryFreight">
              {{ $t("运费") }} <span class="unit" v-for="item in totalSearch.receivableStartCountryFreight" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
            </span>
            <span class="item" v-if="totalSearch && totalSearch.receivableStartCountryClearance">
              {{ $t("清关费") }} <span class="unit" v-for="item in totalSearch.receivableStartCountryClearance" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
            </span>
            <span class="item" v-if="totalSearch && totalSearch.receivableStartCountryOtherFee">
              {{ $t("额外费用") }} <span class="unit" v-for="item in totalSearch.receivableStartCountryOtherFee" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
            </span>
            <span class="item" v-if="totalSearch && totalSearch.receivableStartCountryOtherFeeSub">
              {{ $t("额外费用(副币种)") }} <span class="unit" v-for="item in totalSearch.receivableStartCountryOtherFeeSub" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
            </span>
          </div>
        </el-descriptions-item>

        <!-- 未收款明细 -->
        <el-descriptions-item>
          <template slot="label"> {{ $t("未收款明细") }}: </template>
          <div>
            <span class="item" v-if="totalSearch && totalSearch.receivableUnsettledFreight">
              {{ $t("运费") }} <span class="unit" v-for="item in totalSearch.receivableUnsettledFreight" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
            </span>
            <span class="item" v-if="totalSearch && totalSearch.receivableUnsettledClearance">
              {{ $t("清关费") }} <span class="unit" v-for="item in totalSearch.receivableUnsettledClearance" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
            </span>
            <span class="item" v-if="totalSearch && totalSearch.receivableUnsettledOtherFee">
              {{ $t("额外费用") }} <span class="unit" v-for="item in totalSearch.receivableUnsettledOtherFee" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
            </span>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <right-toolbar :show-search.sync="showSearch" class="show-bt" @queryTable="getList" />
    </div>
    <el-table v-loading="loading" :data="list" border class="card" :element-loading-text="$t('汇总计算中...')" show-summary :summary-method="getSummary">
      <el-table-column :label="$t('财务结算')" align="center" prop="slSettledTime" width="200" fixed="left"> </el-table-column>
      <el-table-column :label="$t('No.柜号')" width="130" align="center" prop="selfNo" fixed="left">
        <template slot-scope="scope">
          <router-link v-if="permissions.indexOf('selfno:report:detail') > -1" :to="{ path: './selfNoReportDetailNew?containerNumber=' + scope.row.selfNo }">
            {{ scope.row.selfNo }}
          </router-link>

          <span v-else>{{ scope.row.selfNo }}</span>
          <!-- <el-button  type="text" @click="$router.push('./selfNoReportDetailNew?containerNumber=' + scope.row.selfNo)">{{ scope.row.selfNo }}</el-button> -->
        </template>
      </el-table-column>
      <el-table-column :label="$t('应收款(Accounts receivable)')" align="center">
        <el-table-column :label="$t('汇总 Total')" prop="receivableTotalSummary" align="center" width="200"></el-table-column>
        <el-table-column :label="$t('结算币种 settlement currency')" prop="receivableTotalSettle" align="center" width="200"></el-table-column>
      </el-table-column>

      <el-table-column :label="$t('应收款明细 RECEIVABLE DEATAILS')" align="center" prop="summaryInfo.receivableTotalFeeGroup">
        <el-table-column :label="$t('运费 FREIGHT')" prop="receivableDetailFreight" align="center" width="200"> </el-table-column>
        <el-table-column :label="$t('清关费 CLEARING FEE')" prop="receivableDetailClearance" align="center" width="200"> </el-table-column>
        <el-table-column :label="$t('额外费用 EXTRAL FEE')" prop="receivableDetailOtherFee" align="center" width="200"> </el-table-column>
      </el-table-column>

      <el-table-column :label="'received in ' + (dstCountryName || $t('目的国'))" align="center" prop="">
        <el-table-column :label="$t('运费 FREIGHT')" prop="receivableDestCountryFreight" align="center" width="200"> </el-table-column>
        <el-table-column :label="$t('清关费 CLEARING FEE')" prop="receivableDestCountryClearance" align="center" width="200"> </el-table-column>
        <el-table-column :label="$t('额外费用 EXTRAL FEE')" prop="receivableDestCountryOtherFee" align="center" width="200"> </el-table-column>
        <el-table-column :label="$t('额外费用(副币种) EXTRAL FEE')" prop="receivableDestCountryOtherFeeSub" align="center" width="200"> </el-table-column>
      </el-table-column>

      <el-table-column :label="$t('received in China(中国实收)')" align="center" prop="">
        <el-table-column :label="$t('运费 FREIGHT')" prop="receivableStartCountryFreight" align="center" width="200"> </el-table-column>
        <el-table-column :label="$t('清关费 CLEARING FEE')" prop="receivableStartCountryClearance" align="center" width="200"> </el-table-column>
        <el-table-column :label="$t('额外费用 EXTRAL FEE')" prop="receivableStartCountryOtherFee" align="center" width="200"> </el-table-column>
        <el-table-column :label="$t('额外费用(副币种) EXTRAL FEE')" prop="receivableStartCountryOtherFeeSub" align="center" width="200"> </el-table-column>
      </el-table-column>

      <el-table-column :label="$t('Discounts 折扣')" align="center">
        <el-table-column :label="$t('运费 FREIGHT')" prop="receivableDiscountFreight" align="center" width="200"> </el-table-column>
        <el-table-column :label="$t('清关费 CLEARING FEE')" prop="receivableDiscountClearance" align="center" width="200"> </el-table-column>
        <el-table-column :label="$t('额外费用 EXTRAL FEE')" prop="receivableDiscountOtherFee" align="center" width="200"> </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('未收款明细 Accounts receivable')" align="center" prop="">
        <el-table-column :label="$t('运费 FREIGHT')" prop="receivableUnsettledFreight" align="center" width="200"> </el-table-column>
        <el-table-column :label="$t('清关费 CLEARING FEE')" prop="receivableUnsettledClearance" align="center" width="200"> </el-table-column>
        <el-table-column :label="$t('额外费用 EXTRAL FEE')" prop="receivableUnsettledOtherFee" align="center" width="200"> </el-table-column>
      </el-table-column>
      <el-table-column :label="$t('核销比例')" align="center" prop="writeOffPercent"></el-table-column>
      <el-table-column :label="$t('提单制作')" align="center" prop="ladingBillStatus">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.LADING_BILL_STATUS_DATA" :value="scope.row.ladingBillStatus"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('到港时间')" align="center" prop="dgDate" width="200"></el-table-column>
      <el-table-column :label="$t('清关时间')" align="center" prop="qgDate" width="200"></el-table-column>

      <el-table-column :label="$t('卸柜/到仓时间')" align="center" prop="ulWarehouseTime" width="200"></el-table-column>

      <el-table-column :label="$t('操作')" fixed="right" v-if="permissions.indexOf('selfno:report:detail') > -1">
        <template slot-scope="scope">
          <el-button type="text" @click="$router.push('./selfNoReportDetailNew?containerNumber=' + scope.row.selfNo)">{{ $t("查看") }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows" @pagination="getList" />
  </div>
</template>

<script>
import { getCurrencyPage } from "@/api/ecw/currency"
import { getWarehouseList } from "@/api/ecw/warehouse"
import store from "@/store"
import { mapGetters } from "vuex"
import { boxSettlementPage, exportSettlementExcelNew } from "@/api/ecw/box"
import { getRegionList } from "@/api/ecw/order"
import { getListTree } from "@/api/ecw/region"
import { loadStatementsReceivableList } from "@/api/ecw/financial"
import Decimal from "decimal.js"
export default {
  name: "EcwFinancialSelfnoreport",
  data() {
    return {
      size: "small",
      loading: false, // 是否加载中
      totalColumn: [], //列表汇总数据
      totalSearch: [], //搜索条件汇总数据
      list: [],
      total: 0,
      showSearch: true,
      queryParams: {
        selfNo: "", //自编号
        ulWarehouseTime: [], //卸柜/到仓时间
        qingguanTime: [],
        daogangTime: this.setETATime(), //到港时间
        startWarehouseIdList: [], //始发仓
        destWarehouseIdList: [], //目的地
        boxStatus: [], //自编号状态
        page: 1,
        rows: 10
      },
      exportWarehouseList: [], //始发仓列表
      objWareHouseList: [], //目的仓列表
      currencyList: [],
      warehouseList: [],
      cityList: [],
      countryList: [],
      // 导出中状态
      exporting: false
    }
  },

  activated() {
    // 如果有必须的条件则查询
    this.getList()
  },
  created() {
    getWarehouseList().then((res) => {
      this.warehouseList = res.data
      this.exportWarehouseList = this.warehouseList.filter((item) => item.tradeType == 2 || item.tradeType == 3)
    })
    this.init()
    this.getList()
    getCurrencyPage(this.params).then((res) => (this.currencyList = res.data.list))
  },
  watch: {
    // 目的国变更后要重置目的仓
    "queryParams.destCountryId": {
      handler(val, oldVal) {
        this.queryParams.destCity = []
        if (val && val.length > 0) {
          this.loadCityList(2, val.join())
        } else {
          this.loadCityList()
        }
      }
    },
    "queryParams.destCity": {
      handler(val, oldVal) {
        this.queryParams.destWarehouseIdList = []
        if (val.length > 0) {
          this.loadWareHouseList(3, val.join())
        } else {
          this.loadWareHouseList()
        }
      }
    }
  },
  computed: {
    ...mapGetters(["getCurrencySymbol"]),
    isChinese() {
      return this.$i18n.locale === "zh_CN"
    },
    permissions() {
      return store.getters.permissions
    },
    // 获取列的货币名称 columnName 取值为Other, Freight, Clearance
    ColumnCurrencyName() {
      return (columnName, wrapper = true) => {
        if (!this.list.length) return ""
        let field = `total${columnName}FeeCurrency`
        return wrapper ? `(${this.list[0]["summaryInfo"][field]})` : this.list[0]["summaryInfo"][field]
      }
    },
    dstCountryName() {
      if (!this.queryParams.destCountryId) return null

      const country = this.countryList.filter((item) => {
        const select = this.queryParams.destCountryId.filter((itemCountry) => itemCountry == item.guojia)
        if (select.length > 0) {
          return item
        }
        // item.id == this.queryParams.destCountryId
      })

      if (!country) return null
      let countryListLabel = ""
      country.forEach((selectItem) => {
        countryListLabel += this.isChinese ? ` ${selectItem.guojiaName}` : `${selectItem.guojiaNameEn}`
      })
      return countryListLabel
    }
  },
  methods: {
    setETATime() {
      let date = new Date()
      let year = date.getFullYear().toString()
      let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
      let day = date.getDate() < 10 ? "0" + date.getDate().toString() : date.getDate().toString()
      let start = `${year}-01-01 00:00:00`
      let end = `${year}-${month}-${day} 23:59:59`
      return [start, end]
    },
    init() {
      //请求获取国家
      this.loadCountyList()
      this.loadCityList()
      this.loadWareHouseList()
    },
    //目的地
    loadWareHouseList(type = 5, cityId = 5) {
      getRegionList(type, cityId)
        .then(({ data }) => {
          this.objWareHouseList = data
        })
        .catch((error) => {
          console.log(error)
        })
    },
    loadCityList(type = 4, countryId = 4) {
      getRegionList(type, countryId)
        .then(({ data }) => {
          this.cityList = data
        })
        .catch((error) => {
          console.log(error)
        })
    },
    loadCountyList() {
      getRegionList(1, 1)
        .then(({ data }) => {
          this.countryList = data
        })
        .catch((error) => {
          console.log(error)
        })
    },

    getCurrencyLabel(id) {
      const item = this.currencyList.find((item) => item.id === id)
      if (!item) return ""
      return this.$l(item, "title")
    },
    /** 查询列表 */
    getList() {
      this.loading = true
      let params = {
        ...this.queryParams
      }
      // this.addBeginAndEndTime(params, this.queryParams.dateFilter, "JsDate", false)
      this.addBeginAndEndTime(params, this.queryParams.ulWarehouseTime, "UlWarehouseTime", false)

      this.addBeginAndEndTime(params, this.queryParams.daogangTime, "DaogangTime", false)
      this.addBeginAndEndTime(params, this.queryParams.qingguanTime, "QingguanTime", false)
      this.list = []
      this.loading = false
      // 执行查询
      loadStatementsReceivableList(params)
        .then((response) => {
          this.list = response.data.list
          this.total = response.data.total
          this.totalColumn = response.data.pageAmount //当前页面列汇总
          this.totalSearch = response.data.queryAmount //查询条件汇总
        })
        .finally(() => {
          this.loading = false
        })
    },
    getCommonTotalString(key) {
      if (this.totalColumn && this.totalColumn[key] && this.totalColumn[key].length > 0) {
        return this.totalColumn[key]
          .map((item) => {
            return `${this.getCurrencySymbol(item.currencyId)} ${item.amount}`
          })
          .join(",")
      }
      return ""
    },
    // 返回汇总行数据
    getSummary() {
      //应收款
      const receivableTotalSummary = this.getCommonTotalString("receivableTotalSummary") // 应收款汇总
      const receivableTotalSettle = this.getCommonTotalString("receivableTotalSettle") //应收款结算币种
      // 应收款明细
      const receivableDetailFreight = this.getCommonTotalString("receivableDetailFreight") //应收款明细-运费
      const receivableDetailClearance = this.getCommonTotalString("receivableDetailClearance") //清关费
      const receivableDetailOtherFee = this.getCommonTotalString("receivableDetailOtherFee") //额外费用
      //目的国实收
      const receivableDestCountryFreight = this.getCommonTotalString("receivableDestCountryFreight") //运费
      const receivableDestCountryClearance = this.getCommonTotalString("receivableDestCountryClearance") //清关费
      const receivableDestCountryOtherFee = this.getCommonTotalString("receivableDestCountryOtherFee") //额外费用
      const receivableDestCountryOtherFeeSub = this.getCommonTotalString("receivableDestCountryOtherFeeSub") //额外费用(副币种)
      //始发国实收
      const receivableStartCountryFreight = this.getCommonTotalString("receivableStartCountryFreight") //运费
      const receivableStartCountryClearance = this.getCommonTotalString("receivableStartCountryClearance") //清关费
      const receivableStartCountryOtherFee = this.getCommonTotalString("receivableStartCountryOtherFee") //额外费用
      const receivableStartCountryOtherFeeSub = this.getCommonTotalString("receivableStartCountryOtherFeeSub") //额外费用(副币种)
      //折扣
      const receivableDiscountFreight = this.getCommonTotalString("receivableDiscountFreight") //运费
      const receivableDiscountClearance = this.getCommonTotalString("receivableDiscountClearance") //清关费
      const receivableDiscountOtherFee = this.getCommonTotalString("receivableDiscountOtherFee") //额外费用
      //未收款明细
      const receivableUnsettledFreight = this.getCommonTotalString("receivableUnsettledFreight") //运费
      const receivableUnsettledClearance = this.getCommonTotalString("receivableUnsettledClearance") //清关费
      const receivableUnsettledOtherFee = this.getCommonTotalString("receivableUnsettledOtherFee") //额外费用
      const data = [
        this.$t("合计"),
        "", //柜号列
        receivableTotalSummary, // 应收款汇总
        receivableTotalSettle, //应收款结算币种
        receivableDetailFreight, //应收款明细-运费
        receivableDetailClearance, //  清关费
        receivableDetailOtherFee, //额外费用
        receivableDestCountryFreight, //目的国实收运费
        receivableDestCountryClearance, //清关费
        receivableDestCountryOtherFee, //额外费用
        receivableDestCountryOtherFeeSub, //额外费用(副币种)
        receivableStartCountryFreight, //始发国实收运费
        receivableStartCountryClearance, //清关费
        receivableStartCountryOtherFee, //额外费用
        receivableStartCountryOtherFeeSub, //额外费用(副币种)
        receivableDiscountFreight, //折扣运费
        receivableDiscountClearance, //清关费
        receivableDiscountOtherFee, //额外费用
        receivableUnsettledFreight, //未收款明细运费
        receivableUnsettledClearance, //清关费
        receivableUnsettledOtherFee //额外费用
      ]

      return data
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs.queryForm.validate().then(() => {
        this.queryParams.page = 1
        this.getList()
      })
    },
    handleReset() {
      this.$refs["queryForm"].resetFields()
      this.queryParams.page = 1
      // this.dateFilter = []
      this.handleQuery()
    },
    // 导出搜索
    handleExport() {
      this.$refs.queryForm.validate().then(() => {
        this.exporting = true
        let params = { ...this.queryParams }
        // this.addBeginAndEndTime(params, this.dateFilter, "JsDate", false)

        this.addBeginAndEndTime(params, this.queryParams.ulWarehouseTime, "UlWarehouseTime", false)

        this.addBeginAndEndTime(params, this.queryParams.daogangTime, "DaogangTime", false)
        this.addBeginAndEndTime(params, this.queryParams.qingguanTime, "QingguanTime", false)

        exportSettlementExcelNew(params)
          .then((res) => {
            //this.$download.excel(res, 'shipment-summary.xls');
            this.$message.success(this.$t("已加入导出队列，请稍后在下载日志中下载"))
          })
          .finally(() => {
            this.exporting = false
          })
      })
    }
  }
}
</script>

<style scoped>
.card {
  margin-top: 20px;
}
.dialog-footer {
  padding: 40px;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
}
.unit {
  margin-right: 10px;
  font-size: 12px;
}
.bar {
  flex: 1;
  flex-wrap: wrap;
  display: flex;
}
.showBar {
  width: 100%;
  display: flex;
}
.sideBar {
  margin-bottom: 2px;
  font-size: 14px;
  padding-right: 20px;
  width: 50%;
}
.sideBar-bt {
  margin-bottom: 2px;
  font-size: 14px;
  padding-right: 20px;
}
.mb8 {
  padding-top: 6px;
}
</style>
