<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>

      <!-- 月份范围 -->
      <el-date-picker
        v-model="filters.startMonth"
        type="month"
        placeholder="开始月份"
        @change="onFilterChange"
        style="width: 140px; margin-right: 10px"
      />
      <el-date-picker
        v-model="filters.endMonth"
        type="month"
        placeholder="结束月份"
        @change="onFilterChange"
        style="width: 140px; margin-right: 10px"
      />

      <!-- 用户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: 'monthlyreport-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, startMonth: undefined, endMonth: undefined });

const Table = useTable({
  columns: [
    { label: 'ID', prop: 'id', width: 80 },
    { label: '用户ID', prop: 'userId', width: 100 },
    { label: '月份', prop: 'month', width: 120, sortable: 'custom' },
    {
      label: '提交状态',
      prop: 'status',
      width: 110,
      dict: [
        { label: '草稿', value: 0, type: 'warning' },
        { label: '已提交', value: 1, type: 'success' }
      ]
    },
    { label: '提交时间', prop: 'submitTime', width: 180, formatter: fmtDateTime },
    { label: '创建时间', prop: 'createTime', width: 180, formatter: fmtDateTime },
    { label: '内容预览', prop: 'userEditedContent', minWidth: 240, 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: 'month', component: { name: 'el-input', props: { readonly: true } } },
    { label: '提交状态', prop: 'status', 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 }
});

const Crud = useCrud(
  { service: service.monthlyreport.monthlyReport, table: Table, upsert: Upsert },
  (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;
  if (filters.value.startMonth) params.startMonth = toMonth(filters.value.startMonth);
  if (filters.value.endMonth) params.endMonth = toMonth(filters.value.endMonth);
  Crud.value?.refresh(params);
}

function toMonth(d: Date) {
  const Y = d.getFullYear();
  const M = String(d.getMonth() + 1).padStart(2, '0');
  return `${Y}-${M}`;
}
</script>

<style lang="scss" scoped></style>
