<script lang="js" setup>
import { reactive, onMounted } from 'vue';

import { useStore } from "vuex";

const store = useStore();
const state = reactive({
    value: '[1,2,3,4,5]',
    title: '冒泡排序可视化',
    sourceData: [{
        num: 1,
        domId: 'num-1',
        loc: 1,
        percent: 14
    }, {
        num: 3,
        domId: 'num-3',
        loc: 3,
        percent: 50
    }, {
        num: 2,
        domId: 'num-2',
        loc: 2,
        percent: 36
    }]
})

const sortBtn = () => {

}

</script>
<template>
    <div>

        <div style="display:flex;">
            <a-card :title="state.title" style="min-width: 800px">
                <div class="input-box">

                    <div>
                        <a-input v-model:value="state.value" placeholder="请输入数组" clearable></a-input>
                    </div>
                    <div style="margin-left:50px"><a-button type="primary" @click="sortBtn">开始排序</a-button></div>
                </div>
                <div class="container-sort">
                    <div v-for="item in state.sourceData" :id="item.domId" class="box">
                        <div>
                            <div class="bar" :style="{
                                height: `${item.percent * 7}px`
                            }">

                            </div>
                            <div class="num">
                                {{ item.num }}
                            </div>

                        </div>
                    </div>
                </div>

            </a-card>
        </div>

    </div>
</template>

<style lang="less">
.input-box {
    display: flex;
    margin-bottom: 10px;
}

.container-sort {
    height: 600px;
    display: flex;
    align-items: flex-end;
    border: 1px solid #dcdcdc;
}

.box {
    margin: 10px;

    .bar {
        width: 10px;
        background: #1677ff;
        border-radius: 2px;
    }

    .num {
        font-size: 18px;
    }
}
</style>