<template>
  <module-page-shell title="资料管理">
    <div class="material-manage-page">
      <section class="panel query-list-panel">
        <div class="panel__header">
          <div>
            <h3>资料管理</h3>
          </div>
          <el-button type="primary" @click="openCreateDialog">新增资料</el-button>
        </div>

        <div class="project-filter-bar">
          <div class="project-filter-bar__field project-filter-bar__field--project">
            <el-select v-model="queryForm.projectName" filterable placeholder="请选择项目">
              <el-option
                v-for="item in projectOptions"
                :key="item.projectId"
                :label="item.projectName"
                :value="item.projectName"
              />
            </el-select>
          </div>
          <div class="project-filter-bar__field project-filter-bar__field--narrow">
            <el-select v-model="queryForm.category" placeholder="类型：全部" clearable>
              <el-option label="类型：全部" value="" />
              <el-option
                v-for="item in categoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="project-filter-bar__field project-filter-bar__field--keyword">
            <el-input
              v-model="queryForm.keyword"
              placeholder="资料名称/上传人"
              clearable
            />
          </div>
          <div class="project-filter-bar__field project-filter-bar__field--narrow">
            <el-select v-model="queryForm.status" placeholder="状态：全部" clearable>
              <el-option label="状态：全部" value="" />
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="project-filter-bar__actions">
            <el-button type="primary" class="project-filter-bar__button" @click="applyFilters">查询</el-button>
            <el-button class="project-filter-bar__button" @click="resetFilters">重置</el-button>
          </div>
        </div>

        <el-table v-loading="loading" :data="pagedRows" class="material-table">
          <el-table-column label="项目名称" prop="projectName" min-width="220" />
          <el-table-column label="资料类型" prop="category" min-width="140" />
          <el-table-column label="资料名称" prop="materialName" min-width="240" show-overflow-tooltip />
          <el-table-column label="上传人" prop="ownerName" min-width="100" />
          <el-table-column label="状态" min-width="120">
            <template slot-scope="scope">
              <span :class="['status-pill', scope.row.status === 'uploaded' ? 'status-pill--uploaded' : 'status-pill--pending']">
                {{ statusLabel(scope.row.status) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="上传时间" min-width="160">
            <template slot-scope="scope">
              {{ scope.row.submitDate || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="300" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleDetail(scope.row)">详情</el-button>
              <el-button size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
              <el-button
                v-if="scope.row.filePath"
                size="mini"
                @click="handlePreview(scope.row)"
              >
                查看
              </el-button>
              <el-button
                v-else
                size="mini"
                @click="openUploadDialog(scope.row)"
              >
                上传
              </el-button>
              <el-button
                size="mini"
                :disabled="!scope.row.filePath"
                @click="handleDownload(scope.row)"
              >
                下载
              </el-button>
              <el-button size="mini" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="filteredRows.length > 0"
          :total="filteredRows.length"
          :page.sync="queryForm.pageNum"
          :limit.sync="queryForm.pageSize"
          @pagination="handlePagination"
        />
      </section>

      <el-dialog
        :visible.sync="formOpen"
        width="640px"
        append-to-body
        :close-on-click-modal="false"
      >
        <span slot="title" class="dialog-title">{{ formTitle }}</span>
        <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
          <el-form-item label="资料类型" prop="category">
            <el-select v-model="form.category" style="width: 100%" @change="handleCategoryChange">
              <el-option
                v-for="item in categoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="资料名称" prop="materialName">
            <el-input v-model="form.materialName" placeholder="请输入资料名称" />
          </el-form-item>
          <el-form-item label="上传人" prop="ownerName">
            <el-input v-model="form.ownerName" placeholder="请输入上传人" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" style="width: 100%">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="formOpen = false">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
      </el-dialog>

      <el-dialog
        :visible.sync="detailOpen"
        width="700px"
        append-to-body
      >
        <span slot="title" class="dialog-title">资料详情</span>
        <div v-if="detailRow" class="detail-panel">
          <div class="detail-row"><span class="detail-row__label">项目名称</span>{{ detailRow.projectName }}</div>
          <div class="detail-row"><span class="detail-row__label">资料分类</span>{{ detailRow.category }}</div>
          <div class="detail-row"><span class="detail-row__label">资料名称</span>{{ detailRow.materialName }}</div>
          <div class="detail-row"><span class="detail-row__label">上传人</span>{{ detailRow.ownerName }}</div>
          <div class="detail-row"><span class="detail-row__label">状态</span>{{ statusLabel(detailRow.status) }}</div>
          <div class="detail-row"><span class="detail-row__label">上传时间</span>{{ detailRow.submitDate || '-' }}</div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button :disabled="!detailRow || !detailRow.filePath" @click="handlePreview(detailRow)">查看</el-button>
          <el-button :disabled="!detailRow || !detailRow.filePath" @click="handleDownload(detailRow)">下载</el-button>
          <el-button type="primary" @click="detailOpen = false">关闭</el-button>
        </div>
      </el-dialog>

      <el-dialog
        :visible.sync="uploadOpen"
        width="720px"
        top="7vh"
        append-to-body
        :close-on-click-modal="false"
      >
        <span slot="title" class="dialog-title">上传资料</span>
        <el-form label-position="top">
          <el-form-item label="资料名称">
            <el-input :value="uploadTarget ? uploadTarget.materialName : ''" disabled />
          </el-form-item>
          <el-form-item label="上传附件" class="upload-field">
            <el-upload
              ref="uploadRef"
              drag
              action="#"
              :auto-upload="false"
              :limit="1"
              :file-list="uploadFileList"
              :on-change="handleUploadFileChange"
              :on-remove="handleUploadFileRemove"
              :before-upload="() => false"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div slot="tip" class="el-upload__tip">支持 PDF、Office、图片和压缩包等常见文件</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="uploadOpen = false">取消</el-button>
          <el-button type="primary" @click="submitUpload">上传</el-button>
        </div>
      </el-dialog>

      <el-dialog
        :visible.sync="previewOpen"
        width="980px"
        top="5vh"
        append-to-body
      >
        <span slot="title" class="dialog-title">{{ previewState.title || '资料预览' }}</span>
        <div class="preview-meta" v-if="previewState.row">
          <span>项目：{{ previewState.row.projectName }}</span>
          <span>资料类型：{{ previewState.row.category }}</span>
          <span>上传人：{{ previewState.row.ownerName || '--' }}</span>
        </div>
        <div class="preview-body">
          <iframe v-if="previewState.type === 'pdf'" :src="previewState.url" class="preview-frame"></iframe>
          <img v-else-if="previewState.type === 'image'" :src="previewState.url" class="preview-image" />
          <pre v-else-if="previewState.type === 'text'" class="preview-text">{{ previewState.text }}</pre>
          <div v-else class="preview-placeholder">
            <i class="el-icon-document"></i>
            <p>当前文件类型暂不支持在线预览，可直接下载查看。</p>
            <p class="preview-placeholder__path">{{ previewState.row ? previewState.row.materialName : '' }}</p>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="previewOpen = false">关闭</el-button>
          <el-button v-if="previewState.row" @click="handleDownload(previewState.row)">下载资料</el-button>
          <el-button v-if="previewState.type === 'unsupported'" type="primary" @click="openPreviewInNewWindow">新窗口打开</el-button>
        </div>
      </el-dialog>
    </div>
  </module-page-shell>
</template>

<script>
import ModulePageShell from '@/components/ModulePageShell'
import { listProject } from '@/api/risk/project'
import { addMaterial, delMaterial, listMaterial, updateMaterial, uploadMaterialFile } from '@/api/risk/material'
import { MATERIAL_REQUIREMENTS, nowString } from '@/views/project/shared/workbench'

const CATEGORY_OPTIONS = MATERIAL_REQUIREMENTS.map(item => ({
  value: item.category,
  label: item.category,
  materialType: item.materialType,
  files: item.files
}))

const STATUS_OPTIONS = [
  { value: 'pending', label: '待补件' },
  { value: 'uploaded', label: '已上传' }
]

export default {
  name: 'RiskMaterialManage',
  components: {
    ModulePageShell
  },
  data() {
    return {
      loading: false,
      projectOptions: [],
      allMaterials: [],
      categoryOptions: CATEGORY_OPTIONS,
      statusOptions: STATUS_OPTIONS,
      queryForm: {
        projectName: '',
        category: '',
        keyword: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      appliedFilters: {
        projectName: '',
        category: '',
        keyword: '',
        status: ''
      },
      formOpen: false,
      formMode: 'add',
      form: {},
      detailOpen: false,
      detailRow: null,
      uploadOpen: false,
      uploadTarget: null,
      uploadFile: null,
      uploadFileList: [],
      previewOpen: false,
      previewState: {
        title: '',
        type: 'unsupported',
        url: '',
        text: '',
        row: null
      },
      rules: {
        category: [{ required: true, message: '请选择资料类型', trigger: 'change' }],
        materialName: [{ required: true, message: '请输入资料名称', trigger: 'blur' }],
        ownerName: [{ required: true, message: '请输入上传人', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
      }
    }
  },
  computed: {
    formTitle() {
      return this.formMode === 'edit' ? '编辑资料' : '新增资料'
    },
    filteredRows() {
      const keyword = (this.appliedFilters.keyword || '').trim().toLowerCase()
      return this.allMaterials.filter(item => {
        const hitProject = !this.appliedFilters.projectName || item.projectName === this.appliedFilters.projectName
        const hitCategory = !this.appliedFilters.category || item.category === this.appliedFilters.category
        const hitKeyword = !keyword || [item.materialName, item.ownerName].some(field => `${field || ''}`.toLowerCase().includes(keyword))
        const hitStatus = !this.appliedFilters.status || item.status === this.appliedFilters.status
        return hitProject && hitCategory && hitKeyword && hitStatus
      })
    },
    pagedRows() {
      const pageNum = Number(this.queryForm.pageNum) || 1
      const pageSize = Number(this.queryForm.pageSize) || 10
      const start = (pageNum - 1) * pageSize
      return this.filteredRows.slice(start, start + pageSize)
    }
  },
  created() {
    this.refreshData()
  },
  activated() {
    this.refreshData()
  },
  methods: {
    async refreshData() {
      this.loading = true
      try {
        const [projectRes, materialRes] = await Promise.all([
          listProject({ pageNum: 1, pageSize: 1000 }),
          listMaterial({ pageNum: 1, pageSize: 1000 })
        ])
        this.projectOptions = (projectRes.rows || []).map(item => ({
          projectId: item.projectId,
          projectName: item.projectName || ''
        }))
        this.allMaterials = (materialRes.rows || []).map(item => this.normalizeMaterial(item))
        if (!this.queryForm.projectName && this.projectOptions.length > 0) {
          this.queryForm.projectName = this.projectOptions[0].projectName
        }
        this.applyFilters()
        this.handlePagination()
      } finally {
        this.loading = false
      }
    },
    normalizeMaterial(item) {
      return {
        materialId: item.materialId,
        projectName: item.projectName || '',
        materialName: item.materialName || '',
        ownerName: item.ownerName || this.currentUserName(),
        category: this.resolveCategory(item),
        materialType: `${item.materialType || '1'}`,
        status: this.resolveStatus(item),
        filePath: item.filePath || '',
        submitDate: this.normalizeDateTime(item.submitDate),
        sourceChannel: item.sourceChannel || '资料管理',
        remark: item.remark || ''
      }
    },
    resolveCategory(item) {
      const matchedByName = MATERIAL_REQUIREMENTS.find(group => group.files.includes(item.materialName))
      if (matchedByName) {
        return matchedByName.category
      }
      const matchedByType = CATEGORY_OPTIONS.find(option => option.materialType === `${item.materialType || '1'}`)
      return matchedByType ? matchedByType.value : CATEGORY_OPTIONS[0].value
    },
    resolveStatus(item) {
      if (item.filePath || `${item.materialStatus || ''}` === '2') {
        return 'uploaded'
      }
      return 'pending'
    },
    normalizeDateTime(value) {
      if (!value) {
        return ''
      }
      return `${value}`.slice(0, 16).replace(/\//g, '-')
    },
    normalizeResourcePath(path) {
      if (!path) {
        return ''
      }
      if (/^https?:\/\//.test(path)) {
        return path
      }
      if (path.startsWith('/profile/')) {
        return path
      }
      if (path.startsWith('profile/')) {
        return `/${path}`
      }
      if (path.startsWith('/upload/')) {
        return `/profile${path}`
      }
      return `/profile/${path.replace(/^\//, '')}`
    },
    getPreviewUrl(path) {
      const normalized = this.normalizeResourcePath(path)
      if (!normalized) {
        return ''
      }
      if (/^https?:\/\//.test(normalized)) {
        return normalized
      }
      return `${process.env.VUE_APP_BASE_API}${normalized}`
    },
    currentUserName() {
      return this.$store.getters.nickName || this.$store.getters.name || '管理员'
    },
    statusLabel(status) {
      const matched = this.statusOptions.find(item => item.value === status)
      return matched ? matched.label : '待补件'
    },
    applyFilters() {
      this.queryForm.pageNum = 1
      this.appliedFilters = { ...this.queryForm }
    },
    resetFilters() {
      this.queryForm = {
        projectName: this.projectOptions[0] ? this.projectOptions[0].projectName : '',
        category: '',
        keyword: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      }
      this.applyFilters()
    },
    handlePagination() {
      const pageSize = Number(this.queryForm.pageSize) || 10
      const totalPages = Math.max(1, Math.ceil(this.filteredRows.length / pageSize))
      if (this.queryForm.pageNum > totalPages) {
        this.queryForm.pageNum = totalPages
      }
    },
    resolveProjectForCreate() {
      if (this.queryForm.projectName) {
        return this.queryForm.projectName
      }
      return this.projectOptions[0] ? this.projectOptions[0].projectName : ''
    },
    createDefaultForm(projectName) {
      const defaultCategory = this.categoryOptions[0]
      return {
        materialId: undefined,
        projectName,
        category: defaultCategory.value,
        materialType: defaultCategory.materialType,
        materialName: '',
        ownerName: this.currentUserName(),
        status: 'pending',
        filePath: '',
        submitDate: '',
        sourceChannel: '资料管理',
        remark: ''
      }
    },
    openCreateDialog() {
      const projectName = this.resolveProjectForCreate()
      if (!projectName) {
        this.$message.warning('请先选择项目')
        return
      }
      this.formMode = 'add'
      this.form = this.createDefaultForm(projectName)
      this.formOpen = true
      this.$nextTick(() => {
        if (this.$refs.formRef) {
          this.$refs.formRef.clearValidate()
        }
      })
    },
    openEditDialog(row) {
      this.formMode = 'edit'
      this.form = {
        materialId: row.materialId,
        projectName: row.projectName,
        category: row.category,
        materialType: row.materialType,
        materialName: row.materialName,
        ownerName: row.ownerName,
        status: row.status,
        filePath: row.filePath,
        submitDate: row.submitDate,
        sourceChannel: row.sourceChannel,
        remark: row.remark
      }
      this.formOpen = true
      this.$nextTick(() => {
        if (this.$refs.formRef) {
          this.$refs.formRef.clearValidate()
        }
      })
    },
    handleCategoryChange(value) {
      const matched = this.categoryOptions.find(item => item.value === value)
      if (!matched) {
        return
      }
      this.form.materialType = matched.materialType
    },
    buildPayload(form) {
      return {
        materialId: form.materialId,
        materialName: (form.materialName || '').trim(),
        materialType: form.materialType,
        projectName: form.projectName,
        sourceChannel: form.sourceChannel || '资料管理',
        ownerName: (form.ownerName || this.currentUserName()).trim(),
        materialStatus: form.status === 'uploaded' ? '2' : '1',
        filePath: form.filePath || '',
        submitDate: form.status === 'uploaded' ? (form.submitDate || nowString()) : '',
        remark: form.remark || ''
      }
    },
    submitForm() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) {
          return
        }
        if (this.form.status === 'uploaded' && !this.form.filePath) {
          this.$message.warning('已上传状态请先通过列表中的上传按钮补充附件')
          return
        }
        const payload = this.buildPayload(this.form)
        if (!payload.projectName) {
          this.$message.warning('请先选择所属项目')
          return
        }
        if (payload.materialId) {
          await updateMaterial(payload)
          this.$message.success('资料修改成功')
        } else {
          await addMaterial(payload)
          this.$message.success('资料新增成功')
        }
        this.formOpen = false
        await this.refreshData()
      })
    },
    handleDetail(row) {
      this.detailRow = row
      this.detailOpen = true
    },
    getFileExtension(name) {
      const source = `${name || ''}`.split('?')[0]
      const index = source.lastIndexOf('.')
      return index === -1 ? '' : source.slice(index + 1).toLowerCase()
    },
    resolvePreviewType(row) {
      const ext = this.getFileExtension(row.materialName || row.filePath)
      if (['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'].includes(ext)) {
        return 'image'
      }
      if (ext === 'pdf') {
        return 'pdf'
      }
      if (['txt', 'md', 'json', 'csv', 'xml', 'log'].includes(ext)) {
        return 'text'
      }
      return 'unsupported'
    },
    async handlePreview(row) {
      if (!row || !row.filePath) {
        this.$message.warning('当前资料暂无可预览文件')
        return
      }
      const url = this.getPreviewUrl(row.filePath)
      const type = this.resolvePreviewType(row)
      this.previewState = {
        title: row.materialName,
        type,
        url,
        text: '',
        row
      }
      this.previewOpen = true
      if (type === 'text') {
        try {
          const response = await fetch(url, { credentials: 'include' })
          this.previewState.text = await response.text()
        } catch (error) {
          this.previewState.text = '文本预览加载失败，请直接下载查看。'
        }
      }
    },
    handleDownload(row) {
      if (!row || !row.filePath) {
        this.$message.warning('当前资料暂无可下载文件')
        return
      }
      const resource = this.normalizeResourcePath(row.filePath)
      this.$download.resource(resource)
    },
    openPreviewInNewWindow() {
      if (this.previewState.url) {
        window.open(this.previewState.url, '_blank')
      }
    },
    async handleDelete(row) {
      if (!row || !row.materialId) {
        this.$message.warning('当前记录暂不支持删除')
        return
      }
      try {
        await this.$confirm('确认删除该资料记录吗？', '提示', { type: 'warning' })
        await delMaterial(row.materialId)
        this.$message.success('资料删除成功')
        if (this.detailOpen && this.detailRow && this.detailRow.materialId === row.materialId) {
          this.detailOpen = false
        }
        await this.refreshData()
      } catch (error) {
        if (error !== 'cancel') {
          console.error(error)
        }
      }
    },
    openUploadDialog(row) {
      this.uploadTarget = row
      this.uploadFile = null
      this.uploadFileList = []
      this.uploadOpen = true
      this.$nextTick(() => {
        if (this.$refs.uploadRef) {
          this.$refs.uploadRef.clearFiles()
        }
      })
    },
    handleUploadFileChange(file, fileList) {
      this.uploadFile = file.raw
      this.uploadFileList = fileList.slice(-1)
    },
    handleUploadFileRemove() {
      this.uploadFile = null
      this.uploadFileList = []
    },
    async submitUpload() {
      if (!this.uploadTarget || !this.uploadTarget.materialId) {
        this.$message.warning('当前资料记录不存在')
        return
      }
      if (!this.uploadFile) {
        this.$message.warning('请先选择上传文件')
        return
      }
      const uploadRes = await uploadMaterialFile(this.uploadFile)
      const payload = {
        materialId: this.uploadTarget.materialId,
        materialName: this.uploadTarget.materialName,
        materialType: this.uploadTarget.materialType,
        projectName: this.uploadTarget.projectName,
        sourceChannel: this.uploadTarget.sourceChannel || '资料管理',
        ownerName: this.uploadTarget.ownerName || this.currentUserName(),
        materialStatus: '2',
        filePath: this.normalizeResourcePath(uploadRes.fileName || uploadRes.url || ''),
        submitDate: nowString(),
        remark: this.uploadTarget.remark || ''
      }
      await updateMaterial(payload)
      this.$message.success('资料上传成功')
      this.uploadOpen = false
      await this.refreshData()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/project-filter-bar.scss";
@import "~@/styles/query-list-panel.scss";

.material-manage-page {
  display: flex;
  flex-direction: column;
}

.material-manage-page .project-filter-bar__field--project {
  flex: 0 1 280px;
  max-width: 320px;
  min-width: 220px;
}

.material-manage-page .project-filter-bar__field--keyword {
  flex: 0 1 300px;
  max-width: 340px;
  min-width: 220px;
}

.material-table {
  margin-bottom: 12px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
}

.status-pill--uploaded {
  color: #24a148;
  background: #edf8ef;
}

.status-pill--pending {
  color: #f59e0b;
  background: #fff7e6;
}

.dialog-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.detail-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-row {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #e4e8ef;
  border-radius: 6px;
  color: #303133;
  gap: 8px;
}

.detail-row__label {
  min-width: 72px;
  font-weight: 600;
}

.upload-field ::v-deep .el-upload {
  width: 100%;
}

.upload-field ::v-deep .el-upload-dragger {
  width: 100%;
}

.preview-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
  color: #6b7280;
  font-size: 13px;
}

.preview-body {
  min-height: 420px;
  max-height: 70vh;
  overflow: auto;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  background: #f8fafc;
}

.preview-frame {
  width: 100%;
  height: 68vh;
  border: 0;
  background: #fff;
}

.preview-image {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.preview-text {
  margin: 0;
  padding: 16px;
  white-space: pre-wrap;
  word-break: break-word;
  color: #1f2937;
}

.preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  color: #6b7280;
}

.preview-placeholder i {
  font-size: 44px;
  margin-bottom: 12px;
}

.preview-placeholder p {
  margin: 4px 0;
}

.preview-placeholder__path {
  color: #111827;
}

@media screen and (max-width: 768px) {
  .preview-meta {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 14px;
  }
}
</style>
