<template>
  <div class="periodic-table">
    <div class="periodic-table__grid" :style="gridStyle">
      <template v-for="(row, rowIndex) in grid" :key="rowIndex">
        <template v-for="(cell, colIndex) in row" :key="`${rowIndex}-${colIndex}`">
          <div
            v-if="cell"
            class="periodic-table__cell"
            :class="{
              'periodic-table__cell--empty': !cell.element,
              'periodic-table__cell--in-composition': cell.element && getCompositionValue(cell.element.symbol) != null
            }"
            :style="getCellStyle(cell)"
            :title="cell.element ? `${cell.element.name} (${cell.element.symbol})` : undefined"
            @dblclick="cell.element && startEdit(cell.element.symbol)"
          >
            <span v-if="cell.element" class="periodic-table__number">
              {{ cell.element.number }}
            </span>
            <span v-if="cell.element" class="periodic-table__symbol">
              {{ cell.element.symbol }}
            </span>
            <template v-if="cell.element">
              <el-input
                v-if="editingSymbol === cell.element.symbol"
                :ref="(el) => (inputRef = el)"
                v-model="editingValue"
                class="periodic-table__value-input"
                size="small"
                @keydown.enter.prevent="commitEdit()"
                @blur="commitEdit()"
              />
              <span v-else class="periodic-table__value">
                {{ formatCompositionValue(getCompositionValue(cell.element.symbol)) }}
              </span>
            </template>
          </div>
          <div v-else class="periodic-table__cell periodic-table__cell--empty" :style="emptyCellStyle" />
        </template>
      </template>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch, nextTick } from 'vue'
// 该json参考https://github.com/Bowserinator/Periodic-Table-JSON/blob/master/PeriodicTableJSON.json
import elementsData from './PeriodicTableJSON.json'

const props = defineProps({
  /** 是否显示 CPK 颜色, true为根据json的cpk颜色渲染，false为默认黑白色 */
  showColor: {
    type: Boolean,
    default: true
  },
  /** 单元格最小宽度（px） */
  cellSize: {
    type: Number,
    default: 48
  }
})

const chemicalComposition = defineModel('chemicalComposition', { type: String, default: '' })

/** 只取 1–118 号元素，排除 119 等未正式纳入周期表的 */
const elements = elementsData.elements.filter(e => e.number >= 1 && e.number <= 118)

/** 按 (displayRow, xpos-1) 建立映射：行 0–6 为 ypos 1–7，行 8 为 ypos 9（镧系），行 9 为 ypos 10（锕系） */
const positionMap = new Map()
for (const el of elements) {
  // 只处理主表(ypos 1-7)、镧系(ypos 9)、锕系(ypos 10)，跳过第 8 周期假想元素
  if (el.ypos === 8 || el.ypos < 1 || el.ypos > 10) continue
  const displayRow = el.ypos - 1
  const col = el.xpos - 1
  positionMap.set(`${displayRow}-${col}`, { element: el })
}

/** 网格：10 行 × 18 列 */
const grid = []
for (let r = 0; r < 10; r++) {
  const row = []
  for (let c = 0; c < 18; c++) {
    const key = `${r}-${c}`
    row.push(positionMap.get(key) || null)
  }
  grid.push(row)
}

const gridStyle = computed(() => ({
  display: 'grid',
  gridTemplateColumns: `repeat(18, ${props.cellSize}px)`,
  gridTemplateRows: `repeat(10, ${props.cellSize}px)`,
  gap: '2px'
}))

/** 解析化学成分 JSON 为 symbol -> value */
function safeParseComposition(str) {
  if (!str || !String(str).trim()) return {}
  try {
    const parsed = JSON.parse(str)
    return typeof parsed === 'object' && parsed !== null ? parsed : {}
  } catch {
    return {}
  }
}

const compositionDraft = ref({})

watch(
  chemicalComposition,
  (val) => {
    compositionDraft.value = safeParseComposition(val)
  },
  { immediate: true }
)

function getCompositionValue(symbol) {
  const val = compositionDraft.value?.[symbol]
  return val === undefined || val === null ? undefined : val
}

function formatCompositionValue(value) {
  if (value === undefined || value === null) return ''
  const num = Number(value)
  return Number.isFinite(num) ? String(num) : String(value)
}

const editingSymbol = ref('')
const editingValue = ref('')
/** el-input 组件实例，用于调用 focus() */
let inputRef = null

function startEdit(symbol) {
  editingSymbol.value = symbol
  editingValue.value = formatCompositionValue(getCompositionValue(symbol))
  nextTick(() => {
    // el-input 组件暴露了 focus() 方法
    inputRef?.focus?.()
  })
}

function commitEdit() {
  const symbol = editingSymbol.value
  if (!symbol) return

  const raw = String(editingValue.value ?? '').trim()
  if (!raw) {
    // 空值视为删除该元素含量（并取消红框）
    if (compositionDraft.value && Object.prototype.hasOwnProperty.call(compositionDraft.value, symbol)) {
      delete compositionDraft.value[symbol]
    }
  } else {
    const num = Number(raw)
    compositionDraft.value[symbol] = Number.isFinite(num) ? num : raw
  }

  editingSymbol.value = ''
  editingValue.value = ''
  // 使用 defineModel 直接赋值更新父组件
  chemicalComposition.value = JSON.stringify(compositionDraft.value, null, 2)
}

const emptyCellStyle = {
  backgroundColor: 'transparent',
  border: 'none',
  boxShadow: 'none'
}

function getCellStyle(cell) {
  if (!cell?.element) return {}
  const style = {
    border: '1px solid var(--el-border-color, #dcdfe6)',
    borderRadius: 'var(--el-border-radius-small, 4px)'
  }
  if (props.showColor && cell.element['cpk-hex']) {
    const hex = cell.element['cpk-hex']
    style.backgroundColor = `#${hex}`
    style.color = getContrastColor(hex)
  } else {
    style.backgroundColor = 'var(--el-bg-color, #ffffff)'
    style.color = 'var(--el-text-color-primary, #303133)'
  }
  return style
}

/** 根据背景亮度选黑/白文字 */
function getContrastColor(hex) {
  const r = parseInt(hex.slice(0, 2), 16) / 255
  const g = parseInt(hex.slice(2, 4), 16) / 255
  const b = parseInt(hex.slice(4, 6), 16) / 255
  const l = 0.299 * r + 0.587 * g + 0.114 * b
  return l > 0.5 ? '#1d1e1f' : '#fafafa'
}
</script>

<style lang="scss" scoped>
.periodic-table {
  display: inline-block;
  padding: var(--el-padding-base, 12px);
  background-color: var(--el-bg-color-page, #f2f3f5);
  border-radius: var(--el-border-radius-base, 8px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.periodic-table__grid {
  font-family: var(--el-font-family, 'Helvetica Neue', Helvetica, sans-serif);
}

.periodic-table__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px;
  cursor: default;
  transition: transform 0.15s ease, box-shadow 0.15s ease;

  &:hover {
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 1;
  }

  &--empty {
    cursor: default;
    background-color: transparent;
    border-color: transparent !important;

    &:hover {
      transform: none;
      box-shadow: none;
    }
  }

  &--in-composition {
    border: 1px solid var(--el-color-danger, #f56c6c) !important;
    background-color: var(--el-color-danger-light-9, rgba(245, 108, 108, 0.12)) !important;
    color: var(--el-text-color-primary, #303133) !important;
  }
}

.periodic-table__number {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 10px;
  line-height: 1;
  opacity: 0.9;
}

.periodic-table__symbol {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.periodic-table__value {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
}

.periodic-table__value-input {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 1px;
}
</style>