<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="用户姓名"
            :placeholder="'请输入用户姓名'"
          />
          <van-field
            v-model="uesrName"
            name="uesrName"
            label="用户登录名"
            :placeholder="'请输入用户登录名'"
          />
          <!-- 操作 -->
          <van-row justify="space-around" style="padding: 1em;">
            <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em;" native-type="submit">点击查询</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 uesrName = ref('');
    // 提交搜索表单触发搜索
    const onSubmit = () => {
      const searchParam = {};
      searchParam.name = name.value;
      searchParam.uesrName = uesrName.value;
      context.emit('search', searchParam);
      sheetShow.value = false;
    }
    return {
      sheetShow,
      showSearch,
      name,
      uesrName,
      onSubmit
    };
  },
};
</script>

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