<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="课程/章节" prop="keywords">
        <el-input
          v-model="queryParams.keywords"
          placeholder="请输入课程名称/章节名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="课程分类" prop="cateId">
        <el-select
          v-model="queryParams.cateId"
          placeholder="请选择课程分类"
          clearable
          filterable
          size="small"
          @change="onRootCateChange"
        >
          <el-option
            v-for="item in rootCategoryOptions"
            :key="item.cateId"
            :label="item.cateName"
            :value="item.cateId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="子分类" prop="subCateId">
        <el-select
          v-model="queryParams.subCateId"
          placeholder="请选择子分类"
          clearable
          filterable
          size="small"
          :disabled="!queryParams.cateId"
        >
          <el-option
            v-for="item in subCategoryOptions"
            :key="item.cateId"
            :label="item.cateName"
            :value="item.cateId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="筛选时间" prop="dateRange">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          size="small"
          clearable
          @change="onDateRangeChange"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-tabs v-model="activeTab" @tab-click="onTabClick">
      <el-tab-pane label="课程数据" name="course">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              :loading="exportLoading"
              @click="handleExport"
              v-hasPermi="['course:publicCourseWatchStat:export']"
            >导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getCourseList" />
        </el-row>
        <el-table v-loading="courseLoading" border :data="courseList">
          <el-table-column label="时间" align="center" prop="statDate" width="110">
            <template slot-scope="scope">
              <span>{{ formatDay(scope.row.statDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="课程ID" align="center" prop="courseId" width="90" />
          <el-table-column label="课程名称" align="center" prop="courseName" min-width="120" show-overflow-tooltip />
          <el-table-column label="课程分类" align="center" prop="rootCateName" min-width="100" show-overflow-tooltip />
          <el-table-column label="子分类" align="center" prop="subCateName" min-width="90" show-overflow-tooltip />
          <el-table-column label="曝光位置" align="center" prop="exposurePositionLabel" width="130" />
          <el-table-column label="曝光次数" align="center" prop="exposurePv" width="90" />
          <el-table-column label="曝光人数" align="center" prop="exposureUv" width="90" />
          <el-table-column label="点击次数" align="center" prop="clickPv" width="90" />
          <el-table-column label="点击人数" align="center" prop="clickUv" width="90" />
          <el-table-column label="点击率" align="center" width="90">
            <template slot-scope="scope">
              <span>{{ scope.row.clickRate != null ? scope.row.clickRate + '%' : '0%' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="课程观看人数" align="center" prop="watchUv" width="110" />
          <el-table-column label="课程完课人数" align="center" prop="finishUv" width="110" />
        </el-table>
        <pagination
          v-show="courseTotal > 0"
          :total="courseTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getCourseList"
        />
      </el-tab-pane>

      <el-tab-pane label="目录数据" name="catalog">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              :loading="exportLoading"
              @click="handleExport"
              v-hasPermi="['course:publicCourseWatchStat:export']"
            >导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getCatalogList" />
        </el-row>
        <el-table v-loading="catalogLoading" border :data="catalogList">
          <el-table-column label="目录ID" align="center" prop="videoId" width="90" />
          <el-table-column label="目录名称" align="center" prop="catalogName" min-width="120" show-overflow-tooltip />
          <el-table-column label="课程名称" align="center" prop="courseName" min-width="120" show-overflow-tooltip />
          <el-table-column label="课程分类" align="center" prop="catePath" min-width="120" show-overflow-tooltip />
          <el-table-column label="浏览量(PV)" align="center" prop="pv" width="100" />
          <el-table-column label="观看人数(UV)" align="center" prop="uv" width="110" />
          <el-table-column label="完课人数" align="center" prop="finishUv" width="90" />
          <el-table-column label="评论数" align="center" prop="commentCount" width="80" />
          <el-table-column label="完课率" align="center" width="90">
            <template slot-scope="scope">
              <span>{{ scope.row.finishRate != null ? scope.row.finishRate + '%' : '0%' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="平均学习时长" align="center" prop="avgWatchDuration" width="120" />
          <el-table-column label="看课奖励类型" align="center" prop="rewardType" min-width="100" show-overflow-tooltip />
          <el-table-column label="答题人数" align="center" prop="answerUv" width="90" />
          <el-table-column label="领取积分人数" align="center" prop="integralReceiveUv" width="110" />
          <el-table-column label="分享私聊数" align="center" prop="sharePrivateCount" width="100" />
          <el-table-column label="分享朋友圈数" align="center" prop="shareTimelineCount" width="110" />
          <el-table-column label="操作" align="center" width="100" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="handleUserData(scope.row)">用户数据</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="catalogTotal > 0"
          :total="catalogTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getCatalogList"
        />
      </el-tab-pane>
    </el-tabs>

    <!-- 用户数据抽屉 -->
    <el-drawer
      :title="'用户数据 - ' + (drawerRow.catalogName || '')"
      :visible.sync="drawerVisible"
      direction="rtl"
      size="720px"
      :before-close="handleDrawerClose"
    >
      <el-form :inline="true" :model="drawerQuery" size="small" style="margin-bottom:12px">
        <el-form-item label="微信昵称">
          <el-input v-model="drawerQuery.nickName" placeholder="请输入" clearable style="width:140px" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="drawerQuery.phone" placeholder="请输入" clearable style="width:140px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getDrawerList">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="drawerLoading" border :data="drawerList" size="small">
        <el-table-column label="用户ID" align="center" prop="userId" width="80" />
        <el-table-column label="微信昵称" align="center" prop="nickName" min-width="100" show-overflow-tooltip />
        <el-table-column label="手机号" align="center" prop="phone" width="120" />
        <el-table-column label="累计学习时长" align="center" width="110">
          <template slot-scope="scope">
            <span>{{ formatSeconds(scope.row.totalDuration) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="首次看课时间" align="center" prop="firstWatchTime" width="160" />
        <el-table-column label="最近看课时间" align="center" prop="lastWatchTime" width="160" />
        <el-table-column label="是否领取积分" align="center" prop="integralClaimed" width="110">
          <template slot-scope="scope">
            <el-tag :type="scope.row.integralClaimed === '是' ? 'success' : 'info'" size="small">
              {{ scope.row.integralClaimed }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="drawerTotal > 0"
        :total="drawerTotal"
        :page.sync="drawerQuery.pageNum"
        :limit.sync="drawerQuery.pageSize"
        @pagination="getDrawerList"
      />
    </el-drawer>
  </div>
</template>

<script>
import {
  listPublicCourseWatchStatCourseDay,
  listPublicCourseWatchStatCatalog,
  exportPublicCourseWatchStatCourseDay,
  exportPublicCourseWatchStatCatalog,
  listCatalogUserStudy
} from '@/api/course/publicCourseWatchStat'
import { listUserCourseCategory } from '@/api/course/userCourseCategory'

export default {
  name: 'PublicCourseWatchLog',
  data() {
    return {
      showSearch: true,
      activeTab: 'course',
      exportLoading: false,
      dateRange: [],
      categoryFlat: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keywords: null,
        cateId: null,
        subCateId: null,
        beginDate: null,
        endDate: null
      },
      courseLoading: false,
      courseList: [],
      courseTotal: 0,
      catalogLoading: false,
      catalogList: [],
      catalogTotal: 0,
      // 用户数据抽屉
      drawerVisible: false,
      drawerLoading: false,
      drawerRow: {},
      drawerList: [],
      drawerTotal: 0,
      drawerQuery: {
        pageNum: 1,
        pageSize: 10,
        videoId: null,
        nickName: null,
        phone: null
      }
    }
  },
  computed: {
    rootCategoryOptions() {
      return this.categoryFlat.filter(c => c.pid === 0)
    },
    subCategoryOptions() {
      if (!this.queryParams.cateId) {
        return []
      }
      return this.categoryFlat.filter(c => c.pid === this.queryParams.cateId)
    }
  },
  created() {
    this.initDateRange()
    this.loadCategories()
    this.getCourseList()
  },
  methods: {
    initDateRange() {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      const fmt = d => this.parseTime(d, '{y}-{m}-{d}')
      this.dateRange = [fmt(start), fmt(end)]
      this.queryParams.beginDate = this.dateRange[0]
      this.queryParams.endDate = this.dateRange[1]
    },
    onDateRangeChange(val) {
      if (val && val.length === 2) {
        this.queryParams.beginDate = val[0]
        this.queryParams.endDate = val[1]
      } else {
        this.queryParams.beginDate = null
        this.queryParams.endDate = null
      }
    },
    loadCategories() {
      listUserCourseCategory({ cateType: 1 }).then(res => {
        this.categoryFlat = res.data || []
      })
    },
    onRootCateChange() {
      this.queryParams.subCateId = null
    },
    /** tab-click 触发时 v-model 可能尚未更新，必须用 tab.name */
    onTabClick(tab) {
      const name = tab.name
      this.queryParams.pageNum = 1
      if (name === 'course') {
        this.getCourseList()
      } else {
        this.getCatalogList()
      }
    },
    formatDay(val) {
      if (!val) {
        return ''
      }
      if (typeof val === 'string') {
        return val.length >= 10 ? val.substring(0, 10) : val
      }
      return this.parseTime(val, '{y}-{m}-{d}')
    },
    buildQuery() {
      return { ...this.queryParams }
    },
    buildExportQuery() {
      const q = { ...this.queryParams }
      delete q.pageNum
      delete q.pageSize
      return q
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      if (this.activeTab === 'course') {
        this.getCourseList()
      } else {
        this.getCatalogList()
      }
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.cateId = null
      this.queryParams.subCateId = null
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.initDateRange()
      this.handleQuery()
    },
    getCourseList() {
      this.courseLoading = true
      listPublicCourseWatchStatCourseDay(this.buildQuery()).then(res => {
        this.courseList = res.rows
        this.courseTotal = res.total
        this.courseLoading = false
      }).catch(() => {
        this.courseLoading = false
      })
    },
    getCatalogList() {
      this.catalogLoading = true
      listPublicCourseWatchStatCatalog(this.buildQuery()).then(res => {
        this.catalogList = res.rows
        this.catalogTotal = res.total
        this.catalogLoading = false
      }).catch(() => {
        this.catalogLoading = false
      })
    },
    handleExport() {
      const tabLabel = this.activeTab === 'course' ? '课程数据' : '目录数据'
      this.$confirm(`是否确认导出当前筛选条件下的「${tabLabel}」?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.exportLoading = true
        const q = this.buildExportQuery()
        const req = this.activeTab === 'course'
          ? exportPublicCourseWatchStatCourseDay(q)
          : exportPublicCourseWatchStatCatalog(q)
        return req
      }).then(res => {
        if (res && res.msg) {
          this.download(res.msg)
        }
        this.exportLoading = false
      }).catch(() => {
        this.exportLoading = false
      })
    },
    handleUserData(row) {
      this.drawerRow = row
      this.drawerQuery.videoId = row.videoId
      this.drawerQuery.nickName = null
      this.drawerQuery.phone = null
      this.drawerQuery.pageNum = 1
      this.drawerVisible = true
      this.getDrawerList()
    },
    getDrawerList() {
      this.drawerLoading = true
      listCatalogUserStudy(this.drawerQuery).then(res => {
        this.drawerList = res.rows
        this.drawerTotal = res.total
        this.drawerLoading = false
      }).catch(() => {
        this.drawerLoading = false
      })
    },
    handleDrawerClose(done) {
      this.drawerVisible = false
      done()
    },
    formatSeconds(sec) {
      if (!sec || sec <= 0) return '0秒'
      const h = Math.floor(sec / 3600)
      const m = Math.floor((sec % 3600) / 60)
      const s = sec % 60
      if (h > 0) return h + '时' + m + '分' + s + '秒'
      if (m > 0) return m + '分' + s + '秒'
      return s + '秒'
    }
  }
}
</script>
