<template>
    <h2>颜色对比器</h2>
    <div class="color-item" v-for="(item, i) in colors" :key="i">
        <div>{{ state.lang.color + (i + 1) }}</div>
        <SearchInput :width="120" v-model="colors[i]" />
        <div :class="['color-view', 'c' + i]"></div>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { SearchInput } from 'noob';

const { state, commit, dispatch } = useStore();
const colors = reactive(new Array(10));

onMounted(() => { });
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类

.color-item {
    width: 150px;
    height: 150px;
    float: left;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid v-bind('state.style.tableBorderColor');
}

.color-view {
    width: 100%;
    height: 100px;

    &.c0 {
        background-color: v-bind('"#" + colors[0]');
    }

    &.c1 {
        background-color: v-bind('"#" + colors[1]');
    }

    &.c2 {
        background-color: v-bind('"#" + colors[2]');
    }

    &.c3 {
        background-color: v-bind('"#" + colors[3]');
    }

    &.c4 {
        background-color: v-bind('"#" + colors[4]');
    }

    &.c5 {
        background-color: v-bind('"#" + colors[5]');
    }
    &.c6 {
        background-color: v-bind('"#" + colors[6]');
    }
    &.c7 {
        background-color: v-bind('"#" + colors[7]');
    }
    &.c8 {
        background-color: v-bind('"#" + colors[8]');
    }
    &.c9 {
        background-color: v-bind('"#" + colors[9]');
    }
}</style>