<script lang="ts">
export default {
  name: 'studentInfolog' // 系统_学生信息变动日志
};
</script>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { queryStudentInfolog } from "@/api/regionmodule/schoolStudent";
import Page from '@/components/Pagination/page.vue'

const emit = defineEmits([ 'returnStudent']);
const props:any = defineProps({
  studentInfo: {
    required: false,
    type: Object,
    default: {}
  }
})
function returnClick(){
  emit('returnStudent', '1');
}
const date:any = ref('')

const loading = ref(false)
const tableData:any = ref([])
const queryInfo:any = ref({
  total:0,
  size:20,
  current:1,
})
function getData(){
  if(props.studentInfo.id == '' || props.studentInfo.id == null){
    tableData.value = []
    return
  }
  let startDate = ''
  let endDate = ''
  if(date != null && date!='' && date.length!=0){
    startDate = date.value[0]
    endDate = date.value[1]
  }
  let params = {
    startDate:startDate,
    endDate:endDate,
    studentId: props.studentInfo.id,
    size:queryInfo.value.size,
    current:queryInfo.value.current,
  };
  loading.value = true
  queryStudentInfolog(params).then((res) => {
    tableData.value = res.data.records;
    queryInfo.value.total = res.data.total
    loading.value = false
  }).catch(()=>{
    loading.value = false
  });
}
function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month =
      date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    // 拼接
    return year + "-" + month + "-" + day;
  }
}
onMounted(() => {
  getData();
});
</script>
<template>
  <div style="padding-right: 20px;">
    <div class="schoolStudent-title">
      <div class="class_order">学生信息变动日志</div>
      <div class="return" @click="returnClick">
        <img src="@/assets/tableicon/u549.png" alt="">
        <div style="padding-left: 2px;padding-top: 2px;">返回</div>
      </div>
    </div>
    <div class="schoolStudent-line"></div>
    <el-date-picker
     style="margin: 10px 0;"
      v-model="date"
      type="daterange"
      value-format="YYYY-MM-DD"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="getData">
    </el-date-picker>
    <el-table v-loading="loading" :data="tableData" style="width: 100%; height:calc(100vh - 300px)" row-key="id" border
     default-expand-all :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}" >
     <el-table-column type="index" width="60" label="序号"></el-table-column>
      <el-table-column prop="log_time" label="日志时间" width="140" align="center">
        <template #default="scope">
          {{dateFormat(scope.row.log_time)}}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="100"></el-table-column>
      <!-- <el-table-column prop="vision_right" label="性别" width="100"></el-table-column> -->
      <el-table-column prop="school" label="所属学校" width="200"></el-table-column>
      <el-table-column prop="grade_class" label="所属年级班级" width="200"></el-table-column>
      <el-table-column prop="log_type" label="类型" width="100">
        <template #default="scope">
          <span v-if="scope.row.log_type == '01'">添加</span>
          <span v-if="scope.row.log_type == '02'">修改信息</span>
          <span v-if="scope.row.log_type == '03'">删除</span>
          <span v-if="scope.row.log_type == '04'">升级</span>
          <span v-if="scope.row.log_type == '05'">调班</span>
          <span v-if="scope.row.log_type == '05'">转校</span>
        </template>
      </el-table-column>
      <el-table-column prop="log_info" label="日志描述" min-width="100"></el-table-column>
    </el-table>
    <Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
      @pagination="getData" />
  </div>
</template>
<style scoped  lang="scss">
  .schoolStudent-title{
    display: flex;
    justify-content: space-between;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    color: #282828;
    .class_order{
      padding-bottom: 5px;
      border-bottom:3px solid #409eff;
    }
    .return{
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Arial Normal', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
      color: #409EFF;
      width: 50px;
      height: 26px;
      border: 1px solid #C6E2FF;
      background: rgb(236, 245, 255);
      border-radius:4px;
      cursor: pointer;
    }
  }
  .schoolStudent-line{
    width: 100%;
    height: 1px;
    background: rgb(220, 223, 230);
    margin-top: -1px;
  }
  .basicname{
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #333333;
  text-align: left;
  padding-bottom: 15px;
}
.basicinfo{
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #787878;
  text-align: left;
}
.valuetext{
  font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #363636;
    padding-right: 50px;
    padding-left: 10px;
}
</style>
