<template>
  <dialog-edit :visible.sync="dialogVisible" :editModel="editModel" :form="form" :title="$t('paymentConfirmationManage.edithead')" width="1000px"
               :openPerms="true" savePerms="btnSave" :menuCode="menuCode" :appendToBody="true"
               :api="api" :footerVisible="true" :autoSave="false" @onSaved="save" :loading="saveLoading">
    <data-table :operateBtnLayout="''"
                :columns="columns"
                ref="refData"
                :max-height="maxHeight"
                :showPage="false"
                :headTitle="$t('paymentConfirmationManage.editheadCenter')"
                :sourceData="sourceData"
                :loadCount="loadCount">
      <template>
        <el-table-column fixed="right" align="center" :label="$t('common.operate')" width="200px">
          <template slot-scope="scope">
            <btn-upload :uploadApi="uploadApi"
                        :btnDisplay="true" :drag="false"
                        :title="scope.row.fileId === '0' ? $t('common.upload') : $t('common.reUpload')"
                        :classType="true"
                        :menuCode="menuCode"
                        :fileType="'.pdf,.png,.gif,.bmp,.jpg,.jpeg,.zip'"
                        perms="btnReUpload"
                        :openPerms="true"
                        :rowIndex="scope.$index" @uploadFailed="uploadFailed"
                        @uploadSuccess="uploadSuccess"></btn-upload>
            <btn-download :size="'small'"
                          :fileID="scope.row.fileId"
                          :disabled="scope.row.fileId === '0'"
                          :title="$t('common.downLoad')"
                          perms="btnDownLoad"
                          :menuCode="menuCode"
                          :openPerms="true"
                          :classType="false">
            </btn-download>
          </template>
        </el-table-column>
      </template>
      <template slot="paginationLeft" v-if="sourceData.length !== 0">
        <div>
          <span>显示第 1 至 {{sourceData.length}} 项结果，共 {{sourceData.length}} 项</span>
        </div>
      </template>
    </data-table>
  </dialog-edit>
</template>

<script>

import BasePage from '@/pages/baseEditPage'
import * as format from '@/filters/index'
import { UPLOAD_API } from '@/constant'
import { DataTable, DialogEdit, authButton, btnUpload, btnDownload } from 'newepoch-components'
import paymentConfirmationApi from '@/api/paymentConfirmationApi'
export default {
  extends: new BasePage(),
  name: 'paymentConfirmationManageEdit',
  components: {
    DataTable,
    DialogEdit,
    authButton,
    btnUpload,
    btnDownload
  },
  props: {
    menuCode: {
      type: String,
      default: null
    }
  },
  computed: {
    api () {
      return {}
    }
  },
  data () {
    return {
      maxHeight: 600,
      saveLoading: false,
      uploadApi: UPLOAD_API,
      allsourceData: [],
      sourceData: [],
      total: {
        taxFreeAmount: 0,
        taxAmount: 0
      },
      loadCount: 0,
      columns: [
        // 文件名称
        {
          prop: 'fileName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.filename,
          width: '150px'
        },
        // 文件来源
        {
          prop: 'fileSource',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.filesouce,
          width: '120px',
          format: (row) => {
            return format.formatDict(row.fileSource, 'file_source')
          }
        },
        // 文件盖章状态
        {
          prop: 'stampStatus',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.stampType,
          width: '120px',
          format: (row) => {
            return format.formatDict(row.stampStatus, 'SCRS0123')
          }
        }
      ]
    }
  },
  methods: {
    uploadFailed () {
      this.error(this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.uploadError)
    },
    uploadSuccess (data) {
      this.$set(this.sourceData[data.rowIndex], 'fileId', data.fileID)
      this.success(this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.uploadSuccess)
    },
    save () {
      this.saveLoading = true
      paymentConfirmationApi.paymentUpdate.updates(this.sourceData).then(res => {
        if (res.data) {
          this.success(this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.saveSuccess)
          this.dialogVisible = false
        } else {
          this.error(this.$i18n.messages[this.$i18n.locale].paymentConfirmationManage.saveError)
        }
      }).finally(() => {
        this.saveLoading = false
      })
    },
    getData () {
      // this.form.keyId
      this.$refs.refData.vLoading = true
      paymentConfirmationApi.paymentList.getList({ assetInfoId: this.form.keyId }).then(res => {
        // console.log(res)
        this.sourceData = []
        this.sourceData = res.data
        // this.allsourceData.forEach((it, index) => {
        //   this.sourceData.push({
        //     fileName: it.fileName,
        //     fileID: it.fileId,
        //     fileCode: it.fileCode,
        //     stampStatus: it.stampStatus,
        //     fileSource: it.fileSource,
        //     keyId: it.keyId,
        //     rowindex: index
        //   })
        // })
        // console.log(this.allsourceData)
      }).finally(() => {
        this.$refs.refData.vLoading = false
      })
    }
  },
  watch: {
    dialogVisible: {
      deep: true,
      immediate: true,
      handler (n, o) {
        this.$nextTick(() => {
          if (n) {
            this.saveLoading = false
            this.getData()
          } else {
            this.sourceData = []
          }
        })
      }
    },
    sourceData: {
      deep: true,
      immediate: true,
      handler (n, o) {
        if (n) {
        }
      }
    }
  }
}
</script>

<style scoped>
  .dialog-footer{
    align-content: center;
    text-align: center;
  }
</style>
