import { h, ref } from "vue";
import editForm from "./form.vue";
import { message } from "@/utils/message";
import {
  queryReportList,
  handleReport
} from "@/api/modules/Inform";
import { addDialog } from "@/components/ReDialog";
export function useData() {
  const formRef = ref();
  const loading = ref(true);
  const tableList = ref([]);
  const isShow = ref(false);
  const pagination = ref({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  const searchForm = ref({
    user_id: "",
    search_type_id: "",
    report_type: "",
    search_status: ""
  });
  const searchLabel = ref([
    { label: "搜索用户ID", prop: "user_id", type: "input" },
    {
      label: "举报类型",
      prop: "report_type",
      type: "select",
      optionList: [
        { label: "用户", value: 1 },
        { label: "房间", value: 2 },
        { label: "动态", value: 3 }
      ]
    },
    {
      label: "状态",
      prop: "search_status",
      type: "select",
      optionList: [
        { label: "待处理", value: 1 },
        { label: "已处理", value: 2 },
        { label: "已忽略", value: 3 }
      ]
    }
  ]);
  const indexMethod = (index: number) => {
    return index + 1;
  };
  const tableLabel = ref([
    {
      type: "index",
      index: indexMethod
    },
    {
      label: "用户ID",
      prop: "user_id"
    },
    {
      label: "举报人",
      prop: "nickname"
    },
    {
      label: "被举报对象",
      prop: "from_id_title"
    },
    {
      label: "举报类型",
      prop: "type_name"
    },
    {
      label: "举报内容",
      prop: "content"
    },
    {
      label: "图片",
      prop: "image",
      cellRenderer: ({ row }) => (
        <el-image
          fit="cover"
          preview-teleported={true}
          src={row.image}
          preview-src-list={Array.of(row.image)}
          class="w-[40px] h-[40px]  align-middle"
        />
      )
    },
    {
      label: "处理状态",
      prop: "status",
      cellRenderer: ({ row }) => (
        <el-tag type={row.status === 2 ? 'success' : row.status === 1 ? '' : 'info'}>{row.status === 2 ? '已处理' : row.status === 1 ? '待处理' : '已忽略'}</el-tag>
      ),
    },
    {
      label: "处理内容",
      prop: "processing"
    },
    {
      label: "提交时间",
      prop: "createtime"
    },
    {
      label: "操作",
      fixed: "right",
      width: 210,
      slot: "operation"
    }
  ]);
  const onSearch = async (formData) => {
    loading.value = true;
    searchForm.value = { ...formData }
    const { data, code } = await queryReportList({
      ...formData,
      page: pagination.value.currentPage,
      page_limit: pagination.value.pageSize
    });
    if (code) {
      tableList.value = data.lists;
      pagination.value.total = data.count;
      pagination.value.currentPage = data.page;
    }
    loading.value = false;
  };
  const handleSizeChange = (val: number) => {
    pagination.value.pageSize = val;
    onSearch(searchForm.value);
  };
  const handleCurrentChange = (val: number) => {
    pagination.value.currentPage = val;
    onSearch(searchForm.value);
  };
  const openDialog = (title = "新增", rowData: any) => {
    addDialog({
      title: `${title}举报`,
      props: {
        formInline: {
          ...rowData,
          status: rowData?.status ?? "",
          processing: rowData?.processing ?? "",
        }
      },
      width: "40%",
      closeOnClickModal: false,
      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
      beforeSure: (done, { options }) => {
        const FormRef = formRef.value.getRef();
        const curData = options.props.formInline;
        const saveData = async form => {
          const { code, msg } = await handleReport({
            ...form,
            id: rowData.id
          });
          if (code) {
            message("操作成功", { type: "success" });
            onSearch(searchForm.value);
            done();
          } else {
            message(msg, { type: "error" });
          }
        };
        FormRef.validate(valid => {
          if (valid) {
            saveData(curData);
          }
        });
      }
    });
  };
  return {
    searchForm,
    searchLabel,
    onSearch,
    isShow,
    tableList,
    tableLabel,
    pagination,
    handleSizeChange,
    handleCurrentChange,
    loading,
    openDialog
  };
}