<template>
	<el-dialog title="场地使用率" :visible.sync="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
		:close-on-press-escape="false">
		
		<div class="common-seach-wrap">
            <el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="起始时间">
                    <div class="block">
                        <span class="demonstration"></span>
                        <el-date-picker size="small" v-model="searchForm.create_time" type="daterange"
                            value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
                    </div>
                </el-form-item>
                
                <el-form-item>
                    <el-button size="small" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

			<div style="">
				<div style="text-align: center;">场地使用率</div>
				<div style="margin-top: 20px;display: flex; justify-content: center;">
					<el-progress type="circle" :percentage="percentage"></el-progress>
				</div>
			</div>
        </div>
		<div slot="footer" class="dialog-footer">
			<!-- <el-button @click="dialogFormVisible">取 消</el-button>
			<el-button type="primary" @click="addUser" :loading="loading">确 定</el-button> -->
		</div>
	</el-dialog>

</template>

<script>
import PorductApi from '@/api/product.js';
import Upload from '@/components/file/Upload';
import Uediter from '@/components/UE.vue';
import VenueApi from '@/api/venue.js';

export default {
	components: {
		Upload,
		Uediter,
	},
	data() {
		return {
			/*富文本框配置*/
			ueditor: {
				text: '',
				config: {
					initialFrameWidth: 400,
					initialFrameHeight: 500
				},
			},
			searchForm: {
				create_time: '',
				start_time: '',
				end_time: ''
			},
			/*左边长度*/
			formLabelWidth: '120px',
			/*是否显示*/
			dialogVisible: false,
			loading: false,
			/*是否上传图片*/
			isupload: false,
			model: {},
			percentage: 0
		};
	},
    props: ['open_data', 'dataform'],
	created() {
		this.model = this.dataform;
		this.dialogVisible = this.open_data;
		this.getData()
	},
	methods: {
		getData() {
			const Params = this.searchForm
			Params.room_id = this.model.id

			if (Params.start_time && Params.end_time) {
				Params.start_time = Params.start_time
				Params.end_time = Params.end_time
			}

			VenueApi.groundRoomRate(Params, true).then(res => {
				console.log("🚀 ~ res:", res)
				this.percentage = res.data.rate
			}).catch(error => {
				console.log("🚀 ~ error:", error)
			})	
		},
		
		/*关闭弹窗*/
		dialogFormVisible(e) {
			if (e) {
				this.$emit('closeDialog', {
					type: 'success',
					openDialog: false
				})
			} else {
				this.$emit('closeDialog', {
					type: 'error',
					openDialog: false
				})
			}
		},

		onSubmit() {
			let self = this;
			self.loading = true;
			self.searchForm.start_time = self.searchForm.create_time[0]
			self.searchForm.end_time = self.searchForm.create_time[1]
			self.getData();
		}
	}
};
</script>

<style>
.img {
	margin-top: 10px;
}
</style>
