<template>
  <div class="table-container">
    <el-card>
      <template #header>
        <div class="header">
          <el-form :inline="true" :model="searchFormState">
            <el-form-item label="操作类型">
              <el-select
                v-model="searchFormState.TypeCode"
                style="width: 120px"
                class="filter-item"
                placeholder="请选择"
              >
                <el-option
                  v-for="(key, value) in typeCodeMapEnum"
                  :key="key"
                  :label="key"
                  :value="value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="操作时间">
              <el-date-picker
                v-model="timeArray"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"
                class="filter-item"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button type="primary" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <div>
        <el-table
          :data="dataList"
          border
          style="width: 100%"
          v-loading="isLoading"
        >
          <el-table-column
            width="150"
            label="操作名称"
            prop="TypeName"
          ></el-table-column>
          <el-table-column label="描述" prop="Description"></el-table-column>
          <el-table-column
            width="150"
            label="操作人"
            prop="CreateUserName"
          ></el-table-column>
          <el-table-column
            width="200"
            label="操作时间"
            prop="CreateTime"
          ></el-table-column>
        </el-table>
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParam.PageNum"
          :page-size="queryParam.PageSize"
          :page-sizes="[10, 20, 30, 40]"
          layout="total,sizes,pager,prev,next,jumper"
          :total="pagination.total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { onMounted, toRefs } from 'vue'
import { getActivityList } from '@/api/activity'
import useLoadTableData from '@/hooks/useLoadTableData'
import { typeCodeMapEnum } from '@/utils/enum'

export default {
  setup() {
    //表格通用条件只是查询参数不一样，其他分页，loading等都一样
    const searchFormData = {
      TypeCode: null
    }

    //获取接口数据
    const fetchData = async (params) => {
      console.log('params', params)
      const data = await getActivityList(params)
      return data
    }

    //处理数据-拼接角色
    const handleData = (data) => {
      console.log(data)
    }

    //从钩子函数获取通用方法和对象
    const {
      loadData,
      handleSearch,
      handleSizeChange,
      handleCurrentChange,
      handleReset,
      state
    } = useLoadTableData(searchFormData, fetchData, handleData)

    onMounted(() => {
      //获取表格数据
      loadData(fetchData, handleData)
    })

    //通用hook处理-重置，搜索，页面切换，数据获取
    return {
      ...toRefs(state),
      handleReset,
      handleSearch,
      handleSizeChange,
      handleCurrentChange,
      typeCodeMapEnum
    }
  }
}
</script>

<style lang="scss" scoped>
.table-container {
  .pagination {
    margin-top: 20px;
    text-align: center;
  }
  :deep(.el-form-item) {
    margin-bottom: 10px;
  }
}
</style>
