<script setup>
import { ref } from 'vue'

const datas = ref([])
const sorting = ref(false)
let currentIndex1 = ref(-1)
let currentIndex2 = ref(-1)
let currentIndex3 = ref(-1)
const desc = ref(0)

const asc_texts = ['', '最小值', '当前值', '选中值']
const desc_texts = ['', '最大值', '当前值', '选中值']

const selectionSort = async (descc) => {
    if (sorting.value) {
        return
    }
    sorting.value = true
    desc.value = descc
    // 实现选择排序

    // 1. 获取数据
    const data = datas.value

    // 2. 排序
    // 2.1 外层循环，控制比较的轮数
    for (let i = 0; i < data.length - 1; i++) {
        let minIndex = i
        currentIndex3.value = i
        // 2.2 内层循环，找到最小值的 index
        for (let j = i + 1; j < data.length; j++) {
            // 检查是否停止排序
            if (!sorting.value) {
                return
            }
            // 根据 desc 判断是升序还是降序
            if (desc.value === 0) {
                if (data[j] < data[minIndex]) {
                    minIndex = j
                }
            } else {
                if (data[j] > data[minIndex]) {
                    minIndex = j
                }
            }
            currentIndex1.value = minIndex
            currentIndex2.value = j
            // 每次延时
            await new Promise((resolve) => {
                setTimeout(() => {
                    resolve()
                }, 200)
            })
        }
        // 2.3 把找到的最小值放到当前轮的最左侧
        const temp = data[i]
        data[i] = data[minIndex]
        data[minIndex] = temp
    }

    currentIndex1.value = -1
    currentIndex2.value = -1
    currentIndex3.value = -1
    sorting.value = false
}

const shuffle = () => {
    // 范围从 20~99
    datas.value = []
    for (let i = 0; i < 10; i++) {
        datas.value.push(Math.floor(Math.random() * 80 + 20))
    }
}

const stop = () => {
    sorting.value = false
}

const compare = (index) => {
    // 判断当前索引是否与指针重合
    if (index === currentIndex1.value) {
        return 'compare-1'
    }
    if (index === currentIndex2.value) {
        return 'compare-2'
    }
    if (index === currentIndex3.value) {
        return 'compare-3'
    }
    return ''
}

// 传入全数据列表索引，返回对应的文字
const getText = (index) => {
    if (index === currentIndex1.value) {
        if (desc.value === 0) {
            return asc_texts[1]
        } else {
            return desc_texts[1]
        }
    }
    if (index === currentIndex2.value) {
        if (desc.value === 0) {
            return asc_texts[2]
        } else {
            return desc_texts[2]
        }
    }
    if (index === currentIndex3.value) {
        if (desc.value === 0) {
            return asc_texts[3]
        } else {
            return desc_texts[3]
        }
    }
    return ''
}

shuffle()
</script>

<template>
    <el-row class="ct">
        <!-- 两个div，左右各占一半 -->
        <div class="left" v-auto-animate>
            <el-card v-for="(data, index) in datas" :key="data" :class="['data-card', compare(index)]"
                :style="'width:' + data / 1.4 + 'rem;'">
                <el-row>
                    <div class="text">{{ getText(index,) }}</div>
                    <div class="data">{{ data }}</div>
                </el-row>
            </el-card>
        </div>
        <div class="right">
            <el-button type="primary" @click="selectionSort(0)" :disabled="sorting">从小到大</el-button>
            <el-button type="primary" @click="selectionSort(1)" :disabled="sorting">从大到小</el-button>
            <el-button type="primary" @click="shuffle" :disabled="sorting">随机打乱</el-button>
            <el-button type="primary" @click="stop" :disabled="!sorting">停止排序</el-button>
        </div>
    </el-row>
</template>

<style scoped></style>