<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"
                :label="$t('paperTubeInnerDiameter')"
              />
            </v-col>
            <v-col cols="12">
              <param-input-field
                v-model="paperRollWallThickness"
                :label="$t('paperRollWallThickness')"
              />
            </v-col>
            <v-col cols="12">
              <param-input-field
                v-model="innerPaperWidth"
                :label="$t('innerPaperWidth')"
              />
            </v-col>
          </v-row>

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

          <v-row>
            <v-btn
              block
              color="warning"
              prepend-icon="mdi-refresh"
              size="large"
              variant="outlined"
              @click="resetParameters"
            >
              {{ $t('reset') }}
            </v-btn>
          </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-list lines="two">
            <result-section :label="$t('beltAngle')" :value="result.beltAngle" />
            <result-section :label="$t('paperHolderAngle')" :value="result.paperHolderAngle" />
            <result-section :label="$t('leadingLength')" :value="result.leadingLength" />
            <result-section :label="$t('paperWidth')" :value="result.paperWidth" />
          </v-list>

          <v-expansion-panels flat multiple>
            <v-expansion-panel hide-actions>
              <v-expansion-panel-title class="text-warning font-weight-bold">
                <template #default="{ expanded }">
                  <span>
                    <v-icon icon="mdi-information-outline" />
                    {{ expanded ? $t('calculationParameters') : $t('expandToShowCalculationParameters') }}
                  </span>
                </template>
              </v-expansion-panel-title>
              <v-expansion-panel-text>
                <v-row>
                  <v-col cols="6">
                    <input-param-section :label="$t('paperTubeInnerDiameter')" :value="paperCoreDiameter" />
                  </v-col>
                  <v-col cols="6">
                    <input-param-section :label="$t('paperRollWallThickness')" :value="paperRollWallThickness" />
                  </v-col>
                  <v-col cols="12">
                    <input-param-section :label="$t('innerPaperWidth')" :value="innerPaperWidth" />
                  </v-col>
                </v-row>
              </v-expansion-panel-text>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import ParamInputField from '@/components/ParamInputField.vue'
  import { createParam, type Param } from '@/types/param'
  import { degreesToRadians, radiansToDegrees } from '@/utils/angle'

  const paperCoreDiameter = ref<Param>(createParam(76.2, 'mm'))
  const paperRollWallThickness = ref<Param>(createParam(10, 'mm'))
  const innerPaperWidth = ref<Param>(createParam(105, 'mm'))

  const result = computed(() => {
    const paperRollExternalDiameter = paperCoreDiameter.value.value + 2 * paperRollWallThickness.value.value
    const paperHolderAngle = 90 - radiansToDegrees(Math.acos(innerPaperWidth.value.value / (paperCoreDiameter.value.value * Math.PI)))
    const leadingLength = innerPaperWidth.value.value / Math.sin(degreesToRadians(90 - paperHolderAngle))
    const beltAngle = 90 - radiansToDegrees(Math.atan(paperRollExternalDiameter * Math.PI / leadingLength))
    const paperWidth = leadingLength * Math.sin(Math.atan(paperRollExternalDiameter * Math.PI / leadingLength))

    return {
      beltAngle: createParam(beltAngle, 'degree'),
      paperHolderAngle: createParam(paperHolderAngle, 'degree'),
      leadingLength: createParam(leadingLength, 'mm'),
      paperWidth: createParam(paperWidth, 'mm'),
    }
  })

  const resetParameters = () => {
    paperCoreDiameter.value = createParam(76.2, 'mm')
    paperRollWallThickness.value = createParam(10, 'mm')
    innerPaperWidth.value = createParam(105, 'mm')
  }

</script>
