<template>
  <n-popconfirm
    ref="popconfirm"
    :show-icon="false"
    @positive-click="handlePositiveClick"
    :positive-text="null"
    :negative-text="null"
  >
    <!-- 按钮区 -->
    <template #trigger>
      <n-button quaternary size="small">
        <slot></slot>
      </n-button>
    </template>

    <div class="issue-list" v-if="!currentKey">
      <div
        class="issue-item"
        @click="handlerClick(item.dictKey, item.dictValue)"
        v-for="(item, index) in list"
        :key="item.id"
      >
        {{ item.dictValue }}
      </div>
    </div>

    <div v-else class="list-query">
      <div class="list-title">
        <div class="title-text">{{ currentValue }}</div>
        <n-button size="small" @click="handlerBack()">返回</n-button>
      </div>
      <div
        @click="handlerQuerParmas(item.content)"
        class="list-item"
        v-for="item in queryList"
        :key="item.id"
        v-show="queryList.length > 0"
      >
        {{ item.content }}
      </div>

      <n-empty description="你什么也找不到" v-show="queryList.length === 0"> </n-empty>
    </div>
  </n-popconfirm>
</template>

<script setup>
import { ref } from 'vue'
import { getIssue } from '@/api/path'
import { useMessage } from 'naive-ui'
import { useSystemStore } from '@/store/modules/systemStore/systemStore'
const message = useMessage()

const props = defineProps({
  modelValue: {
    type: String, // 假设 modelValue 是字符串类型
    default: ''
  },
  list: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['update:modelValue'])
const systemStore = useSystemStore()
let popconfirm = ref(null)
let currentKey = ref(null)
let currentValue = ref('')
let queryList = ref([])

const handlerQuerParmas = content => {
  emit('update:modelValue', content)
  emit('sendMessage')
  popconfirm.value.setShow(false)
  setTimeout(() => {
    handlerBack()
  }, 1000)
}
const handlerBack = () => {
  currentKey.value = null
  currentValue.value = ''
}
const handlerClick = (dictKey, dictValue) => {
  if (currentKey.value != dictKey) {
    currentKey.value = dictKey
    currentValue.value = dictValue
    getList()
  }
}

const getList = async () => {
  try {
    const res = await getIssue({
      questionType: currentKey.value,
      userId:systemStore.userInfo.userId,
      current:1,
      size:100
    })
    if (res && res.data) {
      queryList.value = res.data.records
    }
  } catch {
    message.warning('查询出错！请联系管理员')
  }
}
</script>

<style lang="scss" scoped>
.list-query {
  width: 400px;
  height: 200px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  gap: 6px;
  .list-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-text {
      font-size: 13px;
      font-weight: bold;
      color: #fff;
    }
  }

  .list-item {
    box-sizing: border-box;
    padding: 3px 10px;
    background-color: #3d424d;
    font-size: 14px;
    font-weight: 400;
    border-radius: 4px;
    cursor: pointer;
  }
}
.issue-list {
  width: 350px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  .issue-item {
    padding: 20px 0;
    color: '#fff';
    text-align: center;
    background-color: #3d424d;
    border: 1px solid #474d59;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
  }
  .active-type {
    border-color: #507afc;
  }
}
</style>
