<template>
  <div>
    <el-dialog title='系统使用详情' width="1400px" top="10%" v-model="props.modelValue" :before-close="handleClose">
      <div class="config">
        <section style="height: 40vh;">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;"> </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
          </MOSTY.Pages>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import { reactive, ref, defineProps, watch } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, } from "@/api/tobAcco_api.js";
const loading = ref(false); //新增保存按钮截流
// 数据
const tableData = ref([]);
const total = ref(0);
const tableloading = ref(false)
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 8,
  userid: null,
  type: null
});

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: true
  },
  userid: String,
  type: String,
});
const tableColumn = ref([
  {
    title: "姓名",
    prop: "username",
    sortable: true
  },
  {
    title: "访问功能",
    prop: "menuname",
    sortable: true
  },
  {
    title: "访问时间",
    prop: "addtime",
    sortable: true
  },

])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const emits = defineEmits(["update:modelValue", "changeAddVi"]);
watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      listQuery.userid = props.userid
      listQuery.type = props.type
      getDataList()
    }

  }, { deep: true, immediate: true }
);

//ALL_查询安全投入列表
function getDataList() {
  tableloading.value = true
  getApi(listQuery, '/mosty-jcgl/miniapp/getPageList').then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      pageConfiger.total = res.total;
    } else {
      tableData.value = []
    }
  })
}
// 关闭
const handleClose = () => {
  emits("update:modelValue", false);
};

// 关闭×
const closeDialog = () => {
  loading.value = false;
  emits("changeAddVi", false);
  emits("update:modelValue", false);
};
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getDataList();
};
</script>

<style lang="scss" scoped></style>