<template>
	<view>
		<uni-row>
			<view v-if="isEtops">
				<uni-icons style="float: left; padding-right: 4px;" custom-prefix="iconfont" type="icon-fleetEtops"
					size="16"></uni-icons>
			</view>
			<view style="padding-top: 2px;">
				<view v-if="typename == 'MMSG'">
					<view v-if="priority >= 0" class="background_mmsg text_align" :class="addclass(priority)">M</view>
				</view>
				<view v-if="typename == 'SMT'">
					<view v-if="priority >= 0" class="background_mmo text_align" :class="addclass(priority)">M</view>
				</view>
				<view v-if="typename == 'MMO'">
					<view v-if="priority >= 0" class="background_mmo text_align" :class="addclass(priority)">M</view>
				</view>
				<view v-if="typename == 'Service'">
					<view v-if="priority >= 0" class="background_ser text_align" :class="addclass(priority)">
						<view class="background_ser_font">N</view>
					</view>
				</view>
				<view v-if="typename == 'System'">
					<view v-if="priority >= 0" class="background_sys text_align" :class="addclass(priority)">
						<view class="background_sys1 " :class="addclass(priority)">
							<view class="background_ser_font1">N</view>
						</view>
					</view>
					<view v-else> -- </view>
				</view>

				<view v-if="typename == 'FDE'">
					<view v-if="priority> 0 ">
						<uni-icons v-if="priority == 1 " custom-prefix="iconfont" type="icon-jibie1" size="18"
							color="#fdd000"></uni-icons>
						<uni-icons v-if="priority == 2 " custom-prefix="iconfont" type="icon-jibie2" size="18"
							color="#FF9900"></uni-icons>
						<uni-icons v-if="priority == 3 " custom-prefix="iconfont" type="icon-jibie3" size="18"
							color="#E60000"></uni-icons>
					</view>
					<view v-else> -- </view>

				</view>
				<view v-if="typename == 'Notice'">
					<uni-icons custom-prefix="iconfont" type="icon-yujing" size="18"
						:color="addclassNotice(priority)"></uni-icons>

				</view>
			</view>

		</uni-row>
	</view>

</template>

<script>
	export default {
		name: 'priorityIcon',
		data() {
			return {
				//typename : 'FDE',
				//priority : '1',			
			}
		},
		props: {
			isEtops: {
				type: Number,
				default: 0,
			},
			typename: {
				type: String,
				default: '',
			},
			priority: {
				type: Number,
				default: 0,
			},

		},
		methods: {
			//根据级别不同切换不同的背景
			addclass(i) {
				switch (i) {
					case 0:
						return 'background_color';
					case 1:
						return 'background_color1';
					case 2:
						return 'background_color2';
					case 3:
						return 'background_color3';
				}
			},

			//铃铛不同颜色
			addclassNotice(i) {
				switch (i) {
					case 0:
						return '#D7D7D7';
					case 1:
						return '#fdd000';
					case 2:
						return '#FF9900';
					case 3:
						return '#E60000';
				}
			},


		},
		created() {

		}
	}
</script>

<style>
	.background_mmsg {
		float: left;
		height: 30rpx;
		width: 30rpx;
		/* margin-left: 5px; */
		line-height: 30rpx;

	}

	.text_align {
		color: #ffffff;
		text-align: center;
	}

	.background_sys {
		float: left;
		height: 32rpx;
		width: 32rpx;
		/* margin-left: 5px; */
		/* margin-top: 10rpx; */
		line-height: 34rpx;
		border-radius: 50%;
		display: block;

	}

	.background_sys1 {
		top: 6px;
		left: 2px;
		position: relative;
		float: left;
		height: 24rpx;
		width: 24rpx;
		background-color: #FF9900;
		transform: rotate(45deg);
		line-height: 30rpx;
		/* //top: -1px;
		//transform: rotate(-45deg); */

	}

	.background_ser_font1 {
		position: relative;
		top: -2px;
		left: -1px;
		transform: rotate(-45deg);
	}

	.background_ser {
		transform: rotate(45deg);
		float: left;
		height: 30rpx;
		width: 30rpx;
		/* margin-left: 6px;*/
		margin-top: 10rpx;
		line-height: 30rpx;
	}

	.background_ser_font {
		transform: rotate(-45deg);
	}

	/* //卡片背景 */
	.background_color0 {
		background-color: #ddf1ff;
	}

	/* //等级高低背景颜色不一致 */
	.background_color {
		background-color: #D7D7D7;
	}

	.background_color1 {
		background-color: #fdd000;
	}

	.background_color2 {
		background: #FF9900; 
	}

	.background_color3 {
		background: #E60000;
	}

	.background_mmo {
		float: left;
		height: 32rpx;
		width: 32rpx;
		/* margin-left: 5px;
		margin-top: 14rpx; */
		line-height: 30rpx;
		border-radius: 50%
	}
</style>