// 线上审核合同发票信息
<template>
  <div class="contractInvoice">
    <dym-form :componentList="contractInvoiceList" :formValue="form"></dym-form>
      <el-form :model="form" :rules="rules" :show-message="false">
        <data-table :handleFlag.sync="handleFlag" :showPage="false" :showSelection='true' :type="'selection'"
                    :queryParas="queryParas" :sourceData.sync="form.sourceData" :selectedRows.sync="selectedRows"
                    :loadCount.sync="loadCount" operateBtnLayout="">

          <template slot="headButton">
            <div class="headButton">
              <auth-button :type="'primary'" :size="'medium'" :label="$t('common.create')" @click="addCompany"></auth-button>
              <auth-button :type="'primary'" :size="'medium'" :label="$t('common.del')" @click="del"></auth-button>
            </div>
          </template>

          <!-- 发票号码 -->
          <el-table-column :label="$t('taskManage.todoTask.invoiceNumber')" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'sourceData.' + scope.$index + '.invoiceNumber'" :rules="rules.invoiceNumber">
                <el-input v-model="scope.row.invoiceNumber" :maxlength="20"></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 开票日期 -->
          <el-table-column :label="$t('taskManage.todoTask.invoiceDate')" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'sourceData.' + scope.$index + '.invoiceDate'" :rules="rules.invoiceDate">
                <el-date-picker class="date" v-model="scope.row.invoiceDate"></el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 发票金额 -->
          <el-table-column :label="$t('taskManage.todoTask.invoiceAmount')" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'sourceData.' + scope.$index + '.invoiceAmount'" :rules="rules.invoiceAmount">
                <el-input class="date" v-model="scope.row.invoiceAmount"></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 发票代码 -->
          <el-table-column :label="$t('taskManage.todoTask.invoiceCode')" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'sourceData.' + scope.$index + '.invoiceCode'" :rules="rules.invoiceCode">
                <el-input class="date" v-model="scope.row.invoiceCode" :minlength="10" :maxlength="12"></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <!-- 不含税金额 -->
          <el-table-column :label="$t('taskManage.todoTask.excludingTaxAmount')" align="center">
            <template>
              <el-input :disabled="true"></el-input>
            </template>
          </el-table-column>

          <!-- 校验码 -->
          <el-table-column :label="$t('taskManage.todoTask.checkCode')" align="center">
            <template>
              <el-input :disabled="true"></el-input>
            </template>
          </el-table-column>

          <!-- 发票状态 -->
          <el-table-column :label="$t('taskManage.todoTask.invoiceStatus')" align="center">
            <template>
              <span>{{'—'}}</span>
            </template>
          </el-table-column>

          <!-- 备注 -->
          <el-table-column :label="$t('taskManage.todoTask.remark')" align="center">
            <template>
              <span>{{'—'}}</span>
            </template>
          </el-table-column>
        </data-table>
      </el-form>
        <div slot="paginationLeft" class="footerDiv">
          <span>显示第{{endNum && '1' || 0}}至{{this.endNum}}项，共{{this.endNum}}项</span>
        </div>
        <dym-form :componentList="contractInvoiceTotalList" :formValue="form"></dym-form>
  </div>
</template>
<script>
import BasePage from '@/pages/basePage.js'
import { dymForm, DataTable, authButton } from 'newepoch-components'
export default {
  extends: new BasePage(),
  components: {
    dymForm,
    DataTable,
    authButton
  },
  prop: {
    form: {
      type: [Object],
      default: function () {
        return {}
      }
    }
  },
  data () {
    // const { common, taskManage: { todoTask } } = this.$i18n.messages[this.$i18n.locale]
    return {
      form: {
        sourceData: [
          {
            invoiceNumber: '',
            invoiceDate: '',
            invoiceAmount: '',
            invoiceCode: '',
            excludingTaxAmount: '',
            checkCode: '',
            invoiceStatus: '',
            remark: ''
          }
        ]
      },
      endNum: 1,
      contractInvoiceList: [
        // 合同名称
        {
          label: this.$i18n.messages[this.$i18n.locale].taskManage.todoTask.contractName,
          value: 'contractName',
          disabled: false,
          componentName: 'el-input',
          cols: [8, 8, 8, 8],
          labelWidth: '120px',
          maxlength: '100',
          prop: 'contractName'
        },
        // 合同编号
        {
          label: this.$i18n.messages[this.$i18n.locale].taskManage.todoTask.contractNumber,
          value: 'contractNumber',
          disabled: false,
          componentName: 'el-input',
          cols: [8, 8, 8, 8],
          labelWidth: '110px',
          prop: 'contractNumber'
        },
        // 基础合同类别
        {
          label: this.$i18n.messages[this.$i18n.locale].taskManage.todoTask.basicContractType,
          value: 'basicContractType',
          disabled: false,
          componentName: 'el-select',
          cols: [8, 8, 8, 8],
          labelWidth: '105px',
          prop: 'basicContractType'
        }
      ],
      contractInvoiceTotalList: [
        // 发票合计金额
        {
          label: this.$i18n.messages[this.$i18n.locale].taskManage.todoTask.invoiceTotalAmount,
          value: '',
          disabled: true,
          componentName: 'el-input',
          cols: [8, 8, 8, 8],
          labelWidth: '120px',
          prop: ''
        },
        // 发票合计剩余可抵扣金额
        {
          label: this.$i18n.messages[this.$i18n.locale].taskManage.todoTask.invoiceRemainingAmount,
          value: '',
          disabled: true,
          componentName: 'el-input',
          cols: [8, 8, 8, 8],
          labelWidth: '190px',
          prop: ''
        }
      ],
      rules: {
        invoiceNumber: [ { required: true, trigger: 'blur' } ],
        invoiceAmount: [ { required: true, trigger: 'blur' } ],
        invoiceCode: [ { required: true, trigger: 'blur' } ],
        invoiceDate: [ { required: true, trigger: ['blur', 'change'] } ]
      }
    }
  },
  methods: {
    addCompany () {
      this.form.sourceData.push(
        {
          invoiceNumber: '',
          invoiceDate: '',
          invoiceAmount: '',
          invoiceCode: '',
          excludingTaxAmount: '',
          checkCode: '',
          invoiceStatus: '',
          remark: ''
        }
      )
    },
    del () {}
  }
}
</script>
<style scoped lang="scss" src="@/styles/dataAudit/taskManage/contractInvoice.scss">
</style>