<route lang="yaml">
style:
  navigationBarTitleText: 添加标签
  navigationBarBackgroundColor: '#fff'
</route>
<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
import { getByDictType, getCircleTags } from '../../../core/libs/requests'
import { DictType } from '../../../core/libs/models'
import { ref } from 'vue'

const { data: tagTypes, run: setTagTypes } = useRequest(() => getByDictType(DictType.circleTag), {
  initialData: [],
})
const { data: tagsData, run: setTagsData } = useRequest(() => getCircleTags({}), {
  initialData: { list: [] },
})
const selected = ref<string[]>([])
const tags = ref<string[]>(['中国园林游学', '东方艺术设计研习营', '早稻田大学深度设计游学'])
const tags2 = ref<string[]>(['中国园林游学', '东方艺术设计研习营', '早稻田大学深度设计游学'])
const tags3 = ref<string[]>(['中国园林游学', '东方艺术设计研习营', '早稻田大学深度设计游学'])

const handleClick = (tagName: string) => {
  if (selected.value.includes(tagName)) {
    selected.value = selected.value.filter((it) => it !== tagName)
  } else {
    selected.value.push(tagName)
  }
}
const handleSubmit = async () => {
  // uniapp修改前一页的数据
  // const page = getCurrentPages()
  // const prevPage = page[page.length - 2]
  // prevPage.setData({
  //   tags: tags.value,
  // })
  // console.log(prevPage.$vm)
  // prevPage.$vm
  // console.log(prevPage.$vm?.updateTagName(1))
  await uni.navigateBack()
  uni.$emit('updateTagName', selected.value)
}
onMounted(async () => {
  await setTagTypes()
  await setTagsData()
})
onLoad(async (query: { tagName: string }) => {
  console.log(query)
  if (query.tagName !== '') {
    selected.value = query.tagName.split(',')
  }
})
</script>
<template>
  <div class="bg-white flex-grow p-3.5 flex flex-col">
    <template v-for="{ value, label } of tagTypes" :key="value">
      <SectionHeading :title="label" custom-class="my-6" size="base"></SectionHeading>
      <div class="flex flex-wrap gap-2">
        <template
          v-for="{ id, labelName } of tagsData.list.filter(
            ({ labelType }) => labelType.toString() === value.toString(),
          )"
          :key="id"
        >
          <wd-tag
            @click="handleClick(labelName)"
            :type="selected.includes(labelName) ? 'primary' : 'default'"
          >
            {{ labelName }}
          </wd-tag>
        </template>
      </div>
    </template>
    <!-- <SectionHeading title="游学标签" custom-class="my-6" size="base"></SectionHeading>
    <div class="flex flex-wrap">
      <template v-for="(it, i) in tags" :key="i">
        <wd-tag custom-class="m-1">{{ it }}</wd-tag>
      </template>
    </div>
    <SectionHeading title="活动标签" custom-class="my-6" size="base"></SectionHeading>
    <div class="flex flex-wrap">
      <template v-for="(it, i) in tags2" :key="i">
        <wd-tag custom-class="m-1" type="primary">{{ it }}</wd-tag>
      </template>
    </div> -->
    <!-- <SectionHeading title="自定义标签" custom-class="my-6" size="base"></SectionHeading>
    <div class="flex flex-wrap">
      <template v-for="(it, i) in tags3" :key="i">
        <wd-tag custom-class="m-1">{{ it }}</wd-tag>
      </template>
      <wd-tag custom-class="m-1">
        <wd-icon name="add"></wd-icon>
      </wd-tag>
    </div> -->
    <div class="flex-1"></div>
    <div><wd-button block :round="false" @click="handleSubmit()">确定</wd-button></div>
  </div>
</template>
