<script lang="tsx">
import router from "@/router";
import { goToChatWithOutletRoboot } from "@/router/navigate";
import AddressService from "@/service/AddressService";
import { chatAuthCheck } from "@/utils/authCheck";
import { defineComponent, ref } from "vue";

export default defineComponent({
  props: ["setRef", "min_amount", "max_amount", "rate_lower", "rate_upper", "isValid"],
  setup(props) {
    const handleClick = async () => {
      chatAuthCheck(async () => {
        const ret = await AddressService.getInstance().getNearby({
          bank_code: Number(process.env.VUE_APP_BANK_CODE),
          number: 1,
        })
        if (ret.code === 200) {
          goToChatWithOutletRoboot({
            outletId: ret.data[0].outlet_id
          })
        }
      }, () => {
        router.push({
          name: 'Login'
        })
      })

    }

    return () => (
      <div class="group2 flex-col">
        <div class="bd13  w-full">
          <div class="layer12 flex-col w-full">
            <span class="word18">借款额度（万元）</span>
            <span class="txt10">
              {props.min_amount}-{props.max_amount}
            </span>
            <span class="word19">
              近七日年化&nbsp;{props.rate_lower}%起
            </span>
          </div>
        </div>
        <button
          // class=""
          class={props.isValid ? ' bd12 flex-col' :  ' bd12 bggray flex-col'}
          onClick={() => {
            console.log(1123123)
            if (!props.isValid) return
            console.log('--------',11111111)
            handleClick();
          }}
          ref={(el) => {
            props.setRef(el);
          }}
        >
          <span class="txt9" >立即申请</span>
        </button>
      </div>
    );
  },
});
</script>
<style lang="less" scoped>
.group2 {
  z-index: 11;
  height: 197px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: inset 0px 1px 3px 0px rgba(255, 255, 255, 0.5);
  width: 335px;
  justify-content: flex-end;
  padding-bottom: 24px;
  align-items: center;
  .bd12 {
    z-index: 15;
    height: 40px;
    border-radius: 20px;
    background-color: rgba(62, 79, 175, 1);
    box-shadow: 0px 2px 8px 0px rgba(62, 79, 175, 0.4);
    width: 201px;
    justify-content: center;
    align-items: flex-start;
    padding-left: 69px;
    .txt9 {
      z-index: 13;
      width: 56px;
      display: block;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 14px;
      font-family: PingFangSC-Semibold;
      white-space: nowrap;
      line-height: 20px;
      text-align: center;
    }
    .txt10 {
      z-index: 13;
      width: 56px;
      display: block;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      background: gray;
      font-size: 14px;
      font-family: PingFangSC-Semibold;
      white-space: nowrap;
      line-height: 20px;
      text-align: center;
    }
  }
  .bggray {
    background-color: gray;
  }
  .bd13 {
    z-index: 14;
    height: 177px;
    border-radius: 20px;
    border-width: 1px;
    border: 1px solid rgba(200, 183, 123, 1);
    width: 316px;
    justify-content: flex-start;
    padding-top: 10px;
    align-items: center;
    position: absolute;
    left: 10px;
    top: 10px;
    .layer12 {
      z-index: auto;
      height: 103px;
      .word18 {
        z-index: 17;
        display: block;
        overflow-wrap: break-word;
        color: rgba(141, 146, 175, 1);
        font-size: 14px;
        font-family: PingFangSC-Medium;
        white-space: nowrap;
        line-height: 20px;
        text-align: center;
        align-self: flex-end;
        margin: 0 auto;
      }
      .txt10 {
        z-index: 15;
        display: block;
        overflow-wrap: break-word;
        color: rgba(27, 31, 55, 1);
        font-size: 40px;
        font-family: DINAlternate-Bold;
        white-space: nowrap;
        line-height: 47px;
        text-align: center;
        margin-top: 19px;
      }
      .word19 {
        z-index: 16;
        display: block;
        overflow-wrap: break-word;
        color: rgba(141, 146, 175, 1);
        font-size: 12px;
        font-family: PingFangSC-Regular;
        white-space: nowrap;
        line-height: 17px;
        text-align: center;
        align-self: flex-start;
        margin: 0 auto;
      }
    }
  }
}

</style>