<template>
	<view class="ems-site-selector">
		<uni-data-picker placeholder="请选择" popup-title="业态选择" :step-searh="true" :value="siteId" :clear-icon="false"
			:localdata="siteTypeOptions" :ellipsis="false" @change="handleChange">
		</uni-data-picker>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'

	export default {
		computed: {
			...mapGetters(['siteId', 'siteTypeOptions'])
		},
		methods: {
			handleChange(data) {
				const valueList = data?.detail?.value || []
				const siteObj = valueList[1]
				if (!siteObj || siteObj.value === undefined || siteObj.value === null || siteObj.value === this.siteId) return
				this.$store.dispatch('SetCurrentSiteId', siteObj.value)
				this.$emit('change', siteObj.value)
			}
		},
		created() {
			this.$store.dispatch('LoadSites')
		}
	}
</script>

<style lang="scss" scoped>
	.ems-site-selector {
		.uni-data-tree {
			::v-deep {
				.input-value {
					border: none;
					padding-left: 0;

					.selected-area {
						width: 90%;
						flex: none;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

						.selected-list {
							color: #fff;
						}
					}

					.text-color {
						color: #fff;
						font-size: 34rpx;
						line-height: 36rpx;
						font-weight: bolder;
					}

					.arrow-area {
						transform: rotate(-135deg);

						.input-arrow {
							border-color: #fff;
						}
					}
				}
			}
		}
	}
</style>
