<script lang="ts" setup>
import { ref, h, onMounted, computed, watch } from 'vue';
import {
  fetchAnalysisDoc,
  fetchBackOffDoc,
  fetchAuditProductDoc,
  fetchSubmitProductDoc,
  fetchUpdateProductDoc,
  fetchGetOssConfig,
  fetchDeleteProductDoc,
  fetchAddProductDoc,
  fetchDeleteProduct,
  fetchUpdateProductStatus,
  fetchAddProduct,
  fetchQueryProductTypeList,
  fetchQueryProductList,
  fetchQueryProductDetail
} from '@/service/api'
import { Icon } from '@iconify/vue';
import { objectClean } from '@/utils';
import type { UploadCustomRequestOptions } from 'naive-ui'
import { PAGINATION_PAGE_SIZES } from '@/const/index'
import { fetchUploadImgFile } from '@/service';
import { NIcon } from 'naive-ui'
import {
  BookOutline as BookIcon
} from '@vicons/ionicons5'


const menuActiveKey = ref('')
const collapsed = ref(false)

function renderIcon(icon: any) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

const productStatusOptions = [
  { label: '启用', value: '01' },
  { label: '停用', value: '02' }
]
const menuOptions = [
  {
    label: '运营规则文档',
    icon: renderIcon(BookIcon),
    key: '01'
  },
  {
    label: '保单服务知识文档',
    icon: renderIcon(BookIcon),
    key: '02'
  },
  {
    label: '产品合同文档',
    icon: renderIcon(BookIcon),

    key: '03'
  },
  {
    label: '产品说明书文档',
    icon: renderIcon(BookIcon),

    key: '04'
  },
  {
    label: '产品条款文档',
    icon: renderIcon(BookIcon),
    key: '05'
  },
  {
    label: '产品公告文档',
    icon: renderIcon(BookIcon),
    key: '06'
  },
]

const docStatusOptions = [
  { label: '审核通过', value: '02' },
  { label: '驳回', value: '03' },
]

const docTypeOptions = [
  { label: '启用', value: '01' },
  { label: '停用', value: '02' }
]

const pagination = ref({
  pageSize: 10,
  itemCount: 0,
  pageNum: 1
});
function handlePageUpdate(page: number) {
  pagination.value.pageNum = page;
  getListData();
}
function handlePageSizeUpdate(pageSize: number) {
  pagination.value.pageNum = 1;
  pagination.value.pageSize = pageSize;
  getListData();
}

function createQueryParams() {
  return {
    productName: '',
    typeId: null,
    productStatus: null
  };
}
const loading = ref(false);
const listData = ref([]);
const queryParams = ref(createQueryParams());
/** 检索 */
function handleQuery() {
  pagination.value = {
    pageSize: 10,
    itemCount: 0,
    pageNum: 1
  }
  getListData();
}
/** 重置检索 */
function handleResetQuery() {
  queryParams.value = { ...createQueryParams() };
  pagination.value = {
    pageSize: 10,
    itemCount: 0,
    pageNum: 1
  }
  getListData();
}
const productTypeList = ref([])
async function queryProductTypeList() {
  const res = await fetchQueryProductTypeList();
  if (res.data) {
    productTypeList.value = res.data.data
  }
}

async function onUpdateProductStatus(data: any, status: string) {
  const res = await fetchUpdateProductStatus({ productCode: data.productCode, productStatus: status })
  if (res.data.data) {
    getListData()
    window.$message?.success('操作成功');
  }
}
function onDeleteProduct(data: any) {
  window.$dialog?.info({
    title: '提示',
    content: '您确定要删除当前产品吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const res = await fetchDeleteProduct({ productCode: data.productCode });
      if (res?.data?.ok) {
        window.$message?.success('操作成功');
        getListData();
      }
    }
  });
}

const showProductDetailModal = ref(false)
const showModalLoading = ref(false)
const curProductDetail = ref()

async function onShowDocModal(data: any) {
  showModalLoading.value = true
  showProductDetailModal.value = true
  await getProductDetail(data)
  showModalLoading.value = false
}

const timer = ref<any>(null)
function startPolling() {
  clearTimeout(timer.value)
  timer.value = null
  timer.value = setTimeout(() => {
    getProductDetail(curProductDetail.value)
  }, 5000);
}

async function getProductDetail(data: any, key?: string) {
  const beforeActiveKey = key || menuActiveKey.value || menuOptions[0].key
  const res = await fetchQueryProductDetail({ productCode: data.productCode })
  if (res.data) {
    curProductDetail.value = res.data.data
    menuActiveKey.value = beforeActiveKey

    const hasParsingData = curProductDetail.value.productDocList.some((item: any) => item.analyzeStatus === '01')
    if (hasParsingData) {
      startPolling()
    }
  }
  showModalLoading.value = false
}

function closeProductDetailModal() {
  clearTimeout(timer.value)
  timer.value = null
  showProductDetailModal.value = false
}
const curProductDetailDocList = computed(() => {
  const flag = menuOptions.find(item => item.key === menuActiveKey.value) as any
  return curProductDetail.value?.productDocList?.filter((item: any) => item.docTypeCode === flag.key)
})

async function getListData() {
  loading.value = true;
  const { pageNum, pageSize } = pagination.value;
  const { productName, typeId, productStatus } = queryParams.value;
  const params = {
    productName,
    typeId,
    productStatus,
    pageNum,
    pageSize
  };
  const { data } = await fetchQueryProductList(objectClean(params));
  if (data?.ok) {
    listData.value = data.data.records;
    pagination.value.itemCount = data.data.total;
  }
  loading.value = false;
}

const showAddProductModal = ref(false)
const addFormModal = ref({
  productCode: '',
  productName: '',
  productTypeId: null,
  description: ''
})
const rules = ref({
  productCode: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入 产品编码'
  },
  productName: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请输入 产品名称'
  },
  productTypeId: {
    required: true,
    trigger: ['blur', 'change'],
    message: '请选择 产品类别'
  },
})
const addProductFormRef = ref()
function handleValidateAddForm() {
  addProductFormRef.value?.validate((errors: any) => {
    if (!errors) {
      console.log('验证通过')
      onSubmitAddForm()
    }
    else {
      console.log(errors)
    }
  })
}
function onCloseAddForm() {
  addFormModal.value = {
    productCode: '',
    productName: '',
    productTypeId: null,
    description: ''
  }
  showAddProductModal.value = false
}
const addProductLoading = ref(false)
async function onSubmitAddForm() {
  console.log(addFormModal.value)
  addProductLoading.value = true
  const res = await fetchAddProduct(addFormModal.value)
  if (res.data) {
    onCloseAddForm()
    handleResetQuery()
    window.$message?.success('添加成功');
  }
  addProductLoading.value = false
}

// 00-待解析 01-解析中 02-解析完成 03-解析失败 04-撤回解析
function filterAnalyzeStatus(status: string) {
  switch (status) {
    case '00':
      return '待解析'
      break;
    case '01':
      return '解析中'
      break;
    case '02':
      return '解析完成'
      break;
    case '03':
      return '解析失败'
      break;
    case '04':
      return '撤回解析'
      break;
    default:
      return '未知'
      break;
  }
}

// 00-草稿 01-待审核 02-审核通过 03-审核驳回
function filterDocStatus(status: string) {
  switch (status) {
    case '00':
      return '草稿 '
      break;
    case '01':
      return '待审核 '
      break;
    case '02':
      return '审核通过'
      break;
    case '03':
      return '审核驳回'
      break;
    default:
      return '未知'
      break;
  }
}

const isShowAddDocModal = ref(false)
const addDocForm = ref<any>({
  docTypeCode: null,
  docUrl: '',
  docName: '',
  docCode: '',
  docStatus: ''
})
const addDocRules = ref({
  docTypeCode: {
    required: true,
    trigger: ['blur', 'change'],
    message: '请选择 文档类型'
  },
  docUrl: {
    required: true,
    trigger: ['blur', 'change'],
    message: '请选择 上传文件'
  },
  docStatus: {
    required: true,
    trigger: ['blur', 'change'],
    message: '请选择 审核结论'
  },
})
const addDocFormRef = ref()
function onCloseAddDocModal() {
  addDocForm.value = {
    docTypeCode: null,
    docUrl: '',
    docName: '',
    docCode: ''
  }
  isShowAddDocModal.value = false
}
const addDocLoading = ref(false)
function handleValidateAddDocForm() {
  addDocFormRef.value?.validate((errors: any) => {
    if (!errors) {
      submitAddProdcutDoc()
    }
    else {
      console.log(errors)
    }
  })
}

const defaultFileList = ref<any>([])

const operateType = ref('')
const operateTitle = ref('')
function onAddDoc() {
  operateType.value = 'add'
  operateTitle.value = '新增文档'
  defaultFileList.value = []
  addDocForm.value = {
    docTypeCode: null,
    docUrl: '',
    docName: '',
    docCode: ''
  }
  isShowAddDocModal.value = true
}

function onEditDoc(data: any) {
  operateType.value = 'edit'
  operateTitle.value = '编辑文档'
  addDocForm.value = {
    ...data
  }
  defaultFileList.value = [
    {
      id: addDocForm.value.docCode,
      name: addDocForm.value.docName,
      status: 'finished'
    }
  ]
  isShowAddDocModal.value = true
}
function onPreDoc(data: any) {
  operateType.value = 'preview'
  operateTitle.value = '详情'
  addDocForm.value = {
    ...data
  }
  defaultFileList.value = [
    {
      id: addDocForm.value.docCode,
      name: addDocForm.value.docName,
      status: 'finished'
    }
  ]
  isShowAddDocModal.value = true
}
function onAuditDoc(data: any) {
  operateType.value = 'audit'
  operateTitle.value = '审核文档'
  addDocForm.value = {
    ...data,
    docStatus: null,
    auditDesc: ''
  }
  defaultFileList.value = [
    {
      id: addDocForm.value.docCode,
      name: addDocForm.value.docName,
      status: 'finished'
    }
  ]
  isShowAddDocModal.value = true
}
const ossConfig = ref(null)

async function handlePreview(file: any) {
  window.open(addDocForm.value.tempDocUrl)
}
async function submitAddProdcutDoc() {
  addDocLoading.value = true
  const params = {
    productCode: curProductDetail.value.productCode,
    docTypeCode: addDocForm.value.docTypeCode,
    docUrl: addDocForm.value.docUrl,
    docName: addDocForm.value.docName,
    docCode: addDocForm.value.docCode,
    docStatus: addDocForm.value.docStatus,
    auditDesc: addDocForm.value.auditDesc
  }
  const apis = {
    add: fetchAddProductDoc,
    edit: fetchUpdateProductDoc,
    audit: fetchAuditProductDoc
  }
  const res = await apis[operateType.value](params)
  if (res.data) {
    getProductDetail(curProductDetail.value, operateType.value === 'add' ? params.docTypeCode : null)
    onCloseAddDocModal()
    window.$message?.success('成功');
  }
  addDocLoading.value = false
}

async function customRequest({
  file,
  data,
  headers,
  withCredentials,
  action,
  onFinish,
  onError,
  onProgress
}: UploadCustomRequestOptions) {
  const fm = new FormData()
  fm.append('file', file.file as any)
  fm.append('scene', 'product')
  const res = await fetchUploadImgFile(fm, {
    withCredentials,
    // onUploadProgress: ({ percent }) => {
    //   onProgress({ percent: Math.ceil(percent) })
    // }
  })
  if (res.data) {
    addDocForm.value.docUrl = res.data.data.fullUrl
    addDocForm.value.docName = file.name
    onFinish()
  } else {
    onError()
  }
}

function onDeleteProductDoc(data: any) {
  window.$dialog?.info({
    title: '提示',
    content: '您确定要删除当前产品文档吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const res = await fetchDeleteProductDoc({
        ...data,
        ...curProductDetail.value
      });
      if (res?.data?.ok) {
        window.$message?.success('操作成功');
        getProductDetail(curProductDetail.value)
      }
    }
  });
}

async function onSubmitProductDoc(data: any) {
  const res = await fetchSubmitProductDoc({
    productCode: curProductDetail.value.productCode,
    ...data
  })
  if (res.data) {
    window.$message?.success('操作成功');
    getProductDetail(curProductDetail.value)
  }
}

async function onBackOffDoc(data: any) {
  const res = await fetchBackOffDoc({
    productCode: curProductDetail.value.productCode,
    ...data
  })
  if (res.data) {
    window.$message?.success('操作成功');
    getProductDetail(curProductDetail.value)
  }
}
async function onAnalysisDoc(data: any) {
  const res = await fetchAnalysisDoc({
    productCode: curProductDetail.value.productCode,
    ...data
  })
  if (res.data) {
    window.$message?.success('操作成功');
    getProductDetail(curProductDetail.value)
  }
}


onMounted(() => {
  getListData()
  queryProductTypeList()
})
</script>
<template>
  <div>
    <n-card class="h-full shadow-sm rounded-8px">
      <n-grid cols="1 s:2 m:3 l:4 xl:5 2xl:6" responsive="screen" x-gap="12" y-gap="12">
        <n-grid-item>
          <p class="mb-6px">产品名称：</p>
          <n-input clearable v-model:value="queryParams.productName" placeholder="产品名称"></n-input>
        </n-grid-item>
        <n-grid-item>
          <p class="mb-6px">产品类别：</p>
          <n-select label-field="typeName" value-field="typeId" v-model:value="queryParams.typeId" clearable
            placeholder="产品类别" :options="productTypeList" />
        </n-grid-item>
        <n-grid-item>
          <p class="mb-6px">产品状态：</p>
          <n-select v-model:value="queryParams.productStatus" clearable placeholder="产品状态"
            :options="productStatusOptions" />
        </n-grid-item>
        <n-grid-item class="flex items-end">
          <n-space>
            <n-button secondary strong type="primary" @click="handleQuery"> 查 询 </n-button>
            <n-button secondary strong @click="handleResetQuery">重 置</n-button>
          </n-space>
        </n-grid-item>
      </n-grid>
    </n-card>
    <n-card class="shadow-sm rounded-8px mt-12px">
      <n-space class="mb-12px">
        <n-button strong type="primary" @click="showAddProductModal = true"> 新增产品 </n-button>
      </n-space>
      <n-spin :show="loading">
        <vxe-table :column-config="{ resizable: true }"
          :seq-config="{ startIndex: (pagination.pageNum - 1) * pagination.pageSize }" auto-resize
          :row-config="{ isHover: true }" stripe border :data="listData">
          <vxe-column type="seq" title="序号" width="60"></vxe-column>
          <vxe-column min-width="200" field="productCode" title="产品编码"></vxe-column>
          <vxe-column min-width="200" field="productName" title="产品名称"></vxe-column>
          <vxe-column min-width="140" field="productTypeName" title="产品类别"></vxe-column>
          <vxe-column min-width="100" field="productStatus" title="产品状态">
            <template #default="{ row }">
              <span v-if="row.productStatus === '01'">启用</span>
              <span v-if="row.productStatus === '02'">停用</span>
            </template>
          </vxe-column>
          <vxe-column min-width="200" field="productDocNum" title="解析成功文档数量"></vxe-column>
          <vxe-column field="title" title="操作" fixed="right" min-width="120">
            <template #default="{ row }">
              <n-space>
                <n-button strong text type="info" @click="onShowDocModal(row)">文档管理</n-button>
                <n-button @click="onUpdateProductStatus(row, '02')" v-if="row.productStatus === '01'" strong text
                  type="info">停用</n-button>
                <n-button @click="onUpdateProductStatus(row, '01')" v-if="row.productStatus === '02'" strong text
                  type="info">启用</n-button>
                <n-button @click="onDeleteProduct(row)" v-if="row.productStatus === '02'" strong text
                  type="info">删除产品</n-button>
              </n-space>
            </template>
          </vxe-column>
          <template #empty>
            <icon-custom-empty-data class="text-320px text-primary" />
          </template>
        </vxe-table>
      </n-spin>
      <div v-if="pagination.itemCount !== 0" class="w-full flex justify-end mt-4">
        <n-pagination v-model:page="pagination.pageNum" v-model:page-size="pagination.pageSize"
          :item-count="pagination.itemCount" :page-sizes="PAGINATION_PAGE_SIZES" :on-update:page="handlePageUpdate"
          :on-update:page-size="handlePageSizeUpdate" show-size-picker>
          <template #prefix="{ itemCount, startIndex }">
            <div class="text-[#333]">共 <span class="text-primary">{{ pagination.itemCount }}</span> 条</div>
          </template>
        </n-pagination>
      </div>
    </n-card>

    <n-modal :mask-closable="false" :close-on-esc="false" v-model:show="showProductDetailModal">
      <n-card style="width: 80%; max-width: 1300px;" title="文档管理" :bordered="false" size="huge" role="dialog"
        aria-modal="true">
        <template #header-extra>
          <Icon icon="ic:sharp-close" class="text-size-22px cursor-pointer" @click="closeProductDetailModal" />
        </template>
        <n-spin :show="showModalLoading">
          <div v-if="!showModalLoading">
            <n-h3 prefix="bar">
              <n-text>
                产品信息
              </n-text>
            </n-h3>
            <n-descriptions bordered :column="1" label-placement="left">
              <n-descriptions-item label="产品编码">
                {{ curProductDetail.productCode }}
              </n-descriptions-item>
              <n-descriptions-item label="产品名称">
                {{ curProductDetail.productName }}
              </n-descriptions-item>
              <n-descriptions-item label="产品类别">
                {{ curProductDetail.productTypeName }}
              </n-descriptions-item>
              <n-descriptions-item label="产品介绍">
                {{ curProductDetail.description }}
              </n-descriptions-item>
            </n-descriptions>
            <n-h3 prefix="bar">
              <n-text>
                产品文档
              </n-text>
              <n-button class="ml-[12px]" strong type="primary" @click="onAddDoc"> 新增文档 </n-button>
            </n-h3>
            <n-layout has-sider>
              <n-layout-sider collapse-mode="width" :collapsed-width="64" :width="200" :collapsed="collapsed"
                show-trigger @collapse="collapsed = true" @expand="collapsed = false">
                <n-menu v-model:value="menuActiveKey" :collapsed="collapsed" :collapsed-width="64"
                  :collapsed-icon-size="22" :options="menuOptions" />
              </n-layout-sider>
              <n-layout class="ml-24px">
                <!-- <n-h4>
                  <n-text>
                    产品公告文档（共4条）
                  </n-text>
                </n-h4> -->
                <vxe-table height="480" :column-config="{ resizable: true }"
                  :seq-config="{ startIndex: (pagination.pageNum - 1) * pagination.pageSize }" auto-resize
                  :row-config="{ isHover: true }" border="inner" :data="curProductDetailDocList">
                  <vxe-column fixed="left" type="seq" title="序号" width="60"></vxe-column>
                  <!-- <vxe-column fixed="left" min-width="140" field="docTypeName" title="文档类型"></vxe-column> -->
                  <vxe-column fixed="left" min-width="180" field="docName" title="文档名称"></vxe-column>
                  <vxe-column min-width="120" field="docStatus" title="文档状态">
                    <template #default="{ row }">
                      <span>{{ filterDocStatus(row.docStatus) }}</span>
                    </template>
                  </vxe-column>
                  <vxe-column min-width="120" field="analyzeStatus" title="解析状态">
                    <template #default="{ row }">
                      <span>{{ filterAnalyzeStatus(row.analyzeStatus) }}</span>
                      <n-spin v-if="row.analyzeStatus === '01'" class="define-mini-size" :stroke-width="22"
                        size="small" />
                    </template>
                  </vxe-column>
                  <vxe-column min-width="120" field="createBy" title="创建人"></vxe-column>
                  <vxe-column min-width="180" field="createTime" title="创建时间"></vxe-column>
                  <vxe-column min-width="120" field="auditBy" title="审核人"></vxe-column>
                  <vxe-column min-width="180" field="auditTime" title="审核时间"></vxe-column>
                  <vxe-column field="title" title="操作" fixed="right" min-width="140">
                    <template #default="{ row }">
                      <n-space>
                        <n-button @click="onEditDoc(row)" v-if="row.docStatus === '00' || row.docStatus === '03'" strong
                          text type="info">编辑</n-button>
                        <n-button @click="onSubmitProductDoc(row)"
                          v-if="row.docStatus === '00' || row.docStatus === '03'" strong text type="info">提交</n-button>
                        <n-button v-if="row.docStatus === '00' || row.docStatus === '03'" strong text type="info"
                          @click="onDeleteProductDoc(row)">删除</n-button>
                        <n-button @click="onPreDoc(row)" v-if="row.docStatus !== '00' && row.docStatus !== '03'" strong
                          text type="info">详情</n-button>
                        <n-button @click="onAuditDoc(row)" v-if="row.docStatus === '01'" strong text
                          type="info">审核</n-button>
                        <n-button @click="onBackOffDoc(row)" v-if="row.analyzeStatus && row.analyzeStatus === '02'"
                          strong text type="info">撤回解析</n-button>
                        <n-button @click="onAnalysisDoc(row)"
                          v-if="row.analyzeStatus && row.analyzeStatus !== '00' && row.analyzeStatus !== '01'" strong
                          text type="info">重新解析</n-button>
                      </n-space>
                    </template>
                  </vxe-column>
                  <template #empty>
                    <icon-custom-empty-data class="text-320px text-primary" />
                  </template>
                </vxe-table>
              </n-layout>
            </n-layout>
          </div>
        </n-spin>
      </n-card>
    </n-modal>


    <n-modal :mask-closable="false" :close-on-esc="false" v-model:show="showAddProductModal">
      <n-card style="max-width: 600px;" title="新增产品" :bordered="false" size="huge" role="dialog" aria-modal="true">
        <template #header-extra>
          <Icon icon="ic:sharp-close" class="text-size-22px cursor-pointer" @click="showAddProductModal = false" />
        </template>
        <n-form ref="addProductFormRef" :model="addFormModal" :rules="rules" label-placement="left" label-width="auto"
          require-mark-placement="right-hanging" :style="{
            maxWidth: '640px',
          }">
          <n-form-item label="产品编码" path="productCode">
            <n-input show-count maxlength="16" v-model:value="addFormModal.productCode" placeholder="产品编码" />
          </n-form-item>
          <n-form-item label="产品名称" path="productName">
            <n-input show-count maxlength="32" v-model:value="addFormModal.productName" placeholder="产品名称" />
          </n-form-item>
          <n-form-item label="产品类别" path="productTypeId">
            <n-select label-field="typeName" value-field="typeId" v-model:value="addFormModal.productTypeId" clearable
              placeholder="产品类别" :options="productTypeList" />
          </n-form-item>
          <n-form-item label="产品介绍" path="description">
            <n-input type="textarea" v-model:value="addFormModal.description" placeholder="产品介绍" />
          </n-form-item>
        </n-form>
        <template #footer>
          <n-space justify="center">
            <n-button @click="onCloseAddForm">取消</n-button>
            <n-button :loading="addProductLoading" type="primary" @click="handleValidateAddForm">确定</n-button>
          </n-space>
        </template>
      </n-card>
    </n-modal>


    <n-modal :mask-closable="false" :close-on-esc="false" v-model:show="isShowAddDocModal">
      <n-card style="max-width: 600px;" :title="operateTitle" :bordered="false" size="huge" role="dialog"
        aria-modal="true">
        <template #header-extra>
          <Icon icon="ic:sharp-close" class="text-size-22px cursor-pointer" @click="isShowAddDocModal = false" />
        </template>
        <n-form ref="addDocFormRef" :model="addDocForm" :rules="addDocRules" label-placement="left" label-width="auto"
          require-mark-placement="right-hanging" :style="{
            maxWidth: '640px',
          }">
          <n-form-item label="文档类型" path="docTypeCode">
            <n-select label-field="label" value-field="key"
              :disabled="operateType === 'preview' || operateType === 'audit'" v-model:value="addDocForm.docTypeCode"
              clearable placeholder="文档类型" :options="menuOptions" />
          </n-form-item>
          <n-form-item label="上传文档" path="docTypeCode">
            <div>
              <n-alert type="info" :bordered="false">
                <div>支持上传单个.txt/.docx/pdf/.doc/.wps/.ett/.xls/.xlsx格式文件</div>
              </n-alert>
              <br />
              <n-upload :disabled="operateType === 'preview' || operateType === 'audit'" @preview="handlePreview"
                :default-file-list="defaultFileList" accept=".txt,.docx,.pdf,.doc,.wps,.ett,.xls,.xlsx" :max="1"
                action="https://naive-upload.free.beeceptor.com/" :headers="{
            'naive-info': 'hello!',
          }" :data="{
            'naive-data': 'cool! naive!',
          }" :custom-request="customRequest">
                <n-button>上传文件</n-button>
              </n-upload>
            </div>
          </n-form-item>
          <n-form-item
            v-if="operateType === 'audit' || operateType === 'preview' && (addDocForm.docStatus === '02' || addDocForm.docStatus === '03')"
            label="审核结论" path="docStatus">
            <n-select :disabled="operateType === 'preview'" v-model:value="addDocForm.docStatus" clearable
              placeholder="审核结论" :options="docStatusOptions" />
          </n-form-item>
          <n-form-item
            v-if="operateType === 'audit' || operateType === 'preview' && (addDocForm.docStatus === '02' || addDocForm.docStatus === '03')"
            label="审核意见" path="auditDesc">
            <n-input :disabled="operateType === 'preview'" maxlength="200" show-count type="textarea"
              v-model:value="addDocForm.auditDesc" placeholder="审核意见" />
          </n-form-item>
        </n-form>
        <template #footer v-if="operateType !== 'preview'">
          <n-space justify="center">
            <n-button @click="onCloseAddDocModal">取消</n-button>
            <n-button :loading="addDocLoading" type="primary" @click="handleValidateAddDocForm">
              <span v-if="operateType === 'audit'">确定</span>
              <span v-else>保存</span>
            </n-button>
          </n-space>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>

<style>
.define-mini-size .n-base-loading {
  font-size: 12px !important;
  margin-left: 4px;
}
</style>
