<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]"
                @update:model-value="update_row_col(0, model[0])" :options="options" :dense="true" :options-dense="true"
                :label="$t('wall row')" /> </div><q-checkbox @update:model-value="send_off(0)"
              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]"
                @update:model-value="update_row_col(1, model[1])" :options="options" :dense="true" :options-dense="true"
                :label="$t('wall col')" /> </div><q-checkbox @update:model-value="send_off(1)"
              v-model="RowsColumns[1]" />
          </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[2]"
                @update:model-value="update_row_col(2, model[2])" :options="line_width_options" :dense="true" :options-dense="true"
                :label="$t('line width')" /> </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">
              <q-item>
                <q-item-section avatar class="head_1">
                  {{ $t("line color") }}
                </q-item-section>
                <q-item-section>
                  <q-input v-model="color[0]" :rules="['anyColor']">
                    <template v-slot:append>
                      <q-icon name="colorize" class="cursor-pointer" @click="index = 0">
                        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                          <q-color v-model="color[0]" @change="submit" />
                        </q-popup-proxy>
                      </q-icon>
                    </template>
                  </q-input>
                </q-item-section>
              </q-item>
            </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">
              <q-item>
                <q-item-section avatar class="head_1">
                  {{ $t("background color") }}
                </q-item-section>
                <q-item-section>
                  <q-input v-model="color[1]" :rules="['anyColor']">
                    <template v-slot:append>
                      <q-icon name="colorize" class="cursor-pointer" @click="index = 1">
                        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                          <q-color v-model="color[1]" @change="submit" />
                        </q-popup-proxy>
                      </q-icon>
                    </template>
                  </q-input>
                </q-item-section>
              </q-item>
            </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">
              <q-item>
                <q-item-section avatar class="head_1">
                  {{ $t("center line color") }}
                </q-item-section>
                <q-item-section>
                  <q-input v-model="color[2]" :rules="['anyColor']">
                    <template v-slot:append>
                      <q-icon name="colorize" class="cursor-pointer" @click="index = 2">
                        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                          <q-color v-model="color[2]" @change="submit" />
                        </q-popup-proxy>
                      </q-icon>
                    </template>
                  </q-input>
                </q-item-section>
              </q-item>
            </div>
            <div class="col-2"><q-checkbox class="q-pt-md" @update:model-value="send_off(2)" v-model="RowsColumns[2]" /></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.border {
  border: 1px solid;
}
</style>

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

export default defineComponent({
  name: "ComponentGridSettings",
  components: {
    vue3ResizeDrag
  },
  setup() {
    let set = GlobalData.getInstance().getCurrentClient();
    let $store = useStore();
    let $t = useI18n();
    const RowsColumns = reactive([false, false, false, false]);
    const index = ref(0);
    const color = reactive(["#ffffff", "#CCCCCC", "#000", "#000"]);
    let model = reactive([20, 40, 20]);
    let options = ref([10, 20, 30, 40, 50]);
    let line_width_options = ref([2,4,6,8,10, 20, 30, 40, 50]);
    const submit = () => {
      switch (index.value) {
        case 0:
          set?.SetBlendingOption("blending_grids_line_color", color[index.value]);
          break;
        case 1:
          set?.SetBlendingOption("blending_grids_background_color", color[index.value]);
          break;
        case 2:
          set?.SetBlendingOption("blending_grids_center_line_color",color[index.value]);
          break;
        case 3:
          //set?.SetBlendingOption("blending_grids_line_color",color[index.value]);
          break;
        default:
          break;
      }
    }
    const update_row_col = (type: number, value: number) => {
      switch (type) {
        case 0:
          set?.SetBlendingOption("blending_grids_row", value + "");
          break;
        case 1:
          set?.SetBlendingOption("blending_grids_column", value + "");
          break;
        case 2:
          set?.SetBlendingOption("blending_grids_line_width", value + "");
          break;
        default:
          break;
      }
    }
    const send_off = (type: number) => {
      setTimeout(() => {
        switch (type) {
          case 0:
            set?.SetBlendingOption("blending_grids_show_row", RowsColumns[type] + "");
            break;
          case 1:
            if (!RowsColumns[1]) RowsColumns[2] = false; RowsColumns[3] = false
            set?.SetBlendingOption("blending_grids_show_column", RowsColumns[type] + "");
            break;
          case 2:
            set?.SetBlendingOption("blending_grids_show_center_line", RowsColumns[type] + "");
            break;
          case 3:

            break;
          default:
            break;
        }
      }, 100);
    }
    const use_server_config = () => {
      let server_conf = JSON.parse($store.state.fusion_configuration).options
      model[0] = server_conf.blending_grids_row ?? 20;
      model[1] = server_conf.blending_grids_column ?? 40;
      model[2] = server_conf.blending_grids_line_width ?? 6;
      color[0] = server_conf.blending_grids_line_color ?? "#ffffff"
      color[1] = server_conf.blending_grids_background_color ?? "#00ff5e"
      color[2] = server_conf.blending_grids_center_line_color ?? "#00000"
      RowsColumns[0] = server_conf.blending_grids_show_row === "false" ? false : true
      RowsColumns[1] = server_conf.blending_grids_show_column === "false" ? false : true
      RowsColumns[2] = server_conf.blending_grids_show_center_line === "false" ? false : true
    }
    use_server_config()

    onBeforeUnmount(() => {
      set_sessionStorage()
    });
    const set_sessionStorage = () => {
      let tmp = { RowsColumns: RowsColumns, color: color, model: model }
      sessionStorage.GridSettings = JSON.stringify(tmp)
    }
    const get_sessionStorage = () => {
      let tmp = JSON.parse(sessionStorage.GridSettings)
      for (let index = 0; index < tmp.RowsColumns.length; index++) {
        RowsColumns[index] = tmp.RowsColumns[index];
      }
      for (let index = 0; index < tmp.color.length; index++) {
        color[index] = tmp.color[index];
      }
      for (let index = 0; index < tmp.model.length; index++) {
        model[index] = tmp.model[index];
      }
    }
    if (sessionStorage.GridSettings) get_sessionStorage()
    return {
      line_width_options,
      model,
      options,
      submit,
      RowsColumns,
      index,
      color,
      update_row_col,
      send_off
    };
  },
});
</script>
