<!--
  封装选择门店的通用组件
  支持上移效果 和 普通input两种方式；

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/04/06 10:14
-->
<template>
  <template v-if="props.textUpStyle">
    <jeepay-text-up :value="props.value" :placeholder="props.placeholder" @update:value="changeFunc">
      <template #suffix>
        <a-tooltip title="搜索" @click="() => jeepayModelMchStoreInfoListRef.show({storeId: props.value}) ">
          <search-outlined />
        </a-tooltip>
      </template>
    </jeepay-text-up>
  </template>
  <template v-else>
    <a-input :allowClear="true" :value="props.value" :placeholder="props.placeholder" :disabled="props.disabled" @change="changeFunc($event.target.value)">
      <template #suffix>
        <a-tooltip v-if="!props.disabled" title="搜索" @click="() => jeepayModelMchStoreInfoListRef.show({storeId: props.value}) ">
          <search-outlined />
        </a-tooltip>
      </template>
    </a-input>
  </template>
  
  <JeepayModelMchStoreInfoList
    ref="jeepayModelMchStoreInfoListRef"
    :storeIdAndName="storeIdAndName"
    :mchNo="mchNo"
    @selectFinishFunc="searchMchFinishFunc"
  />
</template>

<script lang="ts" setup>
import {ref, defineProps, defineEmits} from 'vue'

const jeepayModelMchStoreInfoListRef = ref()

// 定义组件的传入参数 
const props = defineProps({
    value: { type: [String, Number], default: null },
    placeholder: {type: String, default: ''},
    disabled: { type: Boolean, default: false },
    textUpStyle: { type: Boolean, default: false }, // 是否文字上移的效果
    storeIdAndName: { type: Boolean, default: false}, // 搜索时展示门店ID和门店名称
    mchNo: { type: String, default: ''}, // 商戶号
})

// 定义向父组件 通讯 func 
const emit = defineEmits(['update:value'])

// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。 
function changeFunc(value){
    emit('update:value', value)
}


// 选择商户 / 应用 完成后的操作
function searchMchFinishFunc(selectVal){
  changeFunc(selectVal[0])
  jeepayModelMchStoreInfoListRef.value.close()
}


</script>