<script setup>
import { inject, ref } from 'vue'

const mobile = inject('mobile')

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

import { storeToRefs } from 'pinia'
const { conf } = storeToRefs(config)

const elite_options = [
  { label: '精零', value: 0 },
  { label: '精一', value: 1 },
  { label: '精二', value: 2 }
]
</script>

<template>
  <n-card title="自动战斗">
    <n-form
      :label-placement="mobile ? 'top' : 'left'"
      :show-feedback="false"
      label-width="120"
      label-align="left"
    >
      <n-form-item :show-label="false">
        <n-checkbox v-model:checked="conf.avatar_recog_pause">识别干员时暂停</n-checkbox>
      </n-form-item>
      <div class="subtitle">借助战</div>
      <n-form-item label="精英化限制">
        <n-select v-model:value="conf.support.elite" :options="elite_options" />
      </n-form-item>
      <n-form-item label="等级限制">
        <n-input-number v-model:value="conf.support.level" :min="1" :max="90" />
      </n-form-item>
      <n-form-item label="最大刷新次数">
        <n-input-number v-model:value="conf.support.refresh" :min="1" />
      </n-form-item>
    </n-form>
  </n-card>
</template>

<style scoped>
.subtitle {
  font-weight: 500;
  font-size: 16px;
  margin: 12px 0 6px;
}
</style>
