<template>
  <div class="marketReport-config-content">
    <div class="config-name">Style Settings</div>
    <div
      class="config-item"
      v-for="item in configItems"
      :key="item.key"
      v-show="item.show !== false"
    >
      <div class="config-item-name">{{ item.label }}</div>
      <div
        class="config-item-content"
        :class="{ row: item.inputType === 'radio' }"
      >
        <template v-if="item.inputType === 'text'">
          <input
            :type="item.inputType"
            v-model="item.value"
            :maxlength="item.maxLength"
          />
        </template>
        <template v-if="item.inputType === 'radio'">
          <label v-for="(option, index) in item.options" :key="index">
            <input
              :type="item.inputType"
              v-model="item.value"
              :name="config.type + '_' + item.key"
              :value="option.value"
            />
            {{ option.label }}
          </label>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { isEqual } from "lodash-es";
import { ref, watch, onMounted } from "vue";
import { initConfigItems, defaultConfigData } from "./config.js";
import { findChanges } from "@/admin/utils.js";

const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

onMounted(() => {
  init();
});

let configItems = ref([]);
function init() {
  configItems.value = initConfigItems(defaultConfigData);
}

watch(
  () => configItems.value,
  () => {
    updateData();
  },
  { deep: true }
);

const emit = defineEmits(["update"]);

function updateData() {
  const diffData = getDiffData();
  emit("update", { diffData, configData: formatConfigData() });
}

function formatConfigData() {
  let configData = {};
  configItems.value?.forEach((config) => {
    configData[config.key] = config.value;
  });
  return configData;
}

function getDiffData() {
  let obj = {};
  let newConfigData = formatConfigData();
  if (!isEqual(defaultConfigData, newConfigData)) {
    obj = findChanges(defaultConfigData, newConfigData);
  }
  return obj;
}
</script>

<style lang="scss" scoped>
.marketReport-config-content {
  border-top: 1px solid #f0f0f0;
  padding: 20px;
  .config-name {
    font-size: 14px;
    color: $gray-800;
    font-weight: 700;
  }
  .config-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    &:not(:first-child) {
      margin-top: 20px;
    }
    .config-item-name {
      font-size: 12px;
      color: $gray-800;
      font-weight: 500;
      text-transform: uppercase;
    }
    .config-item-content {
      &.row {
        display: flex;
        align-items: center;
        gap: 30px;
      }
      label {
        color: $gray-800;
      }
    }
  }
}
</style>
