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

<template>
	
	<view>
		<view class="code-state" @tap="statePopup.open(props.bizType)">
			{{ props.list.find(i => {
				return i.value == props.bizType
			}).label }}
			<image src="/pageDevice/static/devIconImg/icon-arrow-down.svg" mode="scaleToFill" />
		</view>
	</view>
	
	<view>
		  <JSinglePopup :list="props.list" :title="props.title" ref="statePopup" @confirm="confirmState" />
	</view>
	
	
</template>

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


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

// 定义组件参数 
const props = defineProps({
	
	// 双向绑定
	bizType: { type: [Number, String] },
	// 搜索数据
	list: { type: Array },
	title: { type: String }
})

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

const statePopup = ref(null)

//按状态筛选
function confirmState(r){
	vdata.selected = r || { }
	emits('update:bizType', vdata.selected.value)
	emits('change', vdata.selected)
}
	
</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>