<template>
  <div class="three-code-page" :class="pageStatusClass">
    <PermissionVerify ref="permissionVerifyRef" />
    <template v-if="isAuthenticated">
      <!-- 头部 -->
      <div class="header-bar">
        <div class="header-left" @click="navigateHome">
          <h1>PACK下线三码校验</h1>
          <p>Three-Code Verification</p>
        </div>
        <div class="header-right">
          <span class="user-info">操作人：{{ loginUserName }}</span>
          <el-button type="danger" icon="SwitchButton" size="small" @click="handleLogout">退出登录</el-button>
        </div>
      </div>

      <!-- 主体 -->
      <div class="main-body">
        <!-- 扫码区 -->
        <div class="scan-section">
          <div class="scan-box">
            <el-icon :size="26"><Aim /></el-icon>
            <input ref="scanInputRef" v-model.trim="scanInput" class="scan-input"
              placeholder="请使用扫码枪扫描任意码值（PACK码 / 箱体码 / 客户标签码）..."
              @keyup.enter="handleScan" />
          </div>
          <div class="last-scan" v-if="lastScanCode">
            <span class="ls-label">最近扫码：</span>
            <span class="ls-value">{{ lastScanCode }}</span>
            <span class="ls-time">{{ lastScanTime }}</span>
            <el-tag :type="lastScanTagType" size="small">{{ lastScanResultText }}</el-tag>
          </div>
        </div>

        <!-- 整体状态横幅 -->
        <div class="overall-banner" :class="overallBannerClass">
          <el-icon :size="32"><component :is="overallIcon" /></el-icon>
          <span class="overall-text">{{ overallStatusText }}</span>
          <span class="overall-progress" v-if="overallProgress">({{ overallProgress }})</span>
        </div>

        <!-- 三码卡片 -->
        <div class="code-cards">
          <div class="code-card" :class="packCardClass">
            <el-icon :size="24" class="card-icon"><component :is="packIcon" /></el-icon>
            <span class="card-label">PACK码</span>
            <span class="card-value">{{ productInfo.packCode || '—' }}</span>
            <span class="card-status">{{ packStatusText }}</span>
          </div>
          <div class="code-card" :class="boxCardClass">
            <el-icon :size="24" class="card-icon"><component :is="boxIcon" /></el-icon>
            <span class="card-label">箱体码</span>
            <span class="card-value">{{ expectedBoxCode || '—' }}</span>
            <span class="card-scan" v-if="scannedBoxCode && boxStatus !== 'idle'">扫:{{ scannedBoxCode }}</span>
            <span class="card-status">{{ boxStatusText }}</span>
          </div>
          <div class="code-card" :class="tagCardClass">
            <el-icon :size="24" class="card-icon"><component :is="tagIcon" /></el-icon>
            <span class="card-label">客户标签码</span>
            <span class="card-value">{{ expectedClientTag || '—' }}</span>
            <span class="card-scan" v-if="scannedClientTag && tagStatus !== 'idle'">扫:{{ scannedClientTag }}</span>
            <span class="card-status">{{ tagStatusText }}</span>
          </div>
        </div>

        <!-- 产品信息 -->
        <div class="product-info" v-if="productInfo.productNo">
          <div class="info-title">产品信息</div>
          <div class="info-grid">
            <div class="info-item"><span class="il">产品型号</span><span class="iv">{{ productInfo.productType || '-' }}</span></div>
            <div class="info-item"><span class="il">机型代码</span><span class="iv">{{ productInfo.engineTypeID || '-' }}</span></div>
            <div class="info-item"><span class="il">模组码</span><span class="iv">{{ productInfo.moduleCode || '-' }}</span></div>
            <div class="info-item"><span class="il">上线时间</span><span class="iv">{{ productInfo.onlineTime || '-' }}</span></div>
          </div>
        </div>

        <!-- 扫码历史 -->
        <div class="scan-history" v-if="scanHistory.length">
          <div class="history-title">扫码记录</div>
          <div class="history-list">
            <div v-for="(item, idx) in scanHistory" :key="idx" class="history-item" :class="'hi-' + item.result">
              <span class="hi-time">{{ item.time }}</span>
              <span class="hi-code">{{ item.code }}</span>
              <el-tag :type="item.result === 'success' ? 'success' : item.result === 'error' ? 'warning' : 'info'" size="small">
                {{ item.label }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </template>
    <div v-else class="auth-loading"><p>正在进行权限验证...</p></div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick, inject } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import PermissionVerify from '@/components/PermissionVerify.vue'
import Cookie from 'js-cookie'
import { Aim, CircleCheck, Clock, Warning, CircleClose, Select, Loading, Remove } from '@element-plus/icons-vue'
import axios from 'axios'

const CreateData = inject('CreateData')
const ExecDatabase = inject('ExecDatabase')
const router = useRouter()
const navigateHome = () => router.push('/')

// === 权限 ===
const isAuthenticated = ref(false)
const permissionVerifyRef = ref(null)
const userInfo = ref({})
const loginUserName = computed(() => Cookie.get('userName') || userInfo.value.姓名 || '-')

const checkPermission = async () => {
  try {
    const ud = Cookie.get('userId'), un = Cookie.get('userName')
    if (ud && un) { isAuthenticated.value = true; userInfo.value = { UserID: ud, 姓名: un }; focusScan(); return }
    const result = await permissionVerifyRef.value.show({ title: '三码校验登录', promptText: '请刷卡进行身份验证', permissionLevel: '操作工' })
    if (result.success) { isAuthenticated.value = true; userInfo.value = result.data; focusScan() }
  } catch (e) { if (e?.cancelled) ElMessage.warning('已取消登录'); else ElMessage.error('权限验证失败') }
}

const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
    isAuthenticated.value = false; Cookie.remove('userId'); Cookie.remove('userName'); router.push('/')
  } catch {}
}

// === 扫码 ===
const scanInputRef = ref(null)
const scanInput = ref('')
const lastScanCode = ref('')
const lastScanTime = ref('')
const lastScanResult = ref('') // success | error | info
const lastScanResultText = ref('')
const lastScanTagType = computed(() => lastScanResult.value === 'success' ? 'success' : lastScanResult.value === 'error' ? 'warning' : 'info')
const scanHistory = ref([])

const focusScan = () => { nextTick(() => { scanInputRef.value?.focus() }) }

const addHistory = (code, result, label) => {
  const now = new Date()
  const t = `${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}:${String(now.getSeconds()).padStart(2,'0')}`
  scanHistory.value.unshift({ code, result, label, time: t })
  if (scanHistory.value.length > 20) scanHistory.value.pop()
  lastScanCode.value = code; lastScanTime.value = t; lastScanResult.value = result; lastScanResultText.value = label
}

// === 产品与码值 ===
const productInfo = reactive({ productNo: '', productType: '', engineTypeID: 0, packCode: '', moduleCode: '', boxCode: '', onlineTime: '' })
const expectedBoxCode = ref('')
const expectedClientTag = ref('')
const clientTagLoading = ref(false)

// 三码状态: idle | success | error
const packStatus = ref('idle')
const boxStatus = ref('idle')
const tagStatus = ref('idle')
const scannedBoxCode = ref('')
const scannedClientTag = ref('')

const resetAll = () => {
  Object.assign(productInfo, { productNo: '', productType: '', engineTypeID: 0, packCode: '', moduleCode: '', boxCode: '', onlineTime: '' })
  expectedBoxCode.value = ''; expectedClientTag.value = ''; clientTagLoading.value = false
  packStatus.value = 'idle'; boxStatus.value = 'idle'; tagStatus.value = 'idle'
  scannedBoxCode.value = ''; scannedClientTag.value = ''
}

// === 扫码主逻辑 ===
const handleScan = async () => {
  const code = scanInput.value.trim()
  scanInput.value = ''
  if (!code) return
  focusScan()

  if (code.startsWith('001PBP000')) {
    // PACK码 → 重置并查询
    resetAll()
    packStatus.value = 'success'
    productInfo.packCode = code
    productInfo.productNo = code
    addHistory(code, 'success', 'PACK码 ✓ 已锁定')
    await fetchProductInfo(code)
  } else {
    // 非PACK码 → 校验
    if (!productInfo.productNo) {
      addHistory(code, 'error', '请先扫描PACK码')
      ElMessage.warning('请先扫描PACK码（001PBP000开头）')
      return
    }
    // 三码已全部通过，忽略非PACK码输入
    if (allSuccess.value) {
      addHistory(code, 'info', '已完成，请扫下一个PACK码')
      ElMessage.info('当前产品三码已校验完成，请扫描下一个PACK码')
      return
    }
    let matched = false
    // 匹配箱体码
    if (expectedBoxCode.value && code === expectedBoxCode.value) {
      boxStatus.value = 'success'; scannedBoxCode.value = code; matched = true
      addHistory(code, 'success', '箱体码 ✓')
    }
    // 匹配客户标签码
    if (expectedClientTag.value && code === expectedClientTag.value) {
      tagStatus.value = 'success'; scannedClientTag.value = code; matched = true
      addHistory(code, 'success', '客户标签码 ✓')
    }
    if (!matched) {
      // 判断更可能是哪个码
      if (boxStatus.value !== 'success' && expectedBoxCode.value) {
        boxStatus.value = 'error'; scannedBoxCode.value = code
      } else if (tagStatus.value !== 'success' && expectedClientTag.value) {
        tagStatus.value = 'error'; scannedClientTag.value = code
      }
      addHistory(code, 'error', '不匹配 ✗')
      ElMessage.error('扫描的码值与期望不匹配，请核对！')
    }

    await saveVerifyRecord()
  }
  focusScan()
}

// === 查询产品信息 ===
const fetchProductInfo = async (packCode) => {
  try {
    const param = [['产品编号', packCode]]
    const data = CreateData('11', 'PACK下线三码校验_查询', param)
    const res = await ExecDatabase(data)
    const rows = Array.isArray(res.data) ? res.data : []
    if (!rows.length) { ElMessage.warning('未查询到该PACK码对应的产品信息'); return }
    const row = rows[0]
    productInfo.productType = row.产品型号 || ''
    productInfo.engineTypeID = row.机型代码 || 0
    productInfo.moduleCode = row.模组码 || ''
    productInfo.boxCode = row.箱体码 || ''
    productInfo.onlineTime = row.上线时间 || ''
    // 机型代码2/3不扫描箱体码
    if (productInfo.engineTypeID === 2 || productInfo.engineTypeID === 3) {
      expectedBoxCode.value = ''
      boxStatus.value = 'skip'
    } else {
      expectedBoxCode.value = row.箱体码 || ''
    }
    // 获取客户标签码
    await fetchClientTag(packCode, productInfo.engineTypeID)
    await saveVerifyRecord(false)
  } catch (e) {
    console.error('查询产品信息失败:', e)
    ElMessage.error('查询产品信息失败')
  }
}

// === 获取客户标签码 ===
const fetchClientTag = async (engineID, engineTypeID) => {
  if (!engineID || !engineTypeID) { expectedClientTag.value = ''; return }
  clientTagLoading.value = true
  try {
    const resp = await axios.post(
      `${window.g.API_MES_Controller_URL}/GetClientTagValue`,
      { MsgId: Date.now().toString(), EngineID: engineID, EngineTypeID: engineTypeID },
      { timeout: 15000 }
    )
    const d = resp.data
    if ((d.Code === '200' || d.Code === 200) && d.TagValue) {
      expectedClientTag.value = d.TagValue
    } else {
      expectedClientTag.value = ''
      ElMessage.warning('获取客户标签码失败：' + (d.Message || '无可用标签码'))
    }
  } catch (e) {
    console.error('获取客户标签码失败:', e)
    expectedClientTag.value = ''
    ElMessage.error('获取客户标签码接口调用失败')
  } finally {
    clientTagLoading.value = false
  }
}

// === 校验过程写库 ===
const getVerifyResult = (status) => {
  if (status === 'success' || status === 'skip') return 1
  if (status === 'error') return 2
  return 0
}
const saveVerifyRecord = async (showSuccessMessage = true) => {
  try {
    if (!productInfo.productNo) return
    const verifyPassed = allSuccess.value
    const verifyStatus = verifyPassed ? 1 : hasError.value ? 2 : 0
    const param = [
      ['产品编号', productInfo.productNo],
      ['产品型号', productInfo.productType],
      ['机型代码', productInfo.engineTypeID],
      ['期望箱体码', expectedBoxCode.value],
      ['期望客户标签码', expectedClientTag.value],
      ['扫描箱体码', boxStatus.value === 'success' ? scannedBoxCode.value : ''],
      ['扫描客户标签码', tagStatus.value === 'success' ? scannedClientTag.value : ''],
      ['箱体码校验结果', getVerifyResult(boxStatus.value)],
      ['客户标签码校验结果', getVerifyResult(tagStatus.value)],
      ['校验状态', verifyStatus],
      ['操作人', loginUserName.value]
    ]
    const data = CreateData('11', 'PACK下线三码校验_记录_增加', param)
    await ExecDatabase(data)
    if (verifyPassed && showSuccessMessage) {
      ElMessage.success('三码校验通过，已记录！')
      addHistory('--- 三码校验完成 ---', 'success', '全部通过 ✓✓✓')
    }
  } catch (e) {
    console.error('保存校验记录失败:', e)
    ElMessage.error('校验记录保存失败，请联系管理员')
  }
}

// === 计算属性：卡片样式 ===
const cardClass = (status) => status === 'success' ? 'card-success' : status === 'error' ? 'card-error' : 'card-idle'
const cardIcon = (status) => status === 'success' ? 'CircleCheck' : status === 'error' ? 'Warning' : status === 'skip' ? 'Remove' : 'Clock'
const packCardClass = computed(() => cardClass(packStatus.value))
const boxCardClass = computed(() => cardClass(boxStatus.value))
const tagCardClass = computed(() => cardClass(tagStatus.value))
const packIcon = computed(() => cardIcon(packStatus.value))
const boxIcon = computed(() => cardIcon(boxStatus.value))
const tagIcon = computed(() => cardIcon(tagStatus.value))

const packStatusText = computed(() => packStatus.value === 'success' ? '已锁定' : '待扫描')
const boxStatusText = computed(() => {
  if (boxStatus.value === 'skip') return '无需扫描'
  if (clientTagLoading.value && boxStatus.value === 'idle') return '待扫描'
  return boxStatus.value === 'success' ? '校验通过' : boxStatus.value === 'error' ? '不匹配！请重扫' : expectedBoxCode.value ? '待扫描' : '等待PACK码'
})
const tagStatusText = computed(() => {
  if (clientTagLoading.value) return '标签码获取中...'
  return tagStatus.value === 'success' ? '校验通过' : tagStatus.value === 'error' ? '不匹配！请重扫' : expectedClientTag.value ? '待扫描' : '等待PACK码'
})

// === 整体状态 ===
const hasError = computed(() => boxStatus.value === 'error' || tagStatus.value === 'error')
const boxOk = computed(() => boxStatus.value === 'success' || boxStatus.value === 'skip')
const allSuccess = computed(() => packStatus.value === 'success' && boxOk.value && tagStatus.value === 'success')
const totalCodes = computed(() => boxStatus.value === 'skip' ? 2 : 3)
const successCount = computed(() => {
  let c = 0
  if (packStatus.value === 'success') c++
  if (boxStatus.value === 'success') c++
  if (tagStatus.value === 'success') c++
  return c
})

const overallBannerClass = computed(() => allSuccess.value ? 'banner-success' : hasError.value ? 'banner-error' : 'banner-idle')
const overallStatusText = computed(() => {
  if (allSuccess.value) return boxStatus.value === 'skip' ? '两码校验全部通过！' : '三码校验全部通过！'
  if (hasError.value) return '校验不匹配，请核对后重新扫描'
  if (!productInfo.productNo) return '请扫描PACK码开始校验'
  return '校验进行中...'
})
const overallProgress = computed(() => {
  if (!productInfo.productNo) return ''
  if (allSuccess.value) return `${totalCodes.value}/${totalCodes.value}`
  return `${successCount.value}/${totalCodes.value}`
})
const overallIcon = computed(() => allSuccess.value ? 'CircleCheck' : hasError.value ? 'Warning' : 'Clock')
const pageStatusClass = computed(() => allSuccess.value ? 'page-success' : hasError.value ? 'page-error' : '')

// === 生命周期 ===
onMounted(() => {
  setTimeout(() => {
    if (permissionVerifyRef.value) {
      permissionVerifyRef.value.setCreateData(CreateData)
      permissionVerifyRef.value.setExecDatabase(ExecDatabase)
      permissionVerifyRef.value.setStore({ state: { station: { stationNumber: '' }, user: { name: Cookie.get('userName') || '' } } })
      checkPermission()
    } else { ElMessage.error('权限验证组件初始化失败') }
  }, 300)
})
</script>

<style lang="scss" scoped>
.three-code-page {
  width: 100%; height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  overflow: hidden; transition: background 0.5s ease;
  &.page-success { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); }
  &.page-error { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); }
}

// 头部 - 紧凑
.header-bar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); flex-shrink: 0;
  .header-left { cursor: pointer;
    h1 { margin: 0; font-size: 20px; font-weight: 700; }
    p { margin: 1px 0 0; font-size: 12px; opacity: 0.85; }
  }
  .header-right { display: flex; align-items: center; gap: 12px;
    .user-info { font-size: 14px; opacity: 0.95; }
  }
}

// 主体 - 紧凑间距，禁止滚动
.main-body {
  flex: 1; padding: 10px 16px; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
}

// 扫码区
.scan-section {
  flex-shrink: 0;
  .scan-box {
    display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px;
    padding: 8px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border: 2px solid #667eea;
    .scan-input {
      flex: 1; border: none; outline: none; font-size: 18px; font-weight: 500;
      color: #303133; background: transparent; height: 34px;
      &::placeholder { color: #c0c4cc; font-weight: 400; font-size: 15px; }
    }
  }
  .last-scan {
    margin-top: 4px; padding: 2px 14px; display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: #606266;
    .ls-label { color: #909399; }
    .ls-value { font-family: 'Consolas', monospace; font-weight: 600; color: #303133;
      max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ls-time { color: #909399; }
  }
}

// 整体状态横幅 - 醒目
.overall-banner {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 10px;
  font-size: 22px; font-weight: 700; transition: all 0.4s ease;
  &.banner-idle { background: #f4f4f5; color: #909399; border: 2px solid #dcdfe6; }
  &.banner-success {
    background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
    color: #fff; border: 2px solid #43a047;
    box-shadow: 0 4px 20px rgba(67, 160, 71, 0.4);
    animation: pulse-green 1.5s ease-in-out infinite;
  }
  &.banner-error {
    background: linear-gradient(135deg, #ef6c00 0%, #fb8c00 100%);
    color: #fff; border: 2px solid #ef6c00;
    box-shadow: 0 4px 20px rgba(239, 108, 0, 0.4);
    animation: pulse-orange 1s ease-in-out 3;
  }
  .overall-progress { font-size: 18px; opacity: 0.9; font-weight: 600; }
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 4px 20px rgba(67, 160, 71, 0.4); }
  50% { box-shadow: 0 4px 40px rgba(67, 160, 71, 0.7); }
}
@keyframes pulse-orange {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.01); }
}

// 三码卡片 - 每行一个，横向排列内容
.code-cards {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.code-card {
  border-radius: 10px; padding: 14px 20px; transition: all 0.4s ease;
  border: 3px solid transparent;
  display: flex; align-items: center; gap: 14px;
  .card-icon { flex-shrink: 0; }
  .card-label { font-size: 18px; font-weight: 700; min-width: 100px; flex-shrink: 0; }
  .card-value {
    flex: 1; font-size: 18px; font-family: 'Consolas', monospace; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .card-scan {
    font-size: 14px; opacity: 0.8; max-width: 220px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .card-status { font-size: 17px; font-weight: 700; flex-shrink: 0; min-width: 110px; text-align: right; }

  &.card-idle {
    background: #fff; border-color: #dcdfe6; color: #909399;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    .card-value { color: #606266; }
  }
  &.card-success {
    background: linear-gradient(145deg, #43a047, #66bb6a); border-color: #388e3c; color: #fff;
    box-shadow: 0 4px 20px rgba(67, 160, 71, 0.35);
    .card-value { color: #fff; }
    .card-status { color: rgba(255,255,255,0.95); }
  }
  &.card-error {
    background: linear-gradient(145deg, #ef6c00, #fb8c00); border-color: #e65100; color: #fff;
    box-shadow: 0 4px 20px rgba(239, 108, 0, 0.35);
    animation: shake 0.5s ease-in-out;
    .card-value { color: #fff; }
    .card-status { color: rgba(255,255,255,0.95); }
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

// 产品信息 - 两列显示
.product-info {
  flex-shrink: 0;
  background: #fff; border-radius: 10px; padding: 12px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  .info-title { font-size: 15px; font-weight: 600; color: #909399; margin-bottom: 8px; }
  .info-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px;
    .info-item {
      .il { display: block; font-size: 14px; color: #909399; margin-bottom: 1px; }
      .iv { display: block; font-size: 16px; color: #303133; font-weight: 600; word-break: break-all; }
    }
  }
}

// 扫码历史 - 占剩余空间但限制高度，内部滚动
.scan-history {
  flex: 1; min-height: 0; max-height: 140px;
  background: #fff; border-radius: 10px; padding: 6px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex; flex-direction: column; overflow: hidden;
  .history-title { font-size: 13px; font-weight: 600; color: #909399; margin-bottom: 2px; flex-shrink: 0; }
  .history-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
  .history-item {
    display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 13px;
    border-bottom: 1px solid #f8f8f9;
    .hi-time { color: #909399; min-width: 55px; font-size: 12px; }
    .hi-code { flex: 1; font-family: 'Consolas', monospace; color: #303133; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  }
}

// 权限等待
.auth-loading { display: flex; justify-content: center; align-items: center; height: 100vh; color: #909399; font-size: 16px; }

// PAD响应式 - 小于480px才竖排
@media (max-width: 480px) {
  .code-cards { grid-template-columns: 1fr; }
  .product-info .info-grid { grid-template-columns: repeat(2, 1fr); }
}
</style>
