<template>
	<view class="uni-flex u-col-center" style="background-color: #fff;">
		<status :status='status' style='font-size: 70rpx;'></status>
		<text :class="statusStyle(status)" style='font-size: 38rpx;margin-right: 15rpx;'>
			{{statusDesc(status) }}</text>
		<image style="width: 40rpx; height:40rpx" src="/static/icons/icons_edit.svg" v-show="allowEdit" @click="open">
		</image>
	</view>
	<status-edit :status='status' ref="statusEdit" @updateStatus="updateStatus"></status-edit>
</template>

<script>
	import status from '@/mycomponents/status/status.vue'
	import statusEdit from '@/mycomponents/status/statusEdit.vue'
	import {
		getInventoryStatusStyle,
		getInventoryStatusName
	} from '@/common/directory.js';

	export default {
		emits: ['updateStatus', 'onOpen'],
		components: {
			status,
			statusEdit
		},
		data() {
			return {

			};
		},
		// 此处定义传入的数据
		props: {
			status: {
				type: String,
				default: ""
			},
			allowEdit: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			open() {
				this.$refs.statusEdit.open('center')
				this.$emit("onOpen")
			},
			updateStatus(value) {
				this.$emit("updateStatus", value)
			},
			close() {
				this.$refs.popup.close()
			},
			statusStyle: function(val) {
				return getInventoryStatusStyle(val);
			},
			statusDesc: function(val) {
				return getInventoryStatusName(val);
			},
		}
	}
</script>

<style lang="scss">


</style>


<style>
</style>