<script setup lang="ts">
// 举报类型
import { commonApi } from '@/api/common'
import { Close } from '@vicons/ionicons5'

import {
  EllipsisVertical,
  FileChartColumn,
  Star,
  ThumbsUp,
} from 'lucide-vue-next'

interface PublishListParams {
  communityId: string | number
  tenantId: string | number
  publishId: string | number
  [key: string]: any
}

const props = defineProps<{
  publishListParams: PublishListParams
  modelValue: boolean
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
}>()

const message = useMessage()

const reportTypeText = ref('')
const reportType = ref('')
const reportList = ref([])

async function getDictType() {
  try {
    const res = await commonApi.dictType({ type: 'community_report' })
    if (res.code === 200) {
      reportList.value = res.data
    }
  }
  catch (error) {
    console.error(error)
  }
}
getDictType()

function handleChange(item: any) {
  reportType.value = item.dictValue
  if (item.dictValue !== '6') {
    reportTypeText.value = ''
  }
}

async function onReport() {
  if (reportType.value !== undefined) {
    const params = {
      communityId: props.publishListParams.communityId,
      content: reportTypeText.value,
      reportType: reportType.value,
      publishId: props.publishListParams.publishId,
      tenantId: props.publishListParams.tenantId,
    }
    const res = await request.post('/report/addReport', params)
    if (res.code === 200) {
      message.success('举报成功！')
      emit('update:modelValue', false)
    }
  }
}

function closeReport() {
  emit('update:modelValue', false)
}
</script>

<template>
  <div>
    <n-modal
      :show="modelValue"
      :preset="null"
      :mask-closable="false"
      transform-origin="center"
      class="custom-modal"
      @update:show="(value) => emit('update:modelValue', value)"
    >
      <div class="bg-white rounded-xl p-4">
        <div class="flex items-center justify-between">
          <div class="text-xl">
            举报
          </div>
          <div>
            <n-icon size="20" class="mr-2 cursor-pointer" @click="closeReport">
              <Close />
            </n-icon>
          </div>
        </div>
        <div class="flex flex-col p-4">
          <n-radio
            v-for="(item, index) in reportList"
            :key="index"
            class="m-4 text-[#fff000]"
            size="large"
            :checked="reportType === item.dictValue"
            value="Definitely Maybe"
            name="basic-demo"
            @change="handleChange(item)"
          >
            {{ item.dictLabel }}
          </n-radio>
          <n-input
            v-if="reportType !== undefined && reportType === '6'"
            v-model:value="reportTypeText"
            placeholder="点击输入"
            type="textarea"
            :autosize="{
              minRows: 5,
              maxRows: 10,
            }"
          />
          <div
            class="mt-4 w-[100%] h-10 flex rounded-lg text-white items-center justify-center cursor-pointer"
            :class="[
              reportType !== undefined ? 'bg-[#4c79ee]' : 'bg-[#cccccc]',
            ]"
            @click="onReport"
          >
            确认
          </div>
        </div>
      </div>
    </n-modal>
  </div>
</template>
