FastBee/APP/pagesA/home/device/drag/components/mulStatusControl1.vue

<template>
	<view class="mul-status-control1"
		:style="{ 'background-color': backColor,'marginTop':marginTop+'px','marginBottom':marginBottom+'px' }">

		<view class="name">
			<span class="label" :style="{ 'color': nameColor}">{{templateName}}</span>
			<view class="tab" v-if="value.isReadonly === 1">
				<image style="width: 16px;height: 16px;" src="/static/read.png"></image>
			</view>
		</view>
		<view class="mul-status">
			<u-grid :col="rowNum">
				<u-grid-item style="margin: 10rpx 0" v-for="(item,index) in enumList" :key="index">
					<view v-if="onValue === index" class="button" @click="change(index)"
						:style="{'fontSize': fontSize+'px', 'lineHeight':figureHeight+'px','borderRadius':borderRadius+'px','color':noColor,'backgroundColor':noBackColor}">
						<span>{{item.text}}</span>
					</view>
					<view v-else class="button" @click="change(index)"
						:style="{'fontSize': fontSize+'px', 'lineHeight':figureHeight+'px','borderRadius':borderRadius+'px','color':offColor,'backgroundColor':offBackColor}">
						<span>{{item.text}}</span>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		name: "mulStatusControl1",
		props: {
			marginTop: {
				type: Number,
				default: 0
			},
			marginBottom: {
				type: Number,
				default: 0
			},
			rowNum: {
				type: Number,
				default: 4
			},
			fontSize: {
				type: Number,
				default: 14
			},
			figureHeight: {
				type: Number,
				default: 30
			},
			borderRadius: {
				type: Number,
				default: 15
			},
			backColor: {
				type: String,
				default: "rgba(255, 255, 255, 1)"
			},
			nameColor: {
				type: String,
				default: "rgba(51, 51, 51, 1)"
			},
			noColor: {
				type: String,
				default: "rgba(255, 255, 255, 1)"
			},
			offColor: {
				type: String,
				default: "rgba(51, 51, 51, 1)"
			},
			noBackColor: {
				type: String,
				default: "rgba(233, 30, 99, 1)"
			},
			offBackColor: {
				type: String,
				default: "rgba(238, 238, 238, 1)"
			},
			templateName: {
				type: String,
				default: "多状态控制1"
			},
			enumList: {
				type: Array,
				default: () => [{
						"text": "遥控学习",
						"value": "FFXX01"
					},
					{
						"text": "遥控清码",
						"value": "FFXX02"
					},
					{
						"text": "打开开关",
						"value": "FFXX03"
					},
					{
						"text": "关闭开关",
						"value": "FFXX04"
					},
					{
						"text": "暂停",
						"value": "FFXX05"
					},
					{
						"text": "锁定",
						"value": "FFXX06"
					}
				]
			},
			value: {
				type: Object,
				require: true
			},
			device: {
				type: Object,
				require: true
			}
		},
		data() {
			return {
				onValue: 1
			};
		},
		created() {
			this.init()
		},
		watch: {
			value: {
				handler(newVal) {
					this.init()
				},
				deep: true
			}
		},
		methods: {
			init() {

				this.onValue = this.value.value
			},
			change(index) {
				if (this.value.isReadonly === 1)
					return;
				let title = '';
				if (this.device.status !== 3 && this.device.isShadow !== 1) {

					if (this.device.status === 1) {
						title = this.$tt('variable.041-8');
					} else if (this.device.status === 2) {
						title = this.$tt('variable.041-9');
					} else {
						title = this.$tt('variable.041-10');
					}
					uni.$u.toast(title);
					return;
				}
				this.onValue = index
				const value = this.onValue;
				const item = this.value
				this.$emit('send-Service', value, item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mul-status-control1 {
		display: flex;
		padding: 30rpx;
		// border-radius: 20rpx;
		justify-content: space-between;
		align-items: center;
		position: relative;



		.name {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			width: 20%;

			.label {
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				text-overflow: ellipsis;
			}

			.tab {
				position: absolute;
				top: 0;
				right: 0rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 40rpx;
				width: 40rpx;
			}
		}

		.mul-status {
			//margin: 20px;
			width: 80%;

			.button {
				width: 60%;
				display: flex;
				justify-content: center;
				white-space: nowrap;
				align-items: center;
				overflow: hidden;
				padding: 0 10px
			}
		}
	}
</style>