<!--
  * 病例库-临床-文章
  *
  * @Author:    xing
  * @Date:      2025-08-04 10:17:15
  * @Copyright  gdxz
-->
<template>
  <a-modal
      :title="form.articleId ? '编辑' : '添加'"
      :width="'90%'"
      :open="visibleFlag"
      @cancel="onClose"
      :maskClosable="false"
      :destroyOnClose="true"
      :style="{ maxWidth: '1200px', minWidth: '800px' }"
      :bodyStyle="{ maxHeight: '70vh', overflow: 'auto' }"
  >
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }" >
        <a-form-item label="标题"  name="articleTitle">
          <a-input style="width: 100%" v-model:value="form.articleTitle" placeholder="标题" />
        </a-form-item>
        <a-form-item label="状态"  name="articleStatus">
          <SmartEnumSelect 
            width="100%" 
            v-model:value="form.articleStatus" 
            enum-name="STATUS_ENUM" 
            placeholder=""
            :disabled="!!form.articleId"
          />
        </a-form-item>

        <a-form-item label="发表时间"  name="pushDate">
          <a-date-picker 
            show-time 
            valueFormat="YYYY-MM-DD HH:mm:ss" 
            v-model:value="form.pushDate" 
            style="width: 100%" 
            placeholder="发表时间"
            :disabled-date="disabledFutureDate"
            :disabled-time="disabledFutureTime"
          />
        </a-form-item>
        <a-form-item label="是否外部链接"  name="isLink">
          <a-switch v-model:checked="isLinkChecked" @change="isLinkCheckedChange" :disabled="!!form.articleId" />
        </a-form-item>
        <a-form-item label="外部链接地址"  name="isLinkUrl" v-if="isLinkChecked">
          <a-input style="width: 100%" v-model:value="form.isLinkUrl" placeholder="外部链接地址" />
        </a-form-item>
        <a-form-item label="疾病标签"  name="labelList">
          <div class="label-container">
            <!-- 标签选择器 -->
            <div class="label-selector">
              <a-select
                v-model:value="selectedLabels[0]"
                placeholder="请选择一级标签"
                style="width: 200px; margin-right: 8px;"
                :options="labelOptions[0]"
                :field-names="{ label: 'labelName', value: 'appIden' }"
                @change="onLabelChange(0)"
                @dropdownVisibleChange="onLabelDropdownVisibleChange(0, $event)"
                :loading="labelLoading[0]"
                allowClear
              />
              <a-select
                v-model:value="selectedLabels[1]"
                placeholder="请选择二级标签"
                style="width: 200px; margin-right: 8px;"
                :options="labelOptions[1]"
                :field-names="{ label: 'labelName', value: 'appIden' }"
                @change="onLabelChange(1)"
                :loading="labelLoading[1]"
                :disabled="!selectedLabels[0]"
                allowClear
              />
              <a-select
                v-model:value="selectedLabels[2]"
                placeholder="请选择三级标签"
                style="width: 200px; margin-right: 8px;"
                :options="labelOptions[2]"
                :field-names="{ label: 'labelName', value: 'appIden' }"
                @change="onLabelChange(2)"
                :loading="labelLoading[2]"
                :disabled="!selectedLabels[1]"
                allowClear
              />
              <a-button 
                type="primary" 
                @click="addSelectedLabel"
                :disabled="!hasSelectedLabel"
                style="margin-left: 8px;"
              >
                添加选中标签
              </a-button>
            </div>
            
            <!-- 已选择的标签列表 -->
            <div class="selected-labels" v-if="form.labelList && form.labelList.length > 0">
              <div class="label-item" v-for="(label, index) in form.labelList" :key="index">
                <span class="label-name">{{ label.labelName }}</span>
                <a-button type="link" danger size="small" @click="removeLabel(index)">
                  <template #icon><DeleteOutlined /></template>
                </a-button>
              </div>
            </div>
          </div>
        </a-form-item>
        <a-form-item label="二维码"  name="shareQrcode">
          <div class="qrcode-container">
            <div class="qrcode-image" v-if="form.shareQrcode && form.shareQrcode.trim()">
              <img :src="form.shareQrcode" alt="分享二维码" style="width: 120px; height: 120px; border: 1px solid #d9d9d9; border-radius: 4px;" />
            </div>
            <div class="qrcode-placeholder" v-else style="width: 120px; height: 120px; border: 1px dashed #d9d9d9; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px;">
              暂无二维码
            </div>
            <a-button 
              type="primary" 
              @click="generateQrcode" 
              :loading="qrcodeLoading"
              style="margin-left: 12px;"
              :disabled="!form.articleId"
            >
              生成二维码
            </a-button>
          </div>
        </a-form-item>
        <a-form-item label="作者" name="authorList">
          <div class="author-container">
            <!-- 作者列表 -->
            <div class="author-list" v-if="form.authorList && form.authorList.length > 0">
              <div class="author-item" v-for="(author, index) in form.authorList" :key="author.doctorId">
                <div class="author-info">
                  <span class="author-name">{{ author.doctorName }}</span>
                  <span class="author-hospital">{{ author.hospitalName }}</span>
                  <span class="author-location">{{ author.hospitalProvince }} {{ author.hospitalCity }}</span>
                </div>
                <a-button type="link" danger size="small" @click="removeAuthor(index)">
                  <template #icon><DeleteOutlined /></template>
                </a-button>
              </div>
            </div>
            
            <!-- 添加作者按钮 -->
            <a-button type="dashed" @click="showAuthorModal" style="width: 100%; margin-top: 8px;">
              <template #icon><PlusOutlined /></template>
              添加作者
            </a-button>
          </div>
        </a-form-item>
        
        <a-form-item label="内容"  name="articleContent" v-if="!isLinkChecked">
          <div class="editor-container">
            <div class="editor-tip">请在此处编辑文章内容，支持富文本格式、图片上传、表格等功能</div>
            <!-- <UEditor v-model="form.articleContent" :id="'article_content'" /> -->
             <SmartWangeditor ref="rubricRef" :modelValue="form.articleContent" :height="500" :toolbarConfig="rubricToolbarConfig"/>
            
          </div>
        </a-form-item>
    </a-form>

    <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-space>
    </template>
  </a-modal>

  <!-- 作者选择模态框 -->
  <a-modal
    title="选择作者"
    :open="authorModalVisible"
    @cancel="closeAuthorModal"
    @ok="confirmSelectAuthor"
    :maskClosable="false"
    :width="700"
    :zIndex="1001"
    :bodyStyle="{ maxHeight: '400px', overflow: 'auto' }"
  >
    <div class="author-search-container">
      <a-input-search
        v-model:value="authorSearchKeyword"
        placeholder="搜索医生姓名或医院名称"
        @search="searchAuthors"
        style="margin-bottom: 12px;"
        size="small"
      />
    </div>
    
    <a-table
      :columns="authorColumns"
      :dataSource="authorList"
      :loading="authorLoading"
      :pagination="false"
      size="small"
      rowKey="doctorId"
      :scroll="{ y: 250 }"
      :row-selection="{ 
        selectedRowKeys: selectedAuthorIds, 
        onChange: onAuthorSelectChange,
        getCheckboxProps: getAuthorCheckboxProps
      }"
    >
      <template #bodyCell="{ text, record }">
        <template v-if="record.doctorName">
          <div class="author-table-info">
            <div class="author-name">{{ record.doctorName }}</div>
            <div class="author-hospital">{{ record.hospitalName }}</div>
            <div class="author-location">{{ record.hospitalProvince }} {{ record.hospitalCity }}</div>
          </div>
        </template>
      </template>
    </a-table>
  </a-modal>
</template>
<script setup>
  import { reactive, ref, nextTick, computed } from 'vue';
  import _ from 'lodash';
  import { message, Modal } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { caseClinicalArticleApi } from '/@/api/business/case-clinical-article/case-clinical-article-api';
  import { caseClinicalDoctorApi } from '/@/api/business/case-clinical-doctor/case-clinical-doctor-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  import FileUpload from '/@/components/support/file-upload/index.vue';
  import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
  //import UEditor from '/@/components/business/ueditor.vue';
  import SmartWangeditor from '/@/components/framework/wangeditor/index.vue';
  import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const';
  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import dayjs from 'dayjs';

  // ------------------------ 事件 ------------------------

  const emits = defineEmits(['reloadList']);

  // ------------------------ 显示与隐藏 ------------------------
  // 是否显示
  const visibleFlag = ref(false);
const rubricRef = ref();


const rubricToolbarConfig = {
    toolbarKeys : ['bold', 'underline', 'italic', 'through', 'code', 'sub', 'sup', 'clearStyle', 'color', 'bgColor', 'fontSize', 'fontFamily', 'indent', 'delIndent', 'justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify', 'lineHeight', 'insertImage', 'deleteImage', 'editImage', 'divider', 'insertLink', 'editLink', 'unLink', 'viewLink', 'codeBlock', 'blockquote', 'headerSelect', 'redo', 'undo', 'fullScreen', 'enter', 'bulletedList', 'numberedList','uploadImage' ]
}
  async function show(rowData) {
    // 重置表单数据
    Object.assign(form, formDefault);
    
    // 清空标签选择器数据
    selectedLabels.value = ['', '', ''];
    selectedLabelNames.value = ['', '', ''];
    labelOptions.value = [[], [], []];
    
    if (rowData && !_.isEmpty(rowData)) {
      // 如果是编辑模式，通过getDetail接口获取完整数据
      if (rowData.articleId) {
        try {
          SmartLoading.show();
          const result = await caseClinicalArticleApi.getDetail(rowData.articleId);
          if (result.data) {
            Object.assign(form, result.data);
            // 处理作者数据，将 caseClinicalArticleAuthor 转换为 authorList
            if (result.data.caseClinicalArticleAuthor && result.data.caseClinicalArticleAuthor.length > 0) {
              form.authorList = result.data.caseClinicalArticleAuthor.map(author => ({
                doctorId: author.caseClinicalDoctor?.doctorId,
                doctorName: author.caseClinicalDoctor?.doctorName,
                hospitalName: author.caseClinicalDoctor?.hospitalName,
                hospitalProvince: author.caseClinicalDoctor?.hospitalProvince,
                hospitalCity: author.caseClinicalDoctor?.hospitalCity
              }));
            }
            
            // 确保二维码字段正确显示
            if (result.data.shareQrcode) {
              form.shareQrcode = result.data.shareQrcode;
              console.log('二维码地址:', result.data.shareQrcode);
            }
            
            // 处理标签数据 - 从caseClinicalArticleLabel字段读取
            if (result.data.caseClinicalArticleLabel && result.data.caseClinicalArticleLabel.length > 0) {
              form.labelList = result.data.caseClinicalArticleLabel.map(label => ({
                appIden: label.appIden,
                labelName: label.labelName
              }));
              console.log('加载的标签数据:', form.labelList);
            } else {
              // 如果没有标签数据，确保labelList为空数组
              form.labelList = [];
            }
          }
        } catch (error) {
          smartSentry.captureError(error);
          message.error('获取文章详情失败');
          return;
        } finally {
          SmartLoading.hide();
        }
      } else {
        // 如果是新增模式，直接使用传入的数据
        Object.assign(form, rowData);
        // 确保新增时articleId为空，labelList和authorList为空数组
        form.articleId = undefined;
        form.labelList = [];
        form.authorList = [];
      }
    } else {
      // 如果没有传入数据，确保articleId为空，labelList和authorList为空数组
      form.articleId = undefined;
      form.labelList = [];
      form.authorList = [];
    }
    
    // 设置开关状态
    isLinkChecked.value = form.isLink === 1;
    // 使用字典时把下面这注释修改成自己的字典字段 有多个字典字段就复制多份同理修改 不然打开表单时不显示字典初始值
    // if (form.status && form.status.length > 0) {
    //   form.status = form.status.map((e) => e.valueCode);
    // }
    visibleFlag.value = true;
    // 不自动加载标签，等用户点击下拉框时再加载
    nextTick(() => {
      formRef.value.clearValidate();
    });
  }

  function onClose() {
    Object.assign(form, formDefault);
    isLinkChecked.value = false;
    visibleFlag.value = false;
    // 清空作者相关数据
    authorList.value = [];
    selectedAuthorIds.value = [];
    selectedAuthors.value = [];
    // 清空标签相关数据
    selectedLabels.value = ['', '', ''];
    selectedLabelNames.value = ['', '', ''];
    labelOptions.value = [[], [], []];
    // 确保labelList被清空
    form.labelList = [];
  }

  // ------------------------ 表单 ------------------------

  // 组件ref
  const formRef = ref();


  const formDefault = {
      articleTitle: undefined, //标题
      articleStatus: 1, //状态（1:正常 2:禁用）- 默认为正常
      
      pushDate: new Date().toISOString().slice(0, 19).replace('T', ' '), //发表时间，默认为当天
      isLink: 0, //是否外部链接（0:否 1:是）
      isLinkUrl: undefined, //外部链接地址
      shareQrcode: undefined, //分享二维码地址
      articleContent: '', //内容
      articleContentText: '', //纯文本内容
      authorList: [], //作者列表
      labelList: [], //标签列表
  };

  let form = reactive({ ...formDefault });

  // 是否外部链接开关状态
  const isLinkChecked = ref(false);

  // 禁用未来日期
  function disabledFutureDate(current) {
    // 禁用今天之后的日期
    return current && current > dayjs().endOf('day');
  }

  // 禁用未来时间
  function disabledFutureTime(date) {
    if (date) {
      const today = dayjs();
      const selectedDate = dayjs(date);
      
      // 如果是今天，禁用未来时间
      if (selectedDate.isSame(today, 'day')) {
        return {
          disabledHours: () => {
            const hours = [];
            for (let i = today.hour() + 1; i < 24; i++) {
              hours.push(i);
            }
            return hours;
          },
          disabledMinutes: (hour) => {
            if (hour === today.hour()) {
              const minutes = [];
              for (let i = today.minute() + 1; i < 60; i++) {
                minutes.push(i);
              }
              return minutes;
            }
            return [];
          },
          disabledSeconds: (hour, minute) => {
            if (hour === today.hour() && minute === today.minute()) {
              const seconds = [];
              for (let i = today.second() + 1; i < 60; i++) {
                seconds.push(i);
              }
              return seconds;
            }
            return [];
          }
        };
      }
    }
    return {};
  }

  // 二维码相关数据
  const qrcodeLoading = ref(false);

  // 疾病标签相关数据
  const labelOptions = ref([[], [], []]); // 三级标签选项
  const labelLoading = ref([false, false, false]); // 三级标签加载状态
  const selectedLabels = ref(['', '', '']); // 三级标签选择值
  const selectedLabelNames = ref(['', '', '']); // 三级标签选择名称

  // 开关状态变化处理
  function isLinkCheckedChange(checked) {
    form.isLink = checked ? 1 : 0;
    if (checked) {
      // 切换到外部链接模式时，清空内容字段
      form.articleContent = '';
      form.articleContentText = '';
    } else {
      // 切换到非外部链接模式时，清空链接地址
      form.isLinkUrl = undefined;
    }
  }



  // 获取疾病标签数据
  async function loadLabelOptions(level, pId = '0') {
    labelLoading.value[level] = true;
    try {
      const result = await caseClinicalArticleApi.getCaseLabel(pId);
      if (result.data) {
        labelOptions.value[level] = result.data;
      }
    } catch (error) {
      smartSentry.captureError(error);
      message.error('获取标签数据失败');
    } finally {
      labelLoading.value[level] = false;
    }
  }

  // 标签选择器下拉框显示事件 - 延迟加载一级标签
  async function onLabelDropdownVisibleChange(level, visible) {
    // 只有当下拉框显示、是第一级、没有数据且不在加载中时才请求
    if (visible && level === 0 && labelOptions.value[0].length === 0 && !labelLoading.value[0]) {
      await loadLabelOptions(0);
    }
  }

  // 标签选择变化处理
  async function onLabelChange(level) {
    // 清空后续级别的选择
    for (let i = level + 1; i < 3; i++) {
      selectedLabels.value[i] = '';
      selectedLabelNames.value[i] = '';
      labelOptions.value[i] = [];
    }

    if (selectedLabels.value[level]) {
      // 获取选中标签的名称
      const selectedOption = labelOptions.value[level].find(option => option.appIden === selectedLabels.value[level]);
      if (selectedOption) {
        selectedLabelNames.value[level] = selectedOption.labelName;
        
        // 如果选中的标签有子标签，加载下一级
        if (selectedOption.isSub === 1 && level < 2) {
          // 只有当下级没有数据且不在加载中时才请求
          if (labelOptions.value[level + 1].length === 0 && !labelLoading.value[level + 1]) {
            await loadLabelOptions(level + 1, selectedLabels.value[level]);
          }
        }
      }
    }
  }

  // 计算是否有选中的标签
  const hasSelectedLabel = computed(() => {
    return selectedLabels.value.some(label => label);
  });

  // 添加选中的标签
  function addSelectedLabel() {
    // 收集所有选中的标签（一级、二级、三级）
    const labelsToAdd = [];
    
    for (let i = 0; i < 3; i++) {
      if (selectedLabels.value[i] && selectedLabelNames.value[i]) {
        labelsToAdd.push({
          appIden: selectedLabels.value[i],
          labelName: selectedLabelNames.value[i]
        });
      }
    }
    
    if (labelsToAdd.length === 0) {
      message.warning('请先选择标签');
      return;
    }
    
    // 检查重复标签并添加新标签
    let addedCount = 0;
    let skippedCount = 0;
    
    for (const label of labelsToAdd) {
      // 检查是否已经添加过
      const exists = form.labelList.some(existingLabel => existingLabel.appIden === label.appIden);
      if (exists) {
        skippedCount++;
        continue;
      }
      
      // 添加到标签列表
      form.labelList.push(label);
      addedCount++;
    }
    
    // 显示添加结果
    if (addedCount > 0) {
      message.success(`成功添加 ${addedCount} 个标签`);
    }
    if (skippedCount > 0) {
      message.warning(`跳过 ${skippedCount} 个重复标签`);
    }
    
    // 清空选择
    selectedLabels.value = ['', '', ''];
    selectedLabelNames.value = ['', '', ''];
    labelOptions.value[1] = [];
    labelOptions.value[2] = [];
  }

  // 移除标签
  function removeLabel(index) {
    form.labelList.splice(index, 1);
  }

  // 生成二维码
  async function generateQrcode() {
    if (!form.articleId) {
      message.warning('请先保存文章后再生成二维码');
      return;
    }
    
    // 显示确认弹窗
    Modal.confirm({
      title: '确认生成二维码',
      content: '确定要为该文章生成分享二维码吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: async () => {
        qrcodeLoading.value = true;
        try {
          await caseClinicalArticleApi.addUnlimitedQrcode(form.articleId);
          message.success('二维码生成成功');
          // 重新加载表单数据以获取最新的二维码地址
          if (form.articleId) {
            const result = await caseClinicalArticleApi.getDetail(form.articleId);
            if (result.data) {
              Object.assign(form, result.data);
              // 重新处理作者数据
              if (result.data.caseClinicalArticleAuthor && result.data.caseClinicalArticleAuthor.length > 0) {
                form.authorList = result.data.caseClinicalArticleAuthor.map(author => ({
                  doctorId: author.caseClinicalDoctor?.doctorId,
                  doctorName: author.caseClinicalDoctor?.doctorName,
                  hospitalName: author.caseClinicalDoctor?.hospitalName,
                  hospitalProvince: author.caseClinicalDoctor?.hospitalProvince,
                  hospitalCity: author.caseClinicalDoctor?.hospitalCity
                }));
              }
              
              // 重新处理标签数据
              if (result.data.caseClinicalArticleLabel && result.data.caseClinicalArticleLabel.length > 0) {
                form.labelList = result.data.caseClinicalArticleLabel.map(label => ({
                  appIden: label.appIden,
                  labelName: label.labelName
                }));
              }
            }
          }
        } catch (error) {
          smartSentry.captureError(error);
          message.error('二维码生成失败');
        } finally {
          qrcodeLoading.value = false;
        }
      }
    });
  }

  // ------------------------ 作者相关 ------------------------
  
  // 作者选择模态框
  const authorModalVisible = ref(false);
  const authorList = ref([]);
  const authorLoading = ref(false);
  const authorSearchKeyword = ref('');
  const selectedAuthorIds = ref([]);
  const selectedAuthors = ref([]);

  // 作者表格列定义
  const authorColumns = [
    {
      title: '医生信息',
      dataIndex: 'doctorName',
      key: 'doctorName',
      width: '100%',
    }
  ];

  // 显示作者选择模态框
  function showAuthorModal() {
    authorModalVisible.value = true;
    authorSearchKeyword.value = '';
    selectedAuthorIds.value = [];
    selectedAuthors.value = [];
    searchAuthors();
  }

  // 关闭作者选择模态框
  function closeAuthorModal() {
    authorModalVisible.value = false;
  }

  // 搜索作者
  async function searchAuthors() {
    authorLoading.value = true;
    try {
      const result = await caseClinicalDoctorApi.queryList({
        keywords: authorSearchKeyword.value,
        limit: 8
      });
      authorList.value = result.data || [];
    } catch (error) {
      smartSentry.captureError(error);
      message.error('获取医生列表失败');
    } finally {
      authorLoading.value = false;
    }
  }

  // 作者选择变化
  function onAuthorSelectChange(selectedRowKeys, selectedRows) {
    selectedAuthorIds.value = selectedRowKeys;
    selectedAuthors.value = selectedRows;
  }

  // 获取复选框属性（已选择的作者不可重复选择）
  function getAuthorCheckboxProps(record) {
    const existingAuthorIds = form.authorList.map(author => author.doctorId);
    return {
      disabled: existingAuthorIds.includes(record.doctorId)
    };
  }

  // 确认选择作者
  function confirmSelectAuthor() {
    if (selectedAuthors.value.length === 0) {
      message.warning('请选择至少一个作者');
      return;
    }
    
    // 转换为表单格式并添加到作者列表
    const authorForms = selectedAuthors.value.map(author => ({
      doctorId: author.doctorId,
      doctorName: author.doctorName,
      hospitalName: author.hospitalName,
      hospitalProvince: author.hospitalProvince,
      hospitalCity: author.hospitalCity
    }));
    
    form.authorList.push(...authorForms);
    closeAuthorModal();
  }

  // 移除作者
  function removeAuthor(index) {
    form.authorList.splice(index, 1);
  }

  // 表单验证规则
  const rules = computed(() => ({
      articleTitle: [{ required: true, message: '标题 必填' }],
      articleStatus: [{ required: true, message: '状态（1:正常 2:禁用） 必填' }],
      pushDate: [
        { required: true, message: '发表时间 必填' },
        { 
          validator: (rule, value) => {
            if (!value) {
              return Promise.resolve();
            }
            const selectedDate = new Date(value);
            const currentDate = new Date();
            // 设置当前时间为当天的23:59:59，允许选择当天
            currentDate.setHours(23, 59, 59, 999);
            
            if (selectedDate > currentDate) {
              return Promise.reject('发表时间不能大于当前时间');
            }
            return Promise.resolve();
          }
        }
      ],
      authorList: [
        { 
          required: true, 
          message: '作者 必填',
          validator: (rule, value) => {
            if (!value || !Array.isArray(value) || value.length === 0) {
              return Promise.reject('请至少选择一个作者');
            }
            return Promise.resolve();
          }
        }
      ],
      isLinkUrl: [{ 
        required: isLinkChecked.value, 
        message: '外部链接地址 必填',
        validator: (rule, value) => {
          if (!isLinkChecked.value) {
            return Promise.resolve();
          }
          if (!value || value.trim() === '') {
            return Promise.reject('外部链接地址 必填');
          }
          return Promise.resolve();
        }
      }],
      articleContent: [{ 
        required: !isLinkChecked.value, 
        message: '内容 必填',
        validator: (rule, value) => {
          if (isLinkChecked.value) {
            return Promise.resolve();
          }
          if (!value || value.trim() === '') {
            return Promise.reject('内容 必填');
          }
          return Promise.resolve();
        }
      }],
  }));

  // 点击确定，验证表单
  async function onSubmit() {
    try {
      // 只有在非外部链接模式下才获取内容
      if (!isLinkChecked.value) {
        // UEditor通过v-model自动同步，不需要手动获取
        // 如果需要纯文本，可以从HTML中提取
        if (form.articleContent) {
          // 简单的HTML标签移除，提取纯文本
          form.articleContentText = form.articleContent.replace(/<[^>]*>/g, '');
        }
      }
      await formRef.value.validateFields();
      save();
    } catch (err) {
      message.error('参数验证错误，请仔细填写表单数据!');
    }
  }

  // 新建、编辑API
  async function save() {
    SmartLoading.show();
    try {
      if (form.articleId) {
        await caseClinicalArticleApi.update(form);
      } else {
        await caseClinicalArticleApi.add(form);
      }
      message.success('操作成功');
      emits('reloadList');
      onClose();
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
  }

  defineExpose({
    show,
  });
</script>

<style scoped>
.author-container {
  width: 100%;
}

.author-list {
  margin-bottom: 8px;
}

.author-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  margin-bottom: 8px;
  background-color: #fafafa;
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.author-name {
  font-weight: 500;
  color: #262626;
}

.author-hospital {
  color: #595959;
  font-size: 12px;
}

.author-location {
  color: #8c8c8c;
  font-size: 12px;
}

.author-table-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.author-table-info .author-name {
  font-weight: 500;
  color: #262626;
  font-size: 13px;
}

.author-table-info .author-hospital {
  color: #595959;
  font-size: 11px;
}

.author-table-info .author-location {
  color: #8c8c8c;
  font-size: 11px;
}

/* 弹窗表格样式优化 */
:deep(.ant-table-tbody > tr > td) {
  padding: 8px 12px;
}

:deep(.ant-table-thead > tr > th) {
  padding: 8px 12px;
  font-size: 12px;
}

/* 响应式样式 */
@media (max-width: 768px) {
  :deep(.ant-modal) {
    margin: 16px;
    max-width: calc(100vw - 32px) !important;
  }
  
  :deep(.ant-form-item-label) {
    text-align: left !important;
  }
  
  :deep(.ant-form-item-label > label) {
    height: auto !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 480px) {
  :deep(.ant-modal-body) {
    padding: 12px !important;
  }
  
  .author-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .author-info {
    width: 100%;
  }
}

.qrcode-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qrcode-image img {
  transition: all 0.3s ease;
}

.qrcode-image img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.label-container {
  width: 100%;
}

.label-selector {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.selected-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.label-item {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
}

.label-name {
  margin-right: 4px;
  font-size: 12px;
  color: #333;
}

.editor-container {
  position: relative;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 10px;
  background-color: #fafafa;
  min-height: 200px; /* 确保编辑器有最小高度 */
}

.editor-tip {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #8c8c8c;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

</style>
