<template>
  <div class="select_bank">
    <!-- 银行 -->
    <el-select v-model="bankInstId" placeholder="请选择银行，可搜索" style="width: 200px;" filterable remote
      :remote-method="remoteGetBank" :loading="loading" remote-show-suffix @change="bankChange" :disabled="!province">
      <el-option v-for="item in bankList" :key="item.bankAliasCode" :label="item.bankAlias" :value="item.bankCode" />
    </el-select>
    <!-- 支行 -->
    <el-select v-model="bankBranchCode" placeholder="请选择支行" style="width: 200px;" :disabled="!bankInstId"
      @change="bankBranchChange">
      <el-option v-for="item in bankBranchList" :key="item.bank_branch_id" :label="item.bank_branch_name"
        :value="item.bank_branch_id"></el-option>
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { getBankInfo, getBankBranchList } from "@/api/common";

const loading = ref(false)
const bankNameValue = ref('')

const props = defineProps({
  province: {
    type: String,
    default: ''
  },
  city: {
    type: String,
    default: ''
  },
  cityCode: {
    type: String,
    default: ''
  }
})

watch(() => props.cityCode, async (newValue, oldValue) => {
  try {
    // console.log('watch.props.cityCode===', `newValue=${newValue},oldValue=${oldValue}`);
    await getBankInfoAjax()
    if (newValue && newValue !== undefined) {
      // 监听银行code变化
      watch(bankInstId, (n, o) => {
        if (n !== undefined && n) {
          bankChange(n)
        }
      }, {
        immediate: true // 可选：初始化立即执行，验证是否监听到初始值
      })
    }
  } catch (error) {
    console.log(error);
  }
})

const bankList = ref<Array<{ id: string; bankAlias: string, bankCode: string, bankAliasCode: string, accountBank: string }>>([]);

const bankInstId = defineModel('bankInstId', {
  type: String,
  default: "",
});

const bankName = defineModel('bankName', {
  type: String,
  default: "",
})

// 选择银行
function bankChange(e: any) {
  let obj = bankList.value.find(item => item.bankCode == e)
  if (obj && obj.id) {
    bankName.value = obj.accountBank
    bankInstId.value = obj.bankCode
    getBankBranchListAjax(obj.bankAliasCode)
  }
}

// 支行开户行编号 bankCode
const bankBranchCode = defineModel('bankBranchCode', {
  type: String,
  default: "",
})

// 支行开户行行别名称 branchName
const bankBranchName = defineModel('bankBranchName', {
  type: String,
  default: "",
})

// 选择支行
function bankBranchChange(e: string) {
  let obj = bankBranchList.value.find(item => item.bank_branch_id == e)
  if (obj && obj.bank_branch_id) {
    bankBranchName.value = obj.bank_branch_name
  }
}

// 支行列表
const bankBranchList = ref<Array<{ bank_branch_id: string; bank_branch_name: string }>>([]);
async function getBankBranchListAjax(bankAliasCode: string) {
  try {
    const res: any = await getBankBranchList({
      bankAliceCode: bankAliasCode,
      cityCode: props.cityCode
    })
    bankBranchList.value = res.data
  } catch (error) {
    console.log('', error);
  }
}

// 远程搜索
function remoteGetBank(query: string) {
  if (query) {
    bankNameValue.value = query
    getBankInfoAjax()
  }
}

// 获取银行列表
async function getBankInfoAjax() {
  try {
    loading.value = true
    const res: any = await getBankInfo({
      page: 1,
      size: 100,
      bankName: bankNameValue.value
    });
    bankList.value = res.records || [];
  } catch (error) {
    console.log(error);
  }
  loading.value = false
}
</script>

<style scoped lang="scss">
.select_bank {
  display: flex;
  align-items: center;
  gap: 14px;
}
</style>