<template>
  <div class="calculator-container">
    <v-row justify="center">
      <!-- 参数输入区域 -->
      <v-col
        cols="12"
        lg="5"
        md="6"
      >
        <v-card
          class="pa-6 parameter-card"
          elevation="8"
          rounded="xl"
        >
          <v-card-title class="text-h5 mb-6 d-flex align-center">
            <v-icon
              class="mr-3"
              color="primary"
              icon="mdi-tune"
              size="large"
            />
            {{ $t('parameters') }}
          </v-card-title>

          <v-row>
            <v-col cols="12">
              <param-input-field
                v-model="paperCoreDiameter"
                :disabled="recordList.length > 0"
                :label="`${$t('paperCoreDiameter')} (${paperCoreDiameter.unit})`"
              />
            </v-col>
            <v-col cols="12">
              <param-input-field
                v-model="bottomPaperWidth"
                :disabled="recordList.length > 0"
                :label="`${$t('bottomPaperWidth')} (${bottomPaperWidth.unit})`"
              />
            </v-col>
            <v-col cols="12">
              <param-input-field
                v-model="paperGrammage"
                :label="`${$t('paperGrammage')} (${paperGrammage.unit})`"
              />
            </v-col>
            <v-col cols="12">
              <param-input-field
                v-model="paperDensity"
                :label="`${$t('paperDensity')} (${paperDensity.unit})`"
              />
            </v-col>
          </v-row>

          <v-divider class="my-6" />

          <v-row>
            <v-col cols="12">
              <div class="d-flex flex-column flex-sm-row justify-end align-center ga-3">
                <!-- 次要功能按钮组 -->
                <div class="d-flex ga-2 order-2 order-sm-1">
                  <v-btn
                    color="warning"
                    size="small"
                    variant="outlined"
                    @click="clearAll"
                  >
                    <v-icon class="mr-1">mdi-refresh</v-icon>
                    {{ $t('clear') }}
                  </v-btn>
                  <v-btn
                    color="success"
                    size="small"
                    variant="outlined"
                    @click="saveParams"
                  >
                    <v-icon class="mr-1">mdi-content-save</v-icon>
                    {{ $t('save') }}
                  </v-btn>
                </div>

                <!-- 主要功能按钮组 -->
                <v-btn-group
                  class="order-1 order-sm-2"
                  color="primary"
                  divided
                  variant="elevated"
                >
                  <v-btn
                    :size="$vuetify.display.xs ? 'default' : 'large'"
                    @click="removeLayer"
                  >
                    <v-icon class="mr-1">mdi-minus</v-icon>
                    {{ $t('remove') }}
                  </v-btn>
                  <v-btn
                    :size="$vuetify.display.xs ? 'default' : 'large'"
                    @click="addLayer"
                  >
                    <v-icon class="mr-1">mdi-plus</v-icon>
                    {{ $t('add') }}
                  </v-btn>
                </v-btn-group>
              </div>
            </v-col>
          </v-row>
        </v-card>
      </v-col>

      <!-- 结果显示区域 -->
      <v-col
        cols="12"
        lg="5"
        md="6"
      >
        <v-card
          class="pa-6 result-card"
          elevation="8"
          rounded="xl"
        >
          <v-card-title class="text-h5 mb-6 d-flex align-center">
            <v-icon
              class="mr-3"
              color="primary"
              icon="mdi-calculator"
              size="large"
            />
            {{ $t('results') }}
          </v-card-title>

          <v-table
            fixed-header
            theme="primary"
          >
            <thead>
              <tr>
                <th>{{ $t('layer') }}</th>
                <th>{{ $t('paperGrammage') }}</th>
                <th>{{ $t('cumulativeThickness') }}</th>
                <th>{{ $t('angle') }}</th>
                <th>{{ $t('paperWidth') }}</th>
              </tr>
            </thead>
            <transition-group name="fade" tag="tbody">
              <tr v-for="(record, index) in recordList" :key="index" class="table-row-item">
                <td>{{ record.layer }}</td>
                <td>{{ record.grammage.value.toFixed(2) }} {{ record.grammage.unit }}</td>
                <td>{{ record.cumulativeThickness.value.toFixed(2) }} {{ record.cumulativeThickness.unit }}</td>
                <td>{{ record.angle.value.toFixed(2) }} {{ record.angle.unit }}</td>
                <td>{{ record.paperWidth.value.toFixed(2) }} {{ record.paperWidth.unit }}</td>
              </tr>
            </transition-group>
          </v-table>
        </v-card>

      </v-col>
    </v-row>
  </div>
</template>

<script setup lang="ts">
  import * as EXCEL from 'exceljs'
  import { computed, ref } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { createParam, type Param } from '@/types/param'
  import { degreesToRadians, radiansToDegrees } from '@/utils/angle'

  const { t } = useI18n()

  interface LayerRecord {
    layer: number
    grammage: Param
    cumulativeThickness: Param
    angle: Param
    paperWidth: Param
  }

  const paperCoreDiameter = ref<Param>(createParam(76.2, 'mm'))
  const bottomPaperWidth = ref<Param>(createParam(100, 'mm'))
  const paperGrammage = ref<Param>(createParam(420, 'g/m²'))
  const paperDensity = ref<Param>(createParam(0.76, 'g/cm³'))

  const recordList = ref<LayerRecord[]>([])

  const result = computed(() => {
    const paperRollWallThickness = paperGrammage.value.value / paperDensity.value.value / 1000
    // eslint-disable-next-line unicorn/prefer-at
    const paperTotalThickness = recordList.value.length === 0 ? 0 : recordList.value[recordList.value.length - 1].cumulativeThickness.value
    const paperRollExternalDiameter = paperCoreDiameter.value.value + 2 * paperTotalThickness
    const paperAngle = 90 - radiansToDegrees(Math.acos(bottomPaperWidth.value.value / (paperCoreDiameter.value.value * Math.PI)))
    const leadingLength = bottomPaperWidth.value.value / Math.sin(degreesToRadians(90 - paperAngle))
    const beltAngle = 90 - radiansToDegrees(Math.atan(paperRollExternalDiameter * Math.PI / leadingLength))
    const paperWidth = leadingLength * Math.sin(degreesToRadians(radiansToDegrees(Math.atan(paperRollExternalDiameter * Math.PI / leadingLength))))

    return {
      layer: recordList.value.length + 1,
      grammage: paperGrammage.value,
      cumulativeThickness: createParam(paperTotalThickness + paperRollWallThickness, 'mm'),
      angle: createParam(beltAngle, '°'),
      paperWidth: createParam(paperWidth, 'mm'),
    }
  })

  // 按钮功能方法
  const clearAll = () => {
    recordList.value = []
  }

  const saveParams = async () => {
    if (recordList.value.length === 0) {
      console.warn('No records to save.')
      return
    }

    try {
      // 创建工作簿和工作表
      const workbook = new EXCEL.Workbook()
      const worksheet = workbook.addWorksheet(t('multiLayerExcelOutputFile'))

      // 创建样式
      // headerStyle: 表头样式，根据Excel内建样式Calculation设置
      const headerStyle: EXCEL.Style = {
        fill: {
          type: 'pattern',
          pattern: 'solid',
          fgColor: { argb: 'FFF2F2F2' },
        },
        font: {
          name: 'Arial',
          size: 11,
          bold: true,
          color: { argb: 'FFFA7D00' },
        },
        alignment: {
          horizontal: 'center',
          vertical: 'middle',
        },
        numFmt: 'General',
        protection: {},
        border: {
          top: { style: 'thin', color: { argb: 'FF7F7F7F' } },
          bottom: { style: 'thin', color: { argb: 'FF7F7F7F' } },
          left: { style: 'thin', color: { argb: 'FF7F7F7F' } },
          right: { style: 'thin', color: { argb: 'FF7F7F7F' } },
        },
      }
      // parameterStyle: 参数样式，使用默认样式
      const parameterStyle: EXCEL.Style = {
        font: {
          name: 'Arial',
          size: 12,
          color: { argb: 'FF000000' },
        },
        alignment: {
          horizontal: 'center',
          vertical: 'middle',
        },
        numFmt: 'General',
        protection: {},
        border: {},
        fill: {
          type: 'pattern',
          pattern: 'none',
        },
      }

      // valueStyle: 数值样式，使用默认样式，保留2位小数
      const valueStyle: EXCEL.Style = {
        font: {
          name: 'Arial',
          size: 12,
          color: { argb: 'FF000000' },
        },
        alignment: {
          horizontal: 'center',
          vertical: 'middle',
        },
        numFmt: '0.00',
        protection: {},
        border: {},
        fill: {
          type: 'pattern',
          pattern: 'none',
        },
      }
      // conditionStyle: 条件样式，使用默认样式
      const conditionStyle: EXCEL.Style = {
        font: {
          name: 'Arial',
          size: 16,
          bold: true,
          color: { argb: 'FF444444' },
        },
        alignment: {
          horizontal: 'center',
          vertical: 'middle',
        },
        numFmt: 'General',
        protection: {},
        border: {
          top: { style: 'thin', color: { argb: 'FF7F7F7F' } },
          bottom: { style: 'thin', color: { argb: 'FF7F7F7F' } },
          left: { style: 'thin', color: { argb: 'FF7F7F7F' } },
          right: { style: 'thin', color: { argb: 'FF7F7F7F' } },
        },
        fill: {
          type: 'pattern',
          pattern: 'none',
        },
      }

      // 添加Parameters表头
      worksheet.getCell('A1').value = t('parameters')
      worksheet.getCell('A1').style = headerStyle
      worksheet.mergeCells('A1:D1')

      worksheet.getCell('A2').value = `${t('paperCoreDiameter')} (${paperCoreDiameter.value.unit})`
      worksheet.getCell('A2').style = parameterStyle
      worksheet.mergeCells('A2:B2')

      worksheet.getCell('C2').value = `${t('bottomPaperWidth')} (${bottomPaperWidth.value.unit})`
      worksheet.getCell('C2').style = parameterStyle
      worksheet.mergeCells('C2:D2')

      // 添加Parameters数据
      worksheet.getCell('A3').value = paperCoreDiameter.value.value
      worksheet.getCell('A3').style = valueStyle
      worksheet.mergeCells('A3:B3')

      worksheet.getCell('C3').value = bottomPaperWidth.value.value
      worksheet.getCell('C3').style = valueStyle
      worksheet.mergeCells('C3:D3')

      // 添加Results表头
      worksheet.getCell('A7').value = t('results')
      worksheet.getCell('A7').style = headerStyle
      worksheet.mergeCells('A7:E7')

      // 添加Results表头列名
      worksheet.getCell('A8').value = t('layer')
      worksheet.getCell('A8').style = parameterStyle
      worksheet.getCell('B8').value = t('paperGrammage') + ` (${recordList.value[0].grammage.unit})`
      worksheet.getCell('B8').style = parameterStyle
      worksheet.getCell('C8').value = t('cumulativeThickness') + ` (${recordList.value[0].cumulativeThickness.unit})`
      worksheet.getCell('C8').style = parameterStyle
      worksheet.getCell('D8').value = t('angle') + ` (${recordList.value[0].angle.unit})`
      worksheet.getCell('D8').style = parameterStyle
      worksheet.getCell('E8').value = t('paperWidth') + ` (${recordList.value[0].paperWidth.unit})`
      worksheet.getCell('E8').style = parameterStyle

      // 添加Results数据
      for (const [index, record] of recordList.value.entries()) {
        worksheet.getCell(`A${index + 9}`).value = record.layer
        worksheet.getCell(`A${index + 9}`).style = parameterStyle
        worksheet.getCell(`B${index + 9}`).value = record.grammage.value
        worksheet.getCell(`B${index + 9}`).style = valueStyle
        worksheet.getCell(`C${index + 9}`).value = record.cumulativeThickness.value
        worksheet.getCell(`C${index + 9}`).style = valueStyle
        worksheet.getCell(`D${index + 9}`).value = record.angle.value
        worksheet.getCell(`D${index + 9}`).style = valueStyle
        worksheet.getCell(`E${index + 9}`).value = record.paperWidth.value
        worksheet.getCell(`E${index + 9}`).style = valueStyle
      }

      // 添加Reference表头
      worksheet.getCell('F1').value = t('reference')
      worksheet.getCell('F1').style = headerStyle
      worksheet.mergeCells('F1:H1')
      worksheet.getCell('F2').value = t('angle')
      worksheet.getCell('F2').style = parameterStyle
      worksheet.mergeCells('F2:F3')
      worksheet.getCell('G2').value = t('minimum')
      worksheet.getCell('G2').style = parameterStyle
      worksheet.getCell('H2').value = t('maximum')
      worksheet.getCell('H2').style = parameterStyle

      // 添加Reference数据
      worksheet.getCell('G3').value = 10
      worksheet.getCell('G3').style = parameterStyle
      worksheet.getCell('H3').value = 45
      worksheet.getCell('H3').style = parameterStyle
      worksheet.getCell('F4').value = t('calculatedValue')
      worksheet.getCell('F4').style = parameterStyle
      // 所有记录中最小角度
      worksheet.getCell('G4').value = {
        formula: `MIN(D9:D${8 + recordList.value.length})`,
      }
      worksheet.getCell('G4').style = valueStyle
      // 所有记录中最大角度
      worksheet.getCell('H4').value = {
        formula: `MAX(D9:D${8 + recordList.value.length})`,
      }
      worksheet.getCell('H4').style = valueStyle

      // 计算结果: 最小角度>10 且 最大角度<45
      worksheet.getCell('F5').value = {
        formula: `IF(AND(G4>10, H4<45), "${t('fit')}", "${t('notFit')}")`,
      }
      worksheet.getCell('F5').style = conditionStyle
      worksheet.addConditionalFormatting({
        ref: 'F5',
        rules: [
          {
            type: 'expression',
            formulae: ['OR(G4<=10, H4>=45)'],
            style: {
              fill: { type: 'pattern', pattern: 'solid', bgColor: { argb: 'FFFF7F7F' } }, // 红色背景
            },
            priority: 1,
          },
          {
            type: 'expression',
            formulae: ['AND(G4>10, H4<45)'],
            style: {
              fill: { type: 'pattern', pattern: 'solid', bgColor: { argb: 'FFA6E65C' } }, // 绿色背景
            },
            priority: 1,
          },
        ],
      })
      worksheet.mergeCells('F5:H6')

      // 自动调整列宽
      for (const [index, column] of worksheet.columns.entries()) {
        let maxLength = 0

        if (column && typeof column.eachCell === 'function') {
          column.eachCell({ includeEmpty: true }, cell => {
            const cellValue = cell.value ? String(cell.value) : ''
            if (cellValue.length > maxLength) {
              maxLength = cellValue.length
            }
          })

          // 设置列宽
          column.width = maxLength + 4 // 增加一些额外空间
        }
      }

      // 设置文件名
      const timeStamp = new Date().toISOString().replace(/[-:T]/g, '').slice(0, 15)
      const filename = `${t('multiLayerExcelOutputFile')}_${timeStamp}.xlsx`

      // 导出为文件
      const buffer = await workbook.xlsx.writeBuffer()
      const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })

      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = filename
      document.body.append(link)
      link.click()
      link.remove()
      window.URL.revokeObjectURL(url)

      console.log('Saved as Excel file:', filename)
    } catch (error) {
      console.error('Error saving parameters:', error)
      return
    }
  }

  const addLayer = () => {
    // 添加层的逻辑
    recordList.value.push({
      layer: result.value.layer,
      grammage: result.value.grammage,
      cumulativeThickness: result.value.cumulativeThickness,
      angle: result.value.angle,
      paperWidth: result.value.paperWidth,
    })
  }

  const removeLayer = () => {
    // 移除层的逻辑
    recordList.value.pop()
  }
</script>

<style scoped>
.table-row-item {
  /* ensure rows still render as table rows */
  display: table-row;
}

/* enter/leave transitions */
.fade-enter-active,
.fade-leave-active {
  transition: all 300ms ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

</style>
