<template>
	<div class="clearfix parentC">
		<div class="selectC" @click="vxeValue = true;">选择</div>
		<vxe-modal v-model="vxeValue" width="60%" height="70%" show-zoom resize transfer show-footer>
			<template #title>
				<span>选择数据</span>
			</template>
			<template #default>
				<by-table :propConfig="config" ref="form" style="margin-top: 10px;"></by-table>
			</template>
			<template #footer>
				<div class="btn">
					<el-button size="small" @click="vxeValue=false">取消</el-button>
					<el-button type="primary" size="small" @click="doConfirm">确定</el-button>
				</div>
			</template>
		</vxe-modal>
	</div>
</template>

<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	import api from "@/api/order";
	@Component
	export default class SelectKin extends Vue {
		vxeValue : any = false
		@Prop()
		propValue : any;
		@Prop()
		parentValue : any;
		@Prop()
		propConfig : any;

		config = {}
		created() {
			// console.log(this.getPropConfig());
		}
		// 打开弹窗
		openModal() {
			let data = (this as any).$lodash.cloneDeep(this.propValue);
			// console.log(this.parentValue);

			this.vxeValue = true;
		}
		// 确定仓库仓位
		doConfirm() {
			// let data : any = (this as any).$refs.form.getValue();
			// this.$emit('onChange', data);
			this.vxeValue = false;
		}
	}
</script>

<style scoped lang="scss">
	.parentC {
		display: flex;
		align-items: center;

		.inputC {
			float: left;
			width: calc(100% - 54px);
		}

		.selectC {
			float: left;
			margin-left: -10px;
			color: #fff;
			background-color: #0089ff;
			padding: 0 10px;
			border-radius: 12px;
			cursor: pointer;
		}
	}
</style>