<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"
    >
      <template #orderType="scope">
        <Dict v-model="scope.formData[scope.prop]" code="charge_order_type" v-bind="scope.attrs" />
      </template>
      <template #status="scope">
        <Dict
          v-model="scope.formData[scope.prop]"
          code="charge_order_status"
          v-bind="scope.attrs"
        />
      </template>
      <template #stopType="scope">
        <Dict v-model="scope.formData[scope.prop]" code="stop_type" v-bind="scope.attrs" />
      </template>
      <template #maspStatus="scope">
        <Dict v-model="scope.formData[scope.prop]" code="masp_status" v-bind="scope.attrs" />
      </template>
    </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 #orderType="scope">
        <DictLabel v-model="scope.row[scope.prop]" code="charge_order_type" />
      </template>
      <template #status="scope">
        <DictLabel v-model="scope.row[scope.prop]" code="charge_order_status" />
      </template>
      <template #stopType="scope">
        <DictLabel v-model="scope.row[scope.prop]" code="stop_type" />
      </template>
      <template #maspStatus="scope">
        <DictLabel v-model="scope.row[scope.prop]" code="masp_status" />
      </template>
    </page-content>

    <!-- 新增 -->
    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
      <template #orderType="scope">
        <Dict v-model="scope.formData[scope.prop]" code="charge_order_type" v-bind="scope.attrs" />
      </template>
      <template #status="scope">
        <Dict
          v-model="scope.formData[scope.prop]"
          code="charge_order_status"
          v-bind="scope.attrs"
        />
      </template>
      <template #stopType="scope">
        <Dict v-model="scope.formData[scope.prop]" code="stop_type" v-bind="scope.attrs" />
      </template>
      <template #maspStatus="scope">
        <Dict v-model="scope.formData[scope.prop]" code="masp_status" v-bind="scope.attrs" />
      </template>
    </page-modal>

    <!-- 编辑 -->
    <page-modal
      ref="editModalRef"
      :modal-config="editModalConfig"
      @submit-click="handleSubmitClick"
    >
      <template #orderType="scope">
        <Dict v-model="scope.formData[scope.prop]" code="charge_order_type" v-bind="scope.attrs" />
      </template>
      <template #status="scope">
        <Dict
          v-model="scope.formData[scope.prop]"
          code="charge_order_status"
          v-bind="scope.attrs"
        />
      </template>
      <template #stopType="scope">
        <Dict v-model="scope.formData[scope.prop]" code="stop_type" v-bind="scope.attrs" />
      </template>
      <template #maspStatus="scope">
        <Dict v-model="scope.formData[scope.prop]" code="masp_status" v-bind="scope.attrs" />
      </template>
    </page-modal>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: "ChargeOrderInfo" });

import ChargeOrderInfoAPI, {
  ChargeOrderInfoForm,
  ChargeOrderInfoPageQuery,
} from "@/api/orderManage/charge-order-info-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: "orderManage:charge-order-info",
  formItems: [
    {
      type: "custom",
      slotName: "orderType",
      label: "订单类型", // 1 个人订单 2 集团订单
      prop: "orderType",
      attrs: {
        placeholder: "订单类型",
        clearable: true,
        style: { width: "200px" },
      },
    },
    {
      type: "input",
      label: "充电桩编号",
      prop: "equipmentId",
      attrs: {
        placeholder: "充电桩编号",
        clearable: true,
        style: { width: "200px" },
      },
    },
    {
      type: "input",
      label: "充电订单号",
      prop: "chargeOrderNo",
      attrs: {
        placeholder: "充电订单号",
        clearable: true,
        style: { width: "200px" },
      },
    },
    {
      type: "custom",
      slotName: "status",
      label: "状态", //0待启动 1 充电中 2 结算中 3 已完成, 5未成功充电
      prop: "status",
      attrs: {
        placeholder: "状态",
        clearable: true,
        style: { width: "200px" },
      },
    },
    {
      type: "custom",
      slotName: "stopType",
      label: "停止类型", //1 主动停止 2 充满停止 3 余额不足停止, 4电桩按钮停止
      prop: "stopType",
      attrs: {
        placeholder: "停止类型",
        clearable: true,
        style: { width: "200px" },
      },
    },
    {
      type: "input",
      label: "请求启动充电的手机号",
      prop: "phoneNum",
      attrs: {
        placeholder: "请求启动充电的手机号",
        clearable: true,
        style: { width: "200px" },
      },
    },
    {
      type: "custom",
      slotName: "maspStatus",
      label: "补缴状态", // 0.无需补缴  1.待补缴  2.已补缴
      prop: "maspStatus",
      attrs: {
        placeholder: "补缴状态",
        clearable: true,
        style: { width: "200px" },
      },
    },
  ],
});

// 列表配置
const contentConfig: IContentConfig<ChargeOrderInfoPageQuery> = reactive({
  // 权限前缀
  permPrefix: "orderManage:charge-order-info",
  table: {
    border: true,
    highlightCurrentRow: true,
  },
  // 主键
  pk: "id",
  // 列表查询接口
  indexAction: ChargeOrderInfoAPI.getPage,
  // 删除接口
  deleteAction: ChargeOrderInfoAPI.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: ["add", "delete"],
  defaultToolbar: ["refresh", "filter"],
  // 表格列配置
  cols: [
    { type: "selection", width: 55, align: "center" },
    {
      label: "订单类型", // 1 个人订单 2 集团订单
      prop: "orderType",
      templet: "custom",
      slotName: "orderType",
    },
    { label: "充电桩编号", prop: "equipmentId" },
    { label: "充电订单号", prop: "chargeOrderNo" },
    { label: "充电开始时间", prop: "startTime" },
    { label: "充电结束时间", prop: "endTime" },
    {
      label: "充电时间", //：秒
      prop: "chargeTime",
    },
    {
      label: "状态", //0待启动 1 充电中 2 结算中 3 已完成, 5未成功充电
      prop: "status",
      templet: "custom",
      slotName: "status",
    },
    { label: "充电消费总额", prop: "thirdPartyTotalCost" },
    { label: "充电服务费", prop: "thirdPartyServerfee" },
    { label: "充电金额", prop: "thirdPartyElecfee" },
    {
      label: "实际充电度数", //（单位：0.001 kw/h）
      prop: "totalCharge",
    },
    { label: "平台实际收取金额", prop: "realCost" },
    { label: "平台总服务费", prop: "realServiceCost" },
    {
      label: "停止类型", //1 主动停止 2 充满停止 3 余额不足停止, 4电桩按钮停止
      prop: "stopType",
      templet: "custom",
      slotName: "stopType",
    },
    { label: "请求启动充电的手机号", prop: "phoneNum" },
    {
      label: "车牌号", //( 停车减免必传，格式确保正确)
      prop: "plateNum",
    },
    { label: "充电结束原因", prop: "stopReason" },
    {
      label: "推送", //：充电明细信息
      prop: "chargeDetails",
    },
    { label: "充电站id", prop: "thirdPartyStationId" },
    { label: "预充值金额", prop: "preAmt" },
    { label: "平台预扣服务费", prop: "realPredictServiceCost" },
    {
      label: "补缴金额", //（智停）
      prop: "maspAmount",
    },
    { label: "平台补缴金额", prop: "maspRealAmount" },
    { label: "需要补缴的总金额", prop: "totalMaspMoney" },
    {
      label: "补缴状态", //  0.无需补缴  1.待补缴  2.已补缴
      prop: "maspStatus",
      templet: "custom",
      slotName: "maspStatus",
    },
    { label: "补缴时间", prop: "maspTime" },
    { label: "补缴描述", prop: "maspDesc" },
    { label: "优惠金额", prop: "discountMoney" },
    { label: "优惠描述", prop: "discountDesc" },
    { label: "优惠活动ID", prop: "discountInfoId" },
    { label: "服务费", prop: "realThirdCost" },
    { label: "企业id", prop: "firmId" },
    { label: "企业专享优惠价", prop: "firmPrice" },
    { label: "优惠券金额", prop: "couponPrice" },
    { label: "备注", prop: "remark" },
    { label: "创建时间", prop: "createTime" },
    {
      label: "操作",
      prop: "operation",
      width: 220,
      templet: "tool",
      operat: ["edit", "delete"],
    },
  ],
});

// 新增配置
const addModalConfig: IModalConfig<ChargeOrderInfoForm> = reactive({
  // 权限前缀
  permPrefix: "orderManage:charge-order-info",
  // 主键
  pk: "id",
  // 弹窗配置
  dialog: {
    title: "新增",
    width: 800,
    draggable: true,
  },
  form: {
    labelWidth: 100,
  },
  // 表单项配置
  formItems: [
    {
      type: "custom",
      label: "订单类型",
      prop: "orderType",
      slotName: "orderType",
      attrs: {
        placeholder: "订单类型",
        style: { width: "100%" },
      },
    },
    {
      type: "input",
      attrs: {
        placeholder: "充电桩编号",
      },
      label: "充电桩编号",
      prop: "equipmentId",
    },
    {
      type: "input",
      attrs: {
        placeholder: "充电订单号",
      },
      label: "充电订单号",
      prop: "chargeOrderNo",
    },
    {
      type: "input",
      attrs: {
        placeholder: "充电开始时间",
      },
      label: "充电开始时间",
      prop: "startTime",
    },
    {
      type: "input",
      attrs: {
        placeholder: "充电结束时间",
      },
      label: "充电结束时间",
      prop: "endTime",
    },
    {
      type: "input",
      attrs: {
        placeholder: "充电时间",
      },
      label: "充电时间(秒)",
      prop: "chargeTime",
    },
    {
      type: "custom",
      label: "状态",
      prop: "status",
      slotName: "status",
      attrs: {
        placeholder: "状态",
        style: { width: "100%" },
      },
    },
    {
      type: "input",
      attrs: {
        placeholder: "充电消费总额",
      },
      label: "充电消费总额",
      prop: "thirdPartyTotalCost",
    },
    {
      type: "input",
      attrs: {
        placeholder: "充电服务费",
      },
      label: "充电服务费",
      prop: "thirdPartyServerfee",
    },
    {
      type: "input",
      attrs: {
        placeholder: "充电金额",
      },
      label: "充电金额",
      prop: "thirdPartyElecfee",
    },
    {
      type: "input",
      attrs: {
        placeholder: "实际充电度数",
      },
      label: "实际充电度数", //（单位：0.001 kw/h）
      prop: "totalCharge",
    },
    {
      type: "input",
      attrs: {
        placeholder: "平台实际收取金额",
      },
      label: "平台实际收取金额",
      prop: "realCost",
    },
    {
      type: "input",
      attrs: {
        placeholder: "平台总服务费",
      },
      label: "平台总服务费",
      prop: "realServiceCost",
    },
    {
      type: "custom",
      label: "停止类型", //1 主动停止 2 充满停止 3 余额不足停止, 4电桩按钮停止
      prop: "stopType",
      slotName: "stopType",
      attrs: {
        placeholder: "停止类型",
        style: { width: "100%" },
      },
    },
    {
      type: "input",
      attrs: {
        placeholder: "请求启动充电的手机号",
      },
      label: "请求启动充电的手机号",
      prop: "phoneNum",
    },
    {
      type: "input",
      attrs: {
        placeholder: "车牌号",
      },
      label: "车牌号", //( 停车减免必传，格式确保正确)
      prop: "plateNum",
    },
    {
      type: "input",
      attrs: {
        placeholder: "充电结束原因",
      },
      label: "充电结束原因",
      prop: "stopReason",
    },
    {
      type: "input",
      attrs: {
        placeholder: "推送",
      },
      label: "推送", //：充电明细信息
      prop: "chargeDetails",
    },
    {
      type: "input",
      attrs: {
        placeholder: "充电站id",
      },
      label: "充电站id",
      prop: "thirdPartyStationId",
    },
    {
      type: "input",
      attrs: {
        placeholder: "预充值金额",
      },
      label: "预充值金额",
      prop: "preAmt",
    },
    {
      type: "input",
      attrs: {
        placeholder: "平台预扣服务费",
      },
      label: "平台预扣服务费",
      prop: "realPredictServiceCost",
    },
    {
      type: "input",
      attrs: {
        placeholder: "补缴金额",
      },
      label: "补缴金额", //（智停）
      prop: "maspAmount",
    },
    {
      type: "input",
      attrs: {
        placeholder: "平台补缴金额",
      },
      label: "平台补缴金额",
      prop: "maspRealAmount",
    },
    {
      type: "input",
      attrs: {
        placeholder: "需要补缴的总金额",
      },
      label: "需要补缴的总金额",
      prop: "totalMaspMoney",
    },
    {
      type: "custom",
      label: "补缴状态", //  0.无需补缴  1.待补缴  2.已补缴
      prop: "maspStatus",
      slotName: "maspStatus",
      attrs: {
        placeholder: "补缴状态",
        style: { width: "100%" },
      },
    },
    {
      type: "input",
      attrs: {
        placeholder: "补缴时间",
      },
      label: "补缴时间",
      prop: "maspTime",
    },
    {
      type: "input",
      attrs: {
        placeholder: "补缴描述",
      },
      label: "补缴描述", //（默认：系统扣除）
      prop: "maspDesc",
    },
    {
      type: "input",
      attrs: {
        placeholder: "优惠金额",
      },
      label: "优惠金额",
      prop: "discountMoney",
    },
    {
      type: "input",
      attrs: {
        placeholder: "优惠描述",
      },
      label: "优惠描述", //（前端展示为优惠描述+优惠金额）
      prop: "discountDesc",
    },
    {
      type: "input",
      attrs: {
        placeholder: "优惠活动ID",
      },
      label: "优惠活动ID",
      prop: "discountInfoId",
    },
    {
      type: "input",
      attrs: {
        placeholder: "按平台计费规则，实际收取的服务费",
      },
      label: "按平台计费规则，实际收取的服务费",
      prop: "realThirdCost",
    },
    {
      type: "input",
      attrs: {
        placeholder: "企业id",
      },
      label: "企业id",
      prop: "firmId",
    },
    {
      type: "input",
      attrs: {
        placeholder: "企业专享优惠价",
      },
      label: "企业专享优惠价",
      prop: "firmPrice",
    },
    {
      type: "input",
      attrs: {
        placeholder: "优惠券金额",
      },
      label: "优惠券金额",
      prop: "couponPrice",
    },
    {
      type: "input",
      attrs: {
        placeholder: "备注",
      },
      label: "备注",
      prop: "remark",
    },
    {
      type: "input",
      attrs: {
        placeholder: "创建时间",
      },
      label: "创建时间",
      prop: "createTime",
    },
  ],
  // 提交函数
  formAction: (data: ChargeOrderInfoForm) => {
    if (data.id) {
      // 编辑
      return ChargeOrderInfoAPI.update(data.id as string, data);
    } else {
      // 新增
      return ChargeOrderInfoAPI.create(data);
    }
  },
});

// 编辑配置
const editModalConfig: IModalConfig<ChargeOrderInfoForm> = reactive({
  permPrefix: "orderManage:charge-order-info",
  component: "drawer",
  drawer: {
    title: "编辑",
    size: 500,
  },
  pk: "id",
  formAction(data: any) {
    return ChargeOrderInfoAPI.update(data.id as string, data);
  },
  formItems: addModalConfig.formItems, // 复用新增的表单项
});

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

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