<template>
    <div class="row">
        <div class="col-12">
            <div class="row">
                <div class="col-12">
                    <div class="row">
                        <div class="col-4"></div>
                        <div class="col-4 q-pt-sm"><q-select outlined v-model="model[0]" :options="options" :dense="true"
                                :options-dense="true" label="单元行数" /> </div><q-checkbox v-model="RowsColumns[0]" />
                    </div>
                </div>
                <div class="col-12">
                    <div class="row">
                        <div class="col-4"></div>
                        <div class="col-4 q-pt-sm"><q-select outlined v-model="model[1]" :options="options" :dense="true"
                                :options-dense="true" label="单元列数" /> </div><q-checkbox v-model="RowsColumns[1]" />
                    </div>
                </div>
                <div class="col-12">
                    <div class="row" style="min-height: 40px;">
                        <div class="col-4"></div>
                        <div class="col-4 q-pt-sm"><div class="row"><div class="col-4"><span>网格颜色</span></div><div class="col-8" @click="isshowhex=true;index=0" :style="{'background-color':color[0]}"></div></div></div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="row" style="min-height: 40px;">
                        <div class="col-4"></div>
                        <div class="col-4 q-pt-sm"><div class="row"><div class="col-4"><span>背景颜色</span></div><div class="col-8"  @click="isshowhex=true;index=1" :style="{'background-color':color[1]}"></div></div></div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="row" style="min-height: 40px;">
                        <div class="col-4"></div>
                        <div class="col-4 q-pt-sm"><div class="row"><div class="col-4"><span>中心线颜色</span></div><div class="col-8" @click="isshowhex=true;index=2" :style="{'background-color':color[2]}"></div></div></div><q-checkbox v-model="RowsColumns[2]" />
                    </div>
                </div>
                <div class="col-12">
                    <div class="row" style="min-height: 40px;">
                        <div class="col-4"></div>
                        <div class="col-4 q-pt-sm"><div class="row"><div class="col-4"><span>中心圆颜色</span></div><div class="col-8"  @click="isshowhex=true;index=3" :style="{'background-color':color[3]}"></div></div></div><q-checkbox v-model="RowsColumns[3]" />
                    </div>
                </div>
            </div>
        </div>
        <div v-if="isshowhex" style="margin: 0 auto;text-align: center;"><q-color no-header-tabs  no-footer v-model="color[index]" class="my-picker" /> <q-btn style="margin-top: 0.5rem;" color="white" @click="isshowhex=false" class=" q-pt-sm" text-color="black" label="提交" /></div>
    </div>
</template>

<style scoped>

</style>

<script lang="ts">
import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
import { defineComponent, ref,reactive } from "vue";
import { useStore } from "src/store";
import { useI18n } from "vue-i18n";


export default defineComponent({
    name: "ComponentGridSettings",
    components:{
        vue3ResizeDrag
    },
    setup() {
        let $store = useStore();
        let $t = useI18n();
        const RowsColumns=reactive([false,false,false,false]);
        const hex=ref("")
        const isshowhex=ref(false);
        const index=ref(0);
        const color=reactive(["#000","#000","#000","#000"]);
        let model = reactive([10,10]);
        let options = ref(['10', '20', '30', '40', '50']);
        return {
            model,
            options,
            hex,
            RowsColumns,
            isshowhex,
            index,
            color,
        };
    },
});
</script>