<template>
  <div class="app-container">
    <el-card class="card-form">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px" class="card">
        <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="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="feeType">
          <dict-selector ref="dictMethod" multiple v-model="queryParams.feeType" :type="DICT_TYPE.FEE_TYPE"></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>
    </el-card>
    <div class="mb8 showBar pad-t">
      <el-descriptions class="margin-top barTop" :column="1" :size="size" border>
        <el-descriptions-item label-class-name="my-label-total">
          <template slot="label"> {{ $t("合计金额:") }}: </template>
          <span class="unit" v-for="item in totalActualAmount" :key="item.currencyId"> {{ $t("总金额") }}{{ getCurrencySymbol(item.currencyId * 1) }}{{ item.amount }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="table">
      <!-- 礼品列表 -->
      <el-table ref="multipleTable" v-loading="loading" :data="list">
        <el-table-column prop="titleZh" :label="$t('品名')" align="center">
          <template slot-scope="{ row }">
            {{ $l(row, "title") }}
          </template>
        </el-table-column>
        <el-table-column prop="num" :label="$t('箱数')" width="100" align="center"></el-table-column>
        <el-table-column prop="volumeOrWeight" :label="$t('体积/重量')" width="180" align="center">
          <template slot-scope="{ row }">
            <div>{{ row.volume }}m³/{{ row.weight }}kg</div>
          </template>
        </el-table-column>

        <el-table-column :label="$t('付款方')" width="160" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.drawee == 3"> {{ $t("自定义") }}</span>
            <span v-else> {{ scope.row.drawee == 1 ? $t("发货人") : $t("收货人") }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('收款类型')" align="center">
          <template slot-scope="{ row }">
            <dict-tag :type="DICT_TYPE.PAYMENT_TYPE" :value="row.collectionType" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('费用来源')" prop="feeSource" align="center">
          <template slot-scope="{ row }">
            <dict-tag :type="DICT_TYPE.ECW_FEE_SOURCE" :value="row.feeSource" />
          </template>
        </el-table-column>
        <el-table-column prop="incomeType" :label="$t('收入类型')" width="120" align="center">
          <template slot-scope="{ row }">
            <div>
              <dict-tag :type="DICT_TYPE.FEE_TYPE" :value="row.feeType" />
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('单价金额')" prop="unitPrice" align="center">
          <template slot-scope="{ row }">{{ getCurrencySymbol(row.currencyId * 1) }} {{ row.unitPrice }} </template>
        </el-table-column>
        <el-table-column :label="$t('总金额')" prop="totalAmount" align="center">
          <template slot-scope="{ row }"> {{ getCurrencySymbol(row.currencyId * 1) }}{{ row.totalAmount }} </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- //分页列表 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows" @pagination="getList" />
  </div>
</template>

<script>
import { mapGetters } from "vuex"
import { loadReceivablePage } from "@/api/ecw/financial"
export default {
  //  this.$route.params.id.split(",")
  data() {
    return {
      list: [],
      size: "small",
      loading: true,
      total: 0,
      totalActualAmount: [],
      queryParams: {
        collectionType: [],
        feeSource: [],
        feeType: [],
        orderId: this.$route.params.id,
        paymentUser: this.$route.params.drawee,
        page: 1,
        rows: 10
      }
    }
  },
  computed: {
    ...mapGetters(["getCurrencySymbol"])
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const params = this.removeEmpty({ ...this.queryParams })

      const { data } = await loadReceivablePage(params)
      this.list = data.list
      this.loading = false
      this.totalActualAmount = data.totalActualAmount
      this.total = data.total
    },
    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()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .card-form .el-form-item {
  margin-bottom: 0;
}
.pad-t {
  padding: 10px 0;
}
::v-deep .my-label-total {
  width: 300px;
}
</style>
