<script setup>
const { t } = useI18n()

const settings = reactive({
  ControlSetting: [],
  ModelSetting: [],
  otherSetting: [],
})
const getAdvanceSetting = async () => {
  [settings.ControlSetting, settings.ModelSetting, settings.otherSetting] = await window.pywebview.api.getAdvanceSetting()
}

watch(() => settings, async () => {
  await window.pywebview.api.changeSetting({
    ControlSetting: settings.ControlSetting,
    ModelSetting: settings.ModelSetting,
    otherSetting: settings.otherSetting,
  })
},
{
  deep: true,
})

onBeforeMount(async () => {
  await getAdvanceSetting()
})
</script>

<template>
  <div>
    <div class="hero">
      <div class="hero-content flex-col items-end">
        <div class="text-3xl flex items-center">
          <router-link to="/">
            <div i-carbon-arrow-left class="mr-2 hover:bg-primary" />
          </router-link>
          {{ t('Settings.Advanced') }}
        </div>
        <div class="text-gray-500">
          修改后重启生效
        </div>
      </div>
    </div>
    <div class="mt-4 mx-3">
      <setting v-model:setting-data="settings.ControlSetting" setting-name="控制" class="" />
      <setting v-model:setting-data="settings.ModelSetting" setting-name="模型" class="mt-4" />
      <setting v-model:setting-data="settings.otherSetting" setting-name="其他" class="mt-4" />
    </div>
  </div>
</template>

<style  scoped>
.hero {
  display: grid;
  width: 100%;
  place-items: center;
  background-size: cover;
  background-position: center;
  justify-content: start;
}
.hero > * {
  grid-column-start: 1;
  grid-row-start: 1;
}

.hero-content {
  z-index: 0;
  display: flex;
  align-items: left;
  justify-content: center;
  max-width: 80rem/* 1280px */;
  gap: 1rem/* 16px */;
  padding: 1rem/* 16px */;
}
</style>
