<script setup lang="ts">
import { computed, h } from 'vue';
import { RDMS_REQ_PRIORITY_DICT_CODE } from '@/constants/dict';
import TableSearchFields, { type SearchField } from '@/components/custom/table-search-fields.vue';
import { getTaskStatusTagType } from '../shared';
import type { TaskWorkspaceSearchModel } from '../shared';

defineOptions({ name: 'ProjectExecutionTaskSearch' });

interface Props {
  model: TaskWorkspaceSearchModel;
  userOptions: Api.SystemManage.UserSimple[];
  statusOptions: Api.Project.StatusBoardItem[];
  executionOptions: { id: string; name: string }[];
  /** 是否在搜索条里展示「所属执行」字段；仅跨执行视角下为 true */
  showExecutionField: boolean;
  disabled?: boolean;
}

interface Emits {
  (e: 'search'): void;
  (e: 'reset'): void;
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false
});

const emit = defineEmits<Emits>();

const ownerOptions = computed(() => props.userOptions.map(item => ({ label: item.nickname, value: item.id })));

const executionFieldOptions = computed(() =>
  props.executionOptions.map(item => ({ label: item.name, value: item.id }))
);

const dueRangeOptions = [
  { label: '仅逾期', value: 'overdue' },
  { label: '今日截止', value: 'today' },
  { label: '本周到期', value: 'thisWeek' }
];

// 状态下拉项:色点(任务状态色) + 状态名 + 数量,与执行侧状态下拉口径一致。
// 渲染进的是通用 TableSearchFields 内部的 ElOption,scoped 样式不跨组件,故用内联 style。
const STATUS_TONE_COLOR: Record<string, string> = {
  primary: 'var(--el-color-primary)',
  success: 'var(--el-color-success)',
  warning: 'var(--el-color-warning)',
  danger: 'var(--el-color-danger)',
  info: 'var(--el-color-info)'
};

function renderStatusOption(opt: { label: string; value: string | number }) {
  const item = props.statusOptions.find(status => status.statusCode === opt.value);
  const toneColor = STATUS_TONE_COLOR[getTaskStatusTagType(String(opt.value))] ?? STATUS_TONE_COLOR.info;
  return h('span', { style: 'display:flex;align-items:center;gap:8px;width:100%' }, [
    h('span', {
      style: `width:7px;height:7px;flex:0 0 auto;border-radius:50%;background-color:${toneColor}`
    }),
    h('span', { style: 'flex:1' }, opt.label),
    h(
      'span',
      { style: 'color:var(--el-text-color-secondary);font-variant-numeric:tabular-nums' },
      String(item?.count ?? 0)
    )
  ]);
}

const fields = computed<SearchField[]>(() => {
  const list: SearchField[] = [
    { key: 'keyword', label: '关键词', type: 'input', placeholder: '任务名称/说明' },
    {
      key: 'priority',
      label: '优先级',
      type: 'dict',
      dictCode: RDMS_REQ_PRIORITY_DICT_CODE,
      placeholder: '全部优先级',
      showRemark: true
    },
    {
      key: 'statusCode',
      label: '状态',
      type: 'select',
      // 选项 label 仅状态名(回显用);下拉项的色点+数量由 renderOption 渲染,与执行侧一致
      options: props.statusOptions.map(item => ({ label: item.statusName, value: item.statusCode })),
      renderOption: renderStatusOption,
      placeholder: '全部状态'
    },
    {
      key: 'ownerId',
      label: '负责人',
      type: 'select',
      options: ownerOptions.value,
      placeholder: '全部负责人'
    },
    {
      key: 'dueRange',
      label: '截止',
      type: 'select',
      options: dueRangeOptions,
      placeholder: '全部时间'
    }
  ];

  if (props.showExecutionField) {
    list.push({
      key: 'executionId',
      label: '所属执行',
      type: 'select',
      options: executionFieldOptions.value,
      placeholder: '全部执行'
    });
  }

  list.push({ key: 'updateTime', label: '更新时间', type: 'dateRange' });

  return list;
});
</script>

<template>
  <TableSearchFields
    :model-value="model"
    :fields="fields"
    :columns="4"
    :disabled="disabled"
    @search="emit('search')"
    @reset="emit('reset')"
  />
</template>

<style scoped></style>
