<template>
  <div class="app-container">
    <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
      <el-form-item :label="$t('订单号')" prop="orderNo">
        <el-input v-model.trim="queryParams.orderNo" :placeholder="$t('请输入订单号')" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('运输方式')" prop="transportId">
        <dict-selector multiple :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportId" clearable @change="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('出货渠道')" prop="shipmentChannel">
        <selector :clearable="true" :options="channelList" :label-field="$l('name')" value-field="channelId" v-model="queryParams.shipmentChannel" multiple @change="handleQuery"></selector>
      </el-form-item>
      <el-form-item :label="$t('始发地')" prop="departureWareHouseId">
        <el-select v-model="queryParams.departureWareHouseId" multiple :placeholder="$t('请选择始发仓')" clearable @change="handleQuery">
          <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="destCountry">
        <el-select v-model="queryParams.destCountry" multiple :placeholder="$t('请选择目的国')" clearable @change="handleQuery">
          <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 @change="handleQuery">
          <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="objectiveWareHouseId">
        <el-select v-model="queryParams.objectiveWareHouseId" multiple :placeholder="$t('请选择目的仓')" clearable @change="handleQuery">
          <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="title">
        <el-input v-model.trim="queryParams.title" :placeholder="$t('品名')" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('费用来源')" prop="feeSource">
        <dict-selector ref="dictMethod" multiple v-model="queryParams.feeSource" :type="DICT_TYPE.ECW_FEE_SOURCE"></dict-selector>
      </el-form-item>
      <el-form-item :label="$t('收款类型')" prop="collectionType">
        <dict-selector ref="dictMethod" multiple v-model="queryParams.collectionType" :type="DICT_TYPE.PAYMENT_TYPE"></dict-selector>
      </el-form-item>
      <el-form-item :label="$t('收入类型')" prop="feeType">
        <dict-selector ref="dictMethod" multiple v-model="queryParams.feeType" :type="DICT_TYPE.FEE_TYPE"></dict-selector>
      </el-form-item>
      <!-- <el-form-item :label="$t('订单状态')" prop="status">
        <dict-selector ref="dictMethod" v-model="queryParams.status" :type="DICT_TYPE.ORDER_STATUS"></dict-selector>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>

    <div class="mb8 showBar">
      <el-descriptions class="margin-top barTop" :title="$t('筛选合计信息:')" :column="2" :size="size" border>
        <!-- <template slot="extra">
          <el-button type="primary" size="small" @click="totalDetailVisible = !totalDetailVisible">
            {{ totalDetailVisible ? $t("隐藏信息") : $t("显示信息") }}
          </el-button>
        </template> -->
        <el-descriptions-item v-if="showSearch">
          <template slot="label"> {{ $t("总金额") }}: </template>
          <span class="unit" v-for="item in searchStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.totalAmount }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="showSearch">
          <template slot="label"> {{ $t("不含税金额") }}: </template>
          <span class="unit" v-for="item in searchStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.notIncludedTaxAmount }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="showSearch">
          <template slot="label"> {{ $t("含税金额") }}: </template>
          <span class="unit" v-for="item in searchStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.taxAmount }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="showSearch">
          <template slot="label"> {{ $t("优惠金额") }}: </template>
          <span class="unit" v-for="item in searchStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.discountTotal }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="showSearch">
          <template slot="label"> {{ $t("实际金额") }}: </template>
          <span class="unit" v-for="item in searchStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.receivableTotalAmount }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="showSearch">
          <template slot="label">
            <i class="el-icon-office-building"></i>
            {{ $t("核销金额") }}:
          </template>
          <span class="unit" v-for="item in searchStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.writeOffAmount }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="showSearch">
          <template slot="label"> {{ $t("未核销金额") }}: </template>
          <span class="unit" v-for="item in searchStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.notWriteOffAmount }}</span>
        </el-descriptions-item>
      </el-descriptions>

      <!--   <div class="bar">
        <div class="sideBar">
          {{ $t("总金额合计") }}:<span class="unit" v-for="item in searchStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.totalAmount }}</span>
        </div>
        <div class="sideBar">
          {{ $t("核销金额合计") }}: <span class="unit" v-for="item in searchStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.writeOffAmount }}</span>
        </div>
        <div class="sideBar">
          {{ $t("未核销金额合计") }}: <span class="unit" v-for="item in searchStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.notWriteOffAmount }}</span>
        </div>
      </div> -->
      <right-toolbar :show-search.sync="showSearch" class="show-bt" @queryTable="getList" />
    </div>
    <div class="table">
      <!-- 礼品列表 -->
      <el-table ref="multipleTable" v-loading="loading" :data="list">
        <el-table-column width="140" :label="$t('订单号')" align="center" prop="orderNo">
          <template v-slot="{ row }">
            <router-link :to="{ path: '/order/detail', query: { orderId: row.orderId } }" class="link-type">
              <span>{{ row.orderNo }}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column :label="$t('运输方式')" align="center">
          <template slot-scope="scope">
            <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.transportId" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('出货渠道')" align="center">
          <template slot-scope="{ row }">
            {{ getChannelName(row.channelId) }}
          </template>
        </el-table-column>

        <el-table-column :label="$t('始发地')" :prop="$l('departureWarehouse')">
          <!-- {{$l(departure, 'title') || '-'}} -->
        </el-table-column>
        <el-table-column :label="$t('目的地')" :prop="$l('objectiveWarehouse')" width="300" align="center">
          <template slot-scope="{ row }"> {{ $l(row, "destinationCountry") }}/{{ $l(row, "destinationCity") }}/{{ $l(row, "objectiveWarehouse") }} </template>
          <!-- {{$l(objective, 'title') || '-'}} -->
        </el-table-column>
        <el-table-column :label="$t('品名')" width="160" align="center">
          <template slot-scope="{ row }">
            {{ $l(row, "title") }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('费用来源')">
          <template slot-scope="{ row }">
            <dict-tag :type="DICT_TYPE.ECW_FEE_SOURCE" :value="row.feeSource" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('箱数/体积/重量')" width="160" align="center">
          <template slot-scope="{ row }"> {{ row.num || "-" }} / {{ row.volume || "-" }} / {{ row.weight || "-" }} </template>
        </el-table-column>

        <el-table-column :label="$t('费用类型')" width="160" align="center">
          <template slot-scope="{ row }">
            <dict-tag :type="DICT_TYPE.PAYMENT_TYPE" :value="row.collectionType" />/
            <dict-tag :type="DICT_TYPE.FEE_TYPE" :value="row.feeType" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('订单状态')">
          <template slot-scope="{ row }">
            <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="row.status" />
          </template>
        </el-table-column>

        <el-table-column :label="$t('单价金额')" prop="unitPrice">
          <template slot-scope="{ row }"> {{ row.currencySymbol }}{{ row.unitPrice }} </template>
        </el-table-column>

        <el-table-column :label="$t('总金额')" prop="totalAmount">
          <template slot-scope="{ row }"> {{ row.currencySymbol }} {{ row.totalAmount }} </template>
        </el-table-column>

        <el-table-column :label="$t('税率')" prop="taxPoint"> </el-table-column>
        <!-- 没确定 -->
        <el-table-column :label="$t('不含税金额')" prop="notIncludedTaxAmount" width="140" align="center">
          <template slot-scope="{ row }"> {{ row.currencySymbol }} {{ row.notIncludedTaxAmount }} </template>
        </el-table-column>
        <el-table-column :label="$t('含税金额')">
          <template slot-scope="{ row }"> {{ row.currencySymbol }} {{ row.taxAmount }} </template>
        </el-table-column>
        <el-table-column :label="$t('优惠金额')">
          <template slot-scope="{ row }"> {{ row.currencySymbol }} {{ row.discountTotal }} </template>
        </el-table-column>
        <el-table-column :label="$t('实际金额')" prop="receivableTotalAmount">
          <template slot-scope="{ row }"> {{ row.currencySymbol }} {{ row.receivableTotalAmount }} </template>
        </el-table-column>
        <el-table-column :label="$t('关联收款单')" prop="receiptNo" width="160" align="center">
          <template slot-scope="{ row }">
            <router-link :to="{ path: '/financial/receiptDetail', query: { id: row.receiptId } }" class="link-type">
              <span>{{ row.receiptNo }}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column :label="$t('核销金额')">
          <template slot-scope="{ row }"> {{ row.currencySymbol }} {{ row.writeOffAmount }} </template>
        </el-table-column>
        <el-table-column :label="$t('未核销金额')" prop="totalAmount" width="160" align="center">
          <template slot-scope="{ row }"> {{ row.currencySymbol }} {{ row.notWriteOffAmount }} </template>
        </el-table-column>
        <el-table-column :label="$t('核销比例')">
          <template slot-scope="{ row }">
            {{ row.writeOffProportion || 0 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('关联银行收款明细')" prop="totalAmount" width="160" align="center">
          <template slot-scope="{ row }" v-if="row.receiptId"
            ><el-button type="text" @click="goBankReceiptDetailsList(row)"> {{ $t("查看收款明细") }}</el-button>
          </template>
          <template v-else>-</template>
        </el-table-column>
        <el-table-column :label="$t('费用生成时间')" prop="createTime" width="160" align="center"> </el-table-column>

        <el-table-column :label="$t('最后修改信息')" prop="totalAmount" width="160" align="center">
          <template slot-scope="{ row }"> {{ row.updater || "-" }}/{{ row.updateTime || "-" }} </template>
        </el-table-column>
        <el-table-column :label="$t('最后审批信息')" prop="totalAmount" width="160" align="center">
          <template slot-scope="{ row }"> {{ row.approver || "-" }}/{{ row.approverTime || "-" }} </template>
        </el-table-column>
      </el-table>

      <!-- <div class="mb8 showBar pd-t">
        <div class="bar">
          <div class="sideBar-bt">
            {{ $t("总金额") }}: <span class="unit" v-for="item in totalStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.totalAmount }}</span>
          </div>
          <div class="sideBar-bt">
            {{ $t("不含税金额") }}: <span class="unit" v-for="item in totalStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.notIncludedTaxAmount }}</span>
          </div>
          <div class="sideBar-bt">
            {{ $t("含税金额") }}: <span class="unit" v-for="item in totalStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.taxAmount }}</span>
          </div>
          <div class="sideBar-bt">
            {{ $t("优惠金额") }}: <span class="unit" v-for="item in totalStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.discountTotal }}</span>
          </div>
          <div class="sideBar-bt">
            {{ $t("实际金额") }}: <span class="unit" v-for="item in totalStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.receivableTotalAmount }}</span>
          </div>
          <div class="sideBar-bt">
            {{ $t("核销金额") }}: <span class="unit" v-for="item in totalStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.writeOffAmount }}</span>
          </div>
          <div class="sideBar-bt">
            {{ $t("未核销金额") }}: <span class="unit" v-for="item in totalStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.notWriteOffAmount }}</span>
          </div>
        </div>
      </div> -->

      <!-- //分页列表 -->
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows" @pagination="getList" />

      <el-descriptions class="margin-top" :title="$t('总合计信息')" :column="2" :size="size" border>
        <template slot="extra">
          <el-button type="primary" size="small" @click="totalDetailVisible = !totalDetailVisible">
            {{ totalDetailVisible ? $t("隐藏信息") : $t("显示信息") }}
          </el-button>
        </template>
        <el-descriptions-item v-if="totalDetailVisible">
          <template slot="label"> {{ $t("总金额") }}: </template>
          <span class="unit" v-for="item in totalStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.totalAmount }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="totalDetailVisible">
          <template slot="label"> {{ $t("不含税金额") }}: </template>
          <span class="unit" v-for="item in totalStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.notIncludedTaxAmount }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="totalDetailVisible">
          <template slot="label"> {{ $t("含税金额") }}: </template>
          <span class="unit" v-for="item in totalStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.taxAmount }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="totalDetailVisible">
          <template slot="label"> {{ $t("优惠金额") }}: </template>
          <span class="unit" v-for="item in totalStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.discountTotal }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="totalDetailVisible">
          <template slot="label"> {{ $t("实际金额") }}: </template>
          <span class="unit" v-for="item in totalStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.receivableTotalAmount }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="totalDetailVisible">
          <template slot="label">
            <i class="el-icon-office-building"></i>
            {{ $t("核销金额") }}:
          </template>
          <span class="unit" v-for="item in totalStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.writeOffAmount }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="totalDetailVisible">
          <template slot="label"> {{ $t("未核销金额") }}: </template>
          <span class="unit" v-for="item in totalStatistics" :key="item.currencyId">{{ item.currencySymbol }}{{ item.notWriteOffAmount }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import { getChannelList } from "@/api/ecw/channel"
import { getWarehouseList } from "@/api/ecw/warehouse"
import { getRegionList } from "@/api/ecw/order"
import { loadCostDetail } from "@/api/ecw/financial"
import Selector from "@/components/Selector"
export default {
  name: "EcwFinancialChargedetails",
  components: {
    Selector
  },
  data() {
    return {
      size: "small",
      totalDetailVisible: false,
      loading: true,
      searchStatistics: {}, //查询条件所有
      totalStatistics: {}, //当前页所有
      showSearch: true,
      warehouseList: [], //仓库列表
      exportWarehouseList: [], //始发仓列表
      countryList: [], //国家列表
      channelList: [], // 渠道
      cityList: [], //城市列表
      objWareHouseList: [], //目的仓列表
      list: [],
      total: 0,
      queryParams: {
        page: 1,
        rows: 10,
        orderNo: "",
        transportId: [],
        shipmentChannel: [], //出货渠道
        departureWareHouseId: [], //始发地
        destCountry: [], //目的国
        destCity: [],
        objectiveWareHouseId: [],
        title: "",
        feeSource: [],
        collectionType: [],
        feeType: [],
        status: ""
      }
    }
  },
  computed: {},
  watch: {
    "queryParams.destCountry": {
      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.objectiveWareHouseId = []
        if (val.length > 0) {
          this.loadWareHouseList(3, val.join())
        } else {
          this.loadWareHouseList()
        }
      }
    }
  },
  created() {
    //获取仓库渠道
    getWarehouseList().then((res) => {
      this.warehouseList = res.data
      this.exportWarehouseList = this.warehouseList.filter((item) => item.tradeType == 2 || item.tradeType == 3)
    })
    getChannelList().then((res) => (this.channelList = res.data))
    this.init()
    const orderNo = this.$route.query.orderNo || ""
    if (orderNo) {
      this.queryParams.orderNo = orderNo
    }
    this.handleQuery()
  },
  activated() {
    const orderNo = this.$route.query.orderNo || ""
    if (orderNo) {
      this.queryParams.orderNo = orderNo
    }
    this.handleQuery()
  },
  methods: {
    goBankReceiptDetailsList(row) {
      this.$router.push({ path: "/financial/bankAccount/BankReceiptDetails", query: { receiptNo: row.receiptNo } })
    },
    getChannelName(channelId) {
      const channel = this.channelList.filter((item) => item.channelId == channelId)
      return channel.length > 0 ? this.$l(channel[0], "name") : "-"
    },
    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.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 })
      const { data } = await loadCostDetail(params)
      this.list = data.list
      this.loading = false
      this.searchStatistics = data.searchStatistics
      this.totalStatistics = data.totalStatistics
      this.total = data.total
    }
  }
}
</script>

<style lang="scss" scoped>
.margin-top {
  margin-top: 40px;
}
.show-bt {
  display: flex;
  align-items: end;
}
.unit {
  margin-right: 10px;
  font-size: 12px;
}
.bar {
  flex: 1;
  flex-wrap: wrap;
  display: flex;
}
.showBar {
  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;
  width: 50%;
}
.inlineForm {
  display: flex;
}
.pd-t {
  padding-top: 10px;
}
.barTop {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>
