<template>
  <div class="app-container">
    <!-- <kindergar @kinbatlist="kinbatlist" style="width: 500px; display: inline;" ref="kinresets"></kindergar> -->
    <classe @classelist="classelist" style="width: 500px; display: inline;" ref="classe"></classe>
    <parent @parentlist="parentlist" style="width: 500px; display: inline;" ref="resets"></parent>
    <el-form size="small" :inline="true" v-show="showSearch">
      <el-form-item label="日期" prop="orderStatus" label-width="60px">
        <el-date-picker
          v-model="valuetime"
          type="daterange"
          align="right"
          @change="monthStartEndTimechange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="操作类型" prop="patientName" label-width="80px">
        <el-select v-model="loginType" placeholder="请选择操作类型" clearable>
          <el-option
            v-for="item in loginTypelist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getlist">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="家长姓名" align="center" prop="parentName">
        <template slot-scope="scope">
          <el-button type="text" @click="getStudent(scope.row)">{{scope.row.parentName}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作类型" align="center" prop="logType">
        <template slot-scope="scope">
          {{scope.row.logType=='LOGIN'?'登录':''}}
          {{scope.row.logType=='EXERCISE_PRESCRIPTION_VIDEO'?'运动处方视频':''}}
          {{scope.row.logType=='EXERCISE_PRESCRIPTION'?'运动处方':''}}
        </template>
      </el-table-column>
      <el-table-column label="时间" align="center" prop="logTime" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getlist"
    />
    <el-dialog width="900px" title="学生信息" :visible.sync="studentInfoshow" append-to-body>
      <el-table :data="studentInfoList">
        <el-table-column property="kindergartenName" label="幼儿园名称" align="center"></el-table-column>
        <el-table-column property="className" label="班级名称" align="center"></el-table-column>
        <el-table-column property="classTeacher" label="班主任姓名" align="center"></el-table-column>
        <el-table-column property="classPhone" label="联系电话" align="center"></el-table-column>
        <el-table-column property="studentName" label="学生姓名" align="center"></el-table-column>
        <el-table-column property="studentAge" label="学生年龄" align="center"></el-table-column>
        <el-table-column property="studentSex" label="学生性别" align="center">
          <template slot-scope="scope">
            {{scope.row.studentSex=='MALE'?'男':''}}
            {{scope.row.studentSex=='FEMALE'?'女':''}}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="studentInfoshow=false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  appletVisitRecord,
  getParentAndStudentInfo
} from "@/api/system/AppletAccessLog";
import classe from "../../assembly/classe.vue";
import parent from "../../assembly/parent.vue";
export default {
  name: "AppletAccessLog",
  components: { classe, parent },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      valuetime: "",
      loading: false,
      showSearch: true, // 显示搜索条件
      loginTypelist: [
        {
          label: "运动处方",
          value: "EXERCISE_PRESCRIPTION"
        },
        {
          label: "运动处方视频",
          value: "EXERCISE_PRESCRIPTION_VIDEO"
        },
        {
          label: "登录",
          value: "LOGIN"
        }
      ],
      pageNum: 1,
      pageSize: 10,
      parentInfoId: "",
      classId: "",
      startDate: "",
      endDate: "",
      loginType: "",
      list: [],
      total: 0,
      studentInfoList: [], //名下幼儿园
      studentInfoshow: false
    };
  },
  created() {
    this.newtime();
    this.getlist();
  },
  mounted() {},
  methods: {
    //今天的时间
    newtime() {
      let nowDate = new Date();
      let dates = {
        year: nowDate.getFullYear(), // 获取当前年份
        month: nowDate.getMonth() + 1, //获取当前月份
        date: nowDate.getDate() //获取当前日期
      };
      //拼接
      if (dates.month < 10) {
        this.startDate = dates.year + "-0" + dates.month;
        this.endDate = dates.year + "-0" + dates.month;
      } else {
        this.startDate = dates.year + "." + dates.month;
        this.endDate = dates.year + "-" + dates.month;
      }
      if (dates.date < 10) {
        this.startDate = this.startDate + "-0" + dates.date;
        this.endDate = this.endDate + "-0" + dates.date;
      } else {
        this.startDate = this.startDate + "-" + dates.date;
        this.endDate = this.endDate + "-" + dates.date;
      }
    },
    //名下学生
    getStudent(e) {
      this.studentInfoList = [];
      getParentAndStudentInfo(e.parentInfoId).then(res => {
        this.studentInfoList = res.data.studentInfoList;
        this.studentInfoshow = true;
      });
    },
    //获取list
    getlist() {
      appletVisitRecord(
        this.pageNum,
        this.pageSize,
        this.parentInfoId,
        this.classId,
        this.startDate,
        this.endDate,
        this.loginType
      ).then(res => {
        this.list = res.rows;
        this.total = res.total;
      });
    },
    //重置
    resetQuery() {
      this.newtime();
      this.parentInfoId = "";
      this.classId = "";
      this.loginType = "";
      this.valuetime = "";
      this.startDate = "";
      this.endDate = "";
      this.$refs.resets.reset();
      this.$refs.classe.reset();
      this.newtime();
      this.getlist();
    },
    //选择时期区间
    monthStartEndTimechange(e) {
      this.startDate = this.formatDate(new Date(e[0]).getTime());
      this.endDate = this.formatDate(new Date(e[1]).getTime());
    },
    //家长
    parentlist(e) {
      this.parentInfoId = e;
    },
    //班级
    classelist(e) {
      this.classId = e;
    },
    formatDate(time, timetype) {
      let date = new Date(time); //13位时间戳
      //let date = new Date(parseInt(time) * 1000); //10位时间戳
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    }
  }
};
</script>
<style lang='scss' scoped>
.app-container {
  padding: 20px 0 20px 10px;
}
::v-deep .el-card__header {
  border: none;
}
::v-deep .el-form {
  display: inline;
}
</style>

