<script setup>
import { apiCustomerStatistic } from '@/api/customer'
import { watch } from 'vue'

const show = defineModel('show', { type: Boolean, default: false })

const props = defineProps({
  userId: {
    type: Number,
    default: 0
  }
})

const tableColOpt = [
  {
    label: '标题',
    key: 'ReportTitle'
  },
  {
    label: '品种',
    key: 'ChartPermissionName'
  },
  {
    label: '报告类型',
    key: 'ClassifyName2'
  },
  {
    label: '阅读时间',
    key: 'CreateTime'
  },
  {
    label: '停留时间',
    key: 'StayTime'
  },
]
const list = ref([])
const page = ref(1)
const pageSize = ref(10)
const tableLoading = ref(false)
const totals = ref(0)
const permissionIds = ref('')
const classifyIds = ref('')
async function getList() {
  tableLoading.value = true
  const res = await apiCustomerStatistic.readRecordInfo({
    UserId: props.userId,
    PageSize: pageSize.value,
    CurrentIndex: page.value,
    ChartPermissionIds: permissionIds.value ? permissionIds.value.join(',') : '',
    ClassifyIds: classifyIds.value ? classifyIds.value.join(',') : '',
  })
  tableLoading.value = false
  if (res.Ret === 200) {
    list.value = res.Data.List || []
    totals.value = res.Data.Paging.Totals
  }
}
function handlePageChange(e) {
  page.value = e
  getList()
}

function handleRefreshList() {
  page.value = 1
  list.value = []
  getList()
}

watch(() => show.value, (n) => {
  if (n) {
    permissionIds.value = ''
    handleRefreshList()
  }
})

</script>

<template>
  <el-dialog v-model="show" width="850" title="研报阅读统计" draggable>
    <div class="user-statistic-detail-wrap">
      <div>
        <select-permission
          v-model="permissionIds"
          :props="{
            emitPath: false,
            multiple: true,
          }"
          clearable
          @change="handleRefreshList"
        />
        <select-report-classify
          style="margin-left: 5px"
          v-model="classifyIds"
          :props="{
            emitPath: false,
            multiple: true,
          }"
          clearable
          @change="handleRefreshList"
        />
      </div>
      <div class="total-text">公有{{ totals }}条阅读记录</div>
      <el-table
        :data="list"
        border
        highlight-current-row
        element-loading-text="数据加载中..."
        v-loading="tableLoading"
      >
        <el-table-column
          v-for="column in tableColOpt"
          :key="column.key"
          :prop="column.key"
          :label="column.label"
        >
          <template #default="{ row }">
            <span v-if="column.key === 'CreateTime'">{{
              formatTime(row.CreateTime)
            }}</span>
            <span v-else>{{ row[column.key] }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total,prev,pager,next"
        :current-page="page"
        :page-size="pageSize"
        :total="totals"
        @current-change="handlePageChange"
        style="margin-top: 30px; justify-content: flex-end"
      />
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.user-statistic-detail-wrap {
  .total-text {
    color: #000;
    margin-top: 30px;
    margin-bottom: 10px;
  }
}
</style>