<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      width="900px"
      @close="close"
      append-to-body
      @keyup.enter.native=""
      :visible.sync="visible">
      <vxe-table
        border="inner"
        show-overflow
        show-footer
        size="small"
        ref="baseTable"
        class="vxe-table-element"
        :data="dataList"
      >
        <vxe-table-column type="seq" width="50" title="序号" align="center"></vxe-table-column>
        <vxe-table-column min-width="300px" field="projectName" align="left" title="项目名称">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" @click="openProjectForm(scope.row.id)" >{{scope.row.projectName}}</el-link>
          </template>
        </vxe-table-column>
        <vxe-table-column width="250px" field="projectNumber" align="center" title="项目编号"></vxe-table-column>
      </vxe-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
      </span>
    </el-dialog>
    <ProjectForm ref="projectForm"></ProjectForm>
  </div>
</template>

<script>
  import ProjectForm from '@/views/modules/cw/projectRecords/ProjectRecordsForm'
  import ReimbursementApprovalService from '@/api/cw/reimbursementApproval/ReimbursementApprovalService'
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        dataList: ''
      }
    },
    reimbursementApprovalService: null,
    created () {
      this.reimbursementApprovalService = new ReimbursementApprovalService()
    },
    components: {
      ProjectForm
    },
    methods: {
      init (id) {
        this.method = 'view'
        this.title = '查看项目信息'
        this.visible = true
        this.dataList = []
        if (this.commonJS.isNotEmpty(id)) {
          this.list(id)
        }
      },
      async list (ids) {
        this.loading = true
        let resp = await this.reimbursementApprovalService.queryByProIds(ids)
        if (resp) {
          this.dataList = resp.data
        }
        this.loading = false
      },
      openProjectForm (id) {
        this.$refs.projectForm.init('view', id)
      },
      close () {
        this.dataList = []
        this.visible = false
      }
    }
  }
</script>
