<template>
<div>
    <dialog-edit width="95%" :visible.sync="dialogVisible" :form="forms" v-bind="{height:'calc(100% - 264px)'}" :closeLabel="$t('common.close')" :saveLabel="$t('common.confirm')" :autoSave="false" :editModel="editModel"
      :api="api" :appendToBody="true" :title="$t('sendLoanInfo.headerView')">
      <div class="form-group">
        <el-tabs v-model="activeName" type="card" class="resume_header">
          <el-tab-pane :label="$t('approval.approval')" name="1">
            <div style="max-height:calc(100vh - 330px);overflow-y:scroll;overflow-x:hidden">
              <div class="assetpkgmgr-box" v-loading="assetpkgmgrButtonLoading">
                <!-- 查询信息 -->
                <div class="viewForm">
                  <dividerTitle :title="$t('sendLoanInfo.baseInfo')"></dividerTitle>
                  <el-form>
                    <dym-form :formValue.sync="forms" :componentList="componentLists"></dym-form>
                  </el-form>
                  <dividerTitle :title="$t('sendLoanInfo.payList')"></dividerTitle>
                  <!-- 可放款资产信息一览 -->
                  <data-table :api="api" :operateBtnLayout="operateBtnLayout" v-bind="{maxheight:200}" selectable="false" :showPage="false" :queryParas="queryParas" :sourceData="modifyData" :toolMenuFlag="toolMenuFlag" :columns="modifyColumns"
                    :loadCount.sync="loadCount" :menuFlag="menuFlag" loadPage="getInfo"
                    :loadingFlag="loadingFlag">
                    <!-- 列表结果集 -->
                    <template slot="paginationLeft">
                      <div align="left">
                        <div>{{$t('common.pagePromptOne') + modifyData.length + $t('common.pagePromptTwo') + modifyData.length + $t('common.pagePromptThree')}}</div>
                      </div>
                    </template>
                  </data-table>
                </div>
              </div>
              <approval-detail v-if="dialogVisible" ref="detail" :readonly="true" :form="form"></approval-detail>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$t('approval.resume')" name="2">
            <div style="height:calc(100vh - 330px);overflow-y:scroll;overflow-x:hidden">
              <approval-detail-info v-if="dialogVisible" :instanceid="form.instanceid"></approval-detail-info>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </dialog-edit>
    </div>
</template>
<script>
import * as format from '@/filters/index.js'
import {
  DataTable,
  authButton,
  amountInput,
  DialogEdit,
  dymForm
} from 'newepoch-components'
import BaseEdit from '@/pages/baseEditPage'
import approvalDetail from './approvalDetail'
import approvalDetailInfo from './approvalDetailInfo'
import dividerTitle from '@/components/element/assetpkgmgr/dividerTitle'
import sendLoanInfo from '@/api/assetpkgmgr/sendLoanInfoApi.js'
export default {
  extends: new BaseEdit(),
  name: 'approvalTaskModal',
  props: {
    form: {
      type: [Object]
    },
    readonly: {
      type: Boolean
    }
  },
  components: {
    approvalDetail,
    approvalDetailInfo,
    DataTable,
    authButton,
    dividerTitle,
    DialogEdit,
    dymForm
  },
  data () {
    return {
      modifyData: [],
      toolMenuFlag: true,
      loadCount: 0,
      forms: {},
      menuFlag: false,
      operateBtnLayout: '',
      loadingFlag: false, // 加载动画控件
      // 基础信息组件
      componentLists: [
        {
          // 产品名称
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.projectName,
          value: 'projectName',
          disabled: true,
          prop: 'projectName',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.noForm,
          labelWidth: '125px',
          cols: [12, 12, 8],
          clearable: true,
          componentName: 'el-input'
        },
        {
          // 期数
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.periodsNum,
          value: 'periods',
          disabled: true,
          prop: 'periods',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.noForm,
          labelWidth: '125px',
          cols: [12, 12, 8],
          clearable: true,
          componentName: amountInput
        },
        {
          // 划款银行
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.loanBankName,
          value: 'loanBankName',
          disabled: true,
          prop: 'loanBankName',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.noForm,
          labelWidth: '125px',
          cols: [12, 12, 8],
          clearable: true,
          componentName: 'el-input'
        },
        {
          // 划款日期
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.loanDate,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.noForm,
          value: 'loanDate',
          prop: 'loanDate',
          disabled: true,
          componentName: 'el-date-picker',
          labelWidth: '125px',
          pickerOptions: {
            disabledDate: function (time) {
              return time.getTime() < new Date().getTime()
            }
          },
          clearable: true,
          cols: [12, 12, 8]
        },
        {
          // 放款笔数
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.loanAssetCount,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.noForm,
          value: 'loanAssetCount',
          prop: 'loanAssetCount',
          disabled: true,
          componentName: 'el-input',
          labelWidth: '125px',
          clearable: true,
          cols: [12, 12, 8]
        },
        {
          // 放款金额合计(元)
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.loanAmountTotal,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.noForm,
          value: 'loanTotal',
          disabled: true,
          prop: 'loanTotal',
          componentName: 'el-input',
          labelWidth: '125px',
          clearable: true,
          // type: 'daterange',
          cols: [12, 12, 8]
        }
      ],
      modifyColumns: [
        // 付款确认书编号
        {
          prop: 'assetCode',
          align: 'center',
          sortable: true,
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.payCode,
          width: '250px'
        },
        // 供应商名称
        {
          prop: 'recipientName',
          headerAlign: 'center',
          showOverflowTooltip: true,
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.suppliersName,
          width: '230px'
        },
        // 收款人名称
        {
          prop: 'recipientAccountName',
          headerAlign: 'center',
          align: 'left',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.recipientAccountName,
          width: '150px'
        },
        // 收款人开户行
        {
          prop: 'recipientBankName',
          headerAlign: 'center',
          align: 'left',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.recipientBankName,
          width: '150px'
        },
        // 收款人银行账号
        {
          prop: 'recipientAccount',
          align: 'center',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.recipientAccount,
          width: '230px'
        },
        // 应收账款金额（元）
        {
          prop: 'factoringMoneyTotal',
          headerAlign: 'center',
          showOverflowTooltip: true,
          align: 'right',
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.totalPrice,
          width: '150px',
          format: (row) => {
            return format.thousandFilter(row.factoringMoneyTotal)
          }
        },
        // 放款金额
        {
          prop: 'loanTotal',
          headerAlign: 'center',
          align: 'right',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.loanTotal,
          width: '150px',
          format: (row) => {
            return format.thousandFilter(row.loanTotal)
          }
        },
        // 附言
        {
          prop: 'postscript',
          headerAlign: 'center',
          align: 'left',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.postscript,
          width: '250px'
        },
        // 划款类型
        {
          prop: 'loanType',
          headerAlign: 'center',
          align: 'left',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.loanType,
          width: '150px'
        },
        // 大额行号
        {
          prop: 'anapsCode',
          align: 'center',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.anapsCode,
          width: '150px'
        },
        // 银行放款状态
        {
          prop: 'loanApplyStatus',
          headerAlign: 'center',
          showOverflowTooltip: true,
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].sendLoanInfo.bankLoanApplyStatus,
          width: '150px'
        }
      ],
      queryParas: {
        pageIndex: 1,
        pageSize: 10
      },
      componentList: [],
      dataList: '',
      showIds: [],
      activeName: '1',
      approvalData: {
        operateType: '',
        auditOpinion: '',
        auditOpinionMemo: '',
        transferTargetId: '',
        transferTargetName: ''
      }
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.forms = {}
        this.modifyData = []
        this.approvalData = {}
        this.activeName = '1'
        this.getData()
      }
    }
  },
  computed: {
    // api
    api () {
      return sendLoanInfo.sendLoanInfo
    },
    // 计算总数
    calcTotal () {
      let list = this.modifyData
      return format.thousandFilter(list.length > 0 ? list
        .map(item => {
          // console.log(item.loanTotal)
          return Number(item.loanTotal).toFixed(2)
        })
        .reduce((total, item) => {
          // console.log(total, item)
          return Number(total) + Number(item)
        }) : '0.00') || '0.00'
    }
  },
  methods: {
    // 获取基本信息
    getData: function () {
      let $this = this
      let params = $this.queryParas
      params.isPage = '0'
      params.keyId = $this.form.keyId
      // 获取审核详情
      $this.assetpkgmgrButtonLoading = true
      sendLoanInfo.sendLoanInfo.getSendLoanInfo(params).then(res => {
        if (res.success) {
          let datas = res.data
          datas.periods = datas.periods === '0' ? '' : datas.periods
          // 表单赋值
          $this.forms = datas
          $this.modifyData = datas.list
          $this.forms.loanTotal = $this.calcTotal
          $this.loadingFlag = false
        }
        $this.assetpkgmgrButtonLoading = false
      }).catch(res => {
        $this.assetpkgmgrButtonLoading = false
        $this.loadingFlag = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  @import "~@/styles/assetpkgmgr/common.scss";
</style>
