<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('paperCoreDiameter')} (${paperCoreDiameter.unit})`"
              />
            </v-col>
            <v-col cols="12">
              <param-input-field
                v-model="paperRollExternalDiameter"
                :label="`${$t('paperRollExternalDiameter')} (${paperRollExternalDiameter.unit})`"
              />
            </v-col>
            <v-col cols="12">
              <param-input-field
                v-model="paperRollWidth"
                :label="`${$t('paperRollWidth')} (${paperRollWidth.unit})`"
              />
            </v-col>
            <v-col cols="12">
              <param-input-field
                v-model="paperDensity"
                :label="`${$t('paperDensity')} (${paperDensity.unit})`"
              />
            </v-col>
            <v-col cols="12">
              <param-input-field
                v-model="paperGrammage"
                :label="`${$t('paperGrammage')} (${paperGrammage.unit})`"
              />
            </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-row>
            <v-col cols="12">
              <result-card
                :label="$t('paperRollWeight')"
                :value="result.paperRollWeight"
              />
            </v-col>
            <v-col cols="12">
              <result-card
                :label="$t('paperRollLength')"
                :value="result.paperRollLength"
              />
            </v-col>
            <v-col cols="12">
              <result-card
                :label="$t('paperThickness')"
                :value="result.paperThickness"
              />
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { createParam, type Param } from '@/types/param'

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

  const result = computed(() => {
    const paperRollExternalRadius = paperRollExternalDiameter.value.value / 2
    const paperCoreRadius = paperCoreDiameter.value.value / 2
    const paperRollVolume = (Math.PI * Math.pow(paperRollExternalRadius, 2) - Math.PI * Math.pow(paperCoreRadius, 2)) * paperRollWidth.value.value
    const paperThickness = paperGrammage.value.value / paperDensity.value.value / 1000 // 计算纸张厚度
    const paperRollWeight = paperRollVolume * paperDensity.value.value / 1_000_000 // 计算重量
    const paperRollLength = paperRollVolume / (paperThickness * paperRollWidth.value.value) / 1000 // 计算长度
    return {
      paperRollWeight: createParam(paperRollWeight, 'kg'),
      paperRollLength: createParam(paperRollLength, 'm'),
      paperThickness: createParam(paperThickness, 'mm'),
    }
  })

  const resetParameters = () => {
    paperCoreDiameter.value = createParam(76.2, 'mm')
    paperRollExternalDiameter.value = createParam(200, 'mm')
    paperRollWidth.value = createParam(100, 'mm')
    paperDensity.value = createParam(0.76, 'g/cm³')
    paperGrammage.value = createParam(420, 'g/m²')
  }
</script>

<style scoped lang="sass">

</style>
