<!-- 客户评级分析 -->
<script lang="tsx" setup>
import { Echart } from '@/components/Echart'
import { EChartsOption } from 'echarts'
import { reactive } from "vue";
import { set } from 'lodash-es'
import { pieOptions, barOptions } from './echarts-data'
let pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
let barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption

const echartsClickFun = (params) => {
    set(barOptionsData, "title.text", params.name);
    switch (params.dataIndex) {
        case 0:
            //地域特性
            set(barOptionsData, "series", [{
                name: "分数",
                data: [12],
                type: 'bar',
            },]);
            set(barOptionsData, "xAxis.data", ["地址"]);
            break;
        case 1:
            //职业特性
            set(barOptionsData, "series", [{
                name: "职业风险程度",
                data: [9],
                type: 'bar',
            },]);
            set(barOptionsData, "xAxis.data", ["职业风险程度"]);
            break;
        case 2:
            //客户特性
            set(barOptionsData, "series", [{
                name: "自然人客户年龄",
                data: [2,3,1,2,2],
                type: 'bar',
            },]);
            set(barOptionsData, "xAxis.data", ["身份证件或身份证明文件的种类","自然人客户年龄","与客户建立业务关系的渠道","反洗钱交易监测记录","提示信息或权威媒体报道信息"]);
            break;
        case 3:
            //业务特征
            set(barOptionsData, "series", [{
                name: ["代理办理","非面对面交易","特殊业务类型的交易频率","与现金的关联程度"],
                data: [1,1,2,1],
                type: 'bar',
            },]);
            set(barOptionsData, "xAxis.data",["代理办理","非面对面交易","特殊业务类型的交易频率","与现金的关联程度"]);
            break;
    }

}



</script>
<template>
  <h4>{{}} 王婷婷评级信息 </h4>
  <p>评级日期： 2022-05-13 风险等级： 较低风险。</p>
  <p>客户<span class="redFont">王婷婷 （客户号 :0000080006391470）</span>于 2022-05-13 日，根据采集结果计算出客户评级得分： <span
    class="redFont">30.0 </span>分,因而被系统评级为: <span class="redFont">较低风险</span>。</p>
  <div class="chartList">
    <!-- 分值分布 -->
    <Echart :options="pieOptionsData" width="48%" height="350px" @call-echarts-click="echartsClickFun" />
    <!-- 地域特性 -->
    <Echart :options="barOptionsData" width="48%" height="350px" />
  </div>

</template>
<style scoped lang="scss">
.redFont {
    color: rgb(235, 83, 83)
}

h4,
p {
    text-align: center;
}

.chartList {
    display: flex;
    margin: 1%;
}
</style>