<template>
    <div class="right-chart-1">
        <div class="rc1-header">
            赵六收费站
        </div>

        <div class="rc1-chart-container">
            <div class="left">
                <div class="number">
                    262
                </div>
                <div>设备运行总数</div>
            </div>
            <!-- <dv-capsule-chart class="right" :config="state.config" /> -->
            <dv-scroll-board ref="scrollBoard" :config="config" class="right" @click="clickHandler" ></dv-scroll-board>
        </div>
    </div>
</template>
  
<script setup name="RightChart1" lang="ts">
import { reactive } from 'vue'

const config = reactive({
    header: ['列1', '列2', '列3'],
    data: [
        ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
        ['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3'],
        ['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>'],
        ['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3'],
        ['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3'],
        ['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3'],
        ['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>'],
        ['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3'],
        ['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3'],
        ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3'],
    ],
    index: true,
    columnWidth: [50],
    align: ['center'],
    carousel: 'page'
})

const clickHandler = (e: any) => {
    console.log(e)
}

const state = reactive({
    config: {
        data: [
            {
                name: '收费系统',
                value: 25,
            },
            {
                name: '通信系统',
                value: 66,
            },
            {
                name: '监控系统',
                value: 123,
            },
            {
                name: '供配电系统',
                value: 72,
            },
            {
                name: '其他',
                value: 99,
            },
        ],
        unit: '件',
    },
})
</script>
  
<style lang="scss" scoped>
.right-chart-1 {
    width: 450px;
    display: flex;
    flex-direction: column;

    .rc1-header {
        font-size: 24px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
    }

    :deep(.rc1-chart-container) {
        flex: 2;
        display: flex;
    }

    :deep(.left) {
        width: 30%;
        font-size: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .number {
            font-size: 34px;
            color: #096dd9;
            font-weight: bold;
            margin-bottom: 30px;
        }
    }

    :deep(.right) {
        flex: 1;
        padding-bottom: 8px;
        padding-right: 8px;
        box-sizing: border-box;

        .row-item {
            height: 41px;
            border-bottom-left-radius: 0%;
        }
    }
}
</style>