<template>
  <cl-crud ref="Crud">
    <cl-row>
      <cl-refresh-btn />
      <cl-flex1 />

      <!-- 关键词（内容） -->
      <el-input
        v-model="filters.keyword"
        placeholder="搜索周报内容"
        clearable
        @input="onFilterChange"
        style="width: 220px; margin-right: 10px"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>

      <!-- 状态 -->
      <el-select
        v-model="filters.status"
        placeholder="提交状态"
        clearable
        @change="onFilterChange"
        style="width: 140px; margin-right: 10px"
      >
        <el-option label="草稿" :value="0" />
        <el-option label="已提交" :value="1" />
      </el-select>

      <!-- 可选：用户ID筛选（按需） -->
      <el-input
        v-model="filters.userId"
        placeholder="用户ID"
        clearable
        @input="onFilterChange"
        style="width: 140px"
      />
    </cl-row>

    <cl-row>
      <cl-table ref="Table" />
    </cl-row>

    <cl-row>
      <cl-flex1 />
      <cl-pagination />
    </cl-row>

    <cl-upsert ref="Upsert" />
  </cl-crud>
  
</template>

<script lang="ts" setup>
defineOptions({ name: 'weeklyreport-list' });

import { ref } from 'vue';
import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { Search } from '@element-plus/icons-vue';

const { service } = useCool();

// 日期时间格式化
const fmtDateTime = (row: any, column: any, v: any) => {
  if (!v) return '-';
  const d = new Date(v);
  const Y = d.getFullYear();
  const M = String(d.getMonth() + 1).padStart(2, '0');
  const D = String(d.getDate()).padStart(2, '0');
  const h = String(d.getHours()).padStart(2, '0');
  const m = String(d.getMinutes()).padStart(2, '0');
  const s = String(d.getSeconds()).padStart(2, '0');
  return `${Y}-${M}-${D} ${h}:${m}:${s}`;
};

// 筛选项
const filters = ref<any>({ keyword: undefined, status: undefined, userId: undefined });

// 表格列
const Table = useTable({
  columns: [
    { label: 'ID', prop: 'id', width: 80 },
    { label: '用户ID', prop: 'userId', width: 100 },
    { label: '周开始', prop: 'weekStartDate', width: 120, sortable: 'custom' },
    { label: '周结束', prop: 'weekEndDate', width: 120, sortable: 'custom' },
    {
      label: '提交状态',
      prop: 'status',
      width: 110,
      dict: [
        { label: '草稿', value: 0, type: 'warning' },
        { label: '已提交', value: 1, type: 'success' }
      ]
    },
    { label: '提交时间', prop: 'submitTime', minWidth: 160, sortable: 'custom', formatter: fmtDateTime },
    { label: '创建时间', prop: 'createTime', minWidth: 160, sortable: 'custom', formatter: fmtDateTime },
    { label: '内容', prop: 'userEditedContent', minWidth: 320, showOverflowTooltip: true },
    { type: 'op', width: 100, buttons: ['info'] }
  ]
});

// 详情对话框
const Upsert = useUpsert({
  dialog: { width: '900px', title: '周报详情' },
  props: { labelWidth: '130px' },
  items: [
    { label: '用户ID', prop: 'userId', component: { name: 'el-input', props: { readonly: true } } },
    { label: '周开始', prop: 'weekStartDate', component: { name: 'el-input', props: { readonly: true } } },
    { label: '周结束', prop: 'weekEndDate', component: { name: 'el-input', props: { readonly: true } } },
    { label: '提交状态', prop: 'statusText', component: { name: 'el-input', props: { readonly: true } } },
    {
      label: '原始输入内容',
      prop: 'originalText',
      component: { name: 'el-input', props: { type: 'textarea', rows: 4, readonly: true } }
    },
    {
      label: 'AI格式化内容',
      prop: 'aiFormattedContent',
      component: { name: 'el-input', props: { type: 'textarea', rows: 6, readonly: true } }
    },
    {
      label: '最终编辑内容',
      prop: 'userEditedContent',
      component: { name: 'el-input', props: { type: 'textarea', rows: 8, readonly: true } }
    },
    { label: '提交时间', prop: 'submitTime', component: { name: 'el-input', props: { readonly: true } } },
    { label: '创建时间', prop: 'createTime', component: { name: 'el-input', props: { readonly: true } } },
    { label: '更新时间', prop: 'updateTime', component: { name: 'el-input', props: { readonly: true } } }
  ],
  op: { hidden: true }
});

// Crud 配置
const Crud = useCrud(
  { service: service.weeklyreport.weeklyReport },
  (app) => app.refresh()
);

// 触发筛选
function onFilterChange() {
  const params: any = { page: 1, size: 20 };
  if (filters.value.keyword) params.keyword = filters.value.keyword;
  if (filters.value.status !== undefined && filters.value.status !== null) params.status = filters.value.status;
  if (filters.value.userId) params.userId = filters.value.userId;
  Crud.value?.refresh(params);
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

