<template>
  <div class="app-container h-full flex flex-1 flex-col">
    <!-- 搜索 -->
    <page-search
      ref="searchRef"
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    ></page-search>

    <!-- 列表 -->
    <page-content
      ref="contentRef"
      :content-config="contentConfig"
      @add-click="handleAddClick"
      @export-click="handleExportClick"
      @search-click="handleSearchClick"
      @toolbar-click="handleToolbarClick"
      @operate-click="handleOperateClick"
      @filter-change="handleFilterChange"
    >
      <template #replyStatus="scope">
        <el-tag :type="scope.row.replyStatus == 1 ? 'success' : 'warning'">
          {{ scope.row.replyStatus == 1 ? "已回复" : "未回复" }}
        </el-tag>
      </template>
      <template #images="scope">
        <el-image v-if="scope.row.images != ''" :src="scope.row.images" style="width: 100px" />
        <span v-else>暂未上传图片</span>
      </template>
    </page-content>

    <!-- 新增 -->
    <page-modal
      ref="addModalRef"
      :modal-config="addModalConfig"
      @submit-click="handleSubmitClick"
    ></page-modal>

    <!-- 编辑 -->
    <page-modal
      ref="editModalRef"
      :modal-config="editModalConfig"
      @submit-click="handleSubmitClick"
    >
      <template #images="{ formData, attrs }">
        <MultiImageDisplay :images="formData.images" v-bind="attrs" />
      </template>
    </page-modal>
  </div>
</template>

<script setup lang="ts">
import MultiImageDisplay from "./components/MultiImageDisplay.vue";

defineOptions({ name: "UserFeedback" });

import UserFeedbackAPI, {
  UserFeedbackForm,
  UserFeedbackPageQuery,
} from "@/api/userManage/user-feedback-api";
import type { IObject, IModalConfig, IContentConfig, ISearchConfig } from "@/components/CURD/types";
import usePage from "@/components/CURD/usePage";

// 组合式 CRUD
const {
  searchRef,
  contentRef,
  addModalRef,
  editModalRef,
  handleQueryClick,
  handleResetClick,
  handleAddClick,
  handleEditClick,
  handleSubmitClick,
  handleExportClick,
  handleSearchClick,
  handleFilterChange,
} = usePage();

// 搜索配置
const searchConfig: ISearchConfig = reactive({
  permPrefix: "business:user-feedback",
  formItems: [
    {
      type: "select",
      label: "问题类型",
      prop: "type",
      attrs: {
        placeholder: "请输入",
        clearable: true,
        style: { width: "200px" },
        options: [
          {
            value: "1",
            label: "投诉吐槽",
          },
          {
            value: "2",
            label: "功能异常",
          },
          {
            value: "3",
            label: "体验问题",
          },
          {
            value: "4",
            label: "功能建议",
          },
          {
            value: "9",
            label: "其他",
          },
        ],
      },
    },
  ],
});

// 列表配置
const contentConfig: IContentConfig<UserFeedbackPageQuery> = reactive({
  // 权限前缀
  permPrefix: "business:user-feedback",
  table: {
    border: true,
    highlightCurrentRow: true,
  },
  // 主键
  pk: "id",
  // 列表查询接口
  indexAction: UserFeedbackAPI.getPage,
  // 删除接口
  deleteAction: UserFeedbackAPI.deleteByIds,
  // 数据解析函数
  parseData(res: any) {
    return {
      total: res.total,
      list: res.list,
    };
  },
  // 分页配置
  pagination: {
    background: true,
    layout: "total, sizes, prev, pager, next, jumper",
    pageSize: 20,
    pageSizes: [10, 20, 30, 50],
  },
  // 工具栏配置
  defaultToolbar: ["refresh", "filter"],
  // 表格列配置
  cols: [
    { type: "selection", width: 55, align: "center" },
    {
      label: "问题类型", //（1投诉吐槽，2功能异常，3体验问题，4功能建议，9其他 ）
      prop: "type",
      templet: "list",
      selectList: {
        1: "投诉吐槽",
        2: "功能异常",
        3: "体验问题",
        4: "功能建议",
        9: "其他",
      },
    },
    { label: "问题描述", prop: "description" },
    {
      label: "相关图片",
      prop: "images",
      templet: "image",
    },
    { label: "联系方式(手机号或者邮箱)", prop: "contactWay" },
    { label: "答复信息", prop: "reply" },
    { label: "回复时间", prop: "replyTime" },
    {
      label: "回复状态", //0未回复，1已回复
      prop: "replyStatus",
      templet: "custom",
    },
    { label: "创建时间", prop: "createTime" },
    {
      label: "操作",
      prop: "operation",
      width: 220,
      templet: "tool",
      operat: [
        {
          name: "reply",
          text: "回复",
          attrs: { icon: "el-icon-Comment", type: "primary" },
          render: (row: any) => row.replyStatus !== 1, // 仅未回复时显示
        },
        "delete",
      ],
    },
  ],
});

// 新增配置
const addModalConfig: IModalConfig<UserFeedbackForm> = reactive({
  // 权限前缀
  permPrefix: "business:user-feedback",
  // 主键
  pk: "id",
  // 弹窗配置
  dialog: {
    title: "新增",
    width: 800,
    draggable: true,
  },
  form: {
    labelWidth: 100,
  },
  // 表单项配置
  formItems: [
    {
      type: "input",
      attrs: {
        placeholder: "问题描述",
        disabled: true,
      },
      label: "问题描述",
      prop: "description",
    },
    {
      type: "custom",
      label: "图片",
      prop: "images",
      slotName: "images",
      attrs: {
        disabled: true,
      },
    },
    {
      type: "input",
      attrs: {
        placeholder: "联系方式(手机号或者邮箱)",
        disabled: true,
      },
      label: "联系方式(手机号或者邮箱)",
      prop: "contactWay",
    },
    {
      type: "input",
      attrs: {
        placeholder: "答复信息",
      },
      rules: [{ required: true, message: "请输入答复信息", trigger: "change" }],
      label: "答复信息",
      prop: "reply",
    },
  ],
  // 提交函数
  formAction: (data: UserFeedbackForm) => {
    if (data.id) {
      // 编辑
      return UserFeedbackAPI.update(data.id as string, data);
    } else {
      // 新增
      return UserFeedbackAPI.create(data);
    }
  },
});

// 编辑配置
const editModalConfig: IModalConfig<UserFeedbackForm> = reactive({
  permPrefix: "business:user-feedback",
  component: "drawer",
  drawer: {
    title: "编辑",
    size: 800,
  },
  pk: "id",
  formAction(data: any) {
    const fromData = {
      id: data.id,
      reply: data.reply,
    };
    return UserFeedbackAPI.update(fromData);
  },
  formItems: addModalConfig.formItems, // 复用新增的表单项
});

// 处理操作按钮点击
const handleOperateClick = (data: IObject) => {
  if (data.name === "reply") {
    handleEditClick(data.row, async () => {
      return await UserFeedbackAPI.getFormData(data.row.id);
    });
  }
};

// 处理工具栏按钮点击（删除等）
const handleToolbarClick = (name: string) => {
  console.log(name);
};

const getImageList = (images: string): string[] => {
  if (!images) return [];
  return images
    .split(",")
    .map((url) => url.trim())
    .filter((url) => url !== "");
};
</script>
