<template>
  <!-- 放款交易查询 -->
  <div>
    <up-down-layout :handleFlag.sync="handleFlag">
      <!-- 搜索栏 -->
      <div class="assetpkgmgr-box" slot="query">
        <search-form :formValue.sync="queryParas" searchPerms="search" @handleFilter="handleFilter" @clearParam="clearParam" resetPerms="reset" :componentList="componentList" @selectChanged="selectChanged"></search-form>
      </div>
      <!-- 表格列表 -->
      <template slot="table">
        <data-table ref="dataTable" :api="api" :deleteApi="api" v-bind="elHeightObj" :selectTable="selectTable" :handleFlag.sync="handleFlag" :menuFlag="false"
          :queryParas="queryParas" :sourceData.sync="sourceData" :loadCount.sync="loadCount" :columns="columns"
          :showSelection="true" :otherHeight="'240'" operateBtnLayout="" :IsRight="false" :pageAll="true" :operatWidth="'200'" :selectedRows.sync="selectedRows" @getTableData="getTableData">
          <!-- 操作工具栏 -->
          <template slot="headButton">
            <div align="right">
              <!-- 自动上传回单(江苏行) -->
              <auth-button class="iconfont iconhuidanshangchuan" :size="'medium'" :label="$t('bankTransOperate.uploadBtn')" @click="uploadList"
                type="primary"></auth-button>
              <!-- 导出 -->
              <auth-button class="iconfont icondaochu" :size="'medium'" :label="$t('common.export')" @click="exportList"
                type="primary"></auth-button>
            </div>
          </template>
        </data-table>
      </template>
    </up-down-layout>
  </div>
</template>
<script>
import {
  upDownLayout,
  searchForm,
  DataTable,
  SelectFinancialInstitutions,
  SelectCoreEnterprise,
  amountInput,
  authButton
} from 'newepoch-components'
import fileApi from '@/api/fileApi.js'
import {
  downFile
} from '@/utils/devUtils'
import SelectLoanBankAccount from '@/components/element/assetpkgmgr/SelectLoanBankAccount'
import bankTransOperate from '@/api/assetpkgmgr/bankTransOperateApi.js'
import * as format from '@/filters/index'
import BasePage from '@/pages/basePage'
import mixin from '@/pages/mixin'

export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'bankTransOperateIndex',
  components: {
    searchForm,
    upDownLayout,
    DataTable,
    amountInput,
    authButton
  },
  data () {
    return {
      handleFlag: true,
      loadCount: 0,
      selectedRows: [], // 选中项
      queryData: {},
      componentList: [
        {
        // 划款银行账号
          label: this.$i18n.messages[this.$i18n.locale].bankTransOperate.loanBankAccount,
          value: 'depositBankAccountNotAppend',
          disabled: false,
          labelWidth: '110px',
          clearable: true,
          componentName: SelectLoanBankAccount
        },
        {
          // 交易日
          label: this.$i18n.messages[this.$i18n.locale].bankTransOperate.businessDate,
          value: 'businessDate',
          componentName: 'el-date-picker',
          clearable: true,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '110px',
          type: 'daterange',
          format: 'timestamp'
        },
        {
          // 核心企业
          label: this.$i18n.messages[this.$i18n.locale].bankTransOperate.coreEnterpriseName,
          disabled: false,
          value: 'coreEnterpriseId',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '110px',
          clearable: true,
          componentName: SelectCoreEnterprise
        },
        {
          // 付款确认书编号
          label: this.$i18n.messages[this.$i18n.locale].bankTransOperate.assetCode,
          disabled: false,
          value: 'assetCode',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '110px',
          clearable: true,
          componentName: 'el-input'
        },
        {
          // 再保理银行
          label: this.$i18n.messages[this.$i18n.locale].bankTransOperate.suppliersNames,
          disabled: false,
          value: 'suppliersId',
          labelWidth: '110px',
          clearable: true,
          componentName: SelectFinancialInstitutions
        },
        {
          // 期数
          label: this.$i18n.messages[this.$i18n.locale].bankTransOperate.periods,
          disabled: false,
          value: 'periods',
          labelWidth: '110px',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          clearable: true,
          componentName: amountInput
        }
      ],
      columns: [
        {
          // 银行
          prop: 'bankName',
          headerAlign: 'center',
          align: 'left',
          showOverflowTooltip: true,
          width: '130px',
          label: this.$i18n.messages[this.$i18n.locale].bankTransOperate.bankName
        },
        {
        // 银行账户
          prop: 'bankAccount',
          align: 'center',
          width: '200px',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].bankTransOperate.bankAccount
        },
        {
          // 交易日
          prop: 'businessDate',
          align: 'center',
          width: '115px',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].bankTransOperate.businessDate,
          format: (row) => {
            return format.formatDateTpcModify(row.businessDate)
          }
        },
        {
          // 收入金额(元)
          prop: 'inAmount',
          headerAlign: 'center',
          align: 'right',
          showOverflowTooltip: true,
          width: '171px',
          label: this.$i18n.messages[this.$i18n.locale].bankTransOperate.inAmount,
          format: (row) => {
            return format.thousandFilter(row.inAmount)
          }
        },
        {
          // 支出金额(元)
          prop: 'outAmount',
          headerAlign: 'center',
          align: 'right',
          width: '171px',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].bankTransOperate.outAmount,
          format: (row) => {
            return format.thousandFilter(row.outAmount)
          }
        },
        {
          // 余额(元)
          prop: 'transAmount',
          headerAlign: 'center',
          align: 'right',
          width: '171px',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].bankTransOperate.transAmount,
          format: (row) => {
            return format.thousandFilter(row.transAmount)
          }
        },
        {
        // 收(付)方账号
          prop: 'inOutAccountId',
          align: 'center',
          showOverflowTooltip: true,
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].bankTransOperate.inOutAccountId
        },
        {
          // 收(付)方名称
          prop: 'inOutAccountName',
          align: 'left',
          headerAlign: 'center',
          showOverflowTooltip: true,
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].bankTransOperate.inOutAccountName
        },
        {
        // 付款确认书编号
          prop: 'assetCode',
          align: 'center',
          sortable: true,
          showOverflowTooltip: true,
          width: '240px',
          label: this.$i18n.messages[this.$i18n.locale].bankTransOperate.assetCode
        }
      ],
      sourceData: [],
      isGet: true,
      isExport: true // 导出控件
    }
  },
  computed: {
    // api接口
    api () {
      return bankTransOperate.transPage
    }
  },
  mounted () {
    // 请求获得表格数据
    this.handleFilter()
  },
  methods: {
    // 选择划款银行
    selectChanged (a) {
      if (a.loanBankInfo) {
        this.queryParas.bankId = a.loanBankInfo.depositBankAccount
      }
    },
    handleFilter () {
      let queryParas = this.queryParas
      if (!queryParas.depositBankAccountNotAppend && queryParas.bankId) {
        delete queryParas.bankId
      }
      for (let index in queryParas) {
        let item = queryParas[index]
        if (!item || item.length < 1) {
          delete queryParas[index]
        }
      }
      this.loadCount++
    },
    // 复选框禁用
    selectTable (row) {
      // 是江苏银行便可选
      if (row.bankId === 'bk001') {
        return true
      } else {
        return false
      }
    },
    // 自动上传回单(江苏行)
    uploadList () {
      let that = this
      let selectedRows = that.selectedRows
      // 是否有选中项
      if (selectedRows.length > 0) {
        let pramas = {
          packageBankTransList: selectedRows
        }
        that.$confirm(that.$t('common.confirm') + that.$t('common.upload') + '?', that.$t('common.tip'), {
          type: 'warning'
        }).then(() => {
          that.assetpkgmgrFullScreenLoading()
          bankTransOperate.bankTransOperate.uploadList(pramas).then(res => {
            that.assetpkgmgrFullScreenLoading().close()
            if (res.success) {
              that.success(that.$t('common.uploadSuccess'))
              that.handleFilter()
            } else {
              that.error(res.data.message)
            }
          }).catch(res => {
            that.assetpkgmgrFullScreenLoading().close()
          })
        }).catch((e) => {})
      } else {
        that.warning(that.$t('common.selectOperateTip'))
      }
    },
    // 获取列表回调
    getTableData (e) {
      if (!this.isGet) {
        // 去导出
        this.exportList()
      }
    },
    // 导出
    exportList () {
      if (this.isGet) {
        this.isGet = false
        this.handleFilter()
      } else {
        this.isGet = true
        // 如果搜索列表为空
        if (this.sourceData.length > 0) {
          if (this.isExport) {
            this.$confirm(this.$t('common.confirm') + this.$t('common.export') + '？', this.$t('common.tip'), {
              type: 'warning'
            }).then((e) => {
              this.isExport = true
              this.assetpkgmgrFullScreenLoading()
              bankTransOperate.bankTransOperate.exportList(this.queryParas).then(res => {
                if (res.success && res.data) {
                  // 下载导出文件
                  fileApi.file.download({
                    keyId: res.data
                  }).then(ress => {
                    this.assetpkgmgrFullScreenLoading().close()
                    downFile(ress)
                  }).catch(res => {
                    this.assetpkgmgrFullScreenLoading().close()
                  })
                  this.success(this.$t('common.export') + this.$t('common.successfully'))
                } else {
                  this.error(res.message)
                }
              }).catch(res => {
                this.assetpkgmgrFullScreenLoading().close()
              })
            }).catch((e) => {
              this.isExport = true
            })
          } else {
            this.isExport = true
          }
        } else {
          this.isExport = true
          this.warning(this.$t('common.nodownData'))
        }
      }
      // let that = this
      // // 是否导出
      // console.log()
      // if (that.isExport) {
      //   that.handleFilter()
      // } else {
      //   that.$confirm(that.$t('common.confirm') + that.$t('common.export') + '?', that.$t('common.tip'), {
      //     type: 'warning'
      //   }).then(() => {
      //     that.isExport = true
      //     bankTransOperate.bankTransOperate.exportList(this.queryParas).then(res => {
      //       if (res.success && res.data) {
      //       // 下载导出文件
      //         fileApi.file.download({
      //           keyId: res.data
      //         }).then(ress => {
      //           downFile(ress)
      //         })
      //         that.success(that.$t('common.export') + that.$t('common.successfully'))
      //       } else {
      //         that.error(res.message)
      //       }
      //     })
      //   }).catch((e) => {
      //     that.isExport = true
      //   })
      // }
    }
  }
}
</script>
<style scoped>
  @import "~@/styles/assetpkgmgr/common.scss";
</style>
