<template>
  <div class="app-container">
    <el-card v-if="showSearch">
      <el-form :model="queryParams" ref="queryForm" size="small" inline class="card">
        <el-form-item :label="$t('订单编号')" prop="orderNo">
          <el-input v-model="queryParams.orderNo" clearable :placeholder="$t('请输入')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('提单号')" prop="tidanNo">
          <el-input v-model="queryParams.tidanNo" clearable :placeholder="$t('请输入')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('唛头')" prop="marks">
          <el-input v-model="queryParams.marks" clearable :placeholder="$t('请输入')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('发货人')" prop="consignorKey">
          <el-input v-model="queryParams.consignorKey" :placeholder="$t('客户编号，名称，手机号')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('收货人')" prop="consigneeKey">
          <el-input v-model="queryParams.consigneeKey" :placeholder="$t('客户编号，名称，手机号')"></el-input>
        </el-form-item>

        <el-form-item :label="$t('订单时间类型')" prop="dateFilter">
          <dict-selector :type="DICT_TYPE.ECW_BEGINTIME_TYPE_ENDTIME" :filter="(item) => item.value != 'PickTime'" v-model="dateFilterType" defaultable style="width: 150px; margin-right: 5px" />
          <el-date-picker placement="bottom-start" v-model="queryParams.dateFilter" 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="startWarehouseIds">
          <el-select v-model="queryParams.startWarehouseIds" 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="destCountryIds">
          <el-select v-model="queryParams.destCountryIds" 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="destCityIds">
          <el-select v-model="queryParams.destCityIds" 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="destWarehouseIds">
          <el-select v-model="queryParams.destWarehouseIds" 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="status">
          <dict-selector :type="DICT_TYPE.ORDER_STATUS" v-model="queryParams.status" clearable />
        </el-form-item>
        <el-form-item :label="$t('是否重货')" prop="isHeavyCargo">
          <dict-selector :type="DICT_TYPE.ECW_YESNO" v-model="queryParams.isHeavyCargo" clearable />
        </el-form-item>
        <el-form-item :label="$t('是否泡货')" prop="isPaoCargo">
          <dict-selector :type="DICT_TYPE.ECW_YESNO" v-model="queryParams.isPaoCargo" clearable />
        </el-form-item>
        <el-form-item :label="$t('是否控货')" prop="isCargoControl">
          <dict-selector :type="DICT_TYPE.ECW_YESNO" v-model="queryParams.isCargoControl" clearable />
        </el-form-item>
        <el-form-item :label="$t('提货率')" prop="pickRatio">
          <el-input placeholder="请输入内容" v-model="queryParams.pickRatio" class="input-with-select">
            <el-form-item prop="pickRatioSymbols" slot="prepend" style="margin-bottom: 0">
              <dict-selector :type="DICT_TYPE.PICKUP_RATE_COMPARISON_SYMBOLS" v-model="queryParams.pickRatioSymbols" clearable />
            </el-form-item>
          </el-input>
        </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="resetQuery">{{ $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="receivableTotalFeeGroupDtoList">
            <span class="unit" v-for="item in receivableTotalFeeGroupDtoList" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> {{ $t("折扣金额") }}: </template>
          <div v-if="discountTotalFeeGroupDtoList">
            <span class="unit" v-for="item in discountTotalFeeGroupDtoList" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
          </div>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> {{ $t("折后总金额") }}: </template>
          <div v-if="netReceiptsTotalFeeGroupDtoList">
            <span class="unit" v-for="item in netReceiptsTotalFeeGroupDtoList" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
          </div>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> {{ $t("已收总金额") }}: </template>
          <div v-if="writeOffTotalFeeGroupDtoList">
            <span class="unit" v-for="item in writeOffTotalFeeGroupDtoList" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
          </div>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> {{ $t("未收总金额") }}: </template>
          <div v-if="notWriteOffTotalFeeGroupDtoList">
            <span class="unit" v-for="item in notWriteOffTotalFeeGroupDtoList" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId) }}{{ item.amount }}</span>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <right-toolbar :show-search.sync="showSearch" class="show-bt" @queryTable="getList" />
    </div>
    <el-table v-loading="loading" show-summary :summary-method="getSummary" :data="list" border class="card" :element-loading-text="$t('汇总计算中...')">
      <el-table-column :label="$t('订单号')" prop="orderNo" width="200" align="center" fixed="left">
        <template v-slot="{ row }"> {{ row.orderNo }}/{{ row.tidanNo }} </template>
      </el-table-column>
      <!-- 订单 -->
      <el-table-column :label="$t('订单')" align="center">
        <el-table-column :label="$t('应收总金额')" width="150" align="center" prop="receivableTotalFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.receivableTotalFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('折扣金额')" width="150" align="center" prop="discountTotalFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.discountTotalFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('折后总金额')" width="150" align="center" prop="netReceiptsTotalFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.netReceiptsTotalFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column> 
        <el-table-column :label="$t('已收总金额')" width="150" align="center" prop="writeOffTotalFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.writeOffTotalFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('未收总金额')" width="150" align="center" prop="notWriteOffTotalFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.notWriteOffTotalFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('核销比例')" width="150" align="center">
          <template v-slot="{ row }">
            {{ row.writeOffRatio }}
          </template>
        </el-table-column>
      </el-table-column>

      <!-- 运费 -->
      <el-table-column :label="$t('运费')" align="center">
        <el-table-column :label="$t('应收金额')" width="150" align="center" prop="receivableFreightFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.receivableFreightFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('折扣金额')" width="150" align="center" prop="discountFreightFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.discountFreightFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('折后应收金额')" width="150" align="center" prop="netReceiptsFreightFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.netReceiptsFreightFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('已收金额')" width="150" align="center" prop="writeOffFreightFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.writeOffFreightFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('未收金额')" width="150" align="center" prop="notWriteOffFreightFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.notWriteOffFreightFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
      </el-table-column>

      <!-- 清关费 -->
      <el-table-column :label="$t('清关费')" align="center">
        <el-table-column :label="$t('应收')" width="150" align="center" prop="receivableClearanceFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.receivableClearanceFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('折扣金额')" width="150" align="center" prop="discountClearanceFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.discountClearanceFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('折后应收金额')" width="150" align="center" prop="netReceiptsClearanceFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.netReceiptsClearanceFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>

        <el-table-column :label="$t('已收金额')" width="150" align="center" prop="writeOffClearanceFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.writeOffClearanceFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('未收金额')" width="150" align="center" prop="notWriteOffClearanceFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.notWriteOffClearanceFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
      </el-table-column>

      <!-- 额外费用 -->
      <el-table-column :label="$t('额外费用')" align="center">
        <el-table-column :label="$t('应收')" width="150" align="center" prop="receivableOtherFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.receivableOtherFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('折扣金额')" width="150" align="center" prop="discountOtherFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.discountOtherFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('折后应收金额')" width="150" align="center" prop="netReceiptsOtherFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.netReceiptsOtherFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>

        <el-table-column :label="$t('已收金额')" width="150" align="center" prop="writeOffOtherFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.writeOffOtherFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>

        <el-table-column :label="$t('未收金额')" width="150" align="center" prop="notWriteOffOtherFeeGroupDtoList">
          <template slot-scope="{ row }">
            <div v-for="item in row.notWriteOffOtherFeeGroupDtoList || []" :key="item.currencyId">{{ item.amount }}{{ item.currencyName }}</div>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column :label="$t('始发仓')" prop="startWarehouseName" width="150" align="center" />
      <el-table-column :label="$t('运输方式') + '/' + $t('目的地')" width="200" align="center">
        <template slot-scope="{ row }">
          <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="row.transportId"></dict-tag>
          /{{ row.dstWarehouseName }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('仓库实测')" width="150" align="center">
        <template slot-scope="{ row }"> {{ row.sumNum }}{{ $t("箱") }},{{ row.sumVolume }}m³,{{ row.sumWeight }}kg </template>
      </el-table-column>
      <el-table-column :label="$t('是否重泡货')" width="150" align="center">
        <template slot-scope="{ row }">
          <el-tooltip v-if="row.orderType !== 1" effect="dark" :content="row.orderType == 3 ? `${row.vweight}kg` : `${row.wvolume}m³`" placement="top-start">
            <dict-tag :type="DICT_TYPE.ECW_YESNO" :value="row.orderType !== 1 ? '1' : '0'"></dict-tag>
          </el-tooltip>
          <template v-else>{{ $t("否") }}</template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('收费数据')" width="200" align="center">
        <template slot-scope="{ row }">
          <el-tooltip v-if="row.orderType !== 1" effect="dark" :content="row.orderType == 3 ? `${row.vweight}kg` : `${row.wvolume}m³`" placement="top-start">
            <span>{{ row.realityChargeNum }}{{ $t("箱") }},{{ row.realityChargeVolume }}m³,{{ row.realityChargeWeight }}kg</span>
          </el-tooltip>
          <template v-else>{{ row.realityChargeNum }}{{ $t("箱") }},{{ row.realityChargeVolume }}m³,{{ row.realityChargeWeight }}kg</template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('是否控货')" align="center" width="120">
        <template slot-scope="{ row }">
          <dict-tag :type="DICT_TYPE.ECW_YESNO" :value="row.isCargoControl"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t('提货率')" align="center" width="120">
        <template slot-scope="{ row }"> {{ row.pickRatio }}% </template>
      </el-table-column>
      <el-table-column :label="$t('提单制作')" align="center" width="120">
        <template slot-scope="{ row }">
          {{ row.billOfLadingStatus == 2 ? $t("是") : $t("否") }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('客户经理')" prop="salesmanName" width="150" align="center"></el-table-column>
      <el-table-column :label="$t('发货人')" width="300" align="center">
        <template slot-scope="{ row }">
          <router-link :to="'/customer/query/' + row.consignorCustomerId"> {{ row.consignorCustomerNumber }}-{{ isChinese ? row.consignorName : row.consignorNameEn }}-{{ row.consignorPhone }} </router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('收货人')" width="300" align="center">
        <template slot-scope="{ row }">
          <router-link :to="'/customer/query/' + row.consigneeCustomerId">{{ row.consigneeCustomerNumber }}-{{ isChinese ? row.consigneeName : row.consigneeNameEn }}-{{ row.consigneePhone }} </router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('订单入仓时间')" width="150" align="center">
        <template slot-scope="{ row }">
          {{ row.inTime | parseTime }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('订单装柜时间')" width="150" align="center">
        <template slot-scope="{ row }">
          {{ row.loadTime | parseTime }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('到港时间')" width="150" align="center">
        <template slot-scope="{ row }">
          {{ row.daogangTime }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('清关时间')" width="150" align="center">
        <template slot-scope="{ row }">
          {{ row.qingguanTime }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('卸柜/到仓时间')" width="150" align="center">
        <template slot-scope="{ row }">
          {{ row.unloadTime }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('更多')" width="220" align="center" fixed="right">
        <template slot-scope="{ row }">
          <el-button type="primary" size="small" @click="$router.push('/financial/chargeDetails?orderNo=' + row.orderNo)" plain>{{ $t("费用明细") }}</el-button>
          <el-button type="primary" size="small" @click="$router.push('/financial/receivable/voucher?orderNo=' + row.orderNo)">{{ $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 { loadSelfNoSummaryList } from "@/api/ecw/financial"
import { getWarehouseList } from "@/api/ecw/warehouse"
import { getRegionList } from "@/api/ecw/order"
import { parseTime } from "@/utils/ruoyi"
import { mapGetters } from "vuex"
import NP from "number-precision"
export default {
  filters: { parseTime },
  data() {
    return {
      size: "small",
      totalColumnKeyList: ["receivableTotalFeeGroupDtoList", "discountTotalFeeGroupDtoList", "netReceiptsTotalFeeGroupDtoList", "writeOffTotalFeeGroupDtoList", "notWriteOffTotalFeeGroupDtoList", "receivableFreightFeeGroupDtoList", "discountFreightFeeGroupDtoList", "netReceiptsFreightFeeGroupDtoList", "writeOffFreightFeeGroupDtoList", "notWriteOffFreightFeeGroupDtoList", "receivableClearanceFeeGroupDtoList", "discountClearanceFeeGroupDtoList", "netReceiptsClearanceFeeGroupDtoList", "writeOffClearanceFeeGroupDtoList", "notWriteOffClearanceFeeGroupDtoList", "receivableOtherFeeGroupDtoList", "discountOtherFeeGroupDtoList", "netReceiptsOtherFeeGroupDtoList", "writeOffOtherFeeGroupDtoList", "notWriteOffOtherFeeGroupDtoList"],
      receivableTotalFeeGroupDtoList: [], //应收总金额 汇总
      discountTotalFeeGroupDtoList: [], //折扣金额汇总
      netReceiptsTotalFeeGroupDtoList: [], //折后总金额
      writeOffTotalFeeGroupDtoList: [], //已收总金额
      notWriteOffTotalFeeGroupDtoList: [], //未收总金额
      total: 0,
      showSearch: true,
      totalColumn: [], //列表汇总数据
      totalSearch: [], //搜索条件汇总数据
      list: [],
      dateFilterType: "",
      warehouseList: [], //仓库列表
      exportWarehouseList: [], //始发仓列表
      countryList: [], //国家列表
      cityList: [], //城市列表
      objWareHouseList: [], //目的仓列表
      queryParams: {
        page: 1,
        rows: 10,
        orderNo: "",
        dateFilter: [], //时间区间
        marks: "",
        tidanNo: "",
        consigneeKey: "",
        consignorKey: "", //发货人
        containerNumber: this.$route.query.containerNumber, //	自编号
        destCityIds: [],
        destCountryIds: [],
        destWarehouseIds: [],
        startWarehouseIds: []
      }
    }
  },
  created() {
    getWarehouseList().then((res) => {
      this.warehouseList = res.data
      this.exportWarehouseList = this.warehouseList.filter((item) => item.tradeType == 2 || item.tradeType == 3)
    })
    this.init()
    this.handleQuery()
  },
  watch: {
    "queryParams.destCountryIds": {
      handler(val, oldVal) {
        this.queryParams.destCityIds = []
        if (val && val.length > 0) {
          this.loadCityList(2, val.join())
        } else {
          this.loadCityList()
        }
      }
    },
    "queryParams.destCityIds": {
      handler(val, oldVal) {
        this.queryParams.destWarehouseIds = []
        if (val.length > 0) {
          this.loadWareHouseList(3, val.join())
        } else {
          this.loadWareHouseList()
        }
      }
    }
  },
  computed: {
    ...mapGetters(["getCurrencySymbol"]),
    isChinese() {
      return this.$i18n.locale === "zh_CN"
    }
  },
  methods: {
    // 返回汇总行数据
    getSummary(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = this.$t("合计金额")
          return
        } else if (this.totalColumnKeyList.indexOf(column.property) == -1) {
          sums[index] = "NA"
          return
        } else {
          const currencySums = {}
          data.forEach((item) => {
            item[column.property].forEach((itemList) => {
              currencySums[itemList.currencyId] = NP.plus(currencySums[itemList.currencyId] || 0, itemList.amount)
            })

            // currencySums[currencyId] = NP.plus(currencySums[currencyId] || 0, item[column.property])
            // (currencySums[currencyId] || 0) + parseInt(item[column.property], 10)
          })
          const reducedDataList = Object.keys(currencySums).map((currencyId) => {
            return `${this.getCurrencySymbol(currencyId * 1)}${currencySums[currencyId].toString()}  `
          })
          sums[index] = reducedDataList
          return
        }
      })

      return sums
    },
    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)
        })
    },
    resetQuery() {
      this.$refs["queryForm"].resetFields()
      this.dateFilterType = ""
      this.queryParams.page = 1
      this.queryParams.rows = 10
      this.handleQuery()
    },
    handleQuery() {
      this.loading = true
      this.$nextTick(() => {
        this.queryParams.page = 1
        this.getList()
      })
    },
    async getList() {
      const params = this.removeEmpty({ ...this.queryParams })
      // 提货率
      if (this.queryParams.pickRatio && !this.queryParams.pickRatioSymbols) {
        this.$message.warning(this.$t("请先选择操作符号"))
      }
      if (this.queryParams.pickRatio && this.queryParams.pickRatioSymbols) {
        params[this.queryParams.pickRatioSymbols] = this.queryParams.pickRatio
      }
      this.addBeginAndEndTime(params, this.queryParams.dateFilter, this.dateFilterType, false)

      const { data } = await loadSelfNoSummaryList(params)
      this.list = data.list
      this.loading = false
      this.receivableTotalFeeGroupDtoList = data.receivableTotalFeeGroupDtoList //应收总金额 汇总
      this.discountTotalFeeGroupDtoList = data.discountTotalFeeGroupDtoList //折扣金额汇总
      this.netReceiptsTotalFeeGroupDtoList = data.netReceiptsTotalFeeGroupDtoList //折后总金额
      this.writeOffTotalFeeGroupDtoList = data.writeOffTotalFeeGroupDtoList //已收总金额
      this.notWriteOffTotalFeeGroupDtoList = data.notWriteOffTotalFeeGroupDtoList //未收总金额

      this.total = data.total
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-select .el-input {
  width: 130px;
}
.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>
