<template>
  <div>
    <el-dialog title='微视频学习详情' width="1200px" v-model="props.addDiaShow" :before-close="handleClose">
      <!-- 培训计划新增或修改 -->
      <div class="config">
        <div>
          <el-table ref="multipleTableRef" :data="ryList" stripe style="width: 100%" v-loading="tableloading"
            element-loading-text="数据加载中..." @selection-change="handleSelectionChange" border>
            <el-table-column label="姓名" property="username"></el-table-column>
            <el-table-column label="所属单位" property="orgname"></el-table-column>
            <el-table-column label="所属部门" property="xtCjbmmc"></el-table-column>
            <el-table-column label="学习次数" property="studycount"></el-table-column>
            <el-table-column label="学习时间" property="lasttime"></el-table-column>
          </el-table>
          <div class="fenyes">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
              layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          </div>
        </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 {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  reactive,
  watch,
  getCurrentInstance
} from "vue";

import { getApi, postApi, putApi, deleteApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const props = defineProps({
  addDiaShow: {
    type: Boolean,
    default: false
  },
  id: String,
  username: String,
});
const tableloading = ref(false)
const total = ref(0)
const ryList = ref([]);
const emits = defineEmits(["changeAddVi"]);
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
})

watch(
  () => props.addDiaShow,
  (newVal) => {
    if (newVal == true) {
      listQuery.value.id = props.id;
      listQuery.value.username = props.username;
      getprople()
    }
  }
)

//获取详情
onMounted(() => {

});
//	查询微视频的学习情况列表
function getprople() {
  tableloading.value = true
  getApi(listQuery.value, '/mosty-jcgl/video/getStudyUserPage').then(res => {
    if (res.records) {
      ryList.value = res.records;
      total.value = res.total;
      tableloading.value = false;
    }

  })
}

//分页
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getwglList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getwglList();
};
// 关闭
const handleClose = () => {
  emits("changeAddVi", false);
};

// 关闭×
const closeDialog = () => {
  emits("changeAddVi", false);
};



</script>

<style lang="scss" scoped>
.fj {
  .el-form {
    padding: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    // width: 1170px;
    justify-content: flex-end;
  }

  .from_fix {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    margin-top: 10px;

    // .el-form-item--default .el-form-item__content {
    //   flex-wrap: nowrap !important;
    // }

    .el-input {
      width: 100%;
    }
  }
}

::v-deep .el-form-item__content {
  flex-wrap: nowrap !important;
}

.config {
  .el-form {
    padding: 10px 40px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .el-form-item {
    text-align: center;
  }
}

.pxdx_box {
  width: 500px;
}

.titleBox {
  align-items: center;
  margin: 0;
  padding: 0;
  height: 60px;
  border: 1px solid rgb(32, 75, 54);
  padding: 20px;
}

.form>div {
  position: relative;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;

  div {
    display: flex;
    align-items: center;

    .el-select {
      width: 65%;
    }
  }
}

.el-input {
  width: 75%;
}

.two .el-input {
  width: 65%;
}

.three {
  justify-content: flex-start !important;

  .el-select {
    width: 15%;
  }
}

.four {
  display: flex;
  align-items: center;

  span {
    width: 5%;
  }

  .el-textarea__inner {
    width: 95%;
  }
}

.group {
  margin-top: 50px;
  // background-color: red;
  position: relative;
}

.fj {
  margin-top: 50px;
  width: 100%;

  .content {
    width: 100%;
    display: flex;
    padding: 20px;

    div {
      display: flex;
      width: 85%;
      align-items: center;
    }

    justify-content: space-between;
  }
}

.jc {
  margin-top: 50px;
}

.tabBox {
  height: 300px !important;
}

.el-table {
  height: 300px !important;
  border: 1px solid var(--el-color-primary);
}

.el-form-item__content {
  flex-wrap: nowrap;
}

.el-collapse {
  border-color: var(--el-color-primary);
  height: 460px;
}

::v-deep .el-collapse-item__header {
  border-bottom-color: var(--el-color-primary);
  color: #000 !important;
}

::v-deep .el-collapse-item__header.is-active {
  border-bottom-color: transparent;
}

::v-deep .el-date-editor .el-range-input {
  color: #0c0b0b !important;
}
</style>
