<template>
  <ElForm ref="formRef" :rules="rules" :model="formModel">
    <CustomizeFormItem label="对公户名" class="form-item" prop="tp_name">
      <syDialogInput
        class="w-full"
        v-model:value="formModel.tp_name"
        placeholder="请输入对公户名"
      ></syDialogInput>
    </CustomizeFormItem>
    <CustomizeFormItem label="对公账户" class="form-item" prop="bank_card">
      <syDialogInput
        class="w-full"
        v-model:value="formModel.bank_card"
        placeholder="请输入对公银行账户"
      ></syDialogInput>
    </CustomizeFormItem>
    <!-- 调整部分 -->
    <CustomizeFormItem label="开户银行" class="form-item" prop="bank_name">
      <syAutoComplete
        class="w-full"
        v-model="formModel.bank_name"
        :fetch-suggestions="querySearch"
        placeholder="请输入开户银行"
      ></syAutoComplete>
    </CustomizeFormItem>
    <!-- 调整部分 -->
    <CustomizeFormItem label="开户城市" class="form-item" prop="city">
      <syDialogInput
        class="w-full"
        v-model:value="formModel.city"
        placeholder="请输入开户城市"
      ></syDialogInput>
    </CustomizeFormItem>
    <CustomizeFormItem label="开户支行" class="form-item" prop="sub_branch">
      <syDialogInput
        class="w-full"
        v-model:value="formModel.sub_branch"
        placeholder="请输入开户支行"
      ></syDialogInput>
    </CustomizeFormItem>
  </ElForm>
</template>
<script lang="ts" setup>
import { ElForm } from "element-plus";
import { syDialogInput, syAutoComplete, GO_URLS } from "cqk-sy-ui";
import { reactive, ref, watch, toRaw, onMounted } from "vue";
import CustomizeFormItem from "@/components/Form/CustomizeFormItem.vue";
import { $ajax } from "@/service";

const formRef = ref<InstanceType<typeof ElForm>>();

const formModel = reactive({
  tp_name: "", // 对公户名
  bank_card: "", // 对公银行账号
  bank_name: "", // 开户银行
  city: "", //` 开户城市
  sub_branch: "", //开户支行
});

const rules = reactive({
  tp_name: [{ required: true, message: "对公户名不可为空" }], // 对公户名
  bank_card: [{ required: true, message: "对公银行账户不可为空" }], // 对公银行账号
  bank_name: [{ required: true, message: "开户银行不可为空" }], // 开户银行
  city: [{ required: true, message: "开户城市不可为空" }], //` 开户城市
  sub_branch: [{ required: true, message: "开户支行不可为空" }], //开户支行
});

const emit = defineEmits(["update"]);

const BankList = ref<any[]>([]);

onMounted(async () => {
  const res = await $ajax({
    type: "get",
    url: GO_URLS.banks,
  });
  if (res) {
    for (let index = 0; index < res.data.banks.length; index++) {
      const element = res.data.banks[index];
      BankList.value.push({ value: element });
    }
  }
});

function querySearch(queryString: string, cb: any) {
  var results = queryString
    ? BankList.value.filter(createFilter2(queryString))
    : BankList.value;
  // 调用 callback 返回建议列表的数据
  cb(results);
}

function createFilter2(queryString: any) {
  return (BankList: any) => {
    return (
      BankList.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
}

watch(formModel, () => {
  emit("update", {
    value: toRaw(formModel),
    isValid: Object.keys(formModel).every((key) => {
      return (formModel as any)[key] !== "";
    }),
  });
});
</script>

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