<template>
  <view class="shop-3-container">
    <u-navbar :autoBack="true" :safeAreaInsetTop="true" title="资金结算信息">
      <template slot="right">
        <view class="btn-login-out" @click="loginOut">退出登录</view>
      </template>
    </u-navbar>

    <view class="from1">
      <u-form :model="form" ref="uForm" label-width="90">
      <u-form-item label="开户名称" required prop="account_holder_name">
        <u-input v-model="form.account_holder_name" placeholder="请输入开户名称" />
      </u-form-item>

      <u-form-item label="银行卡号" required prop="account_number">
        <u-input
          type="number"
          v-model="form.account_number"
          placeholder="请输入银行卡号"
        />
      </u-form-item>

      <u-form-item label="开户行" prop="bank_name" required @click="showActionSheet">
        <u-input
          style="pointer-events: none"
          class="form-input"
          v-model="form.bank_name"
          placeholder="请选择开户行"
          readonly
        />
        <u-icon
          style="display: inline-block; margin-left: 8rpx"
          name="arrow-down"
          size="12"
          color="aaaaaa"
        ></u-icon>
      </u-form-item>

      <u-form-item
        label="开户支行"
        prop="bank_branch_name"
        @click="branchBankActionSheet"
      >
        <u-input
          :readonly="!form.bank_name"
          :style="{ pointerEvents: form.bank_name ? '' : 'none' }"
          class="form-input"
          v-model="form.bank_branch_name"
          placeholder="请选择开户支行名称"
          @change="onBranchBankChange"
        />
        <u-icon
          style="display: inline-block; margin-left: 8rpx"
          name="arrow-down"
          size="12"
          color="aaaaaa"
        ></u-icon>
      </u-form-item>
    </u-form>
    </view>


    <lzcPicker
      :pickerList="bankList"
      :showKey="'bank_name'"
      @change="handleCancel"
      :searchPlaceholder="'输入开户支行名称'"
      ref="lzcPicker"
      pickerTittle="选择开户支行"
    ></lzcPicker>

    <tui-dropdown-list
      :show="BranchBankDropdownShow"
      :height="500"
      class="dropdown_branch"
    >
      <template v-slot:dropdownbox>
        <div class="branch_list">
          <template v-if="branchBankList.length">
            <view
              class="branch_list_item"
              v-for="(item, index) in branchBankList"
              :key="item.id"
              @click="onBranchBankSelect(item, $event)"
            >
              {{ item.branch_bank_name }}
            </view>
          </template>
          <view v-else class="nodata">
            <template v-if="firstBranchBankLoad">
              <view class="tit">暂无法搜索到该开户支行</view>
              <view class="tips" @click="onUseBankBranchClick">点击填写</view>
            </template>
            <template v-else>
              <view class="tit">数据加载中...</view>
            </template>
          </view>
        </div>
        <u-icon
          v-if="firstBranchBankLoad"
          name="close-circle"
          color="#999"
          size="28"
          class="icon_close"
          @click="onBranchBankDropdownClose"
        ></u-icon>
      </template>
    </tui-dropdown-list>

    <view class="btn-content">
      <view class="myui_check_text">检查并确认资金结算信息无误</view>
      <u-button text="提交审核" color="#4b71ff" @click="handleSubmit"></u-button>
      <u-button text="上一步" class="myui_btn_prev" @click="handlePrev"></u-button>
    </view>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
import {
  GetBankList,
  GetMerchApply,
  GetRestartMerchApply,
  branchBankSearchApi,
} from "@/api/audit";
import lzcPicker from "@/components/lzc-picker/lzc-picker.vue";
import tuiDropdownList from "@/components/tui-dropdown-list/tui-dropdown-list.vue";
import { mapState } from "vuex";
import { throttle, debounce } from "lodash";

export default {
  components: {
    lzcPicker,
    tuiDropdownList,
  },
  data() {
    return {
      form: {
        bank_name: "",
        bank_branch_name: "",
        account_number: "",
        account_holder_name: "",
      },
      bankList: [],
      firstBranchBankLoad: false,
      BranchBankDropdownShow: false,
      branchBankDebounceFn: null,
      currentBranchBank: null,
      branchBankList: [],
      rules: {
        bank_name: [
          {
            required: true,
            message: "请选择开户行",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
        account_number: [
          {
            required: true,
            message: "请输入银行卡号",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
        account_holder_name: [
          {
            required: true,
            message: "请输入开户名称",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  computed: {
    ...mapState("user", ["approvalStatus"]),
  },
  onReady() {
    this.$refs["uForm"].setRules(this.rules);
  },
  onShow() {
    this.getBankList();
  },
  beforeUnmount() {
    this.branchBankDebounceFn?.cancel();
  },
  mounted() {
    let auditItem = uni.getStorageSync("auditItem");

    this.form.account_holder_name = auditItem.biz_license_company;
    this.branchBankDebounceFn = debounce(this.getBranchBankList, 500);
  },
  methods: {
    async getBankList() {
      let res = await GetBankList();

      if (res && res.status == 200) {
        this.bankList = res.data;
      }
    },

    async getBranchBankList(keyword) {
      let res = await branchBankSearchApi({
        keyword,
        pageNum: 1,
        pageSize: 10,
      });

      this.branchBankList = res.data.items;
      this.firstBranchBankLoad = true;
    },

    handlePrev() {
      uni.navigateBack()
    },

    async handleSubmit() {
      let valid = this.$refs.uForm.validate().then((valid) => {
        return valid;
      });

      if (valid) {
        let auditItem = uni.getStorageSync("auditItem");

        // auditItem.login_mobile = "18620139098";

        let params = {
          ...this.form,
          ...auditItem,
          ...this.currentBranchBank
        };

        console.log("params", params);

        if (this.approvalStatus == 2) {
          params.id = uni.getStorageSync("auditId");
          let res = await GetRestartMerchApply(params);
          if (res && res.status == 200) {
            uni.removeStorageSync("locationItem");
            uni.removeStorageSync("auditItem");
            uni.removeStorageSync("typeItem");
            uni.removeStorageSync("auditId");
            uni.navigateTo({ url: "/pages/audit/checkAudit" });
          }
        } else {
          let res = await GetMerchApply(params);
          if (res && res.status == 200) {
            uni.removeStorageSync("locationItem");
            uni.removeStorageSync("auditItem");
            uni.removeStorageSync("typeItem");
            uni.removeStorageSync("auditId");
            uni.navigateTo({ url: "/pages/audit/checkAudit" });
          }
        }
      }
    },

    showActionSheet() {
      this.$refs["lzcPicker"].handleShow();
      if (this.bankList.length <= 0) {
        this.getBankList();
      }
    },

    branchBankActionSheet() {
      if (!this.form.bank_name) {
        this.$refs.uToast.show({
          message: "请选择开户行",
          type: "error",
          duration: 1000,
        });
        return;
      }

      if (!this.form.bank_branch_name) {
        this.branchBankDebounceFn(this.form.bank_name || "中国银行");
      }

      this.BranchBankDropdownShow = true;
    },

    onUseBankBranchClick() {
      this.BranchBankDropdownShow = false;
    },

    onBranchBankSelect(data) {
      const { area_code, branch_bank_name, branch_bank_no, clear_no } = data;
      this.currentBranchBank = {
        area_code,
        branch_bank_name,
        openning_bank_code: branch_bank_no,
        clearing_bank_code: clear_no,
      };
      this.BranchBankDropdownShow = false;
      this.form.bank_branch_name = data.branch_bank_name;
    },

    onBranchBankDropdownClose() {
      this.BranchBankDropdownShow = false;
    },

    async onBranchBankChange() {
      this.branchBankDebounceFn(this.form.bank_branch_name);
    },

    handleCancel(item) {
      this.form.bank_name = item.bank_name;
    },

    loginOut() {
      this.$store.dispatch("user/LoginOut");
    },
  },
};
</script>

<style lang="scss">
.shop-3-container {
  ::v-deep .tui-dropdownlist-show {
    box-shadow: 1rpx 1rpx 20rpx rgba(100, 100, 100, 0.1);
    border: 1rpx solid rgba(100, 100, 100, 0.1);
    overflow: visible;

    .icon_close {
      position: absolute;
      bottom: -80rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .branch_list {
    height: 500rpx;
    overflow: auto;
    background: #fff;

    .branch_list_item {
      font-size: 28rpx;
      line-height: 28rpx;
      padding: 20rpx;
      border-bottom: 1rpx solid #eee;
    }

    .nodata {
      height: 500rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-size: 28rpx;

      .tit {
        color: #666;
        padding-bottom: 80rpx;
      }

      .tips {
        padding: 10rpx 20rpx;
        color: #fff;
        border-radius: 100rpx;
        background: #4b71ff;
      }
    }
  }

  .u-navbar {
    height: 88rpx;
  }


  .from1{
    padding: 24rpx 24rpx 24rpx 36rpx;
  }

  .btn-content {
    padding: 30rpx 24rpx 88rpx;
  }

  .btn-submit {
    border-radius: 16rpx;
    background: #4b71ff;
    color: #fff;
  }

  .btn-login-out {
    font-size: 28rpx;
    color: #4b71ff;
  }
}
</style>