<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('common.parameters') }}
          </v-card-title>

          <v-row>
            <v-col cols="8">
              <v-select
                v-model="currentSelect"
                density="comfortable"
                :items="selects"
                :label="$t('page.three-layer-paper-straw.parameters.preset-specification')"
                @update:model-value="updateParams"
              />
            </v-col>
            <v-col cols="12">
              <param-input-field v-model="paperCoreDiameter" :disabled="!isCustomMode" :label="`${$t('page.three-layer-paper-straw.parameters.paper-tube-inner-diameter')}(d)`" />
            </v-col>
            <v-col cols="12">
              <param-input-field v-model="bottomPaperWidth" :disabled="!isCustomMode" :label="`${$t('page.three-layer-paper-straw.parameters.bottom-paper-width')}(B1)`" />
            </v-col>
            <v-col cols="12">
              <param-input-field v-model="bottomPaperThickness" :label="`${$t('page.three-layer-paper-straw.parameters.bottom-paper-thickness')}(T1)`" />
            </v-col>
            <v-col cols="12">
              <param-input-field v-model="middlePaperThickness" :label="`${$t('page.three-layer-paper-straw.parameters.middle-paper-thickness')}(T2)`" />
            </v-col>
            <v-col cols="12">
              <param-input-field v-model="topPaperThickness" :label="`${$t('page.three-layer-paper-straw.parameters.top-paper-thickness')}(T3)`" />
            </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('common.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 d-flex align-center">
            <v-icon
              class="mr-3"
              color="primary"
              icon="mdi-calculator"
              size="large"
            />
            {{ $t('common.results') }}
          </v-card-title>
          <v-img src="@/assets/pro02.png" />
          <v-sheet>
            <h6 class="text-center text-h6 font-weight-bold text-secondary-lighten-2 mb-2">{{ $t('page.three-layer-paper-straw.section.paper-straw-specification') }}</h6>
            <result-list-item
              :label="`${$t('page.three-layer-paper-straw.results.paper-tube-inner-diameter')}(d)`"
              :value="result.paperCoreDiameter"
            />
            <result-list-item
              :label="`${$t('page.three-layer-paper-straw.results.paper-tube-external-diameter')}(D)`"
              :value="result.paperTubeExternalDiameter"
            />
            <result-list-item
              :label="`${$t('page.three-layer-paper-straw.results.paper-tube-wall-thickness')}(T)`"
              :value="result.paperTubeWallThickness"
            />
            <result-list-item
              :label="`${$t('page.three-layer-paper-straw.results.leading-length')}(S)`"
              :value="result.leadingLength"
            />
          </v-sheet>

          <v-divider class="my-4" />
          <v-sheet>
            <h6 class="text-center text-h6 font-weight-bold text-secondary-lighten-2 mb-2">{{ $t('page.three-layer-paper-straw.section.production-parameters') }}</h6>

            <result-list-item
              :label="`${$t('page.three-layer-paper-straw.results.bottom-paper-angle')}(A)`"
              :value="result.bottomPaperAngle"
            />
            <result-list-item
              :label="`${$t('page.three-layer-paper-straw.results.bottom-paper-width')}(B1)`"
              :value="result.bottomPaperWidth"
            />
            <result-list-item
              :label="`${$t('page.three-layer-paper-straw.results.middle-paper-width')}(B2)`"
              :value="result.middlePaperWidth"
            />
            <result-list-item
              :label="`${$t('page.three-layer-paper-straw.results.top-paper-width')}(B3)`"
              :value="result.topPaperWidth"
            />
            <result-list-item
              :label="`${$t('page.three-layer-paper-straw.results.belt-width')}`"
              :value="result.beltWidth"
            />
          </v-sheet>

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

          <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('common.calculate-parameters') : $t('common.expand-to-show-calculate-parameters') }}
                  </span>
                </template>
              </v-expansion-panel-title>
              <v-expansion-panel-text>
                <v-row>
                  <v-col cols="6">
                    <input-param-section :label="$t('page.three-layer-paper-straw.parameters.paper-tube-inner-diameter')" :value="paperCoreDiameter" />
                  </v-col>
                  <v-col cols="6">
                    <input-param-section :label="$t('page.three-layer-paper-straw.parameters.bottom-paper-width')" :value="bottomPaperWidth" />
                  </v-col>
                  <v-col cols="6">
                    <input-param-section :label="$t('page.three-layer-paper-straw.parameters.bottom-paper-thickness')" :value="bottomPaperThickness" />
                  </v-col>
                  <v-col cols="6">
                    <input-param-section :label="$t('page.three-layer-paper-straw.parameters.middle-paper-thickness')" :value="middlePaperThickness" />
                  </v-col>
                  <v-col cols="6">
                    <input-param-section :label="$t('page.three-layer-paper-straw.parameters.top-paper-thickness')" :value="topPaperThickness" />
                  </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 { 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('page.three-layer-paper-straw.preset-specification.inner_3_3-outer_4_0'),
    t('page.three-layer-paper-straw.preset-specification.inner_3_8-outer_4_5'),
    t('page.three-layer-paper-straw.preset-specification.inner_4_3-outer_5_0'),
    t('page.three-layer-paper-straw.preset-specification.inner_5_3-outer_6_0'),
    t('page.three-layer-paper-straw.preset-specification.inner_6_3-outer_7_0'),
    t('page.three-layer-paper-straw.preset-specification.inner_7_3-outer_8_0'),
    t('page.three-layer-paper-straw.preset-specification.inner_8_3-outer_9_0'),
    t('page.three-layer-paper-straw.preset-specification.inner_9_3-outer_10_0'),
    t('page.three-layer-paper-straw.preset-specification.inner_11_3-outer_12_0'),
    t('page.three-layer-paper-straw.preset-specification.custom'),
  ])

  const presetParams = computed(() => {
    return {
      [t('page.three-layer-paper-straw.preset-specification.inner_3_3-outer_4_0')]: {
        paperCoreDiameter: 3.3,
        bottomPaperWidth: 9.5,
      },
      [t('page.three-layer-paper-straw.preset-specification.inner_3_8-outer_4_5')]: {
        paperCoreDiameter: 3.8,
        bottomPaperWidth: 10,
      },
      [t('page.three-layer-paper-straw.preset-specification.inner_3_8-outer_4_5')]: {
        paperCoreDiameter: 4.3,
        bottomPaperWidth: 11,
      },
      [t('page.three-layer-paper-straw.preset-specification.inner_5_3_outer_6_0')]: {
        paperCoreDiameter: 5.3,
        bottomPaperWidth: 13.5,
      },
      [t('page.three-layer-paper-straw.preset-specification.inner_6_3_outer_7_0')]: {
        paperCoreDiameter: 6.3,
        bottomPaperWidth: 16,
      },
      [t('page.three-layer-paper-straw.preset-specification.inner_7_3_outer_8_0')]: {
        paperCoreDiameter: 7.3,
        bottomPaperWidth: 18.5,
      },
      [t('page.three-layer-paper-straw.preset-specification.inner_8_3_outer_9_0')]: {
        paperCoreDiameter: 8.3,
        bottomPaperWidth: 21,
      },
      [t('page.three-layer-paper-straw.preset-specification.inner_9_3_outer_10_0')]: {
        paperCoreDiameter: 9.3,
        bottomPaperWidth: 23.5,
      },
      [t('page.three-layer-paper-straw.preset-specification.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 middlePaperThickness = ref<Param>(createParam(120, 'g_per_m2'))
  const topPaperThickness = ref<Param>(createParam(60, 'g_per_m2'))

  const result = computed(() => {
    // 计算逻辑待补充
    const totalThickness
      = (bottomPaperThickness.value.value
        + middlePaperThickness.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 middlePaperWidth = leadingLength * Math.sin(degreesToRadians(radiansToDegrees(Math.atan((paperCoreDiameter.value.value + 2 * (bottomPaperThickness.value.value / 800)) * Math.PI / leadingLength))))
    const topPaperWidth = leadingLength * Math.sin(degreesToRadians(radiansToDegrees(Math.atan((paperCoreDiameter.value.value + 2 * (bottomPaperThickness.value.value + middlePaperThickness.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,
      middlePaperWidth: createParam(middlePaperWidth, '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')
    middlePaperThickness.value = createParam(120, '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>
