<template>
  <div class="order-list">
    <el-card shadow="never">
      <el-form :inline="true" :model="filters" class="filter-form">
        <el-form-item :label="$t('label.hospitalName')">
          <el-select
            v-model="filters.hospitalId"
            :placeholder="$t('common.all')"
            clearable
            filterable
            style="width: 200px"
          >
            <el-option
              v-for="h in hospitals"
              :key="h.id"
              :label="h.name"
              :value="h.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('table.status')">
          <el-select
            v-model="filters.status"
            :placeholder="$t('common.all')"
            clearable
            style="width: 140px"
          >
            <el-option label="待处理" value="待处理" />
            <el-option label="已完成" value="已完成" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('table.priority')">
          <el-select
            v-model="filters.priority"
            :placeholder="$t('common.all')"
            clearable
            style="width: 120px"
          >
            <el-option label="高" value="高" />
            <el-option label="中" value="中" />
            <el-option label="低" value="低" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('table.type')">
          <el-select
            v-model="filters.type"
            :placeholder="$t('common.all')"
            clearable
            style="width: 120px"
          >
            <el-option label="故障问题" value="故障问题" />
            <el-option label="使用咨询" value="使用咨询" />
            <el-option label="功能需求" value="功能需求" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('placeholder.keyword')">
          <el-input
            v-model="filters.keyword"
            :placeholder="$t('placeholder.keyword')"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item :label="$t('table.time')">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="-"
            :start-placeholder="$t('common.startDate')"
            :end-placeholder="$t('common.endDate')"
            value-format="YYYY-MM-DD"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">{{
            $t("btn.query")
          }}</el-button>
          <el-button @click="onReset">{{ $t("btn.reset") }}</el-button>
          <el-button type="success" @click="openQuick">{{
            $t("btn.quickAddOrder")
          }}</el-button>
        </el-form-item>
      </el-form>
      <!-- 工单总览 -->
      <div class="order-stats">
        <div
          class="stat-card stat-total"
          :class="{ active: activeStat === 'total' }"
          @click="onStatClick('total')"
        >
          <div class="stat-icon">📋</div>
          <div class="stat-value">{{ stats.total }}</div>
          <div class="stat-label">{{ $t("stat.totalOrders") }}</div>
        </div>
        <div
          class="stat-card stat-pending"
          :class="{ active: activeStat === 'pending' }"
          @click="onStatClick('pending')"
        >
          <div class="stat-icon">⏳</div>
          <div class="stat-value">{{ stats.pending }}</div>
          <div class="stat-label">{{ $t("stat.pendingOrders") }}</div>
        </div>
        <div
          class="stat-card stat-completed"
          :class="{ active: activeStat === 'completed' }"
          @click="onStatClick('completed')"
        >
          <div class="stat-icon">✅</div>
          <div class="stat-value">{{ stats.completed }}</div>
          <div class="stat-label">{{ $t("stat.completedOrders") }}</div>
        </div>
        <div
          class="stat-card stat-high"
          :class="{ active: activeStat === 'high' }"
          @click="onStatClick('high')"
        >
          <div class="stat-icon">🔴</div>
          <div class="stat-value">{{ stats.highPriority }}</div>
          <div class="stat-label">{{ $t("stat.highPriorityOrders") }}</div>
        </div>
      </div>
      <el-table :data="list" v-loading="loading" border stripe>
        <el-table-column :label="$t('table.id')" prop="orderNo" width="160" />
        <el-table-column
          :label="$t('table.hospital')"
          prop="hospitalName"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column :label="$t('table.priority')" width="90">
          <template #default="{ row }">
            <el-tag :type="priorityType(row.priority)" size="small">{{
              row.priority
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.title')"
          prop="title"
          min-width="300"
          show-overflow-tooltip
        />
        <el-table-column
          :label="$t('table.type')"
          prop="serviceType"
          width="120"
        />
        <el-table-column
          :label="$t('table.dept')"
          prop="department"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          :label="$t('table.submitter')"
          prop="submitter"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          :label="$t('table.feedbackchannel')"
          prop="feedbackChannel"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          :label="$t('table.registrar')"
          prop="registrarName"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          :label="$t('table.handler')"
          prop="processName"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          :label="$t('table.handleTime')"
          prop="completedAt"
          width="170"
        >
          <template #default="{ row }">
            {{ row.completedAt || "-" }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.status')" width="100">
          <template #default="{ row }">
            <el-tag :type="statusType(row.status)" size="small">{{
              row.status
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.time')"
          prop="createdAt"
          width="170"
        />
        <el-table-column :label="$t('table.action')" width="120" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="goDetail(row.id)">{{
              $t("btn.detail")
            }}</el-button>
            <el-button
              link
              :type="row.status === '已完成' ? 'warning' : 'success'"
              @click="goProcess(row.id)"
              >{{
                row.status === "已完成" ? $t("btn.modify") : $t("btn.process")
              }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>

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

    <!-- 快速提交工单 弹窗 -->
    <el-dialog
      v-model="quickVisible"
      :title="$t('modal.submit')"
      width="640px"
      :close-on-click-modal="false"
      @closed="onQuickClosed"
    >
      <el-form
        ref="quickFormRef"
        :model="quickForm"
        :rules="quickRules"
        label-width="100px"
      >
        <el-form-item :label="$t('label.hospitalName')" prop="hospitalId">
          <el-select
            v-model="quickForm.hospitalId"
            :placeholder="$t('msg.pleaseSelectHospital')"
            filterable
            style="width: 100%"
          >
            <el-option
              v-for="h in hospitals"
              :key="h.id"
              :label="h.name"
              :value="h.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('label.title')" prop="title">
          <div class="title-row">
            <el-input
              v-model="quickForm.title"
              :placeholder="$t('placeholder.title')"
              maxlength="100"
              show-word-limit
            />
            <div class="color-tag-picker" ref="colorPickerRef">
              <div
                class="color-tag-preview"
                :style="{ background: quickForm.colorTag || '#dcdfe6' }"
                :class="{ 'is-empty': !quickForm.colorTag }"
                @click.stop="toggleColorPicker"
              ></div>
              <div
                v-show="colorPickerVisible"
                class="color-tag-dropdown"
                @click.stop
              >
                <div class="color-tag-title">{{ $t("label.colorTag") }}</div>
                <div class="color-tag-options">
                  <div
                    v-for="c in colorOptions"
                    :key="c.value"
                    class="color-tag-option"
                    :class="{ active: quickForm.colorTag === c.value }"
                    :style="{ background: c.value }"
                    :title="c.label"
                    @click="selectColor(c.value)"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('label.type')" prop="serviceType">
          <el-select
            v-model="quickForm.serviceType"
            :placeholder="$t('placeholder.type')"
            clearable
          >
            <el-option label="故障问题" value="故障问题" />
            <el-option label="使用咨询" value="使用咨询" />
            <el-option label="功能需求" value="功能需求" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="0">
          <div class="inline-row">
            <el-form-item :label="$t('label.priority')" prop="priority" class="inline-item">
              <el-radio-group v-model="quickForm.priority">
                <el-radio-button label="高">高</el-radio-button>
                <el-radio-button label="中">中</el-radio-button>
                <el-radio-button label="低">低</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('label.feedbackchannel')" prop="feedbackchannel" class="inline-item">
              <el-select
                v-model="quickForm.feedbackchannel"
                :placeholder="$t('placeholder.feedbackchannel')"
                clearable
                style="width: 160px"
              >
                <el-option label="微信群" value="微信群" />
                <el-option label="微信" value="微信" />
                <el-option label="电话" value="电话" />
                <el-option label="现场" value="现场" />
                <el-option label="钉钉群" value="钉钉群" />
                <el-option label="钉钉" value="钉钉" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item :label="$t('label.dept')" prop="department">
          <el-input
            v-model="quickForm.department"
            :placeholder="$t('placeholder.dept')"
          />
        </el-form-item>
        <el-form-item :label="$t('label.name')" prop="submitter">
          <el-input
            v-model="quickForm.submitter"
            :placeholder="$t('placeholder.name')"
          />
        </el-form-item>
        <el-form-item :label="$t('label.createat')" prop="createdat">
          <el-date-picker
            v-model="quickForm.createdat"
            type="datetime"
            :placeholder="$t('placeholder.createat')"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item :label="$t('label.description')" prop="description">
          <div class="rich-editor">
            <Toolbar
              :editor="editorRef"
              :default-config="toolbarConfig"
              mode="default"
              style="border-bottom: 1px solid #dcdfe6"
            />
            <Editor
              v-model="quickForm.description"
              :default-config="editorConfig"
              mode="default"
              style="height: 200px; overflow-y: auto"
              @on-created="handleEditorCreated"
              @custom-paste="handleEditorPasteImage"
            />
          </div>
        </el-form-item>
        <el-form-item :label="$t('label.attachment')">
          <el-upload
            v-model:file-list="quickForm.files"
            :auto-upload="false"
            :limit="1"
            :on-exceed="handleAttachmentExceed"
            :on-remove="handleAttachmentRemove"
            :on-change="handleAttachmentChange"
          >
            <el-button type="primary" plain>{{ $t("btn.upload") }}</el-button>
            <template #tip>
              <div class="el-upload__tip">
                {{ $t("label.attachmentTip") }}
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="quickVisible = false">{{
          $t("common.cancel")
        }}</el-button>
        <el-button
          type="primary"
          :loading="quickSubmitting"
          @click="submitQuick"
          >{{ $t("common.submit") }}</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import dayjs from "dayjs";
import {
  nextTick,
  onBeforeUnmount,
  onMounted,
  reactive,
  ref,
  shallowRef,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
import { useI18n } from "vue-i18n";
import {
  createAdminOrder,
  getAdminHospitals,
  getAdminOrders,
} from "@/service/modular/admin";
import { useUserStore } from "@/stores/api/user";

const { t: $t } = useI18n();
const router = useRouter();
const userStore = useUserStore();
const list = ref([]);
const hospitals = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);
const loading = ref(false);
const dateRange = ref([]);
const filters = reactive({
  hospitalId: undefined,
  status: "",
  priority: "",
  type: "",
  keyword: "",
});

const loadHospitals = async () => {
  try {
    const res = await getAdminHospitals({ page: 1, pageSize: 1000 });
    hospitals.value = res?.list || [];
  } catch (_) {
    hospitals.value = [];
  }
};

const priorityType = (p) =>
  p === "高" ? "danger" : p === "中" ? "warning" : "info";
const statusType = (s) =>
  ({ 待处理: "warning", 处理中: "primary", 已完成: "success", 已取消: "info" })[
    s
  ] || "info";

// 工单总览统计
const stats = reactive({
  total: 0,
  pending: 0,
  completed: 0,
  highPriority: 0,
});
// 当前选中的总览卡片：total | pending | completed | high
const activeStat = ref("total");
const parseStats = (res) => {
  let payload = res?.data;
  if (typeof payload === "string") {
    try {
      payload = JSON.parse(payload);
    } catch (_) {
      payload = {};
    }
  }

  stats.completed = Number(payload?.TotalStatus1 ?? 0);
  stats.pending = Number(payload?.TotalStatus2 ?? 0);
  stats.total = stats.completed + stats.pending;
  stats.highPriority = Number(payload?.TotalPriority ?? 0);
};

const loadList = async () => {
  loading.value = true;
  try {
    const params = { page: page.value, pageSize: pageSize.value, ...filters };
    if (dateRange.value?.length === 2) {
      params.startDate = dateRange.value[0];
      params.endDate = dateRange.value[1];
    }
    const res = await getAdminOrders(params);
    list.value = res?.list || [];
    list.value.forEach((item) => {
      if (item.createdAt) {
        item.createdAt = dayjs(item.createdAt).format("YYYY-MM-DD HH:mm:ss");
      }
      if (item.completedAt) {
        item.completedAt = dayjs(item.completedAt).format(
          "YYYY-MM-DD HH:mm:ss",
        );
      }
    });
    total.value = res?.total || 0;
    parseStats(res);
  } finally {
    loading.value = false;
  }
};

// 总览卡片点击：根据卡片类型设置筛选条件并重新加载
const onStatClick = (type) => {
  activeStat.value = type;
  if (type === "total") {
    filters.status = "";
    filters.priority = "";
  } else if (type === "pending") {
    filters.status = "待处理";
    filters.priority = "";
  } else if (type === "completed") {
    filters.status = "已完成";
    filters.priority = "";
  } else if (type === "high") {
    filters.status = "";
    filters.priority = "高";
  }
  page.value = 1;
  loadList();
};

const onSearch = () => {
  page.value = 1;
  loadList();
};
const onReset = () => {
  Object.assign(filters, {
    hospitalId: undefined,
    status: "",
    priority: "",
    type: "",
    keyword: "",
  });
  dateRange.value = [];
  activeStat.value = "total";
  onSearch();
};

const goDetail = (id) => router.push(`/admin/orders/detail/${id}`);
const goProcess = (id) => router.push(`/admin/orders/process/${id}`);

// 颜色标签可选值（颜色 Hex 取自设计原型）
const colorOptions = [
  { label: "蓝", value: "#667eea" },
  { label: "绿", value: "#52c41a" },
  { label: "青", value: "#13c2c2" },
  { label: "紫", value: "#722ed1" },
  { label: "橙", value: "#fa8c16" },
  { label: "红", value: "#ff4d4f" },
];
const colorPickerVisible = ref(false);
const colorPickerRef = ref();
const toggleColorPicker = () => {
  colorPickerVisible.value = !colorPickerVisible.value;
};
const selectColor = (val) => {
  quickForm.colorTag = val;
  colorPickerVisible.value = false;
};
const onDocClick = (e) => {
  if (!colorPickerVisible.value) return;
  const el = colorPickerRef.value;
  if (el && !el.contains(e.target)) {
    colorPickerVisible.value = false;
  }
};

// 快速提交工单（弹窗）
const quickVisible = ref(false);
const quickSubmitting = ref(false);
const quickFormRef = ref();
const quickForm = reactive({
  hospitalId: undefined,
  title: "",
  serviceType: "",
  priority: "中",
  feedbackchannel: "",
  department: "",
  colorTag: "#667eea",
  description: "",
  submitter: "",
  createdat: "",
  files: [],
});
// 生成当前时间（带时分秒）作为提交时间默认值
const nowDatetime = () => dayjs().format("YYYY-MM-DD HH:mm:ss");
const MAX_FILE_SIZE = 50 * 1024 * 1024;
// 粘贴到富文本的图片大小上限（base64 内联存储，避免 HTML 过大）
const MAX_PASTE_IMAGE_SIZE = 5 * 1024 * 1024;

// el-upload 事件：选文件后立即校验大小
const handleAttachmentChange = (file) => {
  if (file?.size > MAX_FILE_SIZE) {
    ElMessage.warning("文件不能超过 50MB");
    // 把超限文件从列表里移除
    quickForm.files = quickForm.files.filter(
      (f) => f.uid !== file.uid || f.size <= MAX_FILE_SIZE,
    );
  }
};
// el-upload 事件：超过 limit 时的回调
const handleAttachmentExceed = () => {
  ElMessage.warning("只能上传 1 个文件");
};
// el-upload 事件：删除文件
const handleAttachmentRemove = () => {
  // el-upload 会自动从 v-model:file-list 移除，这里无需额外处理
};
const quickRules = {
  hospitalId: [
    {
      required: true,
      message: () => $t("msg.pleaseSelectHospital"),
      trigger: "change",
    },
  ],
  title: [
    {
      required: true,
      message: () => $t("msg.pleaseInputTitle"),
      trigger: "blur",
    },
  ],
  serviceType: [
    {
      required: true,
      message: () => $t("msg.pleaseSelectType"),
      trigger: "blur",
    },
  ],
  priority: [
    {
      required: true,
      message: () => $t("msg.pleaseSelectPriority"),
      trigger: "change",
    },
  ],
  feedbackchannel: [
    {
      required: true,
      message: () => $t("msg.pleaseSelectFeedbackChannel"),
      trigger: "change",
    },
  ],
  department: [
    {
      required: true,
      whitespace: true,
      message: () => $t("msg.pleaseInputDept"),
      trigger: "blur",
    },
  ],
  submitter: [
    {
      required: true,
      whitespace: true,
      message: () => $t("msg.pleaseInputName"),
      trigger: "blur",
    },
  ],
  description: [
    {
      required: true,
      validator: (_, value, callback) => {
        const hasImage = /<img\s/i.test(value || "");
        const text = (value || "")
          .replace(/<[^>]*>/g, "")
          .replace(/&nbsp;/gi, "")
          .trim();
        if (!text && !hasImage)
          return callback(new Error($t("msg.pleaseInputDescription")));
        callback();
      },
      trigger: "change",
    },
  ],
};

// 快速提交工单-富文本编辑器配置
const editorRef = shallowRef();
const toolbarConfig = {
  excludeKeys: [
    "uploadImage",
    "insertVideo",
    "uploadVideo",
    "group-video",
    "emotion",
    "group-emoji",
  ],
};
// 从剪贴板中捞出图片文件（同时兼容 items 和 files 两种来源）
const collectPastedImages = (clipboardData) => {
  const files = [];
  const items = clipboardData?.items;
  if (items) {
    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      if (item.kind === "file" && item.type?.startsWith("image/")) {
        const file = item.getAsFile();
        if (file) files.push(file);
      }
    }
  }
  if (files.length === 0 && clipboardData?.files) {
    for (let i = 0; i < clipboardData.files.length; i++) {
      const file = clipboardData.files[i];
      if (file.type?.startsWith("image/")) files.push(file);
    }
  }
  return files;
};

// 共用的图片粘贴处理逻辑
const handleEditorPasteImage = (editor, event) => {
  if (event.__wpsImageHandled) return;
  const imageFiles = collectPastedImages(event.clipboardData);
  if (imageFiles.length === 0) return;
  event.__wpsImageHandled = true;
  event.preventDefault();
  if (typeof event.stopPropagation === "function") event.stopPropagation();
  if (typeof event.stopImmediatePropagation === "function")
    event.stopImmediatePropagation();

  if (typeof editor.focus === "function") editor.focus();
  const savedSelection = editor.selection;

  imageFiles.forEach((file) => {
    if (file.size > MAX_PASTE_IMAGE_SIZE) {
      ElMessage.warning("粘贴的图片不能超过 5MB");
      return;
    }
    const reader = new FileReader();
    reader.onload = (e) => {
      const dataUrl = e.target?.result;
      if (!dataUrl) {
        ElMessage.error("图片读取失败");
        return;
      }
      try {
        if (savedSelection) editor.select(savedSelection);
      } catch (_) {
        if (typeof editor.focus === "function") editor.focus();
      }
      if (typeof editor.focus === "function") editor.focus();
      editor.dangerouslyInsertHtml(
        `<img src="${dataUrl}" style="max-width:100%;height:auto;" />`,
      );
      if (typeof editor.updateView === "function") editor.updateView();
    };
    reader.onerror = () => {
      ElMessage.error("图片处理失败");
    };
    reader.readAsDataURL(file);
  });
  return false;
};

const editorConfig = {
  placeholder: $t("placeholder.description"),
};
let pasteHandlerRef = null;
const handleEditorCreated = (editor) => {
  editorRef.value = editor;
  nextTick(() => {
    const root = typeof editor.$el === "function" ? editor.$el() : editor.$el;
    if (!root) return;
    const editable = root.querySelector?.('[contenteditable="true"]') || root;
    if (pasteHandlerRef) {
      editable.removeEventListener("paste", pasteHandlerRef, { capture: true });
    }
    pasteHandlerRef = (event) => handleEditorPasteImage(editor, event);
    editable.addEventListener("paste", pasteHandlerRef, { capture: true });
  });
};

const resetQuickForm = () => {
  Object.assign(quickForm, {
    hospitalId: undefined,
    title: "",
    serviceType: "",
    priority: "中",
    feedbackchannel: "",
    department: "",
    colorTag: "#667eea",
    description: "",
    submitter: "",
    createdat: "",
    files: [],
  });
  quickFormRef.value?.clearValidate();
};

const openQuick = () => {
  // 打开弹窗时自动填入当前时间作为提交时间默认值
  quickForm.createdat = nowDatetime();
  quickVisible.value = true;
};

const onQuickClosed = () => {
  resetQuickForm();
};

const submitQuick = async () => {
  // dept / submitter 去掉两端空格后再校验，避免仅含空格的“伪必填”绕过
  quickForm.department = (quickForm.department || "").trim();
  quickForm.submitter = (quickForm.submitter || "").trim();
  await quickFormRef.value.validate(async (valid) => {
    if (!valid) return;
    quickSubmitting.value = true;
    try {
      const formData = new FormData();
      const { files, ...rest } = quickForm;
      for (const [k, v] of Object.entries(rest)) {
        if (v !== undefined && v !== null && v !== "") {
          formData.append(k, v);
        }
      }
      formData.append("registrarName", userStore.userInfo?.userName || "");
      // el-upload 的 file-list 元素 raw 字段就是 File 对象
      for (const f of files || []) {
        if (f.raw) formData.append("files", f.raw, f.name);
      }
      await createAdminOrder(formData);
      ElMessage.success($t("msg.submitSuccess"));
      quickVisible.value = false;
      loadList();
    } finally {
      quickSubmitting.value = false;
    }
  });
};

onMounted(() => {
  loadHospitals();
  loadList();
  document.addEventListener("click", onDocClick);
});

const removePasteListener = () => {
  const editor = editorRef.value;
  if (!editor || !pasteHandlerRef) return;
  const root = typeof editor.$el === "function" ? editor.$el() : editor.$el;
  if (!root) return;
  const editable = root.querySelector?.('[contenteditable="true"]') || root;
  editable.removeEventListener("paste", pasteHandlerRef, { capture: true });
};

onBeforeUnmount(() => {
  document.removeEventListener("click", onDocClick);
  removePasteListener();
  pasteHandlerRef = null;
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
</script>

<style scoped lang="scss">
.filter-form {
  margin-bottom: 12px;
}
.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.rich-editor {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.rich-editor :deep(.w-e-toolbar) {
  background: #fafafa;
}

// 标题 + 颜色标签
.title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.title-row .el-input {
  flex: 1;
}
// 优先级 + 反馈渠道同一行展示
.inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
  width: 100%;
}
.inline-row .inline-item {
  margin-bottom: 0 !important;
}
.inline-row .inline-item :deep(.el-form-item__content) {
  display: flex;
  align-items: center;
}
.color-tag-picker {
  position: relative;
  flex-shrink: 0;
}
.color-tag-preview {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.color-tag-preview:hover {
  transform: scale(1.08);
}
.color-tag-preview.is-empty {
  background-image: linear-gradient(
    135deg,
    #f5f5f5 25%,
    transparent 25%,
    transparent 50%,
    #f5f5f5 50%,
    #f5f5f5 75%,
    transparent 75%
  );
  background-size: 8px 8px;
  box-shadow: 0 0 0 1px #dcdfe6;
}
.color-tag-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  min-width: 180px;
}
.color-tag-title {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}
.color-tag-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.color-tag-option {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}
.color-tag-option:hover {
  transform: scale(1.12);
}
.color-tag-option.active {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.color-tag-clear {
  background: #f5f5f5 !important;
  position: relative;
}
.color-tag-clear::before,
.color-tag-clear::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: #999;
  transform-origin: center;
}
.color-tag-clear::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.color-tag-clear::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

// 工单总览统计
.order-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border-left: 4px solid #d9d9d9;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
  cursor: pointer;
  user-select: none;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.stat-card.active {
  background: #f0f7ff;
  box-shadow: 0 4px 14px rgba(24, 144, 255, 0.18);
  transform: translateY(-2px);
}
.stat-card.active.stat-pending {
  background: #fff7e6;
  box-shadow: 0 4px 14px rgba(250, 140, 22, 0.18);
}
.stat-card.active.stat-completed {
  background: #f6ffed;
  box-shadow: 0 4px 14px rgba(82, 196, 26, 0.18);
}
.stat-card.active.stat-high {
  background: #fff1f0;
  box-shadow: 0 4px 14px rgba(255, 77, 79, 0.18);
}
.stat-total {
  border-left-color: #1890ff;
}
.stat-pending {
  border-left-color: #fa8c16;
}
.stat-completed {
  border-left-color: #52c41a;
}
.stat-high {
  border-left-color: #ff4d4f;
}
.stat-icon {
  font-size: 28px;
  line-height: 1;
}
.stat-value {
  font-size: 26px;
  font-weight: 700;
  color: #333;
  line-height: 1.1;
}
.stat-label {
  font-size: 13px;
  color: #999;
  margin-top: 4px;
}
</style>