<script setup>
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="110"
      label-align="left"
    >
      <n-form-item :show-label="false">
        <n-checkbox v-model:checked="conf.avatar_recog_pause">识别干员时暂停</n-checkbox>
      </n-form-item>
      <n-form-item>
        <template #label>
          <span>第一段滑动</span>
          <help-text>
            <div>把干员从待部署区域拖到地图上的对应位置</div>
            <div>默认值：400毫秒</div>
          </help-text>
        </template>
        <n-input-number v-model:value="conf.first_swipe_duration" :precision="0">
          <template #suffix>毫秒</template>
        </n-input-number>
      </n-form-item>
      <n-form-item>
        <template #label>
          <span>第二段滑动</span>
          <help-text>
            <div>确认部署方向</div>
            <div>默认值：200毫秒</div>
          </help-text>
        </template>
        <n-input-number v-model:value="conf.second_swipe_duration" :precision="0">
          <template #suffix>毫秒</template>
        </n-input-number>
      </n-form-item>
      <n-divider />
      <n-h4 class="subtitle">借助战</n-h4>
      <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 {
  margin: 12px 0 6px;
}
</style>
