<template>
  <div>
    <div class="bigBox">
      <MOSTY.PageTree :isShowLeftTree="false">
        <template #serach>
          <!-- <MOSTY.Search :searchArr="searchArr" @submit="onSearch" /> -->
          <el-divider />
        </template>
        <template #table>
          <section class="eltab9">
            <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
              :isSelect="false" :isSort="true" style="width: 100%;" :actionsW="'300'">
              <!-- <template #sign="{ row }">
                <p style=" width: 12px; height: 12px;border-radius: 50%;margin: 0 auto"
                  :style="{ 'background-color': row?.sign ? '#33CC00' : '#FC5F76' }"></p>
              </template> -->
              <template #isLearning="{ row }">
                <span>{{ row.isLearning ? '已学习' : '未学习' }}</span>
              </template>
            </MOSTY.Table>
          </section>
          <div class="fenye">
            <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
            </MOSTY.Pages>
          </div>
        </template>
      </MOSTY.PageTree>
      <!-- <div class="bigBox-footer">
        <el-button style="margin-left:10px;" @click="handleClose" type="primary">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </div> -->
    </div>
  </div>
</template>

<script setup>
// 引入
import {
  reactive,
  onMounted,
  ref,
  defineProps,
  watch,
  getCurrentInstance
} from "vue";
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const emits = defineEmits(["close"]);
const { proxy } = getCurrentInstance()
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
});
// 表格数据
const tableData = ref([]);
const tableloading = ref(false);
const tableColumn = ref([
  // {
  //   title: "标记",
  //   prop: "sign",
  //   sortable: false,
  //   slot: true
  // },
  {
    title: "单位名称",
    prop: "orgName",
    sortable: true,
  },
  {
    title: "部门名称",
    prop: "deptName",
    sortable: true,
  },
  {
    title: "用户名称",
    prop: "userName",
    sortable: true,
  },
  {
    title: "是否学习",
    prop: "isLearning",
    sortable: true,
    slot: true
  },
  // {
  //   title: "操作",
  //   prop: "actions",
  //   slot: true
  // }
])
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20
});
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const searchArr = reactive([
  // {
  //   showType: "input",
  //   prop: "orgName",
  //   width: '250px',
  //   placeholder: '请输入单位名称'
  // },
  // {
  //   showType: "input",
  //   prop: "deptName",
  //   width: '250px',
  //   placeholder: '请输入部门名称'
  // },
  {
    showType: "input",
    prop: "userName",
    width: '250px',
    placeholder: '请输入用户名称'
  },
  {
    showType: "select",
    prop: "isLearning",
    width: '250px',
    options: [
      {
        value: true,
        label: "已学习"
      },
      {
        value: false,
        label: "未学习"
      },

    ],
    placeholder: '请选择是否学习'
  },
]);
const onSearch = (obj) => {
  listQuery.orgName = obj.orgName
  listQuery.deptName = obj.deptName
  listQuery.userName = obj.userName
  listQuery.isLearning = obj.isLearning
  listQuery.pageCurrent = 1
  pageConfiger.pageCurrent = 1
  getListData();
};
// 关闭弹框
const handleClose = () => {
  proxy.$modal
    .confirm("离开会丢失页面中修改的内容，确认离开吗？")
    .then(() => {
      emits("close")
    })
    .catch(() => {
      // catch error
    })
}
watch(
  () => props.id,
  (val) => {
    if (props.id) {
      tableData.value = []
      listQuery.pageCurrent = 1
      listQuery.pageSize = 20
      listQuery.id = props.id
      getListData()
    }
  },
  {
    immediate: true,
    deep: true
  }
);
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getListData();
};
function getListData() {
  tableloading.value = true;
  postApi(listQuery, `/mosty-jcgl/lawRegulations/selectLearningSituation`).then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      // res.records.forEach((item, index) => {
      //   tableData.value[index].sign = !item.isLearning;
      // })
      pageConfiger.total = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
onMounted(() => {
});

</script>

<style lang="scss" scoped>
.el-form {
  display: block !important;
  margin: 20px;
}

::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.bigBox {
  display: flex;
  position: relative;
    width: 100%;
}


::v-deep .el-collapse {
  padding: 20px !important;
}
</style>
