<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
	  draggable
      width="800px"
      height="500px"
      @close="close"
      append-to-body
      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-row  :gutter="0">
					<el-col :span="24">
						<el-form-item label="创建时间" prop="contractDates">
							<el-date-picker
								placement="bottom-start"
								format="YYYY-MM-DD HH:mm:ss"
								value-format="YYYY-MM-DD HH:mm:ss"
								v-model="inputForm.contractDates"
								type="datetimerange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row  :gutter="0">
					<el-col :span="24">
						<el-form-item label="归档状态" prop="archivingStatus" :rules="[
							{required: true, message:'归档状态不能为空', trigger:'change'}
                   ]">
							<el-select v-model="inputForm.archivingStatus" placeholder="请选择" style="width:100%;" clearable multiple>
								<el-option
									v-for="item in $dictUtils.getDictList('online_status')"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form >
		<template #footer>
			<span class="dialog-footer">
			  <el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
			  <el-button  v-if="method === 'edit'" type="primary" icon="el-icon-circle-check" @click="doSubmit('save')">下载</el-button>
			</span>
		</template>
    </el-dialog>
  </div>
</template>

<script>
	import projectReportService from '@/api/cw/reportManagement/ProjectReportService'
	import moment from 'moment'

  export default {
    props: {
      businessId: {
        type: String,
        default: ''
      },
      formReadOnly: {
        type: Boolean,
        default: false
      },
      status: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
		  detailKey: '',
        title: '',
        method: '',
        loading: false,
		  inputForm: {
			  contractDates: [],
			  archivingStatus: []
		  },
        keyWatch: '',
        visible: false,
        tabName: ''
      }
    },
    created () {

    },
    computed: {
      bus: {
        get () {
          return this.businessId
        },
        set (val) {
          this.businessId = val
        }
      }
    },
    watch: {
      'keyWatch': {
        handler (newVal) {
          if (this.commonJS.isNotEmpty(this.bus)) {
            this.init('', this.bus)
          } else {
            this.$nextTick(() => {
              this.$refs.inputForm.resetFields()
            })
          }
        }
      }
    },
    components: {

    },
    methods: {
		init (method) {
			this.visible = true
			if (method === 'edit') {
				this.title = '归档信息导出'
				this.method = method
			}
			this.method = method
			this.inputForm = {
				contractDates: [],
				archivingStatus: []
			}
		},
      // 表单提交
      doSubmit (status) {
		  if (status === 'save') {
			  this.$refs['inputForm'].validate((valid) => {
				  if (valid) {
					  this.loading = true

					  let options = {
					  	filename: '归档一览表',
					  	sheetName: 'Export'
					  }
					  if (this.inputForm.contractDates) {
						  options.filename = moment(this.inputForm.contractDates[0]).format('YYYY-MM-DD')
							  + '至' + moment(this.inputForm.contractDates[1]).format('YYYY-MM-DD')
							  + options.filename
					  }
					  this.loading = true
					  projectReportService.archivedInfoExport({
					  	'itemType': '1',
					  	'tabType': '2022',
					  	...options,
					  	...this.inputForm
					  }).then((res) => {
					  	// 将二进制流文件写入excel表，以下为重要步骤
					  	this.$utils.downloadExcel(res, options.filename)
						  this.close()
					  	this.loading = false
					  }).catch(function (err) {
					  	this.loading = false
					  	if (err.response) {
					  		console.log(err.response)
					  	}
					  })
				  }
			  })
			  return
		  }
      },
		close () {
			this.inputForm = {
				contractDates: [],
				archivingStatus: []
			}
			this.$refs.inputForm.resetFields()
			this.visible = false
		},
    }
  }
</script>
<style scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
