<script setup lang="ts">
import FormSearch, { type FormField } from "@/components/opts/form-search.vue";
import TableButtons from "@/components/opts/btns2.vue";
import Edit from "./edit.vue";
import { PureTable } from "@pureadmin/table";
import { computed, onBeforeMount, onMounted, reactive, ref, watch } from "vue";
import * as $api from "@/api/order/index";
import * as $merchantApi from "@/api/merchant/index";


const editRef = ref();

defineOptions({
  name: "orderList"
});

const props: any = defineProps({
  mode: {
    required: false,
    type: String,
    default: "table"
  }
});

const searchFormFields = computed((): FormField[] => {
  const fields: FormField[] = [
    {
      type: "select",
      label: "商户名称",
      prop: "merchantId",
      placeholder: "请选择",
      dataSourceKey: "merchantOptions",
      options: {
        keys: {
          label: "userName",
          value: "id",
          prop: "id"
        },
        filterable: true
      }
    }
  ];
  if (props.mode === "table") {
    return fields;
  } else {
    return fields;
  }
});

const pageData: any = reactive({
  mode: "table",
  permission: {
    // query: ["user:query"],
    // save: ["user:save"],
    // update: ["user:update"],
    // del: ["user:del"]
  },
  searchParam: {
    searchState: true,
    searchForm: {}
  },
  dataSource: {
    merchantOptions: []
  },
  /*按钮 */
  btnOpts: {
    leftBtns: [],
    rightBtns: [
      {
        key: "search",
        label: "查询",
        icon: "ep:search",
        state: true,
        options: {
          circle: true
        }
      },
      {
        key: "refresh",
        label: "刷新",
        icon: "ep:refresh",
        state: true,
        options: {
          circle: true
        }
      }
    ]
  },
  tableParam: {
    list: [],
    columns: [
      {
        label: "商户名称",
        prop: "merchantName",
        slot: "merchantName",
        width: 220
      },
      {
        label: "今日总金额",
        prop: "today.amount.total",
        slot: "today.amount.total"
      },
      {
        label: "今日支付金额",
        prop: "today.amount.valid",
        slot: "today.amount.valid"
      },
      {
        label: "昨日总金额",
        prop: "yesterday.amount.total",
        slot: "yesterday.amount.total"
      },
      {
        label: "昨日支付金额",
        prop: "yesterday.amount.valid",
        slot: "yesterday.amount.valid"
      },
      {
        label: "本周总金额",
        prop: "lastWeek.amount.total",
        slot: "lastWeek.amount.total"
      },
      {
        label: "本周支付金额",
        prop: "lastWeek.amount.valid",
        slot: "lastWeek.amount.valid"
      },
      {
        label: "本月总金额",
        prop: "lastMonth.amount.total",
        slot: "lastMonth.amount.total"
      },
      {
        label: "本月支付金额",
        prop: "lastMonth.amount.valid",
        slot: "lastMonth.amount.valid"
      }
    ],
    loading: false,
    pagination: {
      pageSize: 10,
      defaultPageSize: 10,
      currentPage: 1,
      background: true,
      total: 0
    }
  }
});

const btnClickHandle = (val: string) => {
  switch (val) {
    case "add":
      editRef.value!.open({ enable: 1 }, pageData.dataSource, "add");
      break;
    case "update":
      break;
    case "search":
      _updateSearchState();
      break;
    case "refresh":
      _loadData();
      break;
    case "switch":
      break;
    default:
      break;
  }
};

/**
 *  更新搜索表单
 * @param data .
 */
const _updateSearchFormData = (data: any) => {
  pageData.searchParam.searchForm = data;
};
/**
 * 点击搜索按钮
 */
const _searchForm = (data: any) => {
  pageData.searchParam.searchForm = data;
  _loadData();
};
/**
 * 重置
 */
const _resetSearchForm = (data?: any) => {
  pageData.searchParam.searchForm = data;
};
/**
 * 更新搜索表达的状态
 */
const _updateSearchState = () => {
  pageData.searchParam.searchState = !pageData.searchParam.searchState;
};
/**
 * 分页 - 改变每页条数
 * @param val .
 */
const handleChangePageSize = (val: any) => {
  pageData.tableParam.pagination.pageSize = val;
  _loadData();
};
/**
 * 分页 - 改变页码
 * @param val .
 */
const handleChangeCurrentPage = (val: any) => {
  pageData.tableParam.pagination.currentPage = val;
  _loadData();
};
/**
 * 获取查询参数
 */
const getQueryParams = () => {
  const sqp = {};
  const param = Object.assign(sqp, pageData.searchParam.searchForm);
  param.current = pageData.tableParam.pagination.currentPage;
  param.size = pageData.tableParam.pagination.pageSize;
  return param;
};
/**
 * 获取列表数据
 * @param page .
 */
const _loadData = (page?: number) => {
  const query = getQueryParams();
  if (page) {
    query.current = page;
  }
  pageData.tableParam.loading = true;
  $api
    .orderTotal(query)
    .then((res: any) => {
      if (res.success) {
        pageData.tableParam.list = res.result;
        // pageData.tableParam.pagination.total = Number(res.result.total);
      }
    })
    .finally(() => {
      pageData.tableParam.loading = false;
    });
};
onBeforeMount(() => {});
onMounted(() => {
  $merchantApi.queryList()
    .then((res: any) => {
      if (res.success) {
        pageData.dataSource.merchantOptions = res.result;
      }
    });
  _loadData(1);
});
</script>

<template>
  <el-card :shadow="'never'">
    <template #default>
      <div>
        <form-search
          :show="pageData.searchParam.searchState"
          :form-field="searchFormFields"
          :data-source="pageData.dataSource"
          :query-permission="pageData.permission.query"
          @search-form="_updateSearchFormData"
          @search="_searchForm"
          @reset="_resetSearchForm"
        />
        <!--operate-->
        <table-buttons
          :size="pageData.btnOpts.size"
          :left-btns="pageData.btnOpts.leftBtns"
          :right-btns="pageData.btnOpts.rightBtns"
          @click="btnClickHandle"
        />
        <!--table-->
        <pure-table
          :data="pageData.tableParam.list"
          :columns="pageData.tableParam.columns"
          row-key="id"
          border
          stripe
          :header-row-class-name="'table-header'"
          :loading="pageData.tableParam.loading"
          :pagination="pageData.tableParam.pagination"
          @page-current-change="handleChangeCurrentPage"
          @page-size-change="handleChangePageSize"
        >
          <template #ellipsis="{ row, column }">
            <el-tooltip placement="top-start" :content="row[column.property]"
              >{{ row[column.property] }}
            </el-tooltip>
          </template>
          <template #enableOptions="scope">
            <el-tag v-if="scope.row.status == -1">支付失败</el-tag>
            <el-tag v-if="scope.row.status == 0">待支付</el-tag>
            <el-tag v-if="scope.row.status == 1">支付成功</el-tag>
            <el-tag v-if="scope.row.status == 2">退款</el-tag>
          </template>
        </pure-table>
      </div>
    </template>
  </el-card>
</template>
