<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"
      @search-click="handleSearchClick"
      @toolbar-click="handleToolbarClick"
      @filter-change="handleFilterChange"
    >
      <template #incomeType="scope">
        <el-tag :type="scope.row.incomeType === 1 ? 'success' : 'danger'">
          {{ scope.row.incomeType === 1 ? "转入" : "转出" }}
        </el-tag>
      </template>
      <template #firmType="scope">
        <el-tag :type="scope.row.firmType == 1 ? 'primary' : 'info'">
          {{ scope.row.firmType == 1 ? "企业" : "渠道" }}
        </el-tag>
      </template>
      <template #moneyChange="scope">
        <span
          :style="{ color: scope.row.incomeType === 1 ? '#67c23a' : '#f56c6c', fontWeight: 'bold' }"
        >
          {{ scope.row.incomeType === 1 ? "+" : "-"
          }}{{ scope.row.moneyChange?.toFixed(2) || "0.00" }}
        </span>
      </template>
      <template #beforeChange="scope">
        <span>¥ {{ scope.row.beforeChange?.toFixed(2) || "0.00" }}</span>
      </template>
      <template #afterChange="scope">
        <span style="color: #409eff; font-weight: bold">
          ¥ {{ scope.row.afterChange?.toFixed(2) || "0.00" }}
        </span>
      </template>
      <template #changeType="scope">
        <el-tag type="info">{{ getChangeTypeLabel(scope.row.changeType) }}</el-tag>
      </template>
    </page-content>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: "FirmAccountLog" });
import FirmAccountLogAPI, { FirmAccountLogPageQuery } from "@/api/toBManage/firm-account-log-api";
import type { IObject, IContentConfig, ISearchConfig } from "@/components/CURD/types";
import usePage from "@/components/CURD/usePage";
import { useUserStore } from "@/store";

// 三方用户角色编码
const ROLE_SFUSER = "SFUSER";

// 获取用户信息
const userStore = useUserStore();

// 判断是否为三方用户
const isSfUser = computed(() => {
  const roles = userStore.userInfo?.roles;
  return roles && roles.includes(ROLE_SFUSER);
});

// 组合式 CRUD
const {
  searchRef,
  contentRef,
  handleQueryClick,
  handleResetClick,
  handleSearchClick,
  handleFilterChange,
} = usePage();

// 变动类型映射
const changeTypeMap: Record<number, string> = {
  1: "平台充值",
  2: "平台扣款",
  3: "用户充电消费",
  4: "充电订单退款",
  5: "提现",
  6: "分成收益",
  7: "其他",
};

const getChangeTypeLabel = (type: number | undefined) => {
  return type ? changeTypeMap[type] || "未知" : "未知";
};

// 搜索配置
const searchConfig: ISearchConfig = reactive({
  // permPrefix: "business:firm-account-log",
  formItems: [
    {
      type: "select",
      label: "类型",
      prop: "firmType",
      attrs: {
        placeholder: "请选择类型",
        clearable: true,
        style: { width: "150px" },
      },
      options: [
        { label: "企业", value: 1 },
        { label: "渠道", value: 2 },
      ],
    },
    {
      type: "input",
      label: "流水号",
      prop: "serialNo",
      attrs: {
        placeholder: "流水号",
        clearable: true,
        style: { width: "200px" },
      },
    },
    {
      type: "input",
      label: "交易名称",
      prop: "name",
      attrs: {
        placeholder: "交易名称",
        clearable: true,
        style: { width: "200px" },
      },
    },
    {
      type: "select",
      label: "收支类型",
      prop: "incomeType",
      attrs: {
        placeholder: "请选择收支类型",
        clearable: true,
        style: { width: "150px" },
      },
      options: [
        { label: "转入", value: 1 },
        { label: "转出", value: 2 },
      ],
    },
    {
      type: "select",
      label: "变动类型",
      prop: "changeType",
      attrs: {
        placeholder: "请选择变动类型",
        clearable: true,
        style: { width: "150px" },
      },
      options: [
        { label: "平台充值", value: 1 },
        { label: "平台扣款", value: 2 },
        { label: "用户充电消费", value: 3 },
        { label: "充电订单退款", value: 4 },
        { label: "提现", value: 5 },
        { label: "分成收益", value: 6 },
        { label: "其他", value: 7 },
      ],
    },
  ],
});

// 列表配置
const contentConfig: IContentConfig<FirmAccountLogPageQuery> = reactive({
  // 权限前缀
  // permPrefix: "business:firm-account-log",
  table: {
    border: true,
    highlightCurrentRow: true,
  },
  // 主键
  pk: "id",
  // 列表查询接口
  indexAction: FirmAccountLogAPI.getPage,
  // 删除接口
  deleteAction: FirmAccountLogAPI.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],
  },
  // 工具栏配置 - 三方用户禁用删除按钮
  toolbar: [
    {
      name: "delete",
      text: "删除",
      perm: "delete",
      attrs: () => ({
        type: "danger",
        icon: "delete",
        disabled: isSfUser.value,
      }),
    },
  ],
  defaultToolbar: ["refresh", "filter"],
  // 表格列配置
  cols: [
    { type: "selection", width: 55, align: "center" },
    {
      label: "类型",
      prop: "firmType",
      width: 80,
      templet: "custom",
      slotName: "firmType",
    },
    { label: "名称", prop: "firmName", width: 150 },
    { label: "交易名称", prop: "name", width: 150 },
    { label: "流水号", prop: "serialNo", width: 180 },
    {
      label: "收支类型",
      prop: "incomeType",
      width: 100,
      templet: "custom",
      slotName: "incomeType",
    },
    {
      label: "变动金额",
      prop: "moneyChange",
      width: 120,
      templet: "custom",
      slotName: "moneyChange",
    },
    {
      label: "变动前金额",
      prop: "beforeChange",
      width: 120,
      templet: "custom",
      slotName: "beforeChange",
    },
    {
      label: "变动后金额",
      prop: "afterChange",
      width: 120,
      templet: "custom",
      slotName: "afterChange",
    },
    {
      label: "变动类型",
      prop: "changeType",
      width: 120,
      templet: "custom",
      slotName: "changeType",
    },
    { label: "备注", prop: "remark", minWidth: 150 },
    { label: "创建时间", prop: "createTime", width: 170 },
    {
      label: "操作",
      prop: "operation",
      width: 100,
      templet: "tool",
      operat: [
        {
          name: "delete",
          text: "删除",
          attrs: () => ({
            type: "danger",
            icon: "delete",
            link: true,
            size: "small",
            disabled: isSfUser.value,
          }),
        },
      ],
    },
  ],
});

// 处理工具栏按钮点击
const handleToolbarClick = (name: string) => {
  console.log(name);
};
</script>
