<script setup lang="ts">
import { ref } from "vue";
import { useTimedDiscount, useTimedDiscountRecord } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";

defineOptions({
  name: "TimedDiscount"
});

const activeTab = ref("activity");
const formRef = ref();
const recordFormRef = ref();

const {
  form,
  loading,
  columns,
  dataList,
  pagination,
  discountTypeMap,
  statusMap,
  onSearch,
  resetForm,
  handleAdd,
  handleEdit,
  handleViewDetail,
  handleDelete,
  handleToggleStatus,
  handleExecute,
  handleSizeChange,
  handleCurrentChange
} = useTimedDiscount();

const {
  form: recordForm,
  loading: recordLoading,
  columns: recordColumns,
  dataList: recordDataList,
  pagination: recordPagination,
  executeStatusMap,
  onSearch: onRecordSearch,
  resetForm: resetRecordForm,
  handleViewDetail: handleRecordDetail,
  handleSizeChange: handleRecordSizeChange,
  handleCurrentChange: handleRecordCurrentChange
} = useTimedDiscountRecord();
</script>

<template>
  <div class="main">
    <el-tabs v-model="activeTab" class="demo-tabs">
      <el-tab-pane label="活动配置" name="activity">
        <PureTableBar title="定时折扣活动" :columns="columns" @refresh="onSearch">
          <template #buttons>
            <el-button type="primary" @click="handleAdd">
              <IconifyIconOffline icon="add" class="mr-1" />
              新增活动
            </el-button>
          </template>
          <template #form>
            <el-form
              ref="formRef"
              :inline="true"
              :model="form"
              class="search-form bg-bg_color px-4 pt-4 pb-2"
            >
              <el-form-item label="活动名称" prop="activityName">
                <el-input
                  v-model="form.activityName"
                  placeholder="请输入活动名称"
                  clearable
                  class="!w-[200px]"
                  @keyup.enter="onSearch"
                />
              </el-form-item>
              <el-form-item label="折扣类型" prop="discountType">
                <el-select
                  v-model="form.discountType"
                  placeholder="请选择"
                  clearable
                  class="!w-[150px]"
                >
                  <el-option
                    v-for="(item, key) in discountTypeMap"
                    :key="key"
                    :label="item.text"
                    :value="Number(key)"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-select
                  v-model="form.status"
                  placeholder="请选择"
                  clearable
                  class="!w-[150px]"
                >
                  <el-option
                    v-for="(item, key) in statusMap"
                    :key="key"
                    :label="item.text"
                    :value="Number(key)"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
              </el-form-item>
            </el-form>
          </template>
          <template v-slot="{ size, dynamicColumns }">
            <pure-table
              :loading="loading"
              :data="dataList"
              :columns="dynamicColumns"
              :size="size"
              adaptive
              :adaptive-config="{ offsetBottom: 32 }"
              :pagination="{
                currentPage: pagination.currentPage,
                pageSize: pagination.pageSize,
                total: pagination.total,
                pageSizes: [10, 20, 50, 100],
                onSizeChange: handleSizeChange,
                onCurrentChange: handleCurrentChange
              }"
            >
              <template #operation="{ row }">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleViewDetail(row)"
                >
                  详情
                </el-button>
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleEdit(row)"
                >
                  编辑
                </el-button>
                <el-button
                  link
                  :type="row.status === 1 ? 'warning' : 'success'"
                  size="small"
                  @click="handleToggleStatus(row)"
                >
                  {{ row.status === 1 ? "禁用" : "启用" }}
                </el-button>
                <el-button
                  link
                  type="success"
                  size="small"
                  @click="handleExecute(row)"
                >
                  执行
                </el-button>
                <el-popconfirm
                  title="确定要删除该活动吗？"
                  @confirm="handleDelete(row)"
                >
                  <template #reference>
                    <el-button link type="danger" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </el-tab-pane>

      <el-tab-pane label="执行记录" name="records">
        <PureTableBar title="执行记录" :columns="recordColumns" @refresh="onRecordSearch">
          <template #form>
            <el-form
              ref="recordFormRef"
              :inline="true"
              :model="recordForm"
              class="search-form bg-bg_color px-4 pt-4 pb-2"
            >
              <el-form-item label="执行日期" prop="executeDateStart">
                <el-date-picker
                  v-model="recordForm.executeDateStart"
                  type="date"
                  placeholder="开始日期"
                  value-format="YYYY-MM-DD"
                  class="!w-[150px]"
                />
              </el-form-item>
              <el-form-item prop="executeDateEnd">
                <el-date-picker
                  v-model="recordForm.executeDateEnd"
                  type="date"
                  placeholder="结束日期"
                  value-format="YYYY-MM-DD"
                  class="!w-[150px]"
                />
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-select
                  v-model="recordForm.status"
                  placeholder="请选择"
                  clearable
                  class="!w-[150px]"
                >
                  <el-option
                    v-for="(item, key) in executeStatusMap"
                    :key="key"
                    :label="item.text"
                    :value="Number(key)"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onRecordSearch">搜索</el-button>
                <el-button @click="resetRecordForm(recordFormRef)">重置</el-button>
              </el-form-item>
            </el-form>
          </template>
          <template v-slot="{ size, dynamicColumns }">
            <pure-table
              :loading="recordLoading"
              :data="recordDataList"
              :columns="dynamicColumns"
              :size="size"
              adaptive
              :adaptive-config="{ offsetBottom: 32 }"
              :pagination="{
                currentPage: recordPagination.currentPage,
                pageSize: recordPagination.pageSize,
                total: recordPagination.total,
                pageSizes: [10, 20, 50, 100],
                onSizeChange: handleRecordSizeChange,
                onCurrentChange: handleRecordCurrentChange
              }"
            >
              <template #operation="{ row }">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleRecordDetail(row)"
                >
                  查看详情
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.main {
  padding: 20px;
}

.search-form {
  border-radius: 4px;
}
</style>
