<template>
  <!-- 商户管理 - 搜索弹窗 -->
  <div class="codeSearch flex-col">
    <van-popup v-model:show="sheetShow" round class="codeSearchPopup">
      <div class="content">
        <van-form @submit="onSubmit">
          <van-field
            v-model="name"
            name="name"
            :label="$t('merchantManage.userNameLabel')"
            :placeholder="$t('merchantManage.userNamePlaceholder')"
          />
          <van-field
            v-model="userName"
            name="userName"
            :label="$t('merchantManage.userLoginNameLabel')"
            :placeholder="$t('merchantManage.userLoginNamePlaceholder')"
          />
          <!-- 操作 -->
          <van-row justify="space-around" style="padding: 1em;">
            <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em;" native-type="submit">{{$t('merchantManage.clickQuery')}}</van-button>
          </van-row>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'merchantSearch',
  components: {},
  setup(prop, context) {
    const sheetShow = ref(false);
    const showSearch = () => { sheetShow.value = true; };
    const name = ref('');
    const userName = ref('');
    // 提交搜索表单触发搜索
    const onSubmit = () => {
      const searchParam = {};
      searchParam.name = name.value;
      searchParam.userName = userName.value;
      context.emit('search', searchParam);
      sheetShow.value = false;
    }
    return {
      sheetShow,
      showSearch,
      name,
      userName,
      onSubmit
    };
  },
};
</script>

<style lang="less" scoped>
.codeSearch {
  width: 100%;
  /deep/ .codeSearchPopup { width: 90%; }
  .content { padding-top: 1em; }
  .field .van-field__label { width: auto; }
}
</style>
