<template>
	<view class="types">
		<block v-for="(item,index) in types" :key="index">
			<block v-if="values.includes(item.dictValue)">
				<view :class="getStatusClass(item.dictValue)">
					<text class="status-text">{{item.dictLabel}}</text>
				</view>
			</block>
		</block>
	</view>
</template>

<script>
	export default {
		name: "dict-type",
		props: ['types', 'type'],
		computed: {
			values() {
				if (this.type !== null && typeof this.type !== 'undefined') {
					return Array.isArray(this.type) ? this.type : [String(this.type)];
				} else {
					return [];
				}
			},
		},
		data() {
			return {

			};
		},
		methods: {
			getStatusClass(dictValue) {
				switch (dictValue) {
					case '1':
						return 'status primary'; 
					case '0':
					case '3':
					case '6':
					case '2':
						return 'status success'; 
					case '10':
					case '13':
						return 'status warn';
					case '14':
					case '12':
						return 'status gray';
					default:
						return 'status refuse'; 
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.status {
		position: relative;
		padding:5px 10px;
		border-radius: 0 8px 0 8px;
		&.primary {
			position: absolute;
			top:0px;
			right:0px;
			background-color: #E8F4FF;
			color: #1890FF;
			border: 1px solid #1890FF;
		}

		&.success {
			position: absolute;
			top:0px;
			right:0px;
			background-color: #E7FAF0;
			color: #71E2A3;
			border: 1px solid #71E2A3;
		}
		&.gray {
			position: absolute;
			top:0px;
			right:0px;
			background-color: #f4f4f5;
			color: #909399;
			border: 1px solid #e9e9eb;
		}
		&.warn {
			position: absolute;
			top:0px;
			right:0px;
			background-color: #FFF8E6;
			color: #FFBA00;
			border: 1px solid #FFBA00;
		}
		&.refuse {
			position: absolute;
			top:0px;
			right:0px;
			background-color: #FFEDED;
			color: #FF9292;
			border: 1px solid #FFDBDB;
		}
	}
</style>