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

const store = useConfigStore()
const { conf } = storeToRefs(store)

import { NTag } from 'naive-ui'
import { h, ref } from 'vue'

const currentDay = ref(new Date().getDay())
const daysOfWeek = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
const togglePlanAndStage = (plan, day) => {
  plan[day] = plan[day] === 1 ? 2 : 1
  conf.value.maa_weekly_plan.slice(0, daysOfWeek.length).forEach((p, i) => {
    p.stage = conf.value.maa_weekly_plan1.value
      .filter((item) => item[daysOfWeek[i]] === 2)
      .map((item) => item.stage)
      .flat()
  })
}

const togglePlan = (plan) => {
  let kai = 0
  let guan = 0
  daysOfWeek.forEach((day) => {
    if (plan[day] === 1) {
      guan = guan + 1
    } else if (plan[day] === 2) {
      kai = kai + 1
    }
  })
  daysOfWeek.forEach((day) => {
    if (plan[day] > 0) {
      if (kai > guan) {
        plan[day] = 1
      } else {
        plan[day] = 2
      }
    }
  })

  conf.value.maa_weekly_plan.slice(0, daysOfWeek.length).forEach((p, i) => {
    p.stage = conf.value.maa_weekly_plan1
      .filter((item) => item[daysOfWeek[i]] === 2)
      .map((item) => item.stage)
      .flat()
  })
}
const changestage = (plan, newstage) => {
  plan['stage'] = newstage
  console.log(plan['stage'])
  conf.value.maa_weekly_plan.slice(0, daysOfWeek.length).forEach((p, i) => {
    p.stage = conf.value.maa_weekly_plan1
      .filter((item) => item[daysOfWeek[i]] === 2)
      .map((item) => item.stage)
      .flat()
  })
}
const showstage = (stage) => {
  const valueMapping = {
    '1-7': '1-7',
    Annihilation: '剿灭',
    'LS-6': '经验书',
    'CE-6': '龙门币',
    'AP-5': '红票',
    'SK-5': '碳条',
    'CA-5': '技能书',
    'PR-A-2': '重装医疗2',
    'PR-B-2': '狙击术士2',
    'PR-C-2': '先锋辅助2',
    'PR-D-2': '近卫特种2',
    'PR-A-1': '重装医疗1',
    'PR-B-1': '狙击术士1',
    'PR-C-1': '先锋辅助1',
    'PR-D-1': '近卫特种1',
    '': '上次作战'
  }

  if (stage in valueMapping) {
    return valueMapping[stage]
  } else {
    return stage
  }
}

function create_tag(label) {
  label = label.toUpperCase()
  if (label == ' ' || label == '上次作战') {
    return {
      label: '上次作战',
      value: ''
    }
  } else if (label == '当期剿灭') {
    return {
      label: '当期剿灭',
      value: 'Annihilation'
    }
  } else if (label.endsWith('磨难')) {
    return {
      label: label,
      value: label.slice(0, -2) + '-HARD'
    }
  } else if (label.endsWith('标准')) {
    return {
      label: label,
      value: label.slice(0, -2) + '-NORMAL'
    }
  } else {
    return {
      label,
      value: label
    }
  }
}
const 默认 = [
  {
    stage: 'Annihilation',
    周一: 1,
    周二: 1,
    周三: 1,
    周四: 1,
    周五: 1,
    周六: 1,
    周日: 1
  },
  {
    stage: '',
    周一: 1,
    周二: 1,
    周三: 1,
    周四: 1,
    周五: 1,
    周六: 1,
    周日: 1
  },
  {
    stage: '点x删除',
    周一: 1,
    周二: 1,
    周三: 1,
    周四: 1,
    周五: 1,
    周六: 1,
    周日: 1
  },
  {
    stage: '把鼠标放到问号上查看帮助',
    周一: 1,
    周二: 1,
    周三: 1,
    周四: 1,
    周五: 1,
    周六: 1,
    周日: 1
  },
  {
    stage: '自定义关卡3',
    周一: 1,
    周二: 1,
    周三: 1,
    周四: 1,
    周五: 1,
    周六: 1,
    周日: 1
  },
  {
    stage: '1-7',
    周一: 1,
    周二: 1,
    周三: 1,
    周四: 1,
    周五: 1,
    周六: 1,
    周日: 1
  },
  {
    stage: 'LS-6',
    周一: 1,
    周二: 1,
    周三: 1,
    周四: 1,
    周五: 1,
    周六: 1,
    周日: 1
  },
  {
    stage: 'CE-6',
    周一: 0,
    周二: 1,
    周三: 0,
    周四: 1,
    周五: 0,
    周六: 1,
    周日: 1
  },
  {
    stage: 'AP-5',
    周一: 1,
    周二: 0,
    周三: 0,
    周四: 1,
    周五: 0,
    周六: 1,
    周日: 1
  },
  {
    stage: 'SK-5',
    周一: 1,
    周二: 0,
    周三: 1,
    周四: 0,
    周五: 1,
    周六: 1,
    周日: 0
  },
  {
    stage: 'CA-5',
    周一: 0,
    周二: 1,
    周三: 1,
    周四: 0,
    周五: 1,
    周六: 0,
    周日: 1
  },
  {
    stage: 'PR-A-2',
    周一: 1,
    周二: 0,
    周三: 0,
    周四: 1,
    周五: 1,
    周六: 0,
    周日: 1
  },
  {
    stage: 'PR-A-1',
    周一: 1,
    周二: 0,
    周三: 0,
    周四: 1,
    周五: 1,
    周六: 0,
    周日: 1
  },
  {
    stage: 'PR-B-2',
    周一: 1,
    周二: 1,
    周三: 0,
    周四: 0,
    周五: 1,
    周六: 1,
    周日: 0
  },
  {
    stage: 'PR-B-1',
    周一: 1,
    周二: 1,
    周三: 0,
    周四: 0,
    周五: 1,
    周六: 1,
    周日: 0
  },
  {
    stage: 'PR-C-2',
    周一: 0,
    周二: 0,
    周三: 1,
    周四: 1,
    周五: 0,
    周六: 1,
    周日: 1
  },
  {
    stage: 'PR-C-1',
    周一: 0,
    周二: 0,
    周三: 1,
    周四: 1,
    周五: 0,
    周六: 1,
    周日: 1
  },
  {
    stage: 'PR-D-2',
    周一: 0,
    周二: 1,
    周三: 1,
    周四: 0,
    周五: 0,
    周六: 1,
    周日: 1
  },
  {
    stage: 'PR-D-1',
    周一: 0,
    周二: 1,
    周三: 1,
    周四: 0,
    周五: 0,
    周六: 1,
    周日: 1
  }
]
function clear() {
  maa_weekly_plan1.value = JSON.parse(JSON.stringify(默认));
}

const mobile = inject('mobile')
const axios = inject('axios')

const bg_off = computed(() => {
  return conf.value.theme == 'light' ? 'hsl(33, 30%, 91%)' : 'hsl(33, 15%, 50%)'
})

const bg_on = computed(() => {
  return conf.value.theme == 'light' ? 'hsl(200, 90%, 65%)' : 'hsl(200, 80%, 30%)'
})

const activity_url = `${import.meta.env.VITE_HTTP_URL}/activity`
const activity = ref([])

async function get_activity() {
  const { data } = await axios.get(activity_url)
  activity.value = data
}
onMounted(get_activity)

import RefreshIcon from '@vicons/tabler/Refresh'

function drag(a, ev) {
  ev.dataTransfer.setData('text', a)
}

function drop(plan, ev) {
  ev.preventDefault()
  const data = ev.dataTransfer.getData('text')
  changestage(plan, [data])
}
</script>

<template>
  <n-card>
    <n-checkbox v-model:checked="conf.maa_enable" class="card-title">刷理智周计划</n-checkbox>

    有问题先看问号，2024年10月5日更新了 请点击下方按钮
    <help-text>
      <div>支持所有主线关卡</div>
      <div>如何不打本：<b>把所有的"打"都点了</b>或者点一次<b>清除当前配置以匹配最新表格</b></div>
      <div>建议每次更新后 点一次<b>清除当前配置以匹配最新表格</b></div>
      <div>前三行的空行用来写 一些自定义关卡</div>
      <ul>
        <li>
          在第一行填入<n-tag closable class="tag-mr">HE-7</n-tag>

          第二行填入<n-tag closable>1-7</n-tag>

          则会刷活动关HE-7，若活动未开放或刷完HE-7有剩余的理智，则刷1-7。
        </li>
        <li>
          含磨难的主线关卡会自动选择可以代理的难度刷理智，仅需要写关卡名，如<n-tag closable
            >12-17</n-tag
          >
        </li>
      </ul>
    </help-text>

    <n-button @click="clear" class="btn-clear">清除当前配置以匹配最新表格</n-button>

    <n-form
      :label-placement="mobile ? 'top' : 'left'"
      :show-feedback="false"
      label-width="72"
      label-align="left"
    >
      <n-form-item :show-label="false">
        <n-flex>
          <n-checkbox v-model:checked="conf.maa_expiring_medicine">
            自动使用将要过期（约3天）的理智药
          </n-checkbox>
          <n-checkbox
            v-model:checked="conf.exipring_medicine_on_weekend"
            :disabled="!conf.maa_expiring_medicine"
          >
            仅在周末使用
          </n-checkbox>
        </n-flex>
      </n-form-item>
    </n-form>

    <n-flex class="activity">
      <n-button text type="primary" @click="get_activity">
        <template #icon>
          <n-icon>
            <refresh-icon />
          </n-icon>
        </template>
        活动关卡
      </n-button>
      <n-tag v-for="a in activity" draggable="true" @dragstart="drag(a, $event)">{{ a }}</n-tag>
    </n-flex>

    <div class="tasktable">
      <table size="small" :single-column="true" :single-line="true">
        <thead>
          <tr>
            <th>全选</th>
            <th>关卡</th>
            <th v-for="(day, index) in daysOfWeek" :key="index">
              {{ day[1] }}
              <div v-if="currentDay === (index + 1) % 7" class="today">今天</div>
            </th>
          </tr>
          <!-- <tr>
            <th></th>
            <th>药</th>
            <th v-for="(day, index) in daysOfWeek" :key="index">
              <n-input-number
                v-model:value="maa_weekly_plan[index].medicine"
                :min="0"
                :max="999"
                :show-button="false"
              />
            </th>
          </tr> -->
        </thead>
        <tbody>
          <tr v-for="(plan, index) in conf.maa_weekly_plan1" :key="plan.weekday1">
            <td>
              <n-button
                :v-model="plan"
                @click="() => togglePlan(plan)"
                quaternary
                style="width: 100%; height: 100%"
                class="class1"
              ></n-button>
            </td>
            <td>
              <template v-if="index > 1 && index < 5">
                <n-select
                  v-if="Array.isArray(plan.stage) && plan.stage.length === 0"
                  placeholder="关卡"
                  v-model:value="plan.stage"
                  filterable
                  multiple
                  tag
                  :show="false"
                  :show-arrow="false"
                  :on-create="create_tag"
                  @update:value="(value) => changestage(plan, value)"
                  @dragover.prevent
                  @drop="drop(plan, $event)"
                />
                <n-tag
                  v-else
                  closable
                  class="custom-tag"
                  @close="changestage(plan, [])"
                  @dragover.prevent
                  @drop="drop(plan, $event)"
                >
                  {{ plan.stage[0] }}
                </n-tag>
              </template>
              <span v-else>{{ showstage(plan.stage) }}</span>
            </td>
            <td
              v-for="day in daysOfWeek"
              :class="{ class2: plan[day] === 2, class1: plan[day] === 1 }"
            >
              <template v-if="plan[day] !== 0">
                <n-button
                  :v-model="plan[day]"
                  @click="() => togglePlanAndStage(plan, day)"
                  quaternary
                  style="width: 100%; height: 100%"
                >
                  <span v-if="plan[day] === 2">打</span>
                  <span v-if="plan[day] === 1"></span>
                </n-button>
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </n-card>
</template>

<style scoped lang="scss">
.tasktable {
  margin-top: 4px;
}

.btn-clear {
  margin: 4px;
}

.tasktable {
  table {
    width: 100%;
  }
}

@media screen and (max-width: 1399px) {
  .tasktable {
    height: 300px;
    overflow-y: auto;
  }

  .tasktable table {
    border-collapse: collapse;
  }

  .tasktable td:first-child {
    width: 10%;
  }

  .tasktable td:nth-child(2) {
    width: 18%;
  }

  .tasktable td:not(:first-child):not(:nth-child(2)) {
    width: calc(72% / 7);
  }

  .tasktable thead {
    position: sticky;
    top: 0;
    background-color: hsl(196, 26%, 60%);
    z-index: 1;
  }
}

@media screen and (min-width: 1400px) {
  .tasktable {
    height: auto;
  }

  .tasktable table {
    border-collapse: collapse;
  }

  .tasktable td:first-child {
    width: 10%;
  }

  .tasktable td:nth-child(2) {
    width: 18%;
  }

  .tasktable td:not(:first-child):not(:nth-child(2)) {
    width: calc(72% / 7);
  }

  .tasktable thead {
    background-color: hsl(196, 26%, 60%);
  }
}

.class1 {
  background-color: v-bind('bg_off');
  text-align: center;
  /* 文本水平居中 */
  vertical-align: middle;
  /* 文本垂直居中 */
}

.class2 {
  background-color: v-bind('bg_on');
  text-align: center;
  /* 文本水平居中 */
  vertical-align: middle;
  /* 文本垂直居中 */
}

.custom-tag {
  width: 100%;
  height: 100%;
  justify-content: space-between;
}

.today {
  font-weight: normal;
  font-size: 12px;
}

.activity {
  align-items: center;
}
</style>
