<template>
  <el-dialog title="用户看课数据（按看课日期）" center append-to-body :visible.sync="dialogShow" width="90%">
    <el-table :data="detail" style="width: 100%" v-loading="loading">
      <el-table-column prop="cur_date" label="看课日期"></el-table-column>
      <el-table-column prop="total_watch_time" label="当日总看课时长（秒）"></el-table-column>
      <el-table-column prop="share_times" label="当日总分享次数"></el-table-column>
      <el-table-column prop="created_at" label="当日首次看课时间"></el-table-column>
      <el-table-column prop="updated_at" label="当日最后看课时间"></el-table-column>
    </el-table>
    <el-pagination
    v-if="dialogObj.json"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-sizes="[10, 20, 30, 40, 50, 60, 80, 100]"
      :page-size="dialogObj.json.limit"
      :current-page.sync="dialogObj.json.page"
      layout="total , sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-dialog>
</template>

<script>
import { getSourceByDateApi } from "../../service/api";
export default {
  name: "sourceByDateDialog",
  props: ["dialogObj"],
  data() {
    return {
      detail: [],
      dialogShow: false,
      total:0,
      loading:true
    };
  },
  filters: {},
  created() {
    // this.initPage();
  },
  methods: {
    initPage() {
      this.loading = true
      let pageJson = Object.assign({},this.dialogObj.json)
      // let pageJson = {
      //   limit:this.dialogObj.json.limit,
      //   page:this.dialogObj.json.page
      // }
      getSourceByDateApi(this.dialogObj.periods_id,this.dialogObj.user_id,pageJson).then(res => {
        this.detail = res.list;
        this.total = res.total;
        this.loading = false
      });
    },
    handleCurrentChange(val){
      this.dialogObj.json.page = val
      this.initPage();
    },
    handleSizeChange(val){
      this.dialogObj.json.limit = val
      this.initPage();
    }
  },
  watch: {
    "dialogShow"(value) {
      if (value === true) {
        this.initPage();
      }
    }
  }
};
</script>

<style scoped>
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>