<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="物资编码" prop="materialCode">
        <el-input v-model="queryParams.materialCode" placeholder="请输入物资编码" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="物资名称" prop="materialName">
        <el-input v-model="queryParams.materialName" placeholder="请输入物资名称" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="物资分类" prop="categoryId">
        <el-tree-select v-model="queryParams.categoryId" :data="wmsMaterialCategoryOptions"
          :props="{ value: 'categoryId', label: 'categoryName', children: 'children' }" value-key="categoryId"
          placeholder="请选择物资分类" check-strictly clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="规格型号" prop="specification">
        <el-input v-model="queryParams.specification" placeholder="请输入规格型号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="计量单位" prop="unit">
        <el-input v-model="queryParams.unit" placeholder="请输入计量单位" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="生产厂家" prop="manufacturer">
        <el-input v-model="queryParams.manufacturer" placeholder="请输入生产厂家" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="供应商" prop="supplierId">
        <div class="input-with-select">
          <el-input v-model="queryParams.supplierName" placeholder="请选择供应商" readonly clearable
            @clear="handleSupplierClear('query')" />
          <el-button slot="append" icon="Search" @click="handleSupplierSelect('query')">选择</el-button>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
          v-hasPermi="['ware:wmsMaterial:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
          v-hasPermi="['ware:wmsMaterial:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['ware:wmsMaterial:remove']">删除</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="wmsMaterialList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" fixed="left" />
      <el-table-column label="物资编码" align="center" prop="materialCode" width="150" fixed="left" />
      <el-table-column label="物资名称" align="center" prop="materialName" fixed="left" />
      <el-table-column label="物资分类" align="center" prop="category.categoryName" />
      <el-table-column label="规格型号" align="center" prop="specification" />
      <el-table-column label="计量单位" align="center" prop="unit" />
      <el-table-column label="生产厂家" align="center" prop="manufacturer" />
      <el-table-column label="供应商" align="center" prop="supplier.supplierName" width="200">
        <template #default="scope">
          <span>{{ scope.row.supplier?.supplierName }}</span>
          <div v-if="scope.row.supplier?.contactPhone">
           {{ scope.row.supplier?.contactPerson }} | {{ scope.row.supplier?.contactPhone }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="存储条件" align="center" prop="storageCondition" />
      <el-table-column label="单件重量" align="center" prop="weight" />
      <el-table-column label="单件体积" align="center" prop="volume" />
      <el-table-column label="图片" align="center" prop="imageUrl">
        <template #default="scope">
          <div v-if="scope.row.imageUrl" class="image-preview-container">
            <el-button :key="index" link type="primary" @click="handleImagePreview(scope.row.imageUrl.split(','))"
              class="preview-image-btn">
              预览
            </el-button>
          </div>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column label="文档" align="center" prop="documentUrl">
        <template #default="scope">
          <div v-if="scope.row.documentUrl" class="document-preview-container">
            <el-button v-for="(url, index) in scope.row.documentUrl.split(',')" :key="index" link type="primary"
              @click="handleDocumentPreview(url)" class="preview-document-btn">
              预览
            </el-button>
          </div>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
      <!-- <el-table-column label="是否RFID管理" align="center" prop="isRfidManaged" width="100">
        <template #default="scope">
          <dict-tag :options="custom_yes_no" :value="scope.row.isRfidManaged" />
        </template>
      </el-table-column>
      <el-table-column label="RFID标签" align="center" prop="rfidStandard" />
      <el-table-column label="RFID粘贴位置" align="center" prop="rfidPosition" /> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180" fixed="right">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['ware:wmsMaterial:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
            v-hasPermi="['ware:wmsMaterial:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改物资主数据对话框 -->
    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
      <el-form ref="wmsMaterialRef" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="物资编码" prop="materialCode">
              <el-input v-model="form.materialCode" placeholder="请输入物资编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物资名称" prop="materialName">
              <el-input v-model="form.materialName" placeholder="请输入物资名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="物资分类" prop="categoryId">
              <el-tree-select v-model="form.categoryId" :data="wmsMaterialCategoryOptions"
                :props="{ value: 'categoryId', label: 'categoryName', children: 'children' }" value-key="categoryId"
                placeholder="请选择物资分类" check-strictly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格型号" prop="specification">
              <el-input v-model="form.specification" placeholder="请输入规格型号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计量单位" prop="unit">
              <el-input v-model="form.unit" placeholder="请输入计量单位" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产厂家" prop="manufacturer">
              <el-input v-model="form.manufacturer" placeholder="请输入生产厂家" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="供应商" prop="supplierId">
              <div class="input-with-select">
                <el-input v-model="form.supplierName" placeholder="请选择供应商" readonly clearable
                  @clear="handleSupplierClear('form')">
                  <template #append>
                    <el-button slot="append" icon="Search" @click="handleSupplierSelect('form')">选择</el-button>
                  </template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="存储条件" prop="storageCondition">
              <el-input v-model="form.storageCondition" placeholder="请输入存储条件" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单件重量" prop="weight">
              <el-input v-model="form.weight" placeholder="请输入单件重量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单件体积" prop="volume">
              <el-input v-model="form.volume" placeholder="请输入单件体积" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="物资图片">
              <ImageUpload v-model="form.imageUrl" :limit="3" :fileSize="5" :fileType="['jpg', 'png', 'gif']"
                :isShowTip="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="技术文档">
              <FileUpload v-model="form.documentUrl" :limit="5" :fileSize="20"
                :fileType="['pdf', 'doc', 'docx', 'xls', 'xlsx', 'txt']" :isShowTip="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否RFID管理" prop="isRfidManaged">
              <el-input v-model="form.isRfidManaged" placeholder="请输入是否RFID管理" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="RFID标签" prop="rfidStandard">
              <el-input v-model="form.rfidStandard" placeholder="请输入RFID标准" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="RFID粘贴位置" prop="rfidPosition">
              <el-input v-model="form.rfidPosition" placeholder="请输入RFID粘贴位置" />
            </el-form-item>
          </el-col>
        </el-row> -->

        <!-- 自定义属性扩展 -->
        <!-- <el-divider>自定义属性</el-divider>
        <el-form-item>
          <el-button type="primary" plain size="small" @click="showCustomAttrDialog = true">添加属性</el-button>
          <el-table :data="form.customAttributes" border style="margin-top: 10px;">
            <el-table-column prop="attrName" label="属性名称" width="120" />
            <el-table-column prop="attrValue" label="属性值" />
            <el-table-column prop="attrType" label="属性类型" width="100">
              <template #default="scope">
                <el-tag size="small">{{ scope.row.attrType }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120" align="center">
              <template #default="scope">
                <el-button link size="small" @click="editCustomAttr(scope.row)">编辑</el-button>
                <el-button link size="small" type="danger" @click="deleteCustomAttr(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item> -->
      </el-form>

      <!-- 自定义属性编辑对话框 -->
      <el-dialog v-model="data.showCustomAttrDialog" title="自定义属性编辑" width="400px" append-to-body>
        <el-form :model="data.customAttrForm" label-width="80px">
          <el-form-item label="属性名称" required>
            <el-input v-model="data.customAttrForm.attrName" placeholder="请输入属性名称" />
          </el-form-item>
          <el-form-item label="属性值" required>
            <el-input v-model="data.customAttrForm.attrValue" placeholder="请输入属性值" />
          </el-form-item>
          <el-form-item label="属性类型">
            <el-select v-model="data.customAttrForm.attrType" style="width: 100%;">
              <el-option label="字符串" value="string" />
              <el-option label="数字" value="number" />
              <el-option label="日期" value="date" />
              <el-option label="布尔值" value="boolean" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="data.showCustomAttrDialog = false">取消</el-button>
            <el-button type="primary" @click="saveCustomAttr">确定</el-button>
          </div>
        </template>
      </el-dialog>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 文档预览对话框 -->
    <el-dialog v-model="previewDialogVisible" title="文档预览" width="80%" height="80%" :close-on-click-modal="false">
      <div class="document-preview">
        <vue-office-docx v-if="currentDocumentType === 'docx'" :src="currentDocumentUrl" style="height: 100%;" />
        <vue-office-xlsx v-else-if="currentDocumentType === 'xlsx'" :src="currentDocumentUrl" style="height: 100%;" />
        <vue-office-pdf v-else-if="currentDocumentType === 'pdf'" :src="currentDocumentUrl" style="height: 100%;" />
      </div>
    </el-dialog>

    <!-- 图片预览组件 -->
    <el-image-viewer v-if="imageViewerVisible" :url-list="imageList" :initial-index="imageIndex"
      @close="imageViewerVisible = false" />

    <!-- 供应商选择对话框 -->
    <SupplierSelectDialog ref="supplierSelectDialogRef" v-model:visible="supplierDialogVisible"
      @confirm="handleSupplierConfirm" @cancel="handleSupplierCancel" />
  </div>
</template>

<script setup name="WmsMaterial">
import { listWmsMaterial, getWmsMaterial, delWmsMaterial, addWmsMaterial, updateWmsMaterial } from "@/api/ware/wmsMaterial"
import { listWmsMaterialCategory } from "@/api/ware/wmsMaterialCategory"
import ImageUpload from "@/components/ImageUpload/index.vue"
import FileUpload from "@/components/FileUpload/index.vue"
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeXlsx from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
import SupplierSelectDialog from "@/components/SupplierSelectDialog.vue"
//引入相关样式
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'
import { ElImageViewer } from 'element-plus'

const { proxy } = getCurrentInstance()

const { sys_normal_disable, custom_yes_no } = proxy.useDict('sys_normal_disable', 'custom_yes_no')

const wmsMaterialList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const isQuery = ref(false)

// 分类树数据
const wmsMaterialCategoryOptions = ref([])

const data = reactive({
  form: {
    customAttributes: []
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    materialCode: null,
    materialName: null,
    categoryId: null,
    specification: null,
    unit: null,
    materialType: null,
    manufacturer: null,
    supplierId: null,
    safetyStock: null,
    maxStock: null,
    minStock: null,
    shelfLifeDays: null,
    storageCondition: null,
    weight: null,
    volume: null,
    imageUrl: null,
    documentUrl: null,
    status: null,
    isRfidManaged: null,
    rfidStandard: null,
    rfidPosition: null
  },
  rules: {
    materialCode: [
      { required: true, message: "物资编码不能为空", trigger: "blur" }
    ],
    materialName: [
      { required: true, message: "物资名称不能为空", trigger: "blur" }
    ],
    categoryId: [
      { required: true, message: "物资分类不能为空", trigger: ["blur", "change"] }
    ],
    unit: [
      { required: true, message: "计量单位不能为空", trigger: "blur" }
    ],
  },
  // 自定义属性相关
  customAttrForm: {
    attrName: '',
    attrValue: '',
    attrType: 'string'
  },
  showCustomAttrDialog: false
})

const { queryParams, form, rules, customAttrForm, showCustomAttrDialog } = toRefs(data)

// 文档预览
const previewDialogVisible = ref(false)
const currentDocumentUrl = ref('')
const currentDocumentType = ref('')

// 图片预览
const imageViewerVisible = ref(false)
const imageList = ref([])
const imageIndex = ref(0)

// 供应商选择
const supplierDialogVisible = ref(false)
const supplierSelectDialogRef = ref(null)
const currentSupplierId = ref(null)
const currentSupplierName = ref('')
const selectedSupplier = ref(null)

// 初始化加载物资列表
function getList() {
  loading.value = true
  listWmsMaterial(queryParams.value).then(response => {
    wmsMaterialList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

// 文档预览处理
function handleDocumentPreview(url) {
  // 为URL增加API前缀（如果尚未包含）
  if (url && !url.startsWith('http') && !url.startsWith(import.meta.env.VITE_APP_BASE_API)) {
    currentDocumentUrl.value = import.meta.env.VITE_APP_BASE_API + url
  } else {
    currentDocumentUrl.value = url
  }
  // 根据文件扩展名确定文档类型
  const ext = url.split('.').pop().toLowerCase()
  if (['docx', 'doc'].includes(ext)) {
    currentDocumentType.value = 'docx'
  } else if (['xlsx', 'xls'].includes(ext)) {
    currentDocumentType.value = 'xlsx'
  } else if (['pdf'].includes(ext)) {
    currentDocumentType.value = 'pdf'
  } else {
    // 不支持的文档类型
    proxy.$modal.msgError('不支持的文档类型')
    return
  }
  previewDialogVisible.value = true
}

// 图片预览处理
function handleImagePreview(urls) {
  // 为所有URL增加API前缀（如果尚未包含）
  imageList.value = urls.map(item => {
    if (item && !item.startsWith('http') && !item.startsWith(import.meta.env.VITE_APP_BASE_API)) {
      return import.meta.env.VITE_APP_BASE_API + item
    }
    return item
  })
  // 更新当前索引
  imageIndex.value = 0;
  imageViewerVisible.value = true
}

// 供应商选择处理
function handleSupplierSelect(type) {
  isQuery.value = type === 'query'
  currentSupplierId.value = type === 'query' ? queryParams.value.supplierId : form.value.supplierId
  supplierDialogVisible.value = true
  supplierSelectDialogRef.value?.handleQuery()
}

// 供应商选择确认
function handleSupplierConfirm(selected) {
  if (selected && selected.length > 0) {
    const supplier = selected[0]
    selectedSupplier.value = supplier
    currentSupplierId.value = supplier.supplierId
    currentSupplierName.value = supplier.supplierName

    // 根据调用类型设置不同的目标
    if (isQuery.value) {
      // 来自查询表单
      queryParams.value.supplierId = supplier.supplierId
      queryParams.value.supplierName = supplier.supplierName
    } else {
      // 来自编辑表单
      form.value.supplierId = supplier.supplierId
      form.value.supplierName = supplier.supplierName
    }
  }
  supplierDialogVisible.value = false
}

// 供应商选择取消
function handleSupplierCancel() {
  supplierDialogVisible.value = false
}

// 供应商选择清除
function handleSupplierClear(type) {
  currentSupplierName.value = ''
  currentSupplierId.value = null
  selectedSupplier.value = null

  if (type === 'query') {
    queryParams.value.supplierId = null
  } else {
    form.value.supplierId = null
  }
}

// 表单重置
function reset() {
  form.value = {
    materialId: null,
    materialCode: null,
    materialName: null,
    categoryId: null,
    specification: null,
    unit: null,
    materialType: null,
    manufacturer: null,
    supplierId: null,
    safetyStock: null,
    maxStock: null,
    minStock: null,
    shelfLifeDays: null,
    storageCondition: null,
    weight: null,
    volume: null,
    imageUrl: null,
    documentUrl: null,
    status: null,
    remark: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    isRfidManaged: null,
    rfidStandard: null,
    rfidPosition: null,
    customAttributes: []
  }
  // 重置自定义属性表单
  Object.assign(data.customAttrForm, {
    attrName: '',
    attrValue: '',
    attrType: 'string'
  })
  delete data.customAttrForm._editingIndex
  data.showCustomAttrDialog = false

  proxy.resetForm("wmsMaterialRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.materialId)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 查询物资分类下拉树结构 */
function getTreeselect() {
  return new Promise((resolve) => {
    listWmsMaterialCategory().then(response => {
      wmsMaterialCategoryOptions.value = []
      const data = { categoryId: 0, categoryName: '顶级节点', children: [] }
      data.children = proxy.handleTree(response.data, "categoryId", "parentId")
      wmsMaterialCategoryOptions.value.push(data)
      resolve()
    })
  })
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  getTreeselect()
  open.value = true
  title.value = "添加物资主数据"
}

/** 修改按钮操作 */
async function handleUpdate(row) {
  reset()
  await getTreeselect()
  const _materialId = row.materialId || ids.value
  getWmsMaterial(_materialId).then(response => {
    form.value = response.data
    open.value = true
    title.value = "修改物资主数据"
  })
}

// 保存自定义属性
function saveCustomAttr() {
  if (!data.customAttrForm.attrName || !data.customAttrForm.attrValue) {
    proxy.$modal.msgError("属性名称和属性值不能为空")
    return
  }

  const editingIndex = data.customAttrForm._editingIndex
  if (editingIndex !== undefined) {
    // 编辑现有属性
    form.value.customAttributes[editingIndex] = { ...data.customAttrForm }
    delete data.customAttrForm._editingIndex
  } else {
    // 添加新属性
    form.value.customAttributes.push({ ...data.customAttrForm })
  }

  // 重置表单
  Object.assign(data.customAttrForm, {
    attrName: '',
    attrValue: '',
    attrType: 'string'
  })
  data.showCustomAttrDialog = false
}

// 编辑自定义属性
function editCustomAttr(row) {
  const index = form.value.customAttributes.findIndex(item => item.attrName === row.attrName)
  data.customAttrForm = { ...row, _editingIndex: index }
  data.showCustomAttrDialog = true
}

// 删除自定义属性
function deleteCustomAttr(index) {
  form.value.customAttributes.splice(index, 1)
}



/** 提交按钮 */
function submitForm() {
  proxy.$refs["wmsMaterialRef"].validate(valid => {
    if (valid) {
      if (form.value.materialId != null) {
        updateWmsMaterial(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addWmsMaterial(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _materialIds = row.materialId || ids.value
  proxy.$modal.confirm('是否确认删除物资主数据编号为"' + _materialIds + '"的数据项？').then(function () {
    return delWmsMaterial(_materialIds)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => { })
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('ware/wmsMaterial/export', {
    ...queryParams.value
  }, `wmsMaterial_${new Date().getTime()}.xlsx`)
}

// 初始化加载分类树数据
getTreeselect()

// 初始化加载物资列表
getList()
</script>

<style scoped>
.image-preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preview-image {
  width: 80px;
  height: 80px;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.document-preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preview-document-btn {
  padding: 0;
  height: auto;
  line-height: normal;
}

.document-preview {
  height: 600px;
  overflow: auto;
}
</style>
