<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
    }]
})


function bubbleSort(arr) {
    // 冒泡排序算法，对数组进行排序，同时记录每一步操作，保存在一个数组中
    function sort() {
        // virtualArr 用来存放 每一个步内容的数组
        var virtualArr = [arr.slice()];
        var max = arr.length;
        for (var i = 0; i < max; i++) {
            var done = true;
            for (var j = 0; j < max - i; j++) {
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                    done = false;
                    virtualArr.push(arr.slice());
                }
            };
            if (done) {
                break;
            };
        }
        return virtualArr;
    }

    // 绘画，调用一次就画出一步的图像 
    function darw(arr) {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        // 获取 canvas画板的高度(确定每个长方形的 y 值时需要)
        var maxWidth = canvas.height;
        // 每个长方形的宽度
        var width = 20;
        // 每个长方形之间的间隔
        var space = 20;

        const total=arr.reduce((p,c)=>p+c,0)

        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 设置字体
        ctx.font = "18px serif";
        // 在页面上，画出一步的内容
        for (var i = 0; i < arr.length; i++) {
            ctx.fillStyle = '#61C5FE';
            // x 的 值等于 第i个长方形 * （长方形的宽+每个长方形的间隔）
            // y 的 值等于  画板的高度 - 第i的元素的值
            ctx.fillRect(i * (width + space), maxWidth - arr[i], width, (arr[i]/total)*800);
            ctx.fillStyle = '#240be4';
            // maxWidth - arr[i]-5，这里多- 5，是为了能让文字，在长方形上方一点显示，看的明显些
            ctx.fillText(arr[i], i * (width + space), maxWidth - arr[i] - 5);
        }
    }

    // 动画 
    function animation() {
        // 调用sort 方法，返回包括每一步内容的数组
        var virtualArr = sort();
        var interval = 500;
        // 遍历得到的数组，每隔500ms，调用darw 方法，画出一步内容
        virtualArr.forEach((item, index) => {
            setTimeout(() => darw(item), index * interval);
        });
    }

    animation();
}




const sortBtn = () => {

    const arr = state.value.replace('[', '').replace(']', '').split(',').map(n => +n)
    console.log('arr', arr)
    bubbleSort(arr);
}



</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> -->

                    <canvas id="myCanvas" width="600" height="800"> </canvas>
                </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>