<template>
  <w-splitter :size="48" unit="px" horizontal disable>
    <template #before>
      <div class="py-1 pl-1 flex flex-nowrap items-start gap-x-2">
        <div class="flex-1">
          <w-form
            :cols-num="3"
            :fields="[
              {
                label: '评分卡',
                name: 'modelName',
                type: 'w-select',
                options: ['A评分卡', 'B评分卡', 'K评分卡'],
                defaultValue: rating.ratingData.value['modelName'],
              },
              {
                label: '更改评分卡说明',
                name: 'updateModelDesc',
                type: 'w-text',
                colSpan: 2,
              },
            ]"
          >
          </w-form>
        </div>
        <div class="flex-none pr-4">
          <q-btn icon="task_alt" color="primary" label="更改" @click="click" />
        </div>
      </div>
    </template>
    <template #after>
      <w-splitter :size="70" :limits="[30, 95]" horizontal :separator-color="rating.separatorColor">
        <template #before>
          <FinanceReportTabs></FinanceReportTabs>
        </template>
        <template #after>
          <CreditReportGrid class="px-1"></CreditReportGrid>
        </template>
      </w-splitter>
    </template>
  </w-splitter>
</template>
<script setup lang="ts">
import { ref, inject } from 'vue';
import { DialogManager } from 'platform-core';
import { Rating } from '../ts/Rating';
import FinanceReportGrid from './FinanceReportGrid.vue';
import CreditReportGrid from './CreditReportGrid.vue';
import CustBaseInfo from './CustBaseInfo.vue';
import FinanceReportTabs from './FinanceReportTabs.vue';

const rating = <Rating>inject('rating');
const custFormRef = ref();
const getCustFormRef = () => {
  return custFormRef.value;
};
rating.refs.setCustFormRefFunction(getCustFormRef);
const click = () => {
  DialogManager.confirm('更改评分卡后流程会经总行进行审批，确认要更改评分卡吗', () => {});
};
</script>
