<template>
  <div class="h-full">
    <q-splitter v-model="state.splitterModel" horizontal class="h-full">
      <template #before>
        <w-grid
          ref="rptRatingDistributionGridRef"
          title="客户评级分布列表"
          :data-url="Environment.apiContextPath('api/irbs/rptRatingDistribution/list')"
          :sort-no="true"
          :dense="true"
          :checkbox-selection="false"
          :query-form-cols-num="3"
          :query-form-fields="rptRatingDistributionGrid.queryFormFields"
          :columns="rptRatingDistributionGrid.columns"
          :toolbar-actions="rptRatingDistributionGrid.buttons"
          :pageable="false"
          @after-request-data="afterRequestData"
        ></w-grid>
      </template>
      <template #after>
        <div class="h-full">
          <q-splitter v-model="state.echartsSplitterModel" unit="px" horizontal disable class="w-full h-full">
            <template #before>
              <q-tabs v-model="state.tab" inline-label indicator-color="primary" align="left" :breakpoint="1">
                <q-tab name="cust" icon="account_box" label="全部客户" />
                <q-tab name="creditBalance" icon="currency_yen" label="信贷余额" />
              </q-tabs>
            </template>
            <template #after>
              <q-tab-panels
                v-model="state.tab"
                :keep-alive="true"
                animated
                swipeable
                vertical
                transition-prev="jump-up"
                transition-next="jump-up"
                class="w-full h-full"
              >
                <q-tab-panel name="cust" class="w-full h-full p-0">
                  <w-echarts
                    :option="{
                      tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                          type: 'shadow',
                        },
                      },
                      toolbox: {
                        feature: {
                          saveAsImage: { show: true },
                        },
                      },
                      legend: {
                        data: ['客户数', '本月新增客户数', '违约客户数', '占比', '本月新增占比', '违约占比'],
                      },
                      grid: {
                        top: '15%',
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                      },
                      xAxis: {
                        type: 'category',
                        data: state.xData,
                        axisTick: {
                          alignWithLabel: true,
                        },
                      },
                      yAxis: [
                        {
                          type: 'value',
                        },
                        {
                          type: 'value',
                          interval: 10,
                          axisLabel: {
                            formatter: '{value} %',
                          },
                        },
                      ],
                      series: [
                        {
                          name: '客户数',
                          type: 'bar',
                          barWidth: '20%',
                          // label: {
                          //   show: true,
                          //   position: 'insideBottom',
                          //   distance: 15,
                          //   align: 'left',
                          //   verticalAlign: 'middle',
                          //   rotate: 90,
                          //   formatter: '{c}  {name|{a}}',
                          //   fontSize: 16,
                          //   rich: {
                          //     name: {},
                          //   },
                          //   textStyle: {
                          //     //数值样式
                          //     color: '#FFF', //字体颜色
                          //     fontSize: 10, //字体大小
                          //   },
                          // },
                          label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: {
                              //数值样式
                              color: 'black', //字体颜色
                              fontSize: 10, //字体大小
                            },
                          },
                          emphasis: {
                            focus: 'series',
                          },
                          data: state.custData.number,
                        },
                        {
                          name: '占比',
                          type: 'line',
                          yAxisIndex: 1,
                          data: state.custData.ratio,
                        },
                        {
                          name: '本月新增客户数',
                          type: 'bar',
                          barWidth: '20%',
                          label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: {
                              //数值样式
                              color: 'black', //字体颜色
                              fontSize: 10, //字体大小
                            },
                          },
                          emphasis: {
                            focus: 'series',
                          },
                          data: state.custData.addNumber,
                        },
                        {
                          name: '本月新增占比',
                          type: 'line',
                          yAxisIndex: 1,
                          data: state.custData.addRatio,
                        },
                        {
                          name: '违约客户数',
                          type: 'bar',
                          barWidth: '20%',
                          label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: {
                              //数值样式
                              color: 'black', //字体颜色
                              fontSize: 10, //字体大小
                            },
                          },
                          emphasis: {
                            focus: 'series',
                          },
                          data: state.custData.defaultNumber,
                        },
                        {
                          name: '违约占比',
                          type: 'line',
                          yAxisIndex: 1,
                          data: state.custData.defaultRatio,
                        },
                      ],
                    }"
                  ></w-echarts>
                </q-tab-panel>
                <q-tab-panel name="creditBalance" class="w-full h-full p-0">
                  <w-echarts
                    :option="{
                      tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                          type: 'shadow',
                        },
                      },
                      toolbox: {
                        feature: {
                          saveAsImage: { show: true },
                        },
                      },
                      legend: {
                        data: ['信贷余额', '占比'],
                      },
                      grid: {
                        top: '15%',
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                      },
                      xAxis: {
                        type: 'category',
                        data: state.xData,
                        axisTick: {
                          alignWithLabel: true,
                        },
                      },
                      yAxis: [
                        {
                          type: 'value',
                        },
                        {
                          type: 'value',
                          interval: 10,
                          axisLabel: {
                            formatter: '{value} %',
                          },
                        },
                      ],
                      series: [
                        {
                          name: '信贷余额',
                          type: 'bar',
                          barWidth: '20%',
                          data: state.custData.creditBalance,
                        },
                        {
                          name: '占比',
                          type: 'line',
                          yAxisIndex: 1,
                          data: state.custData.creditRatio,
                        },
                      ],
                    }"
                  ></w-echarts>
                </q-tab-panel>
              </q-tab-panels>
            </template>
          </q-splitter>
        </div>
      </template>
    </q-splitter>
  </div>
</template>

<script setup lang="ts">
import { Round } from '@/views/custRating/CustRating.ts';
import { axios, Environment, Formater } from 'platform-core';
import { useQuasar } from 'quasar';
import { reactive, ref } from 'vue';

const $q = useQuasar();
const rptRatingDistributionGridRef = ref();
const state = reactive({
  splitterModel: 55,
  echartsSplitterModel: 50,
  tab: 'cust',
  xData: <any>[],
  custData: {
    number: <any>[],
    ratio: <any>[],
    addNumber: <any>[],
    addRatio: <any>[],
    defaultNumber: <any>[],
    defaultRatio: <any>[],
    creditBalance: <any>[],
    creditRatio: <any>[],
  },
});

const afterRequestData = () => {
  const rows = rptRatingDistributionGridRef.value.getRows();
  state.xData = [];
  state.custData.number = [];
  state.custData.ratio = [];
  state.custData.addNumber = [];
  state.custData.addRatio = [];
  state.custData.defaultNumber = [];
  state.custData.defaultRatio = [];
  state.custData.creditBalance = [];
  state.custData.creditRatio = [];
  rows.forEach((item) => {
    state.xData.push(item['ratingLevel']);
    state.custData.number.push(item['custCnt']);
    state.custData.ratio.push(item['custRatio'] && typeof item['custRatio'] === 'number' ? Round(item['custRatio'] * 100, 2) : 0);
    state.custData.addNumber.push(item['currInctCnt']);
    state.custData.addRatio.push(item['currInctRatio'] && typeof item['currInctRatio'] === 'number' ? Round(item['currInctRatio'] * 100, 2) : 0);
    state.custData.defaultNumber.push(item['defCustCnt']);
    state.custData.defaultRatio.push(item['defCustRatio'] && typeof item['defCustRatio'] === 'number' ? Round(item['defCustRatio'] * 100, 2) : 0);
    state.custData.creditBalance.push(item['borrBal']);
    state.custData.creditRatio.push(item['borrBalRatio'] && typeof item['borrBalRatio'] === 'number' ? Round(item['borrBalRatio'] * 100, 2) : 0);
  });
};

const rptRatingDistributionGrid = {
  buttons: [
    {
      extend: 'query',
      click: () => {
        const QueryParams = rptRatingDistributionGridRef.value.getQueryForm().getData();
        axios.get(Environment.apiContextPath('api/irbs/rptRatingDistribution/list'), { params: QueryParams }).then((resp) => {
          rptRatingDistributionGridRef.value.setLocalData(resp.data);
        });
      },
    },
    'reset',
    'separator',
    'export',
    'separator',
  ],
  queryFormFields: [
    { label: '报表日期', name: 'ratingMonth', type: 'date', defaultValue: '2023-07-01' },
    {
      label: '模型敞口',
      name: 'modelCode',
      type: 'select',
      options: [
        { value: 'WHM1', label: '政府投融资平台' },
        { value: 'WHM2', label: '事业单位' },
        { value: 'WHM3', label: '银行类金融机构' },
        { value: 'WHM41', label: '金融租赁与消费金融公司' },
        { value: 'WHM42', label: '证券公司' },
        { value: 'WHM43', label: '其他非银行金融机构' },
        { value: 'WHM44', label: '基金公司' },
        { value: 'WHM5', label: '新建企业' },
        { value: 'WHM6', label: '综合性集团' },
        { value: 'WHM7', label: '大型其他行业' },
        { value: 'WHM8', label: '中小微其他行业' },
        { value: 'WHM9', label: '大中型租赁和商务服务行业' },
        { value: 'WHM10', label: '小微租赁和商务服务业' },
        { value: 'WHM12', label: '房地产业' },
        { value: 'WHM13', label: '大中型农林牧渔业' },
        { value: 'WHM14', label: '小微农林牧渔业' },
        { value: 'WHM15', label: '大型建筑业' },
        { value: 'WHM16', label: '中小微建筑业' },
        { value: 'WHM17', label: '大中型制造业' },
        { value: 'WHM18', label: '小微制造业' },
        { value: 'WHM19', label: '大中型批发和零售业' },
        { value: 'WHM20', label: '小微批发和零售业' },
        { value: 'WHM22', label: '科技行业' },
      ],
    },
    {
      label: '分支机构',
      name: 'managerOrgCode',
      type: 'select',
      options: [
        { value: '01002', label: '总行营业部' },
        { value: '01003', label: 'JJJS开发区支行' },
        { value: '01005', label: 'XF支行' },
        { value: '01006', label: 'GCZ支行' },
        { value: '01007', label: 'ZL支行' },
        { value: '01008', label: 'HKJ支行' },
        { value: '01009', label: 'HL支行' },
        { value: '01010', label: 'LJ支行' },
        { value: '01012', label: 'GG分行' },
        { value: '01013', label: 'ZY支行' },
        { value: '01014', label: 'ZD支行' },
        { value: '01015', label: 'HK支行' },
        { value: '01016', label: 'DS支行' },
        { value: '01017', label: 'LF支行' },
        { value: '01018', label: 'GS支行' },
        { value: '01019', label: 'LX支行' },
        { value: '01020', label: 'BX支行' },
        { value: '01021', label: 'ZQ支行' },
        { value: '01022', label: 'JF支行' },
        { value: '01023', label: 'CC支行' },
        { value: '01024', label: 'LQ支行' },
        { value: '01025', label: 'DH支行' },
        { value: '01027', label: 'SGH支行' },
      ],
    },
  ],
  columns: [
    { label: '评级等级', name: 'ratingLevel', align: 'center' },
    {
      label: '全部客户',
      name: 'totalCustHeader',
      columns: [
        { label: '客户数', name: 'custCnt', align: 'center' },
        {
          label: '占比',
          name: 'custRatio',
          align: 'center',
          format: (val) => {
            if (val && typeof val === 'number') {
              return Round(val * 100, 2) + '%';
            }
            return val;
          },
        },
      ],
    },
    {
      label: '本月新增客户',
      name: 'currInctCustHeader',
      columns: [
        { label: '客户数', name: 'currInctCnt', align: 'center' },
        {
          label: '占比',
          name: 'currInctRatio',
          align: 'center',
          format: (val) => {
            if (val && typeof val === 'number') {
              return Round(val * 100, 2) + '%';
            }
            return val;
          },
        },
      ],
    },
    {
      label: '违约客户',
      name: 'defCustHeader',
      columns: [
        { label: '客户数', name: 'defCustCnt', align: 'center' },
        {
          label: '违约率',
          name: 'defCustRatio',
          align: 'center',
          format: (val) => {
            if (val && typeof val === 'number') {
              return Round(val * 100, 2) + '%';
            }
            return val;
          },
        },
      ],
    },
    {
      label: '信贷余额',
      name: 'borrBalHeader',
      columns: [
        { label: '余额', name: 'borrBal', align: 'center', format: Formater.thousands() },
        {
          label: '占比',
          name: 'borrBalRatio',
          align: 'center',
          format: (val) => {
            if (val && typeof val === 'number') {
              return Round(val * 100, 2) + '%';
            }
            return val;
          },
        },
      ],
    },
  ],
};
</script>
