<template>
  <div>
    <div class="group-title mt-8">银行名称</div>
    <SelectList
      class="mt-5"
      :list="bankList"
      :selecteds="selectedBanks"
      :setSelecteds="setBanks"
    />
    <div class="group-title mt-8">最低利率 (%)</div>
    <div class="section10 flex-row">
      <div class="mod5 flex-col">
        <div class="layer4 flex-row">
          <div class="word24">
            <input
              v-model.number="min_"
              @blur="checkInterstValid"
              type="number"
              class="bg-transparent w-full text-center"
            />
          </div>
          <div class="word25">%</div>
        </div>
      </div>
      <!-- <div class="mod6 flex-col"></div>
      <div class="mod7 flex-col">
        <div class="main12 flex-row">
          <div class="txt12">
            <input
              type="number"
              v-model.number="max_"
              @blur="checkInterstValid"
              placeholder="最高利率"
              class="bg-transparent w-full text-center"
            />
          </div>
          <div class="word26">%</div>
        </div>
      </div> -->
    </div>
    <div class="group-title mt-8">额度 (万元)</div>
    <div class="section10 flex-row">
      <div class="mod5 flex-col">
        <div class="layer4 flex-row">
          <div class="word24">
            <input
              v-model.number="min_2"
              @blur="checkAmountValid"
              type="number"
              placeholder="0"
              class="bg-transparent w-full text-center"
            />
          </div>
        </div>
      </div>
      <div class="mod6 flex-col"></div>
      <div class="mod7 flex-col">
        <div class="main12 flex-row">
          <div class="txt12">
            <input
              type="number"
              v-model.number="max_2"
              @blur="checkAmountValid"
              placeholder="9999"
              class="bg-transparent w-full text-center"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="group-title mt-8">类型</div>
    <SelectList
      class="mt-5"
      :list="typeList"
      :selecteds="selectedTypes"
      :setSelecteds="setSelectedTypes"
    />
    <div class="group-title mt-8">期限</div>
    <SelectList
      class="mt-5"
      :list="peridList"
      :selecteds="selectedPerids"
      :setSelecteds="setSelectedPerids"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import SelectList from "@/components/SelectList/index.vue";
import { Toast } from "vant";
export default defineComponent({
  components: {
    SelectList,
    Toast,
  },
  props: {
    bankList: Array,
    selectedBanks: Array,
    setBanks: Function,
    peridList: Array,
    selectedPerids: Array,
    setSelectedPerids: Function,
    typeList: Array,
    selectedTypes: Array,
    setSelectedTypes: Function,
    min: [Number, String],
    max: [Number, String],
    setMin: {
      type: Function,
      required: true,
    },
    setMax: {
      type: Function,
      required: true,
    },
    min2: [Number, String],
    max2: [Number, String],
    setMin2: {
      type: Function,
      required: true,
    },
    setMax2: {
      type: Function,
      required: true,
    },
    // checkInterstValid: {
    //   type: Function,
    //   required: true,
    // }, 
    checkAmountValid: {
      type: Function,
      required: true,
    },
  },
  computed: {
    min_: {
      get(): number | string | undefined {
        return this.min;
      },
      set(v: number | string): void {
        this.setMin(v);
      },
    },
    max_: {
      get(): number | string | undefined {
        return this.max;
      },
      set(v: number | string): void {
        this.setMax(v);
      },
    },
    min_2: {
      get(): number | string | undefined {
        return this.min2;
      },
      set(v: number | string): void {
        this.setMin2(v);
      },
    },
    max_2: {
      get(): number | string | undefined {
        return this.max2;
      },
      set(v: number | string): void {
        this.setMax2(v);
      },
    },
  },
});
</script>
<style lang="less" scoped>
.group-title {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1b1f37;
}

.section10 {
  z-index: auto;
  width: 282px;
  height: 40px;
  justify-content: space-between;
  margin-top: 20px;
}
.mod5 {
  z-index: 136;
  height: 40px;
  border-radius: 5px;
  background-color: rgba(247, 247, 250, 1);
  width: 116px;
  justify-content: center;
  align-items: flex-end;
  padding-right: 10px;
}
.layer4 {
  z-index: auto;
  width: 82px;
  height: 20px;
  justify-content: space-between;
}
.word24 {
  z-index: 140;
  width: 56px;
  display: block;
  overflow-wrap: break-word;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  white-space: nowrap;
  color: #1b1f37;
  line-height: 20px;
  text-align: left;
}
.word25 {
  z-index: 138;
  width: 14px;
  display: block;
  overflow-wrap: break-word;
  font-size: 14px;
  color: #1b1f37;
  font-family: PingFangSC-Regular;
  white-space: nowrap;
  line-height: 20px;
  text-align: left;
}
.mod6 {
  z-index: 145;
  width: 14px;
  height: 1px;
  background: url('../../../assets/img/line.png')
    0px 0px no-repeat;
  margin-top: 20px;
}
.mod7 {
  z-index: 139;
  height: 40px;
  border-radius: 5px;
  background-color: rgba(247, 247, 250, 1);
  width: 116px;
  justify-content: center;
  align-items: flex-end;
  padding-right: 10px;
}
.main12 {
  z-index: auto;
  width: 76px;
  height: 20px;
  justify-content: space-between;
}
.txt12 {
  z-index: 143;
  width: 56px;
  display: block;
  overflow-wrap: break-word;
  color: #1b1f37;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  white-space: nowrap;
  line-height: 20px;
  text-align: left;
}
.word26 {
  z-index: 141;
  width: 14px;
  display: block;
  overflow-wrap: break-word;
  color: #1b1f37;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  white-space: nowrap;
  line-height: 20px;
  text-align: left;
}
</style>