<template>
  <div class="app-container">
    <el-card>
      <el-form ref="queryForm" :model="queryParams" label-width="100px" label-position="left" :inline="true">
        <el-form-item :label="$t('开户银行')" style="margin-bottom: 0; margin-top: 20px" prop="platformAccountIds">
          <el-select multiple clearable v-model="queryParams.platformAccountIds" :placeholder="$t('开户银行')" style="width: 220px">
            <el-option v-for="item in bankData" :key="item.id" :label="item.baAccountName + '(' + item.baAccountNum + ')'" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('支/收')" style="margin-bottom: 0; margin-top: 20px" prop="isIncome">
          <el-select clearable v-model="queryParams.isIncome" :placeholder="$t('请选择')" style="width: 220px">
            <el-option :label="$t('收')" :value="0" />
            <el-option :label="$t('支')" :value="1" />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('金额')" style="margin-bottom: 0; margin-top: 20px">
          <el-form-item prop="relationSymbol">
            <dict-selector :type="DICT_TYPE.ECW_INCOME_RELATION_SYMBOL" clearable style="width: 130px" v-model="queryParams.relationSymbol" />
          </el-form-item>
          <el-form-item prop="amount">
            <el-input v-model="queryParams.amount" style="width: 130px" placeholder="请输入数值" clearable />
          </el-form-item>
        </el-form-item>
        <el-form-item :label="$t('关联单号')" prop="relationNo" style="margin-bottom: 0; margin-top: 20px">
          <el-input v-model="queryParams.relationNo" style="width: 130px" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item :label="$t('交易日期')" prop="tradeDate" style="margin-bottom: 0; margin-top: 20px">
          <el-date-picker v-model="queryParams.tradeDate" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
        </el-form-item>
        <el-form-item style="margin-bottom: 0; margin-top: 20px">
          <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" v-loading="loading">
      <el-descriptions class="margin-top barTop" :column="1" :size="size" border>
        <el-descriptions-item>
          <template slot="label"> {{ $t("收:") }}: </template>
          <span class="unit" v-for="item in currentAmount" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId * 1) }}{{ item.amount }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="table-box">
      <el-table v-loading="loading" :data="list" border>
        <el-table-column type="index" :index="indexMethod" :label="$t('序号')" />
        <el-table-column :label="$t('开户银行')" width="160" align="center" prop="accountBankName"> </el-table-column>
        <el-table-column :label="$t('支/收')" width="160" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isIncome == 0"> {{ $t("收") }}</span>
            <span v-else>{{ $t("支") }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('金额')" width="160" align="center">
          <template slot-scope="{ row }"> {{ getCurrencySymbol(row.currencyId * 1) }}{{ row.amount }} </template>
        </el-table-column>

        <el-table-column :label="$t('交易关联单号')" width="200" align="center">
          <template slot-scope="{ row }">
            <div v-for="item in row.orderInfoList">
              <router-link :to="`/financial/receiptDetail?id=${row.receiptId}`" class="link-type"> {{ row.receiptNo }} </router-link> -
              <router-link :to="`/order/detail?orderId=${item.orderId}`" class="link-type"> {{ item.tidanNo }} </router-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('交易日期')" prop="amountDate" width="160" align="center" />
        <el-table-column :label="$t('备注')" align="center" prop="remark" />
        <el-table-column :label="$t('账号余额')" align="center" width="200">
          <template slot-scope="{ row }">
            <span class="unit" v-for="item in row.accountBalance" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId * 1) }}{{ item.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('详情')" width="160" align="center">
          <template slot-scope="{ row }">
            <el-button size="small" type="primary" v-if="row.receiptId" @click="goBankReceiptDetailsList(row)">{{ $t("查看") }}</el-button>
            <template v-else>-</template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-descriptions class="margin-top pad-t" v-loading="loading" :column="2" border>
      <el-descriptions-item>
        <template slot="label"> {{ $t("汇总") }}: </template>
        <span class="unit" v-for="item in totalAmount" :key="item.currencyId">{{ getCurrencySymbol(item.currencyId * 1) }}{{ item.amount }}</span>
      </el-descriptions-item>
    </el-descriptions>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import { loadBankBalanceDetailsList } from "@/api/ecw/financial"
import { getBankAccountPage } from "@/api/ecw/bankAccount"
import { mapGetters } from "vuex"
export default {
  data() {
    return {
      total: 0,
      loading: true,
      currentAmount: [],
      totalAmount: [],
      queryParams: {
        platformAccountIds: [],
        isIncome: "",
        tradeDate: "",
        amount: "",
        relationSymbol: "",
        pageNo: 1,
        pageSize: 10
      },
      bankData: []
    }
  },
  async created() {
    if (this.$route.query.platformAccountIds != null) {
      this.queryParams.platformAccountIds = [this.$route.query.platformAccountIds * 1]
    }

    const { data } = await getBankAccountPage({ pageNo: 1, pageSize: 1000 })
    this.bankData = data.list
    this.handleQuery()
  },
  computed: {
    ...mapGetters(["getCurrencySymbol"])
  },
  methods: {
    goBankReceiptDetailsList(row) {
      this.$router.push({ path: "/financial/bankAccount/BankReceiptDetails", query: { receiptNo: row.receiptNo } })
    },
    indexMethod(index) {
      return index * this.queryParams.pageNo + 1
    },
    resetQuery() {
      this.$refs["queryForm"].resetFields()
      this.queryParams.pageNo = 1
      this.queryParams.pageSize = 10
      this.handleQuery()
    },
    handleQuery() {
      this.loading = true
      this.$nextTick(() => {
        this.queryParams.pageNo = 1
        this.getList()
      })
    },
    async getList() {
      const params = this.removeEmpty({ ...this.queryParams })
      this.addBeginAndEndTime(params, params.tradeDate, "AmountDate")
      console.log("sdsdd", params)
      const { data } = await loadBankBalanceDetailsList(params)
      this.list = data.list
      this.loading = false
      this.totalAmount = data.totalAmount
      this.currentAmount = data.currentAmount
      this.total = data.total
    }
  }
}
</script>

<style lang="scss" scoped>
.table-box {
  padding: 0 10px;
}
.pad-t {
  padding: 10px 0;
}
.unit {
  padding-left: 10px;
}
</style>
