<template>
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
	  draggable
      width="1400px"
      @close="close"
      @keyup.enter.native="doSubmit"
      v-model="visible">
      <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
               label-width="100px" @submit.native.prevent>

		  <el-button  type="primary" :disabled="this.method === 'edit'"   @click="insertEvent" plain>
			  添加文件信息
		  </el-button>
		  <vxe-table
			  border
			  show-overflow
			  show-footer
			  :column-config="{resizable: true}"
			  ref="fileTable"
			  :key="tableKeyFile"
			  class="vxe-table-element"
			  :data="inputForm.fileList"
			  style=""
			  highlight-current-row
			  :edit-config="{trigger: 'click', mode: 'row', showStatus: true, autoClear: true, icon:'_'}">
			  <vxe-column min-width="200" title="文件类型" align="center" field="projectNumber" show-overflow="title">
				  <template #default="scope">
					  <el-input v-model="scope.row.projectNumber"></el-input>
				  </template>
			  </vxe-column>
			  <vxe-column min-width="200" title="文件描述" align="center" field="name">
				  <template #default="scope">
					  <el-input  v-model="scope.row.name"></el-input>
				  </template>
			  </vxe-column>
			  <vxe-table-column align="center" title="操作" width="100">
				  <template #default="scope">
					  <el-button type="danger" @click="removeEvent(scope.row,scope.$rowIndex)">删除</el-button>
				  </template>
			  </vxe-table-column>
		  </vxe-table>
      </el-form>
		<template #footer>
			<span class="dialog-footer">
			  <el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
			  <el-button type="primary" v-if="method != 'view'" @click="doSubmit()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
			</span>
		</template>
    </el-dialog>
  </div>
</template>

<script>
  // import ReimbursementTypeService from '@/api/sys/ReimbursementTypeService'
  // import OfficeService from '@/api/sys/OfficeService'
  export default {
    data () {
      return {
        disabled: false,
        title: '',
        method: '',
        visible: false,
        loading: false,
        inputForm: {
			fileList:[],
			parentId:'',
			id:''
        },
		  tableKeyFile:''
      }
    },
    // reimbursementTypeService: null,

    // OfficeService: null,
    created () {
      // this.reimbursementTypeService = new ReimbursementTypeService()
      // this.officeService = new OfficeService()
    },
    components: {

    },
    methods: {
      init (method, row) {
        this.method = method
        this.inputForm = {
			fileList:[]
        }
        if (method === 'add') {
        	console.log('row',row)
        	if (this.commonJS.isNotEmpty(row.id)){
				this.inputForm.parentId = row.id
			}else {
				this.inputForm.parentId = row.reportId
			}
          this.title = `添加项目文件`
        } else if (method === 'edit') {
        	this.inputForm.id=row.id
			this.inputForm.parentId = row.reportId
          this.title = '修改项目文件'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          if (method === 'edit') { // 修改或者查看
          	console.log('row',row)
            this.loading = true
            this.$refs.inputForm.resetFields()
			  if (this.commonJS.isEmpty(this.inputForm.fileList)){
				  this.inputForm.fileList = []
			  }
			  this.$refs.fileTable.insertAt(row)
            this.inputForm.fileList.push(row)

			  this.loading = false
          }
        })
      },
      // 表单提交
      doSubmit () {
		  this.close()
		  console.log('this.inputForm.fileList',this.inputForm.fileList)
		  this.$emit('getFile',this.inputForm.fileList)
      },
      close () {
        this.$refs.inputForm.resetFields()
        this.visible = false
      },
	  insertEvent(){
		  let d = {
			  projectNumber: '',
			  name: '',
			  parentId:this.inputForm.parentId
		  }
		  if (this.commonJS.isEmpty(this.inputForm.fileList)) {
			  this.inputForm.fileList = []
		  }
		  this.$refs.fileTable.insertAt(d)
		  this.inputForm.fileList.push(d)
		  this.tableKeyFile = Math.random()
		  console.log('this.inputForm.fileList',this.inputForm.fileList)
	  },
		removeEvent(row,rowIndex){
			this.$refs.fileTable.remove(row)
			this.inputForm.fileList.splice(rowIndex, 1)
		}
    }
  }
</script>
