<template>
  <div class="user-statistics-page" v-loading="loading">
    <div v-if="mode !== 'day'" class="query-section">
      <el-form :inline="true" @keyup.enter.native="getDataList">
        <el-form-item :label="queryLabel">
          <el-date-picker
            v-model="currentDate"
            :type="pickerType"
            :format="displayFormat"
            :value-format="valueFormat"
            placeholder="请选择"
            size="small"
            popper-append-to-body
            :picker-options="pickerOptions"
            @change="handleQueryChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="refreshData">刷新</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="summary-section">
      <div class="summary-card">
        <div class="summary-card__label">{{ timePrefix }}登录人数</div>
        <div class="summary-card__value">{{ summary.loginCount }}</div>
      </div>
      <div class="summary-card">
        <div class="summary-card__label">{{ timePrefix }}注册人数</div>
        <div class="summary-card__value">{{ summary.createCount }}</div>
      </div>
      <div class="summary-card">
        <div class="summary-card__label">截止今日 近30天内活跃人数</div>
        <div class="summary-card__value">{{ summary.userCountFor30Day }}</div>
      </div>
    </div>

    <div class="table-section">
      <div class="table-header">
        <div class="table-title">用户统计明细（{{ total }}）</div>
        <el-button
          type="success"
          size="small"
          :loading="exportLoading"
          @click="exportData"
        >下载报表</el-button>
      </div>

      <el-table
        :data="tableData"
        border
        :height="mode !== 'day' ? 470 : 520"
        :header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
        :cell-style="{ textAlign: 'center', padding: '6px 0' }"
      >
        <el-table-column type="index" label="序号" width="70" :index="indexMethod" />
        <el-table-column prop="name" label="姓名" min-width="100" />
        <el-table-column prop="tel" label="电话" min-width="130" />
        <el-table-column prop="createTime" label="注册时间" min-width="120" />
        <el-table-column prop="loginCity" label="城市" min-width="100" />
        <el-table-column prop="come" label="注册来源" min-width="110" />
        <el-table-column prop="socialIdentity" label="社会身份" min-width="120" />
        <el-table-column prop="identity" label="app用户身份" min-width="120" />
        <el-table-column prop="jf" label="天医币" min-width="90" />
        <el-table-column prop="point" label="积分" min-width="90" />
        <el-table-column prop="beforVip" label="曾vip" min-width="100" />
        <el-table-column prop="nowVip" label="现vip" min-width="100" />
        <el-table-column prop="ubo" label="是否买过课程" min-width="110" />
        <el-table-column prop="ucbl" label="是否复购" min-width="90" />
        <el-table-column prop="ucerCount" label="课程证几张" min-width="100" />
        <el-table-column prop="loginTime" label="上次登录时间" min-width="160" />
        <el-table-column prop="loginMachine" label="设备" min-width="90" />
        <el-table-column prop="sex" label="性别" min-width="80" />
        <el-table-column prop="nowWatch" label="当日学习时长" min-width="110" />
        <el-table-column prop="watch7" label="近七天学习时间" min-width="120" />
        <el-table-column prop="totalWatch" label="总学习时长" min-width="100" />
      </el-table>
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        layout="total, prev, pager, next, sizes"
        :page-sizes="[10, 20, 30, 50]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 15px; text-align: right;"
      />
    </div>
  </div>
</template>

<script>
import http from '@/utils/httpRequest'

function formatDate(date) {
  const y = date.getFullYear()
  const m = `${date.getMonth() + 1}`.padStart(2, '0')
  const d = `${date.getDate()}`.padStart(2, '0')
  return `${y}-${m}-${d}`
}

function formatMonth(date) {
  const y = date.getFullYear()
  const m = `${date.getMonth() + 1}`.padStart(2, '0')
  return `${y}-${m}`
}

function formatYear(date) {
  return `${date.getFullYear()}`
}

function normalizeText(value) {
  if (value === null || value === undefined || value === '') {
    return '--'
  }
  const text = String(value).trim()
  return text || '--'
}

function normalizeNumber(value) {
  if (value === null || value === undefined || value === '') {
    return 0
  }
  const num = Number(value)
  return Number.isNaN(num) ? 0 : num
}

export default {
  props: {
    mode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      exportLoading: false,
      currentDate: '',
      summary: {
        loginCount: 0,
        createCount: 0,
        userCountFor30Day: 0
      },
      tableData: [],
      page: 1,
      limit: 10,
      total: 0
    }
  },
  computed: {
    queryLabel() {
      if (this.mode === 'day') return '统计日期'
      if (this.mode === 'month') return '统计月份'
      return '统计年份'
    },
    pickerType() {
      if (this.mode === 'day') return 'date'
      if (this.mode === 'month') return 'month'
      return 'year'
    },
    displayFormat() {
      if (this.mode === 'day') return 'yyyy-MM-dd'
      if (this.mode === 'month') return 'yyyy-MM'
      return 'yyyy'
    },
    valueFormat() {
      return this.displayFormat
    },
    timePrefix() {
      if (this.mode === 'day') return '当日'
      if (this.mode === 'month') return '当月'
      return '当年'
    },
    pickerOptions() {
      return {
        disabledDate(time) {
          const now = new Date()
          return time.getTime() > now.getTime()
        }
      }
    }
  },
  activated() {
    if (!this.currentDate) {
      this.currentDate = this.getDefaultDate()
    }
    this.getDataList()
  },
  methods: {
    indexMethod(index) {
      return (this.page - 1) * this.limit + index + 1
    },
    handleQueryChange() {
      this.page = 1
      this.getDataList()
    },
    refreshData() {
      this.page = 1
      this.getDataList()
    },
    handleSizeChange(val) {
      this.limit = val
      this.page = 1
      this.getDataList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getDataList()
    },
    getDefaultDate() {
      const now = new Date()
      if (this.mode === 'day') return formatDate(now)
      if (this.mode === 'month') return formatMonth(now)
      return formatYear(now)
    },
    normalizeRows(userList = []) {
      return userList.map((item) => ({
        name: normalizeText(item.name),
        tel: normalizeText(item.tel),
        createTime: normalizeText(item.createTime),
        loginCity: normalizeText(item.loginCity),
        come: normalizeText(item.come),
        socialIdentity: normalizeText(item.socialIdentity),
        identity: normalizeText(item.identity),
        jf: normalizeNumber(item.jf),
        point: normalizeNumber(item.point),
        beforVip: normalizeText(item.beforVip),
        nowVip: normalizeText(item.nowVip),
        ubo: normalizeText(item.ubo),
        ucbl: normalizeText(item.ucbl),
        ucerCount: normalizeNumber(item.ucerCount),
        loginTime: normalizeText(item.loginTime),
        loginMachine: normalizeText(item.loginMachine),
        sex: normalizeText(item.sex),
        nowWatch: normalizeNumber(item.nowWatch),
        watch7: normalizeNumber(item['7Watch']),
        totalWatch: normalizeNumber(item.totalWatch)
      }))
    },
    getDataList() {
      if (!this.currentDate) {
        this.currentDate = this.getDefaultDate()
      }
      this.loading = true
      http({
        url: http.adornUrl('/master/statisticsBusinessUser/getUserStatistics'),
        method: 'post',
        data: http.adornData({
          date: this.currentDate,
          page: this.page,
          limit: this.limit
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.summary = {
            loginCount: normalizeNumber(data.loginCount),
            createCount: normalizeNumber(data.createCount),
            userCountFor30Day: normalizeNumber(data.userCountFor30Day)
          }
          this.tableData = this.normalizeRows(data.userList || [])
          this.total = normalizeNumber(data.totalSize)
        } else {
          this.summary = { loginCount: 0, createCount: 0, userCountFor30Day: 0 }
          this.tableData = []
          this.total = 0
        }
      }).finally(() => {
        this.loading = false
      })
    },
    exportData() {
      if (!this.currentDate) {
        this.currentDate = this.getDefaultDate()
      }
      this.exportLoading = true
      http({
        url: http.adornUrl('/master/statisticsBusinessUser/exportUserStatistics'),
        method: 'post',
        data: http.adornData({
          date: this.currentDate
        }),
        responseType: 'blob'
      }).then((response) => {
        const blob = new Blob([response.data])
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = `用户统计报表-${this.currentDate}.xlsx`
        link.click()
        URL.revokeObjectURL(link.href)
      }).catch(() => {
        this.$message.error('下载失败，请稍后重试')
      }).finally(() => {
        this.exportLoading = false
      })
    }
  }
}
</script>

<style scoped lang="less">
@import '../styles/statistics-common.less';

.sb-form-item-zero();
.sb-table-compact();

.user-statistics-page {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.query-section,
.summary-section,
.table-section {
  .sb-white-panel(8px);
  padding-bottom: 0;
}

.query-section {
  padding-top: 0;
}

.summary-section {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
}

.summary-card {
  .sb-summary-card-shell(180px, auto, auto);
  min-width: 180px;
}

.summary-card__label {
  margin-bottom: 8px;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.table-title {
  .sb-title-16();
}

.sb-summary-card-text();

@media (max-width: 1200px) {
  .summary-section {
    flex-wrap: wrap;
  }

  .summary-card {
    min-width: 200px;
  }
}
</style>
