<template>
  <div>
    <up-down-layout :header="$t('paymentConfirmationManage.head')" :handleFlag.sync="handleFlag">
      <search-form :formValue.sync="queryParas"
                   @handleFilter="handleFilter"
                   @clearParam="clearParam"
                   :menuCode="menuId"
                   searchPerms="searchPerms"
                   :componentList="componentList"
                   resetPerms="resetPerms"
                   slot="query">
      </search-form>
      <template slot="table">
        <data-table
          :menuFlag="true"
          :headTitle="$t('paymentConfirmationManage.headCenter')"
          :operateBtnLayout="'E'"
          :queryParas="queryParas"
          :openPerms="true"
          :menuCode="menuId"
          :columns="columns"
          v-bind="elHeightObj"
          :editPerms="'editPerms'"
          @onEditRow="showEdit"
          :sourceData="sourceData"
          :api="api"
          :loadCount="loadCount">
        </data-table>
      </template>
    </up-down-layout>
    <payment-confirmation-manage-edit :form="item" :visible.sync="showDetail" :menuCode="menuId" :editModel="editModel"></payment-confirmation-manage-edit>
  </div>
</template>

<script>
import { upDownLayout, searchForm, DataTable, btnExport, authButton } from 'newepoch-components'
import BasePage from '@/pages/basePage'
import paymentConfirmationApi from '@/api/paymentConfirmationApi'
import * as format from '@/filters/index'
import paymentConfirmationManageEdit from '@/pages/shourang/paymentConfirmationManage/paymentConfirmationManageEdit'
import mixin from '@/pages/mixin'

export default {
  name: 'paymentConfirmationManage',
  extends: new BasePage(),
  mixins: [mixin],
  components: {
    paymentConfirmationManageEdit,
    upDownLayout,
    searchForm,
    DataTable,
    btnExport,
    authButton
  },
  computed: {
    api () {
      return paymentConfirmationApi.payment
    }
  },
  data () {
    return {
      queryParas: {},
      sourceData: [],
      componentList: [
        // 付款确认书编号
        {
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.paymentConfNum,
          value: 'assetCode',
          clearable: true,
          componentName: 'el-input',
          placeholder: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.inputPaymentConfNum,
          labelWidth: '130px'
        },
        // 供应商名称
        {
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.supplierName,
          value: 'creditor',
          clearable: true,
          componentName: 'el-input',
          placeholder: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.inputsupplierName,
          labelWidth: '130px'
        },
        // 项目公司名称
        {
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.projectCompName,
          value: 'debtor',
          componentName: 'el-input',
          clearable: true,
          placeholder: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.inputprojectCompName,
          labelWidth: '130px'
        },
        // 供应商盖章方式
        {
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.suppliersStampType,
          value: 'creditorStampWay',
          componentName: 'SelectDictionary',
          clearable: true,
          dictTypeCode: 'ZD0081',
          store: this.$store,
          placeholder: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.selectsuppliersStampType,
          labelWidth: '130px'
        },
        // 项目公司盖章方式
        {
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.projectStampType,
          value: 'debtorStampWay',
          componentName: 'SelectDictionary',
          clearable: true,
          dictTypeCode: 'ZD0081',
          store: this.$store,
          placeholder: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.selectprojectStampType,
          labelWidth: '130px'
        }
      ],
      columns: [
        // 付款确认书编号
        {
          prop: 'assetCode',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.paymentConfNum,
          width: '200px'
        },
        // 核心企业
        {
          prop: 'coreEnterpriseName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.coreEnterprises,
          width: '200px'
        },
        // 计划管理人/再保理银行
        {
          prop: 'planningManagerName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.refactorBank,
          width: '200px'
        },
        // 供应商名称
        {
          prop: 'creditor',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.supplierName,
          width: '200px'
        },
        // 项目公司名称
        {
          prop: 'debtor',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.projectCompName,
          width: '200px'
        },
        // 供应商盖章方式
        {
          prop: 'creditorStampWay',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.suppliersStampType,
          width: '120px',
          format: (row) => {
            return format.formatDict(row.creditorStampWay, 'ZD0081')
          }
        },
        // 项目公司盖章方式
        {
          prop: 'debtorStampWay',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.projectStampType,
          width: '140px',
          format: (row) => {
            return format.formatDict(row.debtorStampWay, 'ZD0081')
          }
        },
        // 合同名称
        {
          prop: 'basicContractName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.htName,
          width: '150px'
        },
        // 合同编号
        {
          prop: 'basicContractCode',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.htNumber,
          width: '150px'
        },
        // BIP编码
        {
          prop: 'regionCode',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.bipmas,
          width: '150px'
        }
      ]
    }
  },
  methods: {
  }
}
</script>

<style scoped>
  .labelclass{
    color: #00FF00;
  }
</style>
