<template>
    <div class="flex jc-sb">
      <div></div>
      <div class="flex">
        <el-input v-model="roleInfo.inputValue" style="width: 200px" placeholder="请输入服务名称" />
        <el-button type="primary" @click="getFiancialData">搜索</el-button>
      </div>
    </div>
    <div class="mt-3 common-box">
      <div class="flex wrap jc-sb">
        <div class="financialicommon" v-for="item in roleInfo.financialData"  @click="tabLiClick(item)">
          <div class="fz-26 fw-b">{{ item.name }}</div>
          <div class="mt-2 lilv">贷款利率</div>
          <div class="mt-2 lilvnum">{{ item.nhll }}</div>
          <div class="mt-2 typejr">{{ item.dbfs }}</div>
          <div class="mt-2 fz-18">额度：{{ item.rzed }}</div>
      </div>
      </div>
      <div class="flex mt-2 mb-2 jc-e">
        <el-pagination
          v-model:current-page="roleInfo.currentPage"
          v-model:page-size="roleInfo.pageSize"
          :page-sizes="[8, 16, 32, 64]"
          layout="sizes, prev, pager, next, total"
          :total="roleInfo.pageTotal"
          @size-change="getFiancialData"
          @current-change="getFiancialData"
        />
      </div>
    </div>
</template>
<script>
import { defineComponent, reactive, onMounted, toRefs, watch } from "vue";
import { postMethodCommon, getMethodCommon } from "../../../api/common";
import { BASE_API } from "/public/config/server.js";
export default defineComponent({
  name: "Index",
  components: {
  },
  setup(props, context) {
    let data = reactive({
      roleInfo:{
        financialData:[],
        inputValue: '',
        currentPage: 1,
        pageSize: 8,
        pageTotal: ''
      }
      
    });
    onMounted(() => {
      methods.getFiancialData()
    });
    let methods = {
      tabLiClick(e){
        let emitData = e
        context.emit('liclick', emitData)
      },
      getFiancialData(){
          let serach = {
            name: data.roleInfo.inputValue,
          }
          let param = {
              id: window.fiancialId || "0cb3dd4d-d5fa-4479-9acc-05fdb734a801",
              mid: window.fiancialMid || "45d5a21d-daa4-4e71-80cb-1476ae1a80a3",
              paginationInputDto: {
                  page: data.roleInfo.currentPage,
                  rows: data.roleInfo.pageSize
              },
              queryJson: JSON.stringify(serach)
          }
          data.roleInfo.financialData = []
          postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
              let rel = res.data.result.items
              data.roleInfo.pageTotal = res.data.result.total
              if(rel){
                data.roleInfo.financialData = rel
              }
              
          })
      },
    };
    return {
      ...methods,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped>
  .common-box{
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.06);
    border-radius: 6px;
    padding: 34px 20px;
  } 
  .financialicommon{
      width: 242px;
      height: 300px;
      background: url("/public/images/moneybg.png");
      background-size: 100% 100%;
      box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.06);
      margin: 20px 0 30px;
      padding: 30px 20px;
      text-align: left;
  }
  .financialicommon .lilv{
      color: #546e7a;
      font-size: 18px;
  }
  .financialicommon .lilvnum{
      color: #fd6040;
      font-size: 24px;
  }
  .financialicommon .typejr{
      color: #90a4ae;
      background: #f2f3f9;
      padding: 5px 10px;
      display: inline-block
  }
</style>
