<!--
  组件作用：  状态筛选器， 一般用作搜索栏右侧。 
  
  使用方法：
  
  
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/26 16:24
-->

<template>
	
	<view>
		<view class="code-state" @tap="statePopup.open(props.state)">
			{{ vdata.selected.label || '全部状态' }}
			<image src="/pageDevice/static/devIconImg/icon-arrow-down.svg" mode="scaleToFill" />
		</view>
	</view>
	
	<view>
		  <JSinglePopup :list="stateList" title="按设备状态筛选" ref="statePopup" @confirm="confirmState" />
	</view>
	
	
</template>

<script setup>
import { reactive, ref } from 'vue'


const emits = defineEmits(['update:state', 'change'])

// 定义组件参数 
const props = defineProps({
	
	// 双向绑定
	state: { type: [Number, String] },
	
})

const vdata = reactive({
	selected: {} , // 当前选择对象
})


const statePopup = ref(null)


const stateList = reactive([
  { label: '全部状态', value: '' },
  { label: '启用', value: '1' },
  { label: '禁用', value: '0' },
])


//按状态筛选
function confirmState(r){
	vdata.selected = r || { }
	emits('update:state', vdata.selected.value)
	emits('change', vdata.selected.value)
}
	
</script>

<style lang="scss" scoped>
  .code-state {
    display: flex;
    align-items: center;
    margin-left: 40rpx;
    font-size: 30rpx;
    color: #222425;
    image {
      margin-left: 10rpx;
      width: 40rpx;
      height: 40rpx;
    }
  }
 </style>