<script lang="ts" setup>
/**
 * @Name: shopInformation.vue
 * @Description: 店铺信息详情页
 * @Author: xinyan
 */

import Selector from '/@/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
import { shopInfoColumns } from '/@/views/reportManage/TaskManage/utils/columns';
import { VxeGridListeners } from 'vxe-table';
import { onMounted, ref } from 'vue';
import { getTasks } from '/@/views/reportManage/TaskManage/api';

const selectorRef = ref(null);
const filter = ref({}); // 筛选条件

const gridOptions = reactive({
  border: 'inner',
  height: 930,
  loading: false,
  round: true,
  rowConfig: {
    isHover: true,
  },
  pagerConfig: {
    enabled: true,
    total: 20,
    currentPage: 1,
    pageSize: 20,
    pageSizes: [10, 20, 30],
  },
  columns: shopInfoColumns,
  data: [],
});

const gridEvents: VxeGridListeners<RowVO> = {
  pageChange({ currentPage, pageSize }) {
    if (gridOptions.pagerConfig) {
      gridOptions.pagerConfig.currentPage = currentPage;
      gridOptions.pagerConfig.pageSize = pageSize;
      getTaskList();
    }
  },
};

// 获取任务列表
async function getTaskList() {
  try {
    gridOptions.loading = true;
    const response = await getTasks({
      page: gridOptions.pagerConfig.currentPage,
      limit: gridOptions.pagerConfig.pageSize,
      ...filter.value,
    });
    gridOptions.data = response.data;
    gridOptions.pagerConfig.total = response.total;
  } catch (error) {
    console.error('Error fetching task data:', error);
  } finally {
    gridOptions.loading = false;
  }
}

// 筛选器变化
function filteredDataChange(newList) {
  filter.value = newList.value;
  if (selectorRef.value) {
    if (gridOptions.pagerConfig) {
      gridOptions.pagerConfig.currentPage = 1;
    }
    getTaskList(newList.value);
  }
}

// 表格样式
const cellStyle = () => {
  return {
    fontSize: '12px',
    fontWeight: '600',
  };
};

const headerCellStyle = () => {
  return {
    fontSize: '14px',
  };
};

onMounted(() => {
  getTaskList();
  //fetchOperationSelect();
});
</script>

<template>
  <div>
    <el-card class=" my-3 mx-8" shadow="hover">
      <Selector ref="selectorRef" :showOperationSearch="true" @update:filteredData="filteredDataChange" />
    </el-card>
  </div>
  <el-card class="mx-8" shadow="hover">
    <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" stripe
              v-bind="gridOptions"
              v-on="gridEvents">
      <template #status_default="{ row }">
        <el-switch
            v-model="row.status"
            disabled
            :active-value="1"
            :inactive-value="0"
            inline-prompt
            size="small"
        />
      </template>
    </vxe-grid>
  </el-card>

</template>

<style scoped>
.el-card {
  border: none;
  box-shadow: none;
}

</style>