<template>
  <div class="step-two">
    <p class="title">请提交您的实名认证信息：</p>
    <el-form
      label-position="right"
      label-width="120px"
      ref="form"
      :rules="rules"
      :model="account"
      class="form-step2"
    >
      <el-form-item
        label="对公户名"
        class="form-item"
        prop="tp_name"
        :error="errors.tp_name"
      >
        <syDialogInput
          v-model:value="account.tp_name"
          placeholder="请输入对公户名"
        ></syDialogInput>
      </el-form-item>
      <el-form-item
        label="对公账户"
        class="form-item"
        prop="bank_card"
        :error="errors.bank_card"
      >
        <syDialogInput
          v-model:value="account.bank_card"
          placeholder="请输入对公银行账户"
        ></syDialogInput>
      </el-form-item>
      <!-- 调整部分 -->
      <el-form-item
        label="开户银行"
        class="form-item"
        prop="bank_name"
        :error="errors.bank_name"
      >
        <syAutoComplete
          v-model="account.bank_name"
          :fetch-suggestions="querySearch"
          placeholder="请输入开户银行"
        ></syAutoComplete>
      </el-form-item>
      <!-- 调整部分 -->
      <el-form-item
        label="开户城市"
        class="form-item"
        prop="city"
        :error="errors.city"
      >
        <syDialogInput
          v-model:value="account.city"
          placeholder="请输入开户城市"
        ></syDialogInput>
      </el-form-item>
      <el-form-item
        label="开户支行"
        class="form-item"
        prop="sub_branch"
        :error="errors.sub_branch"
      >
        <syDialogInput
          v-model:value="account.sub_branch"
          placeholder="请输入开户支行"
        ></syDialogInput>
      </el-form-item>
    </el-form>
    <syButton
      class="confirm-btn"
      type="primary"
      @click="confirm()"
      mode="elementBtn"
      size="large"
      >提交申请</syButton
    >
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { enterBank } from "@/service/Api.service";
import { GO_URLS, syButton, syDialogInput, syAutoComplete } from "cqk-sy-ui";
import {
  ElMessage,
  ElFormItem,
  ElForm,
  ElInput,
  ElAutocomplete,
  FormInstance,
} from "element-plus";
import { $ajax } from "@/service";
export default defineComponent({
  components: {
    syButton,
    ElFormItem,
    ElForm,
    ElInput,
    ElAutocomplete,
    syDialogInput,
    syAutoComplete,
  },
  data() {
    return {
      BankList: [] as any, // 可选银行列表
      rules: {
        tp_name: [{ required: true, message: "对公户名不可为空" }], // 对公户名
        bank_card: [{ required: true, message: "对公银行账户不可为空" }], // 对公银行账号
        bank_name: [{ required: true, message: "开户银行不可为空" }], // 开户银行
        city: [{ required: true, message: "开户城市不可为空" }], //` 开户城市
        sub_branch: [{ required: true, message: "开户支行不可为空" }], //开户支行
      },
      errors: {
        tp_name: "", // 对公户名
        bank_card: "", // 对公银行账号
        bank_name: "", // 开户银行
        city: "", //` 开户城市
        sub_branch: "", //开户支行
      },
      account: {
        tp_name: "", // 对公户名
        bank_card: "", // 对公银行账号
        bank_name: "", // 开户银行
        city: "", //` 开户城市
        sub_branch: "", //开户支行
      },
    };
  },
  mounted() {
    this.getBanklist(); // 获取开户银行列表
  },
  methods: {
    // 获取开户银行列表
    async getBanklist() {
      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];
          this.BankList.push({ value: element });
        }
      }
    },
    // 过滤
    createFilter2(queryString: any) {
      return (BankList: any) => {
        return (
          BankList.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    // 搜索查询
    querySearch(queryString: string, cb: any) {
      var BankList = this.BankList;
      var results = queryString
        ? BankList.filter(this.createFilter2(queryString))
        : BankList;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 提交数据
    confirm() {
      const formEl = this.$refs.form as FormInstance;
      formEl.validate(async (isValid) => {
        if (!isValid) return;
        const res = await enterBank(this.account);
        if (res && res.code === 200) {
          ElMessage({
            message: "企业银行账户信息录入成功。",
            type: "success",
          });
          this.$emit("success");
        } else {
          const config = [
            { p: /对公户名/, fieldName: "tp_name" },
            { p: /对公银行/, fieldName: "bank_card" },
            { p: /开户银行/, fieldName: "bank_name" },
            { p: /开户城市/, fieldName: "city" },
            { p: /开户支行/, fieldName: "sub_branch" },
          ] as const;
          if (res?.msg) {
            const match = config.find((i) => i.p.test(res.msg));
            (match &&
              (this.errors[match.fieldName] =
                res.msg +
                `${
                  this.errors[match.fieldName].slice(-2) === "  " ? " " : "  "
                }`)) ||
              ElMessage.error(res?.msg);
          }
        }
      });
    },
  },
});
</script>
<style lang="scss">
.form-step2 .el-input {
  width: 610px;
}
</style>
<style scoped lang="scss">
.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-step2 {
  width: 900px;
}

.form-item {
  margin-bottom: 28px;
}

:deep(.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>
