<script setup>
import { storeToRefs } from 'pinia'

import { useConfigStore } from '@/stores/config'
const config_store = useConfigStore()
const { conf } = storeToRefs(config_store)

const mobile = inject('mobile')

const new_scale = ref(conf.value.webview.scale)

const scene_name = {
  CONNECTING: '正在提交反馈至神经',
  UNKNOWN: '未知',
  UNKNOWN_WITH_NAVBAR: '有导航栏的未知场景',
  LOADING: '场景跳转时的等待界面',
  LOGIN_LOADING: '登录中',
  LOGIN_MAIN_NOENTRY: '登录页面（无按钮入口）',
  OPERATOR_ONGOING: '代理作战'
}

const scale_marks = {}
const display_marks = [0.5, 1.0, 1.5, 2.0, 3.0]
for (let i = 0.5; i <= 3.0; i += 0.25) {
  scale_marks[i] = display_marks.includes(i) ? `${i * 100}%` : ''
}
</script>

<template>
  <n-card title="外观、性能与其它">
    <n-form
      :label-placement="mobile ? 'top' : 'left'"
      :show-feedback="false"
      label-width="120"
      label-align="left"
    >
      <n-form-item label="界面缩放">
        <n-slider
          v-model:value="new_scale"
          :step="0.25"
          :min="0.5"
          :max="3.0"
          :marks="scale_marks"
          :format-tooltip="(x) => `${x * 100}%`"
        />
        <n-button
          class="scale-apply"
          :disabled="new_scale == conf.webview.scale"
          @click="conf.webview.scale = new_scale"
        >
          应用
        </n-button>
      </n-form-item>
      <n-form-item label="显示主题">
        <n-radio-group v-model:value="conf.theme">
          <n-space>
            <n-radio value="light">亮色</n-radio>
            <n-radio value="dark">暗色</n-radio>
          </n-space>
        </n-radio-group>
      </n-form-item>
      <n-form-item :show-label="false">
        <n-checkbox v-model:checked="conf.webview.tray">
          使用托盘图标
          <help-text>重启生效</help-text>
        </n-checkbox>
      </n-form-item>
      <n-divider />
      <n-form-item label="截图最短间隔">
        <n-input-number v-model:value="conf.screenshot_interval" :precision="0">
          <template #suffix>毫秒</template>
        </n-input-number>
      </n-form-item>
      <n-form-item>
        <template #label>
          <span>截图保存时间</span>
          <help-text>可填小数</help-text>
        </template>
        <n-input-number v-model:value="conf.screenshot">
          <template #suffix>小时</template>
        </n-input-number>
      </n-form-item>
      <n-form-item label="等待时间">
        <n-table size="small" class="waiting-table">
          <thead>
            <tr>
              <th>场景</th>
              <th>截图间隔</th>
              <th>超时时长</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(value, key) in conf.waiting_scene_v2">
              <td>{{ scene_name[key] }}</td>
              <td>
                <n-input-number v-model:value="value[0]" :show-button="false" :precision="0">
                  <template #suffix>毫秒</template>
                </n-input-number>
              </td>
              <td>
                <n-input-number v-model:value="value[1]" :show-button="false" :precision="0">
                  <template #suffix>秒</template>
                </n-input-number>
              </td>
            </tr>
          </tbody>
        </n-table>
      </n-form-item>
      <n-divider />
      <n-form-item :show-label="false">
        <n-checkbox v-model:checked="conf.start_automatically">
          启动mower-ng后直接开始运行
        </n-checkbox>
      </n-form-item>
    </n-form>
  </n-card>
</template>

<style scoped>
.scale {
  width: 60px;
  text-align: right;
}

.scale-apply {
  margin-left: 24px;
}

.waiting-table {
  th,
  td {
    padding: 4px;
    min-width: 70px;
    width: 100px;

    &:first-child {
      width: auto;
      padding: 4px 8px;
    }
  }
}
</style>
