<script setup lang="ts">
import { formatDate } from '@/utils/utils'
import type { BasicForm, ICRUD } from '@/types/form'
import { getAdviceList, saveAdvice, deleteAdvice } from '@/api/miniprogram'

const CRUD: ICRUD = {
  create(data) {
    return saveAdvice(data)
  },
  update(data) {
    return Promise.resolve(data)
  },
  getList(data) {
    return getAdviceList(data)
  },
  delete(data) {
    return deleteAdvice(data)
  }
}

const formConfig = reactive<BasicForm>({
  span: 24,
  formItems: []
})

const dialogVisible = ref(false)
const replyConfig = reactive<BasicForm>({
  span: 24,
  formItems: [
    {
      label: '回复内容',
      value: '',
      name: 'reply',
      type: 'input',
      rules: [{ required: true, message: '请输入回复内容', trigger: 'blur' }],
      props: {
        type: 'textarea'
      }
    }
  ]
})
const curQuestion = ref<any>(null)
const formData = ref<any>({})

const openDiolog = (row: any) => {
  dialogVisible.value = true
  curQuestion.value = row
}
const handleReply = () => {
  // 回复接口
}
</script>

<template>
  <pro-table
    :formConfig="formConfig"
    :crud="CRUD"
    :selection="false"
    :showToolbar="false"
    :tableConfig="{ showEdit: false }"
  >
    <vxe-column field="content" title="反馈内容"></vxe-column>
    <vxe-column field="createDate" title="反馈时间">
      <template #default="{ row }">
        {{ formatDate(row.createDate) }}
      </template>
    </vxe-column>
    <template #operateBefore="{ row }">
      <el-button type="primary" size="small" @click="openDiolog(row)">回复</el-button>
    </template>
  </pro-table>

  <dialog-form
    v-model="dialogVisible"
    :formConfig="replyConfig"
    :create="handleReply"
    :update="handleReply"
    :formData="formData"
    v-if="dialogVisible"
  />
</template>

<style lang="scss" scoped></style>
