<script setup>
import { useConfigStore } from '@/stores/config'
import { usePlanStore } from '@/stores/plan'
import { storeToRefs } from 'pinia'

const config_store = useConfigStore()
const { conf, shop_list } = storeToRefs(config_store)

const plan_store = usePlanStore()
const { operators } = storeToRefs(plan_store)

const mobile = inject('mobile')

import { NAvatar, NTag } from 'naive-ui'

function render_tag({ option, handleClose }) {
  return h(
    NTag,
    {
      type: option.type,
      closable: true,
      onMousedown: (e) => {
        e.preventDefault()
      },
      onClose: (e) => {
        e.stopPropagation()
        handleClose()
      }
    },
    { default: () => option.label, avatar: () => h(NAvatar, { src: `/shop/${option.label}.png` }) }
  )
}

function render_label(option) {
  return h(
    'div',
    { style: { display: 'flex', 'align-items': 'center', gap: '6px', padding: '2px 0' } },
    [h(NAvatar, { src: `/shop/${option.label}.png` }), option.label]
  )
}

import { pinyin_match } from '@/utils/common'
import { render_op_label } from '@/utils/op_select'

const deploy_directions = [
  { label: '向上', value: 'Up' },
  { label: '向下', value: 'Down' },
  { label: '向左', value: 'Left' },
  { label: '向右', value: 'Right' }
]

const squads = [
  { label: '第一编队', value: 1 },
  { label: '第二编队', value: 2 },
  { label: '第三编队', value: 3 },
  { label: '第四编队', value: 4 }
]

const skills = [
  { label: '一技能', value: 1 },
  { label: '二技能', value: 2 },
  { label: '三技能', value: 3 }
]

const show_map = ref(false)
</script>

<template>
  <n-card>
    <template #header>
      <n-checkbox v-model:checked="conf.enable_party">
        <div class="card-title">线索收集与信用</div>
      </n-checkbox>
    </template>
    <n-checkbox v-model:checked="conf.leifeng_mode">赠送多余的线索</n-checkbox>
    <n-divider />
    <n-h4>
      信用商店购物
      <help-text>
        <span>性价比参考：</span>
        <n-button
          text
          tag="a"
          href="https://github.com/Bidgecfah/Rhodes-Island-Bureau-of-Price"
          target="_blank"
          type="primary"
        >
          罗德岛物价局
        </n-button>
        <p>注意：跑单时赤金与作战记录均大幅升值</p>
      </help-text>
    </n-h4>
    <n-form
      :label-placement="mobile ? 'top' : 'left'"
      :show-feedback="false"
      label-width="72"
      label-align="left"
    >
      <n-form-item label="信用溢出">
        <n-radio-group v-model:value="conf.maa_mall_ignore_blacklist_when_full">
          <n-space>
            <n-radio :value="false">停止购买</n-radio>
            <n-radio :value="true">无视黑名单继续购买，直至不再溢出</n-radio>
          </n-space>
        </n-radio-group>
      </n-form-item>
      <n-form-item label="优先购买">
        <n-radio-group v-model:value="conf.maa_mall_ignore_blacklist_when_full">
          <n-select
            multiple
            filterable
            tag
            :options="shop_list"
            v-model:value="conf.maa_mall_buy"
            :render-tag="render_tag"
            :render-label="render_label"
          />
        </n-radio-group>
      </n-form-item>
      <n-form-item label="黑名单">
        <n-select
          multiple
          filterable
          tag
          :options="shop_list"
          v-model:value="conf.maa_mall_blacklist"
          :render-tag="render_tag"
          :render-label="render_label"
        />
      </n-form-item>
      <n-divider />
      <n-form :label-placement="mobile ? 'top' : 'left'" :show-feedback="false" class="rogue">
        <n-form-item :show-label="false">
          <n-checkbox v-model:checked="conf.maa_credit_fight" :disabled="!conf.maa_enable">
            <div class="item">信用作战</div>
          </n-checkbox>
          <help-text>
            <div v-if="!conf.maa_enable">需开启日常任务</div>
            <div v-else>借助战打OF-1</div>
          </help-text>
        </n-form-item>
        <n-form-item label="编队">
          <n-select :options="squads" v-model:value="conf.credit_fight.squad" />
        </n-form-item>
        <n-form-item label="干员">
          <n-select
            style="flex: 3; margin-right: 8px"
            filterable
            :options="operators"
            v-model:value="conf.credit_fight.operator"
            :filter="(p, o) => pinyin_match(o.label, p)"
            :render-label="render_op_label"
          />
          <n-select style="flex: 2" :options="skills" v-model:value="conf.credit_fight.skill" />
        </n-form-item>
        <n-form-item label="部署">
          <div style="width: 40px; text-align: right">X</div>
          <n-input-number
            style="margin: 0 8px"
            v-model:value="conf.credit_fight.x"
            :show-button="false"
          />
          <div style="width: 40px; text-align: right">Y</div>
          <n-input-number
            style="margin: 0 8px"
            v-model:value="conf.credit_fight.y"
            :show-button="false"
          />
          <n-select
            style="width: 250px; margin-right: 8px"
            :options="deploy_directions"
            v-model:value="conf.credit_fight.direction"
          />
          <n-button @click="show_map = !show_map"
            >{{ show_map ? '隐藏' : '显示' }}OF-1地图</n-button
          >
        </n-form-item>
        <n-form-item :show-label="false" v-if="show_map">
          <n-image src="/map-OF-1.webp" width="100%" />
        </n-form-item>
      </n-form>
    </n-form>
  </n-card>
</template>

<style scoped lang="scss">
p {
  margin: 2px 0;
}

h4 {
  margin: 12px 0 8px 0;
}

table {
  width: 100%;
}

td {
  &:nth-child(1) {
    width: 80px;
  }
}

.ignore-blacklist {
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
}

.h4 {
  font-size: 16px;
  font-weight: 500;
}

.maa-shop {
  margin: 8px 0;
}

.item {
  font-weight: 500;
  font-size: 16px;
}
</style>
