<script setup>
import { ref, computed, onMounted, reactive } from 'vue'
import { ArrowDown, Close, Edit, User, QuestionFilled } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router";
import * as XLSX from 'xlsx';

// 选择对话框状态
const showChoiceDialog = ref(false)

// 导入相关状态
const showImportDialog = ref(false)
const showImportDialog2 = ref(false)
const importCurrentStep = ref(1)
const importSteps = ['上传文件', '执行导入', '导入完成']
const uploadedFile = ref(null)
const fileInput = ref(null)
const importProgress = ref(0)
const importStatus = ref('')
const importSuccessCount = ref(0)
const importFailedCount = ref(0)

// 导出相关状态
const showExportDialog = ref(false)
const exportCurrentStep = ref(1)
const exportSteps = ['导出数据', '上传修改', '导入完成']
const exportFileInput = ref(null)
const exportProgress = ref(0)
const exportStatus = ref('')
const exportSuccessCount = ref(0)
const exportFailedCount = ref(0)

// 导出表单数据
const exportForm = reactive({
  equipmentType: [],
  purchaseDate: [],
  includeResigned: false
})
// 选择导入
const handleImportChoice = () => {
  showChoiceDialog.value = false
  showImportDialog.value = true
  resetImportState()
}
// 选择导入
const handleImportChoice2 = () => {
  showChoiceDialog.value = false
  showImportDialog2.value = true
  resetImportState()
}
// 关闭导入对话框
const closeImportDialog = () => {
  showImportDialog.value = false
  resetImportState()
}
// 关闭导入对话框
const closeImportDialog2 = () => {
  showImportDialog2.value = false
  resetImportState()
}
// 关闭导出对话框
const closeExportDialog = () => {
  showExportDialog.value = false
  resetExportState()
}
// 重置导入状态
const resetImportState = () => {
  importCurrentStep.value = 1
  uploadedFile.value = null
  importProgress.value = 0
  importStatus.value = ''
  importSuccessCount.value = 0
  importFailedCount.value = 0
}

// 重置导出状态
const resetExportState = () => {
  exportCurrentStep.value = 1
  exportProgress.value = 0
  exportStatus.value = ''
  exportSuccessCount.value = 0
  exportFailedCount.value = 0
  exportForm.equipmentType = []
  exportForm.purchaseDate = []
  exportForm.includeResigned = false
}

// 触发文件上传
const triggerFileUpload = () => {
  fileInput.value.click()
}

// 处理文件上传
const handleFileUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    // 验证文件类型和大小
    if (!file.name.endsWith('.xlsx')) {
      ElMessage.error('请上传.xlsx格式的文件')
      return
    }
    if (file.size > 5 * 1024 * 1024) {
      ElMessage.error('文件大小不能超过5MB')
      return
    }

    uploadedFile.value = file
    ElMessage.success('文件上传成功')
  }
}
// 下载模板
const downloadTemplate = () => {
  const headers = [
    '设备编号', '设备名称', '型号规格', '设备类型', '用途类型',
    '购入时间', '资产原值', '折旧月份', '月折旧额', '使用模式',
    '运行规则', '运行班次', '研发实验工时', '功率', '所属部门'
  ]

  const data = [headers]

  const ws = XLSX.utils.aoa_to_sheet(data)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '设备数据模板')

  XLSX.writeFile(wb, '设备导入模板.xlsx')
  ElMessage.success('模板下载成功')
}

// 导出数据
const handleExportData = () => {
  // 筛选要导出的数据
  let dataToExport = []
    dataToExport = tableData.value.filter(item => {
      const typeMatch = exportForm.equipmentType.length === 0 ||
          exportForm.equipmentType.includes(item.type)
      const dateMatch = exportForm.purchaseDate.length !== 2 ||
          (new Date(item.purchaseDate) >= new Date(exportForm.purchaseDate[0]) &&
              new Date(item.purchaseDate) <= new Date(exportForm.purchaseDate[1]))
      return typeMatch && dateMatch
    })
  if (dataToExport.length === 0) {
    ElMessage.warning('没有符合条件的数据可导出')
    return
  }

  if (dataToExport.length > 10000) {
    ElMessage.warning('单次导出数据不能超过10000条')
    return
  }

  // 准备导出数据
  const headers = ['设备编号', '设备名称', '型号规格', '设备类型', '用途类型',
    '购入时间', '资产原值', '折旧月份', '月折旧额', '使用模式',
    '运行规则', '运行班次', '研发实验工时', '功率', '所属部门']

  const exportData = [
    headers,
    ...dataToExport.map(item => [
      item.code,
      item.name,
      item.spec,
      item.type,
      item.purpose,
      item.purchaseDate,
      item.originalValue,
      item.depreciationMonths,
      item.monthlyDepreciation,
      item.usageMode,
      item.operationRule,
      item.operationShift,
      item.researchHours,
      item.powerConsumption,
      Array.isArray(item.departments) ? item.departments.join(';') : ''
    ])
  ]

  const ws = XLSX.utils.aoa_to_sheet(exportData)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '设备数据')

  XLSX.writeFile(wb, `设备数据_${new Date().toISOString().slice(0, 10)}.xlsx`)

  exportSuccessCount.value = dataToExport.length
  ElMessage.success('导出成功')
}

// 处理导入数据
const handleImportData = () => {
  if (!uploadedFile.value) {
    ElMessage.warning('请先上传文件')
    return
  }

  const reader = new FileReader()
  reader.onload = (e) => {
    try {
      const data = new Uint8Array(e.target.result)
      const workbook = XLSX.read(data, { type: 'array' })
      const firstSheet = workbook.Sheets[workbook.SheetNames[0]]
      const jsonData = XLSX.utils.sheet_to_json(firstSheet)

      if (jsonData.length === 0) {
        ElMessage.error('导入文件为空')
        return
      }

      // 验证数据格式
      const requiredFields = ['设备编号', '设备名称', '型号规格', '设备类型', '用途类型']
      const firstRow = jsonData[0]
      const missingFields = requiredFields.filter(field => !(field in firstRow))

      if (missingFields.length > 0) {
        ElMessage.error(`缺少必要字段: ${missingFields.join(', ')}`)
        return
      }

      // 处理导入数据
      const newData = jsonData.map((row, index) => {
        return {
          id: Math.max(...tableData.value.map(item => item.id), 0) + index + 1,
          name: row['设备名称'],
          code: row['设备编号'],
          spec: row['型号规格'],
          type: row['设备类型'],
          purpose: row['用途类型'],
          purchaseDate: row['购入时间'] || '',
          originalValue: row['资产原值'] || 0,
          depreciationMonths: row['折旧月份'] || 0,
          monthlyDepreciation: row['月折旧额'] || 0,
          usageMode: row['使用模式'] || '部门使用',
          operationRule: row['运行规则'] || '',
          operationShift: row['运行班次'] || '',
          updateTime: new Date().toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false
          }).replace(/\//g, '-'),
          operator: '当前用户',
          status: '启用',
          researchHours: row['研发实验工时'] || 0,
          powerConsumption: row['功率'] || 0,
          departments: row['所属部门'] ? row['所属部门'].split(';') : []
        }
      })

      // 添加到表格数据
      if (activeTab.value === 'device') {
        tableData.value = [...newData, ...tableData.value]
      } else {
        tableData2.value = [...newData, ...tableData2.value]
      }

      importSuccessCount.value = newData.length
      importCurrentStep.value = 3
      ElMessage.success(`成功导入 ${newData.length} 条数据`)

    } catch (error) {
      console.error('导入失败:', error)
      ElMessage.error('导入失败，请检查文件格式')
    }
  }
  reader.readAsArrayBuffer(uploadedFile.value)
}

// 修改handleImportNextStep函数
const handleImportNextStep = () => {
  if (importCurrentStep.value === 3) {
    closeImportDialog()
    return
  }

  if (importCurrentStep.value === 1 && !uploadedFile.value) {
    ElMessage.warning('请先上传文件')
    return
  }

  if (importCurrentStep.value === 1) {
    importCurrentStep.value++
  } else if (importCurrentStep.value === 2) {
    handleImportData()
  }
}

const router = useRouter()
const hoverLink = ref(false)
const isExpanded = ref(false)

// 文件上传相关状态
const hoverFile = ref(false)

// 删除上传的文件
const removeFile = () => {
  uploadedFile.value = null
  if (fileInput.value) {
    fileInput.value.value = ''
  }
}

// 文件导出相关状态
const exportFiles = ref([])

</script>

<template>
    <div class="tab-container">

            <div class="button-group-container">
              <div class="button-group-left">
                <el-button @click="showChoiceDialog = true" class="gray-btn">批量导入</el-button>
                <el-button @click="showExportDialog=true" class="gray-btn">导出</el-button>
              </div>
            </div>

      <!-- 选择弹出框 -->
      <el-dialog
          v-model="showChoiceDialog"
          title="请选择操作类型"
          width="500px"
          :show-close="false"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
      >
        <div class="choice-buttons">
          <el-button class="import-btn" @click="handleImportChoice">批量导入新数据</el-button>
          <el-button type="primary" class="export-btn" @click="handleImportChoice2">批量导出/修改已有数据</el-button>
        </div>
      </el-dialog>
      <!-- 导入流程弹出框 -->
      <el-dialog
          v-model="showImportDialog"
          title="批量导入"
          width="700px"
          :show-close="false"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
      >
        <template #header>
          <div class="dialog-header">
            <span class="dialog-title">批量导入</span>
            <el-icon class="close-icon" @click="closeImportDialog"><Close /></el-icon>
          </div>
        </template>

        <div class="steps-container">
          <div class="steps">
            <div
                v-for="(step, index) in importSteps"
                :key="index"
                class="step"
                :class="{ 'active-step': importCurrentStep > index, 'current-step': importCurrentStep === index + 1 }"
            >
              <div class="step-circle">
                <span class="step-number">{{ index + 1 }}</span>
              </div>
              <div class="step-text">{{ step }}</div>
              <div v-if="index < importSteps.length - 1" class="step-line"></div>
            </div>
          </div>
        </div>

        <div v-if="importCurrentStep === 1" class="step-content">
          <!-- 下载模板部分 -->
          <div class="import-section">
            <div class="section-icon">
              <img src="@/assets/images/download-icon.png" alt="下载图标" width="48">
            </div>
            <div class="section-content">
              <div class="section-title">填写需要导入的数据</div>
              <div class="section-description">
                请按照数据模板的格式准备导入数据，模板中的表头名称不可更改，表头行不能删除，表格格式不能修改
              </div>
              <el-button type="primary" plain @click="downloadTemplate" class="section-button">下载模板</el-button>
            </div>
          </div>

          <!-- 上传文件部分 -->
          <div class="import-section">
            <div class="section-icon">
              <img src="@/assets/images/upload-icon.png" alt="上传图标" width="48">
            </div>
            <div class="section-content">
              <div class="section-title">上传填好的表格</div>
              <div class="section-description">
                文件后缀名必须为xlsx（即Excel格式），文件大小不得大于5MB，数据不超过2000条
              </div>
              <el-button type="primary" plain @click="triggerFileUpload" class="section-button">上传文件</el-button>
              <input
                  ref="fileInput"
                  type="file"
                  accept=".xlsx"
                  style="display: none"
                  @change="handleFileUpload"
              />
              <div v-if="uploadedFile" class="file-info" @mouseenter="hoverFile = true" @mouseleave="hoverFile = false">
                <span class="file-name">{{ uploadedFile.name }}</span>
                <el-icon class="delete-icon" @click.stop="removeFile"><Close /></el-icon>
              </div>
            </div>
          </div>

          <div class="import-actions">
            <el-button
                type="primary"
                :disabled="!uploadedFile"
                @click="handleImportNextStep"
            >
              下一步
            </el-button>
          </div>
        </div>

        <div v-if="importCurrentStep === 2" class="step-content">
          <div class="import-analysis">
            <div class="analysis-card">
              <div class="analysis-icon">
                <img src="@/assets/images/success-icon.png" alt="成功图标" width="36">
              </div>
              <div class="analysis-content">
                <div class="analysis-title">本次可导入数据</div>
                <div class="analysis-count">{{ uploadedFile ? '待分析' : '0' }}条</div>
              </div>
            </div>
          </div>

          <div class="import-actions">
            <el-button plain @click="importCurrentStep--">返回重新上传</el-button>
            <el-button
                type="primary"
                @click="handleImportNextStep"
            >
              执行导入
            </el-button>
          </div>
        </div>

        <div v-if="importCurrentStep === 3" class="step-content">
          <div class="import-result">
            <p>导入完成！</p>
            <p>成功导入 {{ importSuccessCount }} 条数据</p>
            <p v-if="importFailedCount > 0">失败 {{ importFailedCount }} 条数据</p>
          </div>
        </div>
      </el-dialog>
      <el-dialog
          v-model="showImportDialog2"
          title="批量导入"
          width="700px"
          :show-close="false"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
      >
        <template #header>
          <div class="dialog-header">
            <span class="dialog-title">批量导入</span>
            <el-icon class="close-icon" @click="closeImportDialog2"><Close /></el-icon>
          </div>
        </template>

        <div class="steps-container">
          <div class="steps">
            <div
                v-for="(step, index) in importSteps"
                :key="index"
                class="step"
                :class="{ 'active-step': importCurrentStep > index, 'current-step': importCurrentStep === index + 1 }"
            >
              <div class="step-circle">
                <span class="step-number">{{ index + 1 }}</span>
              </div>
              <div class="step-text">{{ step }}</div>
              <div v-if="index < importSteps.length - 1" class="step-line"></div>
            </div>
          </div>
        </div>

        <div v-if="importCurrentStep === 1" class="step-content">
          <!-- 下载模板部分 -->
          <div class="import-section">
            <div class="section-icon">
              <img src="@/assets/images/download-icon.png" alt="导出图标" width="48">
            </div>
            <div class="section-content">
              <div class="section-title">导出需要修改的数据</div>
              <div class="section-description">
                选择需要导出的设备类型和购入时间范围后点击导出，单次导出数据不超过2000条
              </div>
              <el-form :model="exportForm" label-width="120px">
                <el-form-item label="设备类型：">
                  <el-select
                      v-model="exportForm.equipmentType"
                      placeholder="请选择设备类型"
                      style="width: 100%"
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                  >
                    <el-option label="仪器" value="仪器" />
                    <el-option label="设备" value="设备" />
                    <el-option label="建筑物" value="建筑物" />
                    <el-option label="其他" value="其他" />
                  </el-select>
                </el-form-item>

                <el-form-item label="购入时间范围：">
                  <el-date-picker
                      v-model="exportForm.purchaseDate"
                      type="monthrange"
                      range-separator="至"
                      start-placeholder="开始月份"
                      end-placeholder="结束月份"
                      style="width: 100%"
                  />
                </el-form-item>
              </el-form>
              <el-button type="primary" plain @click="handleExportData">导出数据</el-button>
              <div class="export-actions">
                <span v-if="exportSuccessCount > 0" class="export-count">本次导出数据共计{{ exportSuccessCount }}条</span>
              </div>
            </div>
          </div>

          <!-- 上传文件部分 -->
          <div class="import-section">
            <div class="section-icon">
              <img src="@/assets/images/upload-icon.png" alt="上传图标" width="48">
            </div>
            <div class="section-content">
              <div class="section-title">上传填好的表格</div>
              <div class="section-description">
                文件后缀名必须为xlsx（即Excel格式），文件大小不得大于5MB，数据不超过2000条
              </div>
              <el-button type="primary" plain @click="triggerFileUpload" class="section-button">上传文件</el-button>
              <input
                  ref="fileInput"
                  type="file"
                  accept=".xlsx"
                  style="display: none"
                  @change="handleFileUpload"
              />
              <div v-if="uploadedFile" class="file-info" @mouseenter="hoverFile = true" @mouseleave="hoverFile = false">
                <span class="file-name">{{ uploadedFile.name }}</span>
                <el-icon class="delete-icon" @click.stop="removeFile"><Close /></el-icon>
              </div>
            </div>
          </div>

          <div class="import-actions">
            <el-button
                type="primary"
                :disabled="!uploadedFile"
                @click="handleImportNextStep"
            >
              下一步
            </el-button>
          </div>
        </div>

        <div v-if="importCurrentStep === 2" class="step-content">
          <div class="import-analysis">
            <div class="analysis-card">
              <div class="analysis-icon">
                <img src="@/assets/images/success-icon.png" alt="成功图标" width="36">
              </div>
              <div class="analysis-content">
                <div class="analysis-title">本次可导入数据</div>
                <div class="analysis-count">{{ uploadedFile ? '待分析' : '0' }}条</div>
              </div>
            </div>
          </div>

          <div class="import-actions">
            <el-button plain @click="importCurrentStep--">返回重新上传</el-button>
            <el-button
                type="primary"
                @click="handleImportNextStep"
            >
              执行导入
            </el-button>
          </div>
        </div>

        <div v-if="importCurrentStep === 3" class="step-content">
          <div class="import-result">
            <p>导入完成！</p>
            <p>成功导入 {{ importSuccessCount }} 条数据</p>
            <p v-if="importFailedCount > 0">失败 {{ importFailedCount }} 条数据</p>
          </div>
        </div>
      </el-dialog>
      <!-- 导出流程弹出框 -->
      <el-dialog
          v-model="showExportDialog"
          title="导出设备"
          width="700px"
          :show-close="false"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
      >
        <template #header>
          <div class="dialog-header">
            <span class="dialog-title">导出设备</span>
            <el-icon class="close-icon" @click="closeExportDialog"><Close /></el-icon>
          </div>
        </template>
        <div class="step-content">
          <div class="export-section">
            <p class="section-description">选择需要导出的设备类型与购入时间范围后点击导出，单次导出数据不超过10000条。</p>

            <el-form :model="exportForm" label-width="120px">
              <el-form-item label="设备类型(可选)：">
                <el-select
                    v-model="exportForm.equipmentType"
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    placeholder="请选择设备类型"
                    style="width: 100%"
                >
                  <el-option label="仪器" value="仪器" />
                  <el-option label="设备" value="设备" />
                  <el-option label="建筑物" value="建筑物" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>

              <el-form-item label="购入时间范围">
                <el-date-picker
                    v-model="exportForm.purchaseDate"
                    type="monthrange"
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    style="width: 100%"
                />
              </el-form-item>
            </el-form>
          </div>

          <div class="export-actions">
            <el-button @click="closeExportDialog">取消</el-button>
            <el-button type="primary" @click="handleExportData">导出</el-button>
          </div>
        </div>
      </el-dialog>
        </div>
</template>

<style scoped lang="scss">


.button-group-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 20px;
}

.button-group-left {
  display: flex;
  gap: 10px;
}

.button-group-right {
  display: flex;
  gap: 10px;
}


/* 选择对话框按钮样式 */
.choice-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0;
}

.choice-buttons .el-button {
  width: 100%;
  height: 50px;
  font-size: 16px;
}

.import-btn {
  color: #409eff;
  border-color: #409eff;
  background-color: white;
}

.export-btn {
  background-color: #409eff;
  color: white;
}
/* 对话框头部样式 */
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px;
}

.dialog-title {
  font-size: 18px;
  font-weight: bold;
}

.close-icon {
  cursor: pointer;
  font-size: 20px;
  color: #999;
}

.close-icon:hover {
  color: #666;
}

/* 步骤条样式 */
.steps-container {
  margin: 20px 0 30px;
}

.steps {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
}

.step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  z-index: 1;
}

.step-number {
  color: #999;
  font-weight: bold;
}

.step-text {
  color: #999;
  font-size: 14px;
}

.step-line {
  position: absolute;
  top: 15px;
  left: 50%;
  right: -50%;
  height: 2px;
  background-color: #f0f0f0;
  z-index: 0;
}

/* 激活步骤样式 */
.step.active-step .step-circle,
.step.current-step .step-circle {
  background-color: #409eff;
}

.step.active-step .step-number,
.step.current-step .step-number {
  color: white;
}

.step.active-step .step-text,
.step.current-step .step-text {
  color: #333;
  font-weight: bold;
}

.step.active-step .step-line {
  background-color: #409eff;
}

/* 步骤内容样式 */
.step-content {
  min-height: 200px;
  padding: 0 20px;
}
/* 导入部分样式 */
.import-section {
  display: flex;
  margin-bottom: 30px;
  padding: 20px;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.section-icon {
  margin-right: 20px;
}

.section-content {
  flex: 1;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.section-description {
  font-size: 14px;
  color: #999;
  margin-bottom: 16px;
  line-height: 1.5;
}

.section-button {
  width: 120px;
}

.file-info {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s;
}

.file-info:hover {
  background-color: #f0f0f0;
}

.file-name {
  font-size: 14px;
  color: #666;
}

.delete-icon {
  color: #999;
  cursor: pointer;
}

.delete-icon:hover {
  color: #ff4d4f;
}
/* 导入分析部分 */
.import-analysis {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.analysis-card {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.analysis-icon {
  margin-right: 16px;
}

.analysis-content {
  flex: 1;
}

.analysis-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.analysis-count {
  font-size: 24px;
  font-weight: 600;
}

/* 导入操作按钮 */
.import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* 导出部分样式 */
.export-section {
  margin-bottom: 30px;
}

.upload-section {
  margin-top: 40px;
}

.section-description {
  color: #666;
  margin-bottom: 20px;
  font-size: 14px;
}

.section-description.light {
  color: #999;
  font-size: 14px;
}

.export-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  gap: 10px;
}

.export-count {
  margin-left: 16px;
  color: #67c23a;
  font-size: 14px;
  line-height: 32px;
}

.file-list {
  margin-top: 12px;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.hover-file {
  background-color: #f5f7fa;
}

.file-name {
  font-size: 14px;
  color: #606266;
}

.delete-icon {
  color: #909399;
  cursor: pointer;
}

.delete-icon:hover {
  color: #f56c6c;
}

.export-result {
  text-align: center;
  margin: 40px 0;
}

.import-result {
  text-align: center;
  margin: 40px 0;
}



.hint-icon {
  margin-left: 10px;
  color: #909399;
  cursor: help;
}

.hint-icon:hover {
  color: #409eff;
}
</style>
