<template>
  <!-- 再保理银行放款登记 -->
  <div>
    <up-down-layout :handleFlag.sync="handleFlag">
      <!-- 搜索栏 -->
      <search-form :formValue.sync="queryParas" searchPerms="search" @handleFilter="handleFilter" @clearParam="clearParam"
        slot="query" resetPerms="reset" :componentList="componentList"></search-form>
      <!-- 表格列表 -->
      <template slot="table">
        <data-table ref="dataTable" :api="api" :deleteApi="api" v-bind="elHeightObj" selectable="false" :handleFlag.sync="handleFlag" :menuFlag="false"
          :queryParas="queryParas" :sourceData.sync="sourceData" :loadCount.sync="loadCount" :columns="columns"
          :showSelection="false" :otherHeight="'240'" operateBtnLayout="" :IsRight="false" :pageAll="true" :operatWidth="'200'" @getTableData="getTableData">
          <el-table-column align="center" min-width="100px" :label="$t('common.operate')" fixed="right">
            <template slot-scope="scope">
              <!-- 登记 -->
              <auth-button class="iconCircle" icon="iconfont icondengji" :title="$t('bankPay.register')" @click="checkInfo(scope.row)"></auth-button>
            </template>
          </el-table-column>
        </data-table>
      </template>
    </up-down-layout>
    <!-- 放款登记弹窗 -->
    <bank-pay-regist-pop :visible.sync="isAdd" editModel="E" :form="form" :currentRow="currentRow"></bank-pay-regist-pop>
  </div>
</template>
<script>
import {
  upDownLayout,
  searchForm,
  DataTable,
  authButton,
  BaseSelect,
  SelectDictionary,
  btnDownload,
  SelectReFactoringBank
} from 'newepoch-components'
import SelectProductName from '@/components/element/assetpkgmgr/SelectProductName'
import bankPayRegistPop from './bankPayRegistPop' // 银行放款登记
import bankPay from '@/api/assetpkgmgr/bankPayApi.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: 'bankPayIndex',
  components: {
    searchForm,
    upDownLayout,
    DataTable,
    btnDownload,
    authButton,
    bankPayRegistPop
  },
  data () {
    let $this = this
    return {
      handleFlag: true,
      loadCount: 0,
      editModel: 'V',
      currentRow: {},
      isAdd: false, // 添加资产包弹窗控件
      isEdit: false, // 编辑和查看资产包弹窗控件
      // 搜索表单
      queryParas: {
        pageIndex: 1,
        pageSize: 10
      },
      form: {},
      componentList: [
        {
        // 产品名称
          label: this.$i18n.messages[this.$i18n.locale].bankPay.projectName,
          disabled: false,
          value: 'projectId',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          labelWidth: '160px',
          clearable: true,
          queryName: 'productType',
          queryValue: 'productType',
          componentName: SelectProductName
        },
        {
        // 再保理银行
          label: this.$i18n.messages[this.$i18n.locale].bankPay.factorBankName,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseSelect,
          disabled: false,
          value: 'factorBankId',
          labelWidth: '160px',
          clearable: true,
          componentName: SelectReFactoringBank
        },
        {
        // 付款确认书编号
          label: this.$i18n.messages[this.$i18n.locale].bankPay.payCode,
          disabled: false,
          value: 'assetCode',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '160px',
          clearable: true,
          componentName: 'el-input'
        },
        {
        // 资产包状态
          label: this.$i18n.messages[this.$i18n.locale].bankPay.assetPackageStatus,
          disabled: false,
          value: 'assetPackageStatus',
          labelWidth: '160px',
          clearable: true,
          dictTypeCode: 'bk_pkg_loan_asset_package_status',
          componentName: SelectDictionary
        },
        {
        // 账款到期日
          label: this.$i18n.messages[this.$i18n.locale].bankPay.dueDate,
          value: 'dueDate',
          componentName: 'el-date-picker',
          clearable: true,
          labelWidth: '160px',
          format: 'timestamp'
        },
        {
        // 资产包编号
          label: this.$i18n.messages[this.$i18n.locale].bankPay.assetPackageCode,
          disabled: false,
          value: 'assetPackageCode',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '160px',
          clearable: true,
          componentName: 'el-input'
        },
        {
        // 回单上传状态
          label: this.$i18n.messages[this.$i18n.locale].bankPay.receiptStatus,
          disabled: false,
          value: 'receiptStatus',
          options: [
            {
              id: '0',
              name: $this.$t('bankPay.noUpload')
            },
            {
              id: '1',
              name: $this.$t('bankPay.upload')
            }
          ],
          labelWidth: '160px',
          clearable: true,
          componentName: BaseSelect
        }
      ],
      columns: [
        {
        // 产品名称
          prop: 'projectName',
          headerAlign: 'center',
          align: 'left',
          showOverflowTooltip: true,
          width: '230px',
          label: this.$i18n.messages[this.$i18n.locale].bankPay.projectName
        },
        {
        // 资产包编号
          prop: 'assetPackageCode',
          align: 'center',
          showOverflowTooltip: true,
          width: '240px',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].bankPay.assetPackageCode
        },
        {
        // 计划管理人/再保理银行
          prop: 'factorBankName',
          headerAlign: 'center',
          align: 'left',
          showOverflowTooltip: true,
          width: '230px',
          label: this.$i18n.messages[this.$i18n.locale].bankPay.factorBankName
        },
        {
        // 再报理总金额（元）
          prop: 'factoringMoneyTotal',
          headerAlign: 'center',
          align: 'right',
          width: '170px',
          showOverflowTooltip: true,
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].bankPay.factoringMoneyTotal,
          format: (row) => {
            return format.thousandFilter(row.factoringMoneyTotal)
          }
        },
        {
        // 账款到期日
          prop: 'dueDate',
          align: 'center',
          width: '120px',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].bankPay.dueDate,
          format: (row) => {
            return format.formatDateTpcModify(row.dueDate)
          }
        },
        {
        // 回单上传状态
          prop: 'receiptStatus',
          align: 'center',
          width: '140px',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].bankPay.receiptStatus,
          format: (row) => {
            return row.receiptStatus === '0' ? $this.$t('bankPay.noUpload') : $this.$t('bankPay.upload')
          }
        },
        {
        // 资产包状态
          prop: 'assetPackageStatus',
          align: 'center',
          width: '120px',
          label: this.$i18n.messages[this.$i18n.locale].bankPay.assetPackageStatus,
          format: (row) => {
            return format.formatDict(row.assetPackageStatus, 'bk_pkg_asset_package_status')
          }
        },
        {
        // 资料准备时间
          prop: 'operateTime',
          align: 'center',
          showOverflowTooltip: true,
          width: '171px',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].bankPay.operateTime
        }
      ],
      sourceData: []
    }
  },
  computed: {
    // api接口
    api () {
      return bankPay.assetpkg
    }
  },
  // 切换路由刷新列表，不然缓存会造成非法操作
  activated () {
    this.handleFilter()
  },
  mounted () {
    // 去请求获得表格数据
    this.handleFilter()
  },
  methods: {
    getTableData (data) {
      data = data.map(item => {
        item.factoringMoneyTotal = Number(item.factoringMoneyTotal)
        return item
      })
    },
    // 重置搜索表单
    clearParam () {
      this.queryParas = {
        pageIndex: 1,
        pageSize: 10
      }
    },
    // 查看和编辑
    checkInfo (currentRow) {
      this.editModel = 'E'
      this.currentRow = currentRow
      this.isAdd = true
    }
  }
}
</script>
