<template>
  <el-card shadow="never">
    <template #header>
      <div class="header">
        <span>{{ title }}</span>
        <el-button type="primary" @click="goCreate">新增简报</el-button>
      </div>
    </template>

    <el-form :inline="true" @submit.prevent>
      <el-form-item label="关键词">
        <el-input v-model="query.kws" clearable placeholder="请输入标题/内容关键字" @keyup.enter="search" />
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="query.summaryType" clearable style="width: 140px">
          <el-option label="日报" value="1" />
          <el-option label="周报" value="2" />
          <el-option label="月报" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="query.status" clearable style="width: 140px">
          <el-option label="待审阅" value="0" />
          <el-option label="已通过" value="1" />
          <el-option label="未通过" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker
          v-model="query.range"
          type="daterange"
          value-format="YYYY-MM-DD"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          style="width: 260px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="rows" border stripe>
      <el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label" :min-width="col.minWidth || 120" show-overflow-tooltip />
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="goDetail(row)">查看</el-button>
          <el-button v-if="scene === 'list' || scene === 'draft'" link @click="goEdit(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pager">
      <el-pagination
        v-model:current-page="query.page"
        v-model:page-size="query.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next"
        @size-change="load"
        @current-change="load"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { summaryAnnouncementList, summaryDraftList, summaryList, summaryMemberList, summaryShareList, summaryStatisticsList } from '@/api/otr/summary/core'

type Scene = 'list' | 'member' | 'statistics' | 'draft' | 'share' | 'announcement'
const props = defineProps<{ title: string; scene: Scene }>()
const router = useRouter()
const loading = ref(false)
const rows = ref<any[]>([])
const total = ref(0)

const query = reactive({
  page: 1,
  pageSize: 10,
  kws: '',
  summaryType: '',
  status: '',
  range: [] as string[],
})

const columns = computed(() => {
  if (props.scene === 'member') {
    return [
      { prop: 'memberName', label: '成员' },
      { prop: 'title', label: '简报标题', minWidth: 240 },
      { prop: 'period', label: '周期' },
      { prop: 'createdAt', label: '提交时间', minWidth: 160 },
    ]
  }
  if (props.scene === 'statistics') {
    return [
      { prop: 'dimension', label: '统计维度', minWidth: 180 },
      { prop: 'value', label: '数值' },
      { prop: 'ratio', label: '占比' },
    ]
  }
  if (props.scene === 'draft') {
    return [
      { prop: 'title', label: '草稿标题', minWidth: 240 },
      { prop: 'ownerName', label: '作者' },
      { prop: 'updatedAt', label: '更新时间', minWidth: 160 },
    ]
  }
  if (props.scene === 'share') {
    return [
      { prop: 'title', label: '分享标题', minWidth: 240 },
      { prop: 'author', label: '分享人' },
      { prop: 'likes', label: '点赞' },
      { prop: 'createdAt', label: '发布时间', minWidth: 160 },
    ]
  }
  if (props.scene === 'announcement') {
    return [
      { prop: 'title', label: '公告标题', minWidth: 240 },
      { prop: 'publisher', label: '发布人' },
      { prop: 'createdAt', label: '发布时间', minWidth: 160 },
    ]
  }
  return [
    { prop: 'title', label: '简报标题', minWidth: 240 },
    { prop: 'ownerName', label: '提交人' },
    { prop: 'period', label: '周期' },
    { prop: 'createdAt', label: '提交时间', minWidth: 160 },
  ]
})

async function load() {
  loading.value = true
  try {
    const params = {
      pageNo: query.page,
      pageSize: query.pageSize,
      kws: query.kws,
      summaryType: query.summaryType,
      status: query.status,
      start: query.range?.[0] || '',
      end: query.range?.[1] || '',
      scene: props.scene,
    }
    let res: any
    if (props.scene === 'member') res = await summaryMemberList(params)
    else if (props.scene === 'statistics') res = await summaryStatisticsList(params)
    else if (props.scene === 'draft') res = await summaryDraftList(params)
    else if (props.scene === 'share') res = await summaryShareList(params)
    else if (props.scene === 'announcement') res = await summaryAnnouncementList(params)
    else res = await summaryList(params)
    const result = res?.result ?? {}
    rows.value = result.records ?? result.list ?? []
    total.value = Number(result.total ?? rows.value.length)
  } finally {
    loading.value = false
  }
}

function search() {
  query.page = 1
  load()
}

function reset() {
  query.page = 1
  query.pageSize = 10
  query.kws = ''
  query.summaryType = ''
  query.status = ''
  query.range = []
  load()
}

function goCreate() {
  router.push('/otr/summary/create')
}

function goEdit(row: any) {
  router.push({ path: '/otr/summary/form', query: { id: String(row.id || '') } })
}

function goDetail(row: any) {
  const path = props.scene === 'share' ? '/otr/summary/share-detail' : '/otr/summary/form'
  router.push({ path, query: { id: String(row.id || '') } })
}

onMounted(load)
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pager {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
</style>
