<template>
  <div>
    <el-dialog
      title="选择发票"
      :close-on-click-modal="false"
	  draggable
      width="1100px"
      height="500px"
      @close="close()"
      append-to-body
      v-model="visible">
      <div style="height: calc(100% - 80px);">
		  <el-form :inline="true"
				   class="query-form m-b-10"
				   ref="searchForm"
				   :model="searchForm"
				   @keyup.enter.native="list()"
				   @submit.native.prevent>
			  <!-- 搜索框-->
			  <el-row :gutter="0">
				  <el-form-item prop="no" label="发票申请编号">
					  <el-input v-model="searchForm.no" placeholder="请输入发票申请编号" clearable></el-input>
				  </el-form-item>
				  <el-form-item prop="number" label="发票号">
					  <el-input v-model="searchForm.number" placeholder="请输入发票号" clearable></el-input>
				  </el-form-item>
				  <!--        <el-form-item prop="programName" label="项目名称">-->
				  <!--          <el-input  v-model="searchForm.programName" placeholder="请输入项目名称" clearable @clear="clearProgram">-->
				  <!--            <el-button slot="append" @click="openProgramPageForm()" icon="el-icon-search"></el-button>-->
				  <!--          </el-input>-->
				  <!--        </el-form-item>-->
				  <el-form-item  prop="billingDateList" label="开票日期">
					  <el-date-picker
						  @change="changeBillingDateList"
						  v-model="searchForm.billingDateList"
						  type="daterange"
						  value-format="YYYY-MM-DD"
						  range-separator="至"
						  style="width: 100%  "
						  start-placeholder="开始日期"
						  end-placeholder="结束日期"
						  placement="bottom-start"
						  clearabl>
					  </el-date-picker>
				  </el-form-item>
				  <el-form-item>
					  <el-button type="primary" @click="list()" icon="el-icon-search">查询</el-button>
					  <el-button @click="resetSearch()" icon="el-icon-refresh-right">重置</el-button>
				  </el-form-item>
			  </el-row>
		  </el-form>
		  <vxe-table
			  border="inner"
			  auto-resize
			  resizable
			  :loading="loading"
			  ref="invoiceTable"
			  show-header-overflow
			  show-overflow
			  highlight-hover-row
			  :menu-config="{}"
			  @sort-change="sortChangeHandle"
			  :export-config="{
                    remote: true,
                    filename: `兴光会计发票数据${moment(new Date()).format('YYYY-MM-DD')}`,
                    sheetName: `兴光会计发票数据${moment(new Date()).format('YYYY-MM-DD')}`,
                    exportMethod: exportMethod,
                    types: ['xls'],
                    modes: ['current', 'selected', 'all']
                  }"
			  :sort-config="{remote:true}"
			  :data="dataList"
			  :checkbox-config="{}">
			  <vxe-column type="seq" width="60" title="序号"></vxe-column>
			  <vxe-column type="radio" width="60px"></vxe-column>
			  <vxe-column min-width="150" title="发票申请编号" align="center" field="no"></vxe-column>
			  <vxe-column min-width="150" title="发票金额" align="center" field="account"></vxe-column>
			  <vxe-column min-width="150" title="实际开票单位" align="center" field="billingWorkplaceReal"></vxe-column>
			  <vxe-column min-width="150" title="创建人" align="center" field="createName"></vxe-column>
			  <vxe-column min-width="120" title="开票日期" align="center" field="billingDate"></vxe-column>

		  </vxe-table>
        <vxe-pager
          background
          :current-page="tablePage.currentPage"
          :page-size="tablePage.pageSize"
          :total="tablePage.total"
          :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
          @page-change="currentChangeHandle">
        </vxe-pager>
      </div>
		<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="getProject()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
			</span>
		</template>
    </el-dialog>
  </div>
</template>

<script>
	import financeInvoiceService from '@/api/cw/invoice/CwFinanceInvoiceService'
	import projectReportService from '@/api/cw/reportManagement/ProjectReportService'
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        tablePage: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          orders: []
        },
        dataList: [],
        searchForm: {
			no: '',
          number: '',
			billingDateList: [],
          status: '',
			programId:'',
			id:''
        },
		  id:'',
		  projectId:''
      }
    },
    created () {
    },
    components: {
    },
    methods: {
      init (projectId,id) {
      	console.log('id',id)
        this.visible = true
		  this.id = id
		  this.projectId = projectId
        this.list()

      },
      // 表单提交
      getProject () {
        let row = this.$refs.invoiceTable.getRadioRecord()
		  let total = this.tablePage.total-1
        if (this.commonJS.isEmpty(row)) {
          this.$message.error('请选择一条数据')
          return
        }
		  this.close()
		  this.$emit('getInvoice', row,total)

      },
      list () {
        this.loading = true
        // this.searchForm.createId = this.$store.state.user.id
        this.searchForm.status = '5'
        this.searchForm.programId = this.projectId
		  this.searchForm.id = this.id
		  if (!this.commonJS.isEmpty(this.searchForm.billingDateList)) {
			  if (!this.commonJS.isEmpty(this.searchForm.billingDateList[0]) && !this.commonJS.isEmpty(this.searchForm.billingDateList[1])) {
				  this.searchForm.billingDateBegin = this.searchForm.billingDateList[0]
				  this.searchForm.billingDateEnd = this.searchForm.billingDateList[1]
			  }
		  } else {
			  this.searchForm.billingDateBegin = ''
			  this.searchForm.billingDateEnd = ''
		  }
		  financeInvoiceService.listByProgramId({
			  'current': this.tablePage.currentPage,
			  'size': this.tablePage.pageSize,
			  'orders': this.tablePage.orders,
			  ...this.searchForm,
		  }).then((data) => {
			  console.log('data', data.records)
			  this.dataList = data.records
			  this.tablePage.total = data.total
			  this.loading = false
		  })
      },
      // 当前页
      currentChangeHandle ({currentPage, pageSize}) {
        this.tablePage.currentPage = currentPage
        this.tablePage.pageSize = pageSize
        this.list()
      },
      resetSearch () {
        this.$refs.searchForm.resetFields()
        this.list()
      },
      close () {
        this.$refs.searchForm.resetFields()
        this.visible = false
      }
    }
  }
</script>
<style scoped>
  /deep/ .el-dialog__body {
    padding-top: 0px;
    padding-bottom: 15px;
  }
</style>
