<template>
  <div class="step-two">
    <p class="title">请提交您的实名认证信息：</p>
    <el-form
      label-position="right"
      label-width="120px"
      :model="account"
      class="form"
    >
      <el-form-item label="对公户名" class="form-item">
        <el-input
          v-model="account.tp_name"
          placeholder="请输入对公户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="对公账户" class="form-item">
        <el-input
          v-model="account.bank_card"
          placeholder="请输入对公银行账户"
        ></el-input>
      </el-form-item>
      <!-- 调整部分 -->
      <el-form-item label="开户银行" class="form-item">
        <el-autocomplete
          class="inline-input"
          v-model="account.bank_name"
          :fetch-suggestions="querySearch"
          placeholder="请输入开户银行"
        ></el-autocomplete>
      </el-form-item>
      <!-- 调整部分 -->
      <el-form-item label="开户城市" class="form-item">
        <el-input
          v-model="account.city"
          placeholder="请输入开户城市"
        ></el-input>
      </el-form-item>
      <el-form-item label="开户支行" class="form-item">
        <el-input
          v-model="account.sub_branch"
          placeholder="请输入开户支行"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-button class="confirm-btn" type="primary" @click="confirm()"
      >提交申请</el-button
    >
  </div>
</template>
<script>
import Vue from "vue";
import { enterBank } from "./Api.service";
import { GO_URLS } from "@/config/URLS";
export default Vue.extend({
  data() {
    return {
      BankList: [], // 可选银行列表
      account: {
        tp_name: "", // 对公户名
        bank_card: "", // 对公银行账号
        bank_name: "", // 开户银行
        city: "", //` 开户城市
        sub_branch: "", //开户支行
      },
    };
  },
  mounted() {
    this.getBanklist(); // 获取开户银行列表
  },
  methods: {
    // 获取开户银行列表
    async getBanklist() {
      const res = await this.$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];
          this.BankList.push({ value: element });
        }
      }
    },
    // 过滤
    createFilter2(queryString) {
      return (BankList) => {
        return (
          BankList.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    // 搜索查询
    querySearch(queryString, cb) {
      var BankList = this.BankList;
      var results = queryString
        ? BankList.filter(this.createFilter2(queryString))
        : BankList;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 提交数据
    async confirm() {
      if (this.account.tp_name.trim() === "") {
        this.$message("对公户名不可为空");
        return;
      } else if (this.account.bank_card.trim() === "") {
        this.$message("对公银行账户不可为空");
        return;
      } else if (this.account.bank_name.trim() === "") {
        this.$message("开户银行不可为空");
        return;
      } else if (this.account.city.trim() === "") {
        this.$message("开户城市不可为空");
        return;
      } else if (this.account.sub_branch.trim() === "") {
        this.$message("开户支行不可为空");
        return;
      }
      const res = await enterBank(this.account);
      if (res && res.code === 200) {
        this.$message({
          message: "企业银行账户信息录入成功。",
          type: "success",
        });
        this.$emit("success");
      }
    },
  },
});
</script>
<style scoped lang="less">
.title {
  margin-top: 50px;
  margin-left: 47px;
  font-size: 20px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  color: rgba(53, 53, 53, 1);
  line-height: 40px;
}
.form {
  width: 900px;
}
.form .el-input {
  width: 610px;
}
.form-item {
  margin-bottom: 28px;
}

.confirm-btn {
  margin-top: 10px;
  margin-left: 50px;
}
</style>
<style>
.step-two .el-form-item__label {
  margin-right: 21px;
}
.step-two .el-cascader,
.step-two .el-autocomplete {
  width: 610px;
}
.step-two-cascader > ul::-webkit-scrollbar {
  background: #e8e9ee;
  height: 5px;
  width: 5px;
}
.step-two-cascader > ul::-webkit-scrollbar-thumb {
  border-radius: 50px;
  background: rgba(144, 147, 153, 0.3);
}
</style>


