<!--
  组件功能： 设备通用页面
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/12/06 11:30
-->
<template>
  <JeepayBackground>
	  
	  <JeepayCustomNavbar bgDefaultColor="#fff" :title="props.navTitle" backCtrl="back" />
	
	<!-- 搜索 -->  
    <JSearchTitle :place="props.searchTitle" @click="go.toSearchPage(props.searchType, props.searchParams)">
      <template #right>
		<JeepayStateSelect v-model:state="vdata.searchData[props.searchStateField]" @change="refTable()"/>
      </template>
    </JSearchTitle>
	
	<!-- 数据列表 -->
    <JeepayTableList ref="codeTable" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData">
      <template #tableBody="{ record }">
		<DeviceCommonsRender :type="props.searchType" :record="record" />
      </template>
    </JeepayTableList>

	<!-- 底部固定按钮 -->
	<view class="list-footer">
		<view class="button-wrapper">
			<view class="store-name flex-center" hover-class="touch-hover" @tap="selectedStore">
			  {{ vdata.selectedStrore.storeName || '全部门店' }}
			  <image src="/pageDevice/static/devIconImg/icon-arrow-down.svg" mode="scaleToFill" />
			</view>
			<Button v-if="props.bottomBtnTitle" @tap="emit('bottomBtnClickFunc')">{{ props.bottomBtnTitle }}</Button>
		</view>
	</view>
  <JeepayBizinfoSelect :isShowAllBiz="true" ref="jeepayStoreSelect" />
  </JeepayBackground>
  
  <!-- 门店选择  -->
  
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import go from '@/commons/utils/go.js'
import DeviceCommonsRender from '@/pages/list/render/DeviceCommonsRender.vue'

onReachBottom(() => {})


const codeTable = ref() // 表格实例
const jeepayStoreSelect = ref()  // 获取门店选择弹窗实例
const bindPopup = ref() // 绑定新码的提示信息


// emit 父组件使用： v-model="val" 进行双向绑定。
const emit = defineEmits(['bottomBtnClickFunc'])


// 定义组件参数 
const props = defineProps({
	
	// 导航
	navTitle:  { type: String },
	
	// 搜索标题 
	searchTitle:  { type: String },
	
	// 搜索类型
	searchType: { type: String },
	
	// 搜索条件
	searchParams: { type: Object },
	
	// 搜索状态帅选字段
	searchStateField: { type: String, default: 'state' },
	
	// 底部按钮显示标题
	bottomBtnTitle: { type: String },
	
	// 搜索事件
	reqTableDataFunc: { type: Function },
	
})

const vdata = reactive({
	
	searchData: { }, // 搜索条件
	
	selectedStrore: { },  // 当前选择门店
	
})

const reqTableDataFunc = (params) => {
  return props.reqTableDataFunc(params)
}

// 选择门店
function selectedStore (){
	
  jeepayStoreSelect.value.open(vdata.selectedStrore).then((selected) => {
	  
	  // 当前选择的门店
	  vdata.selectedStrore = selected || { }
	  
	  vdata.searchData.storeId = vdata.selectedStrore.storeId
      refTable()
  })
}

function refTable(v){
	codeTable.value.refTable(v || true )
}
onMounted(()=>{
  vdata.searchData[props.searchStateField] = ""
})
defineExpose({refTable})
</script>

<style lang="scss" scoped>
.list-footer{
  height: 180rpx;
}

  .code-state {
    display: flex;
    align-items: center;
    margin-left: 40rpx;
    font-size: 30rpx;
    color: #222425;
    image {
      margin-left: 10rpx;
      width: 40rpx;
      height: 40rpx;
    }
  }

.store-name {
  position: absolute;
  top: -100rpx;
  left: 0;
  right: 0;
  height: 100rpx;
  font-size: 30rpx;
  background-color: #fff;
  border-top: 1rpx solid #ededed;
  border-bottom: 1rpx solid #ededed;
  background-color: rgba(252, 252, 252, 0.85);
  backdrop-filter: blur(20rpx);
  image {
    margin-left: 10rpx;
    width: 40rpx;
    height: 40rpx;
    transform: rotate(180deg);
  }
}
</style>
