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

const message = useMessage()
// 举报
const isVisibleReport = ref(true)

const reportParams = ref({
  reportId: undefined,
  text: '',
  type: 1,
})
const reportList = ref([])
async function getDictType() {
  try {
    const res = await commonApi.dictType({ type: 'report_type' })
    if (res.code === 200) {
      reportList.value = res.data
    }
  }
  catch (error) {
    console.log(error)
  }
}
getDictType()
function handleChange(item: any) {
  reportParams.value.reportId = item.dictValue
  if (item.dictValue !== '5') {
    reportParams.value.text = ''
  }
  console.log('object', reportParams.value)
}

function closeReport() {
  isVisibleReport.value = false
}

async function onReport() {
  if (reportParams.value.reportId !== undefined) {
    reportParams.value.productId = detailsInfo.value.id
    const res = await request.post('/report/addReport', reportParams.value)
    if (res.code === 200) {
      isVisibleReport.value = false
      message.success('举报成功')
    }
  }
}
</script>

<template>
  <n-modal
    v-model:show="isVisibleReport"
    :preset="null"
    :mask-closable="false"
    transform-origin="center"
    class="custom-modal"
  >
    <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">
        <n-radio
          v-for="(item, index) in reportList"
          :key="index"
          class="m-4 text-[#fff000]"
          size="large"
          :checked="reportParams.reportId === item.dictValue"
          value="Definitely Maybe"
          name="basic-demo"
          @change="handleChange(item)"
        >
          {{ item.dictLabel }}
        </n-radio>
        <n-input
          v-if="reportParams.reportId !== undefined && reportParams.reportId === '5'"
          v-model:value="reportParams.text"
          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="[
            reportParams.reportId !== undefined
              ? 'bg-[#4c79ee]'
              : 'bg-[#cccccc]',
          ]"
          @click="onReport"
        >
          确认
        </div>
      </div>
    </div>
  </n-modal>
</template>

<style scoped>
.container {
  /* position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0.4;
    background: #000; */
}
</style>
