<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="6">
              <v-select
                v-model="currentSelect"
                density="comfortable"
                :items="selects"
                :label="$t('presetSpecifications')"
                @update:model-value="updateParams"
              />
            </v-col>
            <v-col cols="12">
              <param-input-field v-model="paperCoreDiameter" :disabled="!isCustomMode" :label="$t('paperTubeInnerDiameter')" />
            </v-col>
            <v-col cols="12">
              <param-input-field v-model="bottomPaperWidth" :disabled="!isCustomMode" :label="$t('bottomPaperWidth')" />
            </v-col>
            <v-col cols="12">
              <param-input-field v-model="bottomPaperThickness" :label="$t('bottomPaperThickness')" />
            </v-col>
            <v-col cols="12">
              <param-input-field v-model="secondLayerPaperThickness" :label="$t('secondLayerPaperThickness')" />
            </v-col>
            <v-col cols="12">
              <param-input-field v-model="thirdLayerPaperThickness" :label="$t('thirdLayerPaperThickness')" />
            </v-col>
            <v-col cols="12">
              <param-input-field v-model="topPaperThickness" :label="$t('topPaperThickness')" />
            </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('paperStrawResult.paperTubeInnerDiameter')}`"
                :value="result.paperCoreDiameter"
              />
            </v-col>
            <v-col cols="12">
              <result-card
                :label="`${$t('paperStrawResult.paperTubeExternalDiameter')}`"
                :value="result.paperTubeExternalDiameter"
              />
            </v-col>
            <v-col cols="12">
              <result-card
                :label="`${$t('paperStrawResult.paperTubeThickness')}`"
                :value="result.paperTubeWallThickness"
              />
            </v-col>
            <v-col cols="12">
              <result-card
                :label="`${$t('paperStrawResult.bottomPaperAngle')}`"
                :value="result.bottomPaperAngle"
              />
            </v-col>
            <v-col cols="12">
              <result-card
                :label="`${$t('paperStrawResult.leadingLength')}`"
                :value="result.leadingLength"
              />
            </v-col>
            <v-col cols="12">
              <result-card
                :label="`${$t('paperStrawResult.bottomPaperWidth')}`"
                :value="result.bottomPaperWidth"
              />
            </v-col>
            <v-col cols="12">
              <result-card
                :label="`${$t('paperStrawResult.secondLayerPaperWidth')}`"
                :value="result.secondLayerPaperWidth"
              />
            </v-col>
            <v-col cols="12">
              <result-card
                :label="`${$t('paperStrawResult.thirdLayerPaperWidth')}`"
                :value="result.thirdLayerPaperWidth"
              />
            </v-col>
            <v-col cols="12">
              <result-card
                :label="`${$t('paperStrawResult.topPaperWidth')}`"
                :value="result.topPaperWidth"
              />
            </v-col>
            <v-col cols="12">
              <result-card
                :label="`${$t('paperStrawResult.beltWidth')}`"
                :value="result.beltWidth"
              />
            </v-col>
          </v-row>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

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

  const { t, locale } = useI18n()

  const currentSelect = ref('')
  const currentSelectIndex = ref(0)

  const selects = computed(() => [
    t('presetSpecification.inner_3_3_outer_4_0'),
    t('presetSpecification.inner_3_8_outer_4_5'),
    t('presetSpecification.inner_4_3_outer_5_0'),
    t('presetSpecification.inner_5_3_outer_6_0'),
    t('presetSpecification.inner_6_3_outer_7_0'),
    t('presetSpecification.inner_7_3_outer_8_0'),
    t('presetSpecification.inner_8_3_outer_9_0'),
    t('presetSpecification.inner_9_3_outer_10_0'),
    t('presetSpecification.inner_11_3_outer_12_0'),
    t('custom'),
  ])

  const presetParams = computed(() => {
    return {
      [t('presetSpecification.inner_3_3_outer_4_0')]: {
        paperCoreDiameter: 3.3,
        bottomPaperWidth: 9.5,
      },
      [t('presetSpecification.inner_3_8_outer_4_5')]: {
        paperCoreDiameter: 3.8,
        bottomPaperWidth: 10,
      },
      [t('presetSpecification.inner_4_3_outer_5_0')]: {
        paperCoreDiameter: 4.3,
        bottomPaperWidth: 11,
      },
      [t('presetSpecification.inner_5_3_outer_6_0')]: {
        paperCoreDiameter: 5.3,
        bottomPaperWidth: 13.5,
      },
      [t('presetSpecification.inner_6_3_outer_7_0')]: {
        paperCoreDiameter: 6.3,
        bottomPaperWidth: 16,
      },
      [t('presetSpecification.inner_7_3_outer_8_0')]: {
        paperCoreDiameter: 7.3,
        bottomPaperWidth: 18.5,
      },
      [t('presetSpecification.inner_8_3_outer_9_0')]: {
        paperCoreDiameter: 8.3,
        bottomPaperWidth: 21,
      },
      [t('presetSpecification.inner_9_3_outer_10_0')]: {
        paperCoreDiameter: 9.3,
        bottomPaperWidth: 23.5,
      },
      [t('presetSpecification.inner_11_3_outer_12_0')]: {
        paperCoreDiameter: 11.3,
        bottomPaperWidth: 28.5,
      },
    }
  })

  const paperCoreDiameter = ref<Param>(createParam(3.3, 'mm'))
  const bottomPaperWidth = ref<Param>(createParam(9.5, 'mm'))
  const bottomPaperThickness = ref<Param>(createParam(120, 'g_per_m2'))
  const secondLayerPaperThickness = ref<Param>(createParam(120, 'g_per_m2'))
  const thirdLayerPaperThickness = ref<Param>(createParam(60, 'g_per_m2'))
  const topPaperThickness = ref<Param>(createParam(60, 'g_per_m2'))

  const result = computed(() => {
    // 计算逻辑待补充
    const totalThickness
      = (bottomPaperThickness.value.value
        + secondLayerPaperThickness.value.value
        + thirdLayerPaperThickness.value.value
        + topPaperThickness.value.value) / 800
    const paperTubeExternalDiameter
      = paperCoreDiameter.value.value + totalThickness * 2

    const bottomPaperAngle = 90 - radiansToDegrees(Math.acos(bottomPaperWidth.value.value / (paperCoreDiameter.value.value * Math.PI)))
    const leadingLength = bottomPaperWidth.value.value / Math.sin(degreesToRadians(90 - bottomPaperAngle))

    const secondLayerPaperWidth = leadingLength * Math.sin(degreesToRadians(radiansToDegrees(Math.atan((paperCoreDiameter.value.value + 2 * (bottomPaperThickness.value.value / 800)) * Math.PI / leadingLength))))
    const thirdLayerPaperWidth = leadingLength * Math.sin(degreesToRadians(radiansToDegrees(Math.atan((paperCoreDiameter.value.value + 2 * (bottomPaperThickness.value.value + secondLayerPaperThickness.value.value) / 800) * Math.PI / leadingLength))))
    const topPaperWidth = leadingLength * Math.sin(degreesToRadians(radiansToDegrees(Math.atan((paperCoreDiameter.value.value + 2 * (bottomPaperThickness.value.value + secondLayerPaperThickness.value.value + thirdLayerPaperThickness.value.value) / 800) * Math.PI / leadingLength))))

    const beltWidth = leadingLength * Math.sin(degreesToRadians(radiansToDegrees(Math.atan((paperCoreDiameter.value.value + 2 * totalThickness) * Math.PI / leadingLength))))

    return {
      paperCoreDiameter: paperCoreDiameter.value,
      paperTubeExternalDiameter: createParam(paperTubeExternalDiameter, 'mm'),
      paperTubeWallThickness: createParam(totalThickness, 'mm'),
      bottomPaperAngle: createParam(bottomPaperAngle, 'degree'),
      leadingLength: createParam(leadingLength, 'mm'),
      bottomPaperWidth: bottomPaperWidth.value,
      secondLayerPaperWidth: createParam(secondLayerPaperWidth, 'mm'),
      thirdLayerPaperWidth: createParam(thirdLayerPaperWidth, 'mm'),
      topPaperWidth: createParam(topPaperWidth, 'mm'),
      beltWidth: createParam(beltWidth, 'mm'),
    }
  })

  const resetParameters = () => {
    paperCoreDiameter.value = createParam(3.3, 'mm')
    bottomPaperWidth.value = createParam(9.5, 'mm')
    bottomPaperThickness.value = createParam(120, 'g_per_m2')
    secondLayerPaperThickness.value = createParam(120, 'g_per_m2')
    thirdLayerPaperThickness.value = createParam(60, 'g_per_m2')
    topPaperThickness.value = createParam(60, 'g_per_m2')
  }

  const updateParams = (item: string) => {
    const selected = presetParams.value[item]
    currentSelectIndex.value = selects.value.indexOf(item)
    if (selected) {
      paperCoreDiameter.value = createParam(selected.paperCoreDiameter, 'mm')
      bottomPaperWidth.value = createParam(selected.bottomPaperWidth, 'mm')
    }
  }

  const isCustomMode = computed(() => {
    return currentSelectIndex.value === selects.value.length - 1
  })

  onMounted(() => {
    currentSelect.value = selects.value[0]
    updateParams(currentSelect.value)
  })

  watch(locale, () => {
    currentSelect.value = selects.value[currentSelectIndex.value]
    updateParams(currentSelect.value)
  })
</script>
