<!--开票-->
<template>
  <dialog-edit :visible.sync="dialogVisible" :editModel="editModel" :form="form"
               :autoSave="false" @onSaved="save" :loading="saveLoading" :saveLabel="$t('uninvoiced.okInvoice')"
               :title="$t('uninvoiced.edithead')" :api="api" :footerBtnShow="true">
    <data-table :operateBtnLayout="''"
                :columns="columns"
                :sourceData="sourceData"
                max-height="500"
                ref="dataTableRef"
                :showPage="false"
                :loadCount="loadCount">
      <template slot="taxFreeAmounthead" slot-scope="scope">
        <div class="customHeadDiv">
          <p :class="{'headPHeight25px' : sumtotal(scope) !== 0}">{{scope.data.column.label}}</p>
          <p class="headPHeight25px headTotalRed" v-if="sumtotal(scope) !== 0">{{sumtotal(scope)}}</p>
        </div>
<!--        {{scope.data.column.label}}-->
<!--        <span class="textRed">{{sumtotal(scope)}}</span>-->
      </template>
      <template slot="taxAmounthead" slot-scope="scope">
        <div class="customHeadDiv">
          <p :class="{'headPHeight25px' : sumtotal(scope) !== 0}">{{scope.data.column.label}}</p>
          <p class="headPHeight25px headTotalRed" v-if="sumtotal(scope) !== 0">{{sumtotal(scope)}}</p>
        </div>
<!--        {{scope.data.column.label}}-->
<!--        <span class="textRed">{{sumtotal(scope)}}</span>-->
      </template>
      <template slot="paginationLeft">
        <span v-if="sourceData.length > 0">{{$t('uninvoiced.bottomLeftTitle1') + sourceData.length + $t('uninvoiced.bottomLeftTitle2') + sourceData.length + $t('uninvoiced.bottomLeftTitle3')}}</span>
      </template>
    </data-table>
<!--    <template slot="footer">-->
<!--      <auth-button size="small" type="primary" :label="$t('uninvoiced.okInvoice')" @click="save"></auth-button>-->
<!--      <auth-button size="small" :label="$t('common.close')" @click="dialogVisible = false" :openPerms="false"></auth-button>-->
<!--    </template>-->
  </dialog-edit>
</template>

<script>

import BasePage from '@/pages/baseEditPage'
import * as format from '@/filters/index'
import { DataTable, DialogEdit, authButton } from 'newepoch-components'
import uninvoiceApi from '@/api/uninvoiceApi'
import invoiceApi from '@/api/invoiceApi'
export default {
  extends: new BasePage(),
  name: 'uninvoicedEdit',
  components: {
    DataTable,
    DialogEdit,
    authButton
  },
  computed: {
    api () {
      return {}
    }
  },
  data () {
    return {
      saveLoading: false,
      sourceData: [],
      total: {},
      loadCount: 0,
      columns: [
        // 付款确认书编号
        {
          prop: 'assetCode',
          align: 'left',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].uninvoiced.paymentConfNum,
          width: '150px'
        },
        // 供应商名称
        {
          prop: 'creditor',
          align: 'left',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].uninvoiced.supplierName,
          width: '220px'
        },
        // 供应商税号
        {
          prop: 'creditorTaxNumber',
          align: 'left',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].uninvoiced.supplierTaxNum,
          width: '180px'
        },
        // 不含税金额
        {
          prop: 'taxFreeAmount',
          align: 'right',
          sortable: true,
          type: true,
          headslot: true,
          label: this.$i18n.messages[this.$i18n.locale].uninvoiced.taxFreeAmount,
          width: '180px',
          format: (row) => {
            return format.thousandFilter(row.taxFreeAmount)
          }
        },
        // 税率
        {
          prop: 'taxRate',
          align: 'left',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].uninvoiced.taxRate,
          width: '100px',
          format: (row) => {
            if (row.taxRate === 0) {
              return ''
            }
            return (row.taxRate).toFixed(2)
          }
        },
        // 税额（元）
        {
          prop: 'taxAmount',
          align: 'right',
          sortable: true,
          type: true,
          headslot: true,
          label: this.$i18n.messages[this.$i18n.locale].uninvoiced.taxAmount,
          width: '160px',
          format: (row) => {
            if (row.taxAmount === 0) {
              return ''
            }
            return format.thousandFilter(row.taxAmount)
          }
        },
        // 商品名称
        {
          prop: 'commodityName',
          align: 'left',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].uninvoiced.commodityName,
          width: '150px'
        },
        // 银行账号
        {
          prop: 'bankNo',
          align: 'left',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].uninvoiced.bankAccount,
          width: '180px'
        },
        // 地址电话
        {
          prop: 'tel',
          align: 'left',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].uninvoiced.addressTelephone,
          width: '180px'
        },
        // 备注
        {
          prop: 'memo',
          align: 'left',
          sortable: true,
          label: this.$i18n.messages[this.$i18n.locale].uninvoiced.Remarks,
          width: '250px'
        }
      ]
    }
  },
  methods: {
    save () {
      if (this.sourceData.length > 0) {
        this.saveLoading = true
        invoiceApi.assetmgrinvoice.postOpen(this.sourceData).then(res => {
          if (res.data) {
            // this.success(this.$i18n.messages[this.$i18n.locale].uninvoiced.openInvoiceSuccess)
            this.dialogVisible = false
            this.$emit('closeEdit', res.data)
          } else {
            this.error(this.$i18n.messages[this.$i18n.locale].uninvoiced.openInvoiceFail)
          }
        }).finally(() => {
          this.saveLoading = false
        })
      } else {
        this.error('无数据不能开票')
      }
    },
    sumtotal (scope) {
      const { data: { column: { property } } } = scope
      let list = this.sourceData
      if (!list.length) { return '' }
      let backNum = 0
      list.forEach(it => {
        const item = it[property]
        backNum += Number(item)
      })
      return format.thousandFilter(backNum)
    },
    parentDialogVisible () {
      this.$nextTick(() => {
        this.saveLoading = false
        this.$refs.dataTableRef.vLoading = true
        this.total = {}
        this.sourceData = []
        uninvoiceApi.assetmgruninvoice.getListByPost(this.form.keyIds).then(res => {
          this.sourceData = res.data
        }).finally(() => {
          this.$nextTick(() => {
            this.$refs.dataTableRef.vLoading = false
          })
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
  @import '~@/styles/shourang/uninvoiced/uninvoicedList.scss';
</style>
