<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';
import { styleUrl } from "../../common/js/utils";

export default {
  name: 'merchantSearch',
  components: {},
  setup(prop, context) {
    const sheetShow = ref(false);
    const showSearch = () => { sheetShow.value = true; };
    const name = ref('');
    const userName = ref('');
    // 加载样式
    styleUrl('merchantManage');
    // 提交搜索表单触发搜索
    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>
