<!-- 企业收款账户信息 -->
<template>
  <div class="crm-main">
    <el-row class="margin-top">
      <span>{{$t('enterpriseInfoManage.supplierInfoManage.gatherAccountInfo')}}</span>
    </el-row>
    <div class="account-info">
      <el-divider></el-divider>
    </div>
    <data-table :api="api" :operateBtnLayout="operateBtnLayout" :queryParas="queryParas" :sourceData.sync="sourceData"
                :showSelection="showSelection" :loadCount.sync="loadCount" :menuFlag="menuFlag" :showPage="showPage"
                @selectRowChange="selectRowChange" :columns="columns">
      <template slot="headButton">
        <el-row>
          <el-col :span="24" class="btn-right">
            <auth-button type="primary" :label="$t('enterpriseInfoManage.supplierInfoManage.create')"
                         icon="iconfont iconxinzeng" @click="showCreate" size="medium"
                         :menuCode="menuId" perms="reCreate" :openPerms="true"></auth-button>
            <auth-button type="danger" :label="$t('enterpriseInfoManage.supplierInfoManage.del')"
                         icon="iconfont iconshanchu" @click="delBatch" size="medium"
                         :menuCode="menuId" perms="reDeletes" :openPerms="true"></auth-button>
          </el-col>
        </el-row>
      </template>
      <el-table-column :label="$t('enterpriseInfoManage.supplierInfoManage.accountProof')" align="center" width="110px" fixed="right">
        <template slot-scope="scope">
          <btn-upload :uploadApi="uploadApi" :btnSize="size" :classType="classType" :rowData="scope.row" :rowIndex="scope.$index"
                      :fileID="scope.row.certificateFileId" @uploadSuccess="uploadSuccess"
                      :menuCode="menuId" perms="reUpload " :openPerms="true"></btn-upload>
          <btn-download v-if="scope.row.certificateFileId && scope.row.certificateFileId !== '0'" :xhr="$xhr" :store="$store" :size="size"
                        :fileID="scope.row.certificateFileId"
                        :menuCode="menuId" perms="reDownload" :openPerms="true"></btn-download>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.operate')" align="center" fixed="right" width="110px">
        <template slot-scope="scope">
          <auth-button class="iconCircle" icon="iconfont iconbianji" :title="$t('common.edit')" @click="showEdit(scope.row)"
                       :menuCode="menuId" perms="reEdit" :openPerms="true"></auth-button>
          <auth-button class="iconCircleDel" icon="iconfont iconjian" :title="$t('common.del')" @click="del(scope.row)"
                       :menuCode="menuId" perms="reDelete" :openPerms="true"></auth-button>
        </template>
      </el-table-column>
    </data-table>
    <enterprise-account-info-edit :visible.sync="showFlag" :menuId="menuId" :editModel="editModel" :form="item" @handleFilter="handleFilter"></enterprise-account-info-edit>
  </div>
</template>

<script>
import { btnDownload, btnUpload, SelectDictionary, authButton, DataTable } from 'newepoch-components'
import { UPLOAD_API } from '@/constant.js'
import storage from '@/utils/storage'
import supplierInfoManageApi from '@/api/enterpriseInfoManage/companyApi.js'
import BasePage from '@/pages/basePage.js'
import * as format from '@/filters/index.js'
import EnterpriseAccountInfoEdit from '@/pages/enterpriseInfoManage/supplierInfoManage/enterpriseAccountInfoEdit.vue'
export default {
  extends: new BasePage(),
  name: 'enterpriseAccountInfo',
  components: {
    btnDownload,
    btnUpload,
    authButton,
    SelectDictionary,
    DataTable,
    EnterpriseAccountInfoEdit
  },
  data () {
    return {
      operateBtnLayout: '',
      queryParas: {
        companyId: ''
      },
      sourceData: [],
      showSelection: true,
      showPage: false,
      menuFlag: true,
      columns: [
        // 序号
        {
          prop: 'orderNum',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.orderNum,
          width: '80px'
        },
        // 收款人名称
        {
          prop: 'payeeName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.payeeName,
          width: '150px'
        },
        // 收款人开户行
        {
          prop: 'openingBank',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.openingBank,
          width: '200px'
        },
        // 收款人账号
        {
          prop: 'bankNo',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.account,
          width: '200px'
        },
        // 大额行名
        {
          prop: 'bankLargeName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.bigBankName,
          width: '150px'
        },
        // 大额行号
        {
          prop: 'bankLargeNo',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.bigBankNumber,
          width: '130px'
        },
        // 账户性质
        {
          prop: 'bankType',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.accountNature,
          width: '150px',
          format: (row) => { return format.formatDict(row.bankType, 'bank_type') }
        },
        // 是否成功放款
        {
          prop: 'ifsSuccessLoan',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.loanSuccess,
          width: '110px',
          format: (row) => { return format.formatDict(row.ifsSuccessLoan, 'ZD0003') }
        },
        // 上一次成功放款时间
        {
          prop: 'lastLoanDate',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.lastSuccessLoanTime,
          width: '160px',
          format: (row) => { return this.formatLastLoanDate(row.lastLoanDate) }
        },
        // 备注
        {
          prop: 'memo',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.remark,
          width: '150px'
        }
      ],
      classType: true,
      size: 'small',
      uploadApi: UPLOAD_API,
      item: {},
      editModel: '',
      showFlag: false
    }
  },
  mounted () {
    this.queryParas.companyId = storage.getLocal('params').enterpriseId
    this.handleFilter()
  },
  activated () {
    this.queryParas.companyId = storage.getLocal('params').enterpriseId
    this.handleFilter()
  },
  computed: {
    api () {
      return supplierInfoManageApi.bank
    },
    menuId () {
      return storage.getLocal('params').menuId
    }
  },
  methods: {
    formatLastLoanDate (data) {
      let $this = this
      if (!$this.UtilJs.isEmpty(data)) {
        return format.formatCheckDatetime(data)
      } else {
        return ''
      }
    },
    showCreate () {
      this.item = { companyId: this.queryParas.companyId }
      this.editModel = 'C'
      this.showFlag = true
    },
    showEdit (data) {
      this.item = Object.assign({}, data)
      this.editModel = 'E'
      this.showFlag = true
    },
    del (data) {
      let $this = this
      $this.$confirm(this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.organization.deleteNode,
        this.$i18n.messages[this.$i18n.locale].common.tip, {
          type: 'warning'
        }).then(() => {
        $this.api.dels([data]).then(res => {
          if (res && res.data) {
            $this.success(this.$i18n.messages[this.$i18n.locale].common.delSuccess)
            $this.handleFilter()
          } else {
            $this.error(this.$i18n.messages[this.$i18n.locale].common.delFailure)
          }
        })
      }).catch(() => {})
    },
    selectRowChange (val) {
      this.selectedRows = val
    },
    // 批量删除
    delBatch () {
      if (this.selectedRows.length === 0) {
        this.warning(this.$i18n.messages[this.$i18n.locale].common.delSelectedTip)
        return
      }
      let $this = this
      $this.$confirm(this.$i18n.messages[this.$i18n.locale].common.confirmTip, this.$i18n.messages[this.$i18n.locale].common.warningTip, {
        type: 'warning'
      }).then(() => {
        $this.api.dels(this.selectedRows).then(res => {
          if (res && res.data) {
            $this.success(this.$i18n.messages[this.$i18n.locale].common.delSuccess)
            $this.handleFilter()
          } else {
            $this.error(this.$i18n.messages[this.$i18n.locale].common.delFailure)
          }
        })
      }).catch(() => {})
    },
    // 加载数据
    handleFilter () {
      let $this = this
      supplierInfoManageApi.bank.getList(this.queryParas).then(res => {
        if (res.success && res.data) {
          res.data.forEach((it, index) => {
            $this.$set(it, 'orderNum', index + 1)
          })
          $this.sourceData = res.data
        }
      })
    },
    // 上传成功
    uploadSuccess (returnData) {
      let $this = this
      this.sourceData[returnData.rowIndex].certificateFileId = returnData.fileID
      this.sourceData[returnData.rowIndex].certificateFileName = returnData.fileName
      let row = returnData.rowData
      row.certificateFileId = returnData.fileID
      row.certificateFileName = returnData.fileName
      this.api.updateBank(row).then(res => {
        if (res && res.data) {
          $this.success('上传成功')
        }
      })
    }
  }
}
</script>

<style scoped lang="scss" src="@/styles/enterpriseInfoManage/supplierInfoManage/enterpriseAccountInfo.scss">
</style>
