<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('accountPer.merchantNameLabel')"
            :placeholder="$t('accountPer.merchantNamePlaceholder')" />
          <van-field v-model="usernameText" is-link readonly name="username"
            :label="$t('accountPer.merchantAccountLabel')" :placeholder="$t('accountPer.merchantAccountPlaceholder')"
            @click="show = true" />
          <!-- 操作 -->
          <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('accountPer.clickQuery') }}</van-button>
          </van-row>
        </van-form>
      </div>
    </van-popup>
    <van-popup v-model:show="show" round position="bottom">
      <van-cascader v-model="username" :title="$t('accountPer.merchantAccountPlaceholder')" :options="options"
        @close="show = false" @finish="onFinish" />
    </van-popup>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import { showFailToast } from 'vant';
import { getAdminList } from "../../service/accountPar/index";
import { getLoginUser, styleUrl } from "../../common/js/utils";

export default {
  name: "accountPerSearch",
  components: {},
  setup(prop, context) {
    const user = getLoginUser();
    const sheetShow = ref(false);
    const show = ref(false);
    const usernameText = ref("");
    const username = ref("");
    const name = ref("");
    const options = ref([]);
    const onFinish = ({ selectedOptions }) => {
      show.value = false;
      username.value = selectedOptions[0].value;
      usernameText.value = selectedOptions[0].text;
    };
    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      styleUrl('accountPer')
      getSysRoleListFun();
    });
    // 获取角色下拉列表
    const getSysRoleListFun = async () => {
      const { data } = await getAdminList({ adminId: user.id });
      if (data.code === "00000") {
        options.value = data.data.map((item) => {
          return { text: item.username, value: item.username };
        });
      } else {
        showFailToast(data.message);
      }
    };
    const showSearch = () => {
      sheetShow.value = true;
    };
    // 提交搜索表单触发搜索
    const onSubmit = () => {
      const searchParam = {};
      if (name.value !== "") {
        searchParam.name = name.value;
      }
      if (username.value !== "") {
        searchParam.username = username.value;
      }
      context.emit("search", searchParam);
      sheetShow.value = false;
    };
    return {
      sheetShow,
      show,
      username,
      usernameText,
      name,
      options,
      onFinish,
      showSearch,
      onSubmit,
    };
  },
};
</script>

<style lang="less" scoped></style>
