<template>
  <div>
    <n-popconfirm :show-icon="false" @positive-click="handlePositiveClick">
      <!-- 按钮区 -->
      <template #trigger>
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-button strong secondary size="tiny">
              <template #icon>
                <n-icon size="14" style="cursor: pointer">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 12 12"
                  >
                    <g fill="none">
                      <path
                        d="M6.5 1.75a.75.75 0 0 0-1.5 0V5H1.75a.75.75 0 0 0 0 1.5H5v3.25a.75.75 0 0 0 1.5 0V6.5h3.25a.75.75 0 0 0 0-1.5H6.5V1.75z"
                        fill="currentColor"
                      ></path>
                    </g>
                  </svg>
                </n-icon>
              </template>
            </n-button>
          </template>
          添加为常用问题
        </n-tooltip>
      </template>

      <!-- 内容区 -->
      <div class="issue-list">
        <div
          class="issue-item"
          :class="currentIndex == index ? 'active-type' : ''"
          @click="handlerClick(item.dictKey, index)"
          v-for="(item, index) in list"
          :key="item.id"
        >
          {{ item.dictValue }}
        </div>
      </div>
    </n-popconfirm>
  </div>
</template>

<script setup>
import { addIssue } from '@/api/path'
import { useMessage } from 'naive-ui'
import { ref, reactive } from 'vue'
import { useSystemStore } from '@/store/modules/systemStore/systemStore'

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  issueText: {
    type: String,
    default: ''
  }
})
const systemStore = useSystemStore()
let currentIndex = ref(null)
const message = useMessage()
let form = {
  questionType: undefined,
  content: undefined,
  userId: undefined
}

const handlePositiveClick = async () => {
  form.content = props.issueText
  form.userId = systemStore.userInfo.userId || 1
  try {
    await addIssue(form)
    currentIndex.value = null
  } catch {
    message.warning('保存出错！请联系管理员')
  }
}
const handlerClick = (dictKey, index) => {
  if (currentIndex.value != index) {
    form.questionType = dictKey
    currentIndex.value = index
  }
}
</script>

<style lang="scss" scoped>
.issue-list {
  width: 250px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;

  .issue-item {
    padding: 10px 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>
