<template>
  <a-list-layout
    ref="pageRef"
  >
    <template #search>
            <!-- 查询参数 -->
            <pro-query
              :searchParam="searchParam"
              @on-search ="search"
            ></pro-query>
          </template>
            <!-- 列表 -->
            <pro-table
              :fetch="fetch"
              :columns="columns"
              :toolbar="toolbar"
              :param="state.param"
              :pagination="pagination"
              :operate="operate"
              :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
            >
              <!-- 继承至 a-table 的默认插槽 -->
            </pro-table>
      <info :visible="state.visibleInfo" @close="closeInfo" :record="state.recordInfo"></info>
    </a-list-layout>
</template>

<script>
import info from './modal/info.vue';
import { page } from "@/api/module/jobLog";
import { reactive } from 'vue';

export default {
  components:  {
    info
  },
  setup() {

    /// 文本
    const converFormat = [{label:"成功", value:true},{label:"失败", value:false}];

    /// 列配置
    const columns = [
      { dataIndex: "index", key: "index", title: "序号", width: 60, fixed: 'left', align: 'center' },
      { dataIndex: "jobName", key: "jobName", title: "任务" },
      { dataIndex: "beanName", key: "beanName", title: "目标" },
      { dataIndex: "time", key: "time", title: "耗时(ms)",align: 'right',width: 120 },
      { dataIndex: "createTime", key: "createTime", title: "运行时间" },
      { dataIndex: "state", key: "state", title: "状态", conver: converFormat },
    ];

    const operate = [
      { label: "查看", event: function (record) { state.visibleInfo = true, state.recordInfo = record }},
    ];

    /// 数据来源 [模拟]
    const fetch = async (param) => {
      var response = await page(param);
      return {
        total: response.data.total,
        data: response.data.record,
      };
    };

    /// 工具栏
    const toolbar = [
      { label: "备份", icon:'SnippetsOutlined', event: function () { }},
    ];

    /// 分页参数
        const pagination = {
        pageNum: 1,
        pageSize: 20,
        showSizeChanger: true, // 显示可改变每页条数
        pageSizeOptions: ["10", "20", "50", "100"], // 每页条数选项设置
        showTotal: total => `共 ${total} 条记录`, // 显示总条数
        showSizeChange: (current, pageSize) => (this.pageSize = pageSize) // 改变每页条数时更新显示
      }

    /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
    const state = reactive({
      selectedRowKeys: [],
      param: { name: "", code: "", isAuth: true },
      visibleInfo: false,
      recordInfo: {},
    })

    /// 查询参数
    const searchParam = [
        { key: "title", type: "input", label: "标题"},
        { key: "state", type: "select", label: "状态", value: "",
          options: [
            { text: "全部", value: ""},
            { text: "成功", value: true},
            { text: "失败", value: false}
          ]
        }
    ]
    /// 查询操作
    const search = function(value) {
      state.param.title = value.title
      state.param.state = value.state
    }

    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const closeInfo = function(){
      state.visibleInfo = false
    }

    return {
      state,
      fetch,
      toolbar,
      columns,
      operate,
      pagination,

      search,
      searchParam,

      closeInfo,
      onSelectChange,
    };
  },
};
</script>
