<template>
  <div class="cell-result-size">
    <div class="cell-half-box" style="height: 735px">
      <div class="title-top">
        <div class="triangle"></div>
        <div class="title-span">
          <span>Lithium Wafer Weight and Quantity Calculation</span>
        </div>
      </div>

      <div class="context">
        <div class="flex-item">
          <div class="dir-title"><span>Basic Data</span></div>
        </div>

        <div class="fri-flex">
          <div class="flex-item">
            <div class="dir-span"><span>Lithium Wafer Density</span></div>

            <div class="value-span">
              <span>{{ lithiumWaferDensity }}&nbsp;g/cm3</span>
            </div>
          </div>

          <div class="flex-item-colum-other">
            <div class="flex-item-specail">
              <div class="dir-span"><span>Diameter</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'mm' : ''"
                  v-model="diameter"
                ></VNumberInput>
              </div>
            </div>

            <div class="flex-item-specail-sel">
              <div class="dir-span"><span>Thickness</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'mm' : ''"
                  v-model="thickness"
                ></VNumberInput>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-item-title">
          <div class="dir-title"><span>Calculate Weight by Quantity</span></div>
        </div>
        <div class="sec-flex">
          <div class="flex-item-colum">
            <div class="flex-item-specail">
              <div class="dir-span"><span>Quantity</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'pieces' : ''"
                  v-model="numberOfPieces"
                ></VNumberInput>
              </div>
            </div>
          </div>

          <div class="flex-item-colum-sec">
            <div class="dir-span-nowidth"><span>Result (Weight):</span></div>

            <div class="value-span">
              <span>{{ weight }}&nbsp;g</span>
            </div>
          </div>
        </div>

        <div class="flex-item-title" style="margin-top: 60px">
          <div class="dir-title">
            <span> Calculate Quantity by Weight</span>
          </div>
        </div>

        <div class="sec-flex">
          <div class="flex-item-colum">
            <div class="flex-item-specail">
              <div class="dir-span"><span>Required Weight</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'g' : ''"
                  v-model="requiredWeight"
                ></VNumberInput>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-item-colum-sec" style="margin-top: 12px">
          <div class="dir-span-nowidth">
            <span>Calculation Result (Required Quantity):</span>
          </div>

          <div class="value-span">
            <span>{{ numberOfRequiredPieces }}&nbsp;pieces</span>
          </div>
        </div>
      </div>

      <div class="diving" style="margin-top: 0px"></div>

      <div class="compute-btn" @click="handleSave()" style="margin-top: 0px">
        Calculate
      </div>
    </div>

    <div class="cell-half-box" style="height: 735px">
      <div class="title-top">
        <div class="triangle"></div>

        <div class="title-span">
          <span>Lithium Strip Weight and Meter Calculation</span>
        </div>
      </div>

      <div class="context">
        <div class="flex-item">
          <div class="dir-title"><span>Basic Data</span></div>
        </div>

        <div class="fri-flex">
          <div class="flex-item">
            <div class="dir-span"><span>Lithium Strip Density</span></div>

            <div class="value-span">
              <span>{{ lithiumStripDensity2 }}&nbsp;g/cm3</span>
            </div>
          </div>

          <div class="flex-item-colum-other">
            <div class="flex-item-specail">
              <div class="dir-span"><span>Thickness</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'mm' : ''"
                  v-model="thickness2"
                ></VNumberInput>
              </div>
            </div>

            <div class="flex-item-specail-sel">
              <div class="dir-span"><span>Width</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'mm' : ''"
                  v-model="width2"
                ></VNumberInput>
              </div>
            </div>
          </div>
        </div>

        <div class="flex-item-title">
          <div class="dir-title"><span>Calculate Weight by Meter</span></div>
        </div>
        <div class="sec-flex">
          <div class="flex-item-colum">
            <div class="flex-item-specail">
              <div class="dir-span"><span>Length</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'm' : ''"
                  v-model="length2"
                ></VNumberInput>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-item-colum-sec" style="margin-top: 15px">
          <div class="dir-span-nowidth">
            <span>Calculation Result (Weight):</span>
          </div>

          <div class="value-span">
            <span>{{ weight2 }}&nbsp;g</span>
          </div>
        </div>

        <div class="flex-item-title" style="margin-top: 0">
          <div class="dir-title">
            <span> Calculate Quantity by Weight</span>
          </div>
        </div>

        <div class="sec-flex">
          <div class="flex-item-colum">
            <div class="flex-item-specail">
              <div class="dir-span"><span>Quantity</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'g' : ''"
                  v-model="demandWeight2"
                ></VNumberInput>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-item-colum-sec" style="margin-top: 15px">
          <div class="dir-span-nowidth">
            <span>Calculation Result (Required Quantity):</span>
          </div>

          <div class="value-span">
            <span>{{ demandLength2 }}&nbsp;m</span>
          </div>
        </div>
      </div>

      <div class="diving" style="margin-top: 0px"></div>

      <div class="compute-btn" @click="handleSave()">Calculate</div>
    </div>
  </div>

  <div class="cell-result-size" style="margin-top: 100px; height: 100%">
    <div class="cell-half-box" style="height: 725px">
      <div class="title-top">
        <div class="triangle"></div>

        <div class="title-span">
          <span>Copper Foil Weight and Meter Calculation</span>
        </div>
      </div>

      <div class="context">
        <div class="flex-item">
          <div class="dir-title"><span>Basic Data</span></div>
        </div>

        <div class="fri-flex">
          <div class="flex-item">
            <div class="dir-span"><span>Copper Foil Density</span></div>

            <div class="value-span">
              <span>{{ copperFoilDensity4 }}&nbsp;g/cm3</span>
            </div>
          </div>

          <div class="flex-item-colum-other">
            <div class="flex-item-specail">
              <div class="dir-span"><span>Thickness</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'um' : ''"
                  v-model="thickness4"
                ></VNumberInput>
              </div>
            </div>

            <div class="flex-item-specail-sel">
              <div class="dir-span"><span>Width</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'mm' : ''"
                  v-model="width4"
                ></VNumberInput>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-item-title">
          <div class="dir-title"><span>Calculate Weight by Meter</span></div>
        </div>

        <div class="sec-flex">
          <div class="flex-item-colum">
            <div class="flex-item-specail">
              <div class="dir-span"><span>Length</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'm' : ''"
                  v-model="length4"
                ></VNumberInput>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-item-colum-sec" style="margin-top: 10px">
          <div class="dir-span-nowidth">
            <span>Calculation Result (Weight):</span>
          </div>

          <div class="value-span">
            <span>{{ weight4 }}&nbsp;kg</span>
          </div>
        </div>

        <div class="flex-item-title">
          <div class="dir-title"><span>Calculate Quantity by Weight</span></div>
        </div>

        <div class="sec-flex">
          <div class="flex-item-colum">
            <div class="flex-item-specail">
              <div class="dir-span"><span>Required Weight</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'kg' : ''"
                  v-model="demandWeight4"
                ></VNumberInput>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-item-colum-sec" style="margin-top: 10px">
          <div class="dir-span-nowidth">
            <span>Calculation Result (Required Quantity):</span>
          </div>

          <div class="value-span">
            <span>{{ demandLength4 }}&nbsp;m</span>
          </div>
        </div>
      </div>

      <div class="diving" style="margin-top: 0px"></div>

      <div class="compute-btn" @click="handleSave()">Calculate</div>
    </div>

    <div class="cell-half-box" style="height: 725px">
      <div class="title-top">
        <div class="triangle"></div>

        <div class="title-span">
          <span>Aluminum Foil Weight and Meter Calculation</span>
        </div>
      </div>

      <div class="context">
        <div class="flex-item">
          <div class="dir-title"><span>Basic Data</span></div>
        </div>

        <div class="fri-flex">
          <div class="flex-item">
            <div class="dir-span"><span>Aluminum Foil Density</span></div>

            <div class="value-span">
              <span>{{ aluminumFoilDensity5 }}&nbsp;g/cm3</span>
            </div>
          </div>

          <div class="flex-item-colum-other">
            <div class="flex-item-specail">
              <div class="dir-span"><span>Thickness</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'um' : ''"
                  v-model="aluminumFoilThickness5"
                ></VNumberInput>
              </div>
            </div>

            <div class="flex-item-specail-sel">
              <div class="dir-span"><span>Width</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'mm' : ''"
                  v-model="aluminumFoilWidth5"
                ></VNumberInput>
              </div>
            </div>
          </div>
        </div>

        <div class="flex-item-title">
          <div class="dir-title"><span>Calculate Weight by Meter</span></div>
        </div>

        <div class="sec-flex">
          <div class="flex-item-colum">
            <div class="flex-item-specail">
              <div class="dir-span"><span>Length</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'm' : ''"
                  v-model="aluminumFoilLength5"
                ></VNumberInput>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-item-colum-sec" style="margin-top: 10px">
          <div class="dir-span-nowidth">
            <span>Calculation Result (Weight):</span>
          </div>

          <div class="value-span">
            <span>{{ aluminumFoilWeight5 }}&nbsp;kg</span>
          </div>
        </div>

        <div class="flex-item-title">
          <div class="dir-title"><span>Calculate Quantity by Weight</span></div>
        </div>

        <div class="sec-flex">
          <div class="flex-item-colum">
            <div class="flex-item-specail">
              <div class="dir-span"><span>Required Weight</span></div>

              <div class="value-span">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'kg' : ''"
                  v-model="demandAluminumFoilWeight5"
                ></VNumberInput>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-item-colum-sec" style="margin-top: 10px">
          <div class="dir-span-nowidth">
            <span>Calculation Result (Required Quantity):</span>
          </div>

          <div class="value-span">
            <span>{{ demandAluminumFoilLength5 }}&nbsp;m</span>
          </div>
        </div>
      </div>

      <div class="diving" style="margin-top: 0px"></div>

      <div class="compute-btn" @click="handleSave()">Calculate</div>
    </div>
  </div>

  <div class="cell-result-size">
    <div class="cell-box">
      <div class="title-top">
        <div class="triangle"></div>

        <div class="title-span">
          <span
            >Copper-Lithium Composite Strip Weight and Meter Calculation</span
          >
        </div>
      </div>

      <div class="context">
        <div class="flex-item">
          <div class="dir-title"><span>Basic Data</span></div>
        </div>

        <div class="fri-flex">
          <div class="flex-item-colum-last">
            <div class="flex-item">
              <div class="dir-span"><span>Lithium Strip Density</span></div>

              <div class="value-span-last">
                <span>{{ lithiumStripDensity3 }}&nbsp;g/cm3</span>
              </div>
            </div>

            <div class="flex-item-last" id="flex-item-last">
              <div class="dir-span"><span>Copper Foil Density</span></div>

              <div class="value-span-last">
                <span>{{ copperFoilDensity3 }}&nbsp;g/cm3</span>
              </div>
            </div>
          </div>

          <div class="flex-item-colum-bottom">
            <div class="flex-item-specail">
              <div class="dir-span"><span>Lithium Strip Thickness</span></div>

              <div class="value-span-last">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'um' : ''"
                  v-model="lithiumStripThickness3"
                ></VNumberInput>
              </div>
            </div>

            <div class="flex-item-colum-sec-last">
              <div class="dir-span">
                <span>Copper Foil Thickness</span>
              </div>

              <div class="value-span-last">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'um' : ''"
                  v-model="copperFoilThickness3"
                ></VNumberInput>
              </div>
            </div>

            <div class="flex-item-colum-sec-last">
              <div class="dir-span"><span>Lithium Strip Layers</span></div>

              <div class="value-span-last">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'mm' : ''"
                  v-model="lithiumStripWeight3"
                ></VNumberInput>
              </div>
            </div>
          </div>

          <div class="flex-item-colum-last">
            <div class="flex-item-specail">
              <div class="dir-span"><span>Copper Foil Thickness</span></div>

              <div class="value-span-last">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'mm' : ''"
                  v-model="copperFoilWidth3"
                ></VNumberInput>
              </div>
            </div>

            <div class="flex-item-colum-sec-last">
              <div class="dir-span">
                <span style="padding-left: 10px">Lithium Strip Layers</span>
              </div>

              <div class="value-span-last">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'layers' : ''"
                  v-model="lithiumStripLayers3"
                ></VNumberInput>
              </div>
            </div>
          </div>
        </div>

        <div class="flex-item-title">
          <div class="dir-title" style="width: auto">
            <span>Calculate Weight from Meters</span>
          </div>
        </div>

        <div class="sec-flex-last">
          <div class="flex-item-colum">
            <div class="flex-item-specail">
              <div class="dir-span"><span>Length (meters)</span></div>

              <div class="value-span-last">
                <VNumberInput
                  :reverse="false"
                  controlVariant="stacked"
                  :hideInput="false"
                  :inset="false"
                  variant="outlined"
                  width="100%"
                  density="compact"
                  :suffix="showSuffix ? 'm' : ''"
                  v-model="length3"
                ></VNumberInput>
              </div>
            </div>
          </div>

          <div class="flex-item-colum-sec-other" style="width: auto">
            <div class="dir-span-nowidth" style="width: auto">
              <span style="margin-left: 21px"
                >Calculation Result (Total Weight):</span
              >
            </div>

            <div class="value-span">
              <span style="width: auto">{{ totalWeight3 }}&nbsp;g</span>
            </div>
          </div>
        </div>
        <div class="sec-flex-last" style="width: 1200px">
          <div class="flex-item-colum-sec-other" style="margin-left: 0px">
            <div class="dir-span-nowidth">
              <span>Calculation Result (Lithium Strip Weight):</span>
            </div>

            <div class="value-span">
              <span>{{ lithiumStripWeight3 }}&nbsp;g</span>
            </div>
          </div>
          <div class="flex-item-colum-sec-other" style="width: 500px">
            <div class="dir-span-nowidth">
              <span>Calculation Result (Copper Foil Weight):</span>
            </div>

            <div class="value-span">
              <span>{{ copperFoilWeight3 }}&nbsp;g</span>
            </div>
          </div>
        </div>
      </div>

      <div class="diving" style="margin-top: 0px"></div>

      <div class="compute-btn" @click="handleSave()">Calculate</div>
    </div>
  </div>
  <div style="height: 20px"></div>
</template>

<script setup>
import { VNumberInput } from "vuetify/labs/VNumberInput";
import {
  FloatAdd,
  FloatDiv,
  FloatMul,
  FloatSub,
  roundToDecimal,
} from "../utils/NumberUtils";
const PI = 3.1415926;

const lithiumWaferDensity = ref(0.534);
const diameter = ref(18);
const thickness = ref(1);
const numberOfPieces = ref(2000);
const weight = ref(272);
const requiredWeight = ref(100);
const numberOfRequiredPieces = ref(736);

const lithiumStripDensity2 = ref(0.534);
const thickness2 = ref(0.05);
const width2 = ref(100);
const length2 = ref(47);
const weight2 = ref(125);
const demandWeight2 = ref(50);
const demandLength2 = ref(18.7);

const lithiumStripDensity3 = ref(0.534);
const copperFoilDensity3 = ref(8.9);
const lithiumStripThickness3 = ref(50);
const copperFoilThickness3 = ref(8);
const lithiumStripWidth3 = ref(65);
const copperFoilWidth3 = ref(80);
const lithiumStripLayers3 = ref(1);
const length3 = ref(13.0);
const lithiumStripWeight3 = ref(23);
const copperFoilWeight3 = ref(74);
const totalWeight3 = ref(97);

const copperFoilDensity4 = ref(8.9);
const thickness4 = ref(8);
const width4 = ref(250);
const length4 = ref(100);
const weight4 = ref(1.78);
const demandWeight4 = ref(5);
const demandLength4 = ref(281);

const aluminumFoilDensity5 = ref(2.7);
const aluminumFoilThickness5 = ref(12);
const aluminumFoilWidth5 = ref(240);
const aluminumFoilLength5 = ref(300);
const aluminumFoilWeight5 = ref(2.333);
const demandAluminumFoilWeight5 = ref(3);
const demandAluminumFoilLength5 = ref(386);

const handleSave = async () => {
  //重量计算
  let weightTemp1 = FloatMul(lithiumWaferDensity.value, PI);
  let weightTemp2 = FloatDiv(diameter.value, 10);
  let weightTemp3 = FloatDiv(weightTemp2, 2);
  weight.value = roundToDecimal(
    FloatMul(
      FloatDiv(
        FloatMul(
          FloatMul(FloatMul(weightTemp1, weightTemp3), weightTemp3),
          thickness.value
        ),
        10
      ),
      numberOfPieces.value
    ),
    1
  );

  //需求片数计算
  let numberOfRequiredPiecesTemp1 = FloatDiv(
    requiredWeight.value,
    lithiumWaferDensity.value
  );
  let numberOfRequiredPiecesTemp2 = FloatDiv(FloatDiv(diameter.value, 10), 2);
  let numberOfRequiredPiecesTemp3 = FloatMul(
    FloatMul(numberOfRequiredPiecesTemp2, PI),
    numberOfRequiredPiecesTemp2
  );
  let numberOfRequiredPiecesTemp4 = FloatMul(
    numberOfRequiredPiecesTemp3,
    thickness.value
  );
  numberOfRequiredPieces.value = roundToDecimal(
    FloatDiv(
      numberOfRequiredPiecesTemp1,
      FloatDiv(numberOfRequiredPiecesTemp4, 10)
    ),
    1
  );

  //根据米数算重量
  let weight2Temp1 = FloatDiv(
    FloatMul(thickness2.value, lithiumStripDensity2.value),
    10
  );
  let weight2Temp2 = FloatMul(
    FloatMul(FloatDiv(width2.value, 10), length2.value),
    100
  );
  weight2.value = roundToDecimal(FloatMul(weight2Temp1, weight2Temp2), 2);

  //根据重量算米数
  let demandLength2Temp1 = FloatDiv(
    demandWeight2.value,
    lithiumStripDensity2.value
  );
  let demandLength2Temp2 = FloatDiv(
    FloatMul(FloatDiv(thickness2.value, 10), width2.value),
    10
  );
  demandLength2.value = roundToDecimal(
    FloatDiv(FloatDiv(demandLength2Temp1, demandLength2Temp2), 100),
    1
  );

  //锂带重量计算
  let lithiumStripWeight3Temp1 = FloatMul(
    FloatMul(lithiumStripDensity3.value, lithiumStripThickness3.value),
    lithiumStripLayers3.value
  );
  let lithiumStripWeight3Temp2 = FloatDiv(
    FloatMul(
      FloatDiv(lithiumStripWeight3Temp1, 10000),
      lithiumStripWidth3.value
    ),
    10
  );
  lithiumStripWeight3.value = roundToDecimal(
    FloatMul(FloatMul(lithiumStripWeight3Temp2, length3.value), 100),
    1
  );

  //铜箔重量计算
  let copperFoilWeight3Temp1 = FloatDiv(
    FloatMul(copperFoilThickness3.value, copperFoilDensity3.value),
    10000
  );
  let copperFoilWeight3Temp2 = FloatDiv(
    FloatMul(copperFoilWeight3Temp1, copperFoilWidth3.value),
    10
  );
  copperFoilWeight3.value = roundToDecimal(
    FloatMul(FloatMul(copperFoilWeight3Temp2, length3.value), 100),
    1
  );

  //总重量计算
  totalWeight3.value = roundToDecimal(
    FloatAdd(lithiumStripWeight3.value, copperFoilWeight3.value),
    1
  );

  //根据米数计算重量:铜箔重量
  let weight4Temp1 = FloatMul(
    FloatDiv(FloatMul(copperFoilDensity4.value, thickness4.value), 10000),
    width4.value
  );
  let weight4Temp2 = FloatMul(FloatDiv(weight4Temp1, 10), length4.value);
  weight4.value = roundToDecimal(
    FloatDiv(FloatMul(weight4Temp2, 100), 1000),
    1
  );

  //根据重量计算米数:需求米数
  let demandLength4Temp1 = FloatDiv(
    FloatMul(demandWeight4.value, 1000),
    copperFoilDensity4.value
  );
  let demandLength4Temp2 = FloatDiv(
    FloatMul(FloatDiv(thickness4.value, 10000), width4.value),
    10
  );
  demandLength4.value = roundToDecimal(
    FloatDiv(FloatDiv(demandLength4Temp1, demandLength4Temp2), 100),
    1
  );

  //根据米数计算重量:铜箔重量
  let weight5Temp1 = FloatMul(
    FloatDiv(
      FloatMul(aluminumFoilDensity5.value, aluminumFoilThickness5.value),
      10000
    ),
    aluminumFoilWidth5.value
  );
  let weight5Temp2 = FloatMul(
    FloatDiv(weight5Temp1, 10),
    aluminumFoilLength5.value
  );
  aluminumFoilWeight5.value = roundToDecimal(
    FloatDiv(FloatMul(weight5Temp2, 100), 1000),
    1
  );

  //根据重量计算米数:需求米数
  let demandLength5Temp1 = FloatDiv(
    FloatMul(demandAluminumFoilWeight5.value, 1000),
    aluminumFoilDensity5.value
  );
  let demandLength5Temp2 = FloatDiv(
    FloatMul(
      FloatDiv(aluminumFoilThickness5.value, 10000),
      aluminumFoilWidth5.value
    ),
    10
  );
  demandAluminumFoilLength5.value = roundToDecimal(
    FloatDiv(FloatDiv(demandLength5Temp1, demandLength5Temp2), 100),
    1
  );
};

const showSuffix = ref(true);

onMounted(() => {
  function detectZoom() {
    var ratio = 0,
      screen = window.screen,
      ua = navigator.userAgent.toLowerCase();

    if (window.devicePixelRatio !== undefined) {
      ratio = window.devicePixelRatio;
    } else if (~ua.indexOf("msie")) {
      if (screen.deviceXDPI && screen.logicalXDPI) {
        ratio = screen.deviceXDPI / screen.logicalXDPI;
      }
    } else if (
      window.outerWidth !== undefined &&
      window.innerWidth !== undefined
    ) {
      ratio = window.outerWidth / window.innerWidth;
    }

    if (ratio) {
      ratio = Math.round(ratio * 100);
    }
    return ratio;
  }
  function adjustMargins() {
    const windowWidth = window.innerWidth;
    const flexItemSpecailSelArray = Array.from(
      document.getElementsByClassName("flex-item-specail-sel")
    );

    const flexItemColumSecLastArray = Array.from(
      document.getElementsByClassName("flex-item-colum-sec-last")
    );

    const dirSpanArray = Array.from(
      document.getElementsByClassName("dir-span")
    );

    const cellResultSizeArray = Array.from(
      document.getElementsByClassName("cell-result-size")
    );

    const flexItemColumSecArray = Array.from(
      document.getElementsByClassName("flex-item-colum-sec")
    );

    const flexItemColumArray = Array.from(
      document.getElementsByClassName("flex-item-colum")
    );

    const flexItemLast = document.getElementById("flex-item-last");

    const valueSpanArray = Array.from(
      document.getElementsByClassName("value-span")
    );

    const valueSpanLastArray = Array.from(
      document.getElementsByClassName("value-span-last")
    );

    if (detectZoom() < 100) {
    } else {
      // dirSpanArray.forEach((dirSpan) => {
      //   dirSpan.style.width = `${(85 / 1920) * windowWidth}px`;
      // });
      // flexItemSpecailSelArray.forEach((flexItemSpecailSel) => {
      //   if (windowWidth > 1270) {
      //     flexItemSpecailSel.style.marginLeft = `${
      //       (70 / 1920) * windowWidth
      //     }px`;
      //   } else {
      //     flexItemSpecailSel.style.marginLeft = `0px`;
      //   }
      // });
      // flexItemColumSecArray.forEach((flexItemColumSec) => {
      //   flexItemColumSec.style.marginLeft = `${(70 / 1920) * windowWidth}px`;
      // });
      // flexItemLast.style.marginLeft = `${(70 / 1920) * windowWidth}px`;
      // valueSpanArray.forEach((valueSpan) => {
      //   valueSpan.style.width = `${(180 / 1920) * windowWidth}px`;
      //   if (valueSpan.clientWidth <= 50) {
      //     showSuffix.value = false;
      //   } else {
      //     showSuffix.value = true;
      //   }
      // });
      // if (valueSpanLastArray) {
      //   valueSpanLastArray.forEach((valueSpanLast) => {
      //     valueSpanLast.style.width = `${(180 / 1920) * windowWidth}px`;
      //   });
      // }
      // if (flexItemColumSecLastArray) {
      //   flexItemColumSecLastArray.forEach((flexItemColumSecLast) => {
      //     flexItemColumSecLast.style.marginLeft = `${
      //       (70 / 1920) * windowWidth
      //     }px`;
      //   });
      // }
      // cellResultSizeArray.forEach((cellResultSize) => {
      //   if (windowWidth > 1270) {
      //     cellResultSize.style.height = `630px`;
      //   } else {
      //     cellResultSize.style.height = `670px`;
      //   }
      // });
      // if (windowWidth <= 1270) {
      //   if (flexItemColumArray) {
      //     flexItemColumArray.forEach((flexItemColum) => {
      //       flexItemColum.style.flexDirection = `column`;
      //     });
      //   }
      // } else {
      //   if (flexItemColumArray) {
      //     flexItemColumArray.forEach((flexItemColum) => {
      //       flexItemColum.style.removeProperty("flex-direction");
      //     });
      //   }
      // }
    }
  }

  adjustMargins();

  window.addEventListener("resize", adjustMargins);
});
</script>

<style scoped>
.cell-result-size {
  height: 630px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.cell-half-box {
  background-color: #ffffff;
  height: 100%;
  border-radius: 5px;
  width: 49.5%;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-box {
  background-color: #ffffff;
  width: 100%;
  height: 650px;
  border-radius: 5px;
  position: relative;
}

.cell-half-box:first-child {
  /* margin-right: 15px; */
}

.cell-result-size-sec {
  height: 348px;
  margin-top: 10px;
  display: flex;
}

.cell-result-size-third {
  /* height: 948px; */
  margin-top: 10px;
  display: flex;
  position: relative;
}

.pole-iece-size {
  background-color: #ffffff;
  height: 100%;
  border-radius: 5px;
  flex: 1;
}

.cell-design {
  background-color: #ffffff;
  height: 100%;
  border-radius: 5px;
  flex: 1;
  width: 100%;
}

.title-top {
  display: flex;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 2px solid #ecedef;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 5px solid #636974;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.title-span {
  font-size: 15spx;
  padding-left: 10px;
}
.context {
  margin: 30px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flex-item-colum {
  /* display: flex; */
}

.flex-item-colum-other {
  display: grid;
  flex-direction: column;
  grid-template-columns: repeat(2, 45%);
  justify-content: space-between;
  column-gap: 75px;
  /* display: flex;
  overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
}

.flex-item-colum-last {
  display: flex;
}
.flex-item-colum-bottom {
  display: flex;
  margin-bottom: 30px;
  margin-top: 30px;
}
.context-sec {
  margin: 30px 40px;
  display: flex;
  justify-content: space-between;
}
.fri-flex {
  /* padding-right: 60px; */
  text-align: justify;
  flex-direction: column;
  justify-content: center;
}
.fri-flex-input {
  position: relative;
  top: -10px;
}

.dir-span {
  color: #646464;
  font-size: 16px;
  width: auto;
  display: flex;
  text-align-last: justify;
  text-align: justify;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dir-span span {
  /* overflow: hidden; */
  height: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dir-span-nowidth {
  color: #646464;
  font-size: 16px;
  display: flex;
  text-align-last: justify;
  text-align: justify;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dir-span-nowidth span {
  overflow: hidden;
  text-overflow: ellipsis;
  height: 21px;
  white-space: nowrap;
}

.tir-span {
  color: #646464;
  font-size: 16px;
  width: 105px;
  display: flex;
  text-align-last: justify;
  text-align: justify;
  flex-direction: column;
  justify-content: center;
}

.tir-span-other {
  color: #646464;
  font-size: 16px;
  width: 120px;
  display: flex;
  text-align-last: justify;
  text-align: justify;
  flex-direction: column;
  justify-content: center;
}
.tir-nosplit-span {
  color: #646464;
  font-size: 16px;
  width: 225px;
  display: flex;
  text-align: justify;
  flex-direction: column;
  justify-content: center;
}
.adjust-tir-nosplit-span {
  color: #646464;
  font-size: 16px;
  display: flex;
  text-align: justify;
  flex-direction: column;
  justify-content: center;
}
.dir-title {
  color: #4f9fdd;
  font-size: 16px;
  width: 125px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.value-span {
  margin-left: 20px;
  flex: 1;
  width: 10px;
  /* flex: 1; */
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
  max-width: 180px;
}

.value-span-last {
  margin-left: 20px;
  flex: 1;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.value-span-last span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.value-span span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.value-span-scal {
  margin-left: 20px;
  flex: 1;
  font-weight: bolder;
  width: 185px;
}

.adjust-value-span {
  margin-left: 20px;
  font-weight: bolder;
}

.flex-item-title {
  padding-top: 30px;
  display: flex;
  padding-bottom: 30px;
}

.flex-item {
  display: flex;
  padding-bottom: 30px;
}

.flex-item-last {
  display: flex;
  padding-bottom: 30px;
  margin-left: 70px;
}

.flex-item-colum-sec {
  display: flex;
  padding-bottom: 20px;
  /* margin-left: 70px; */
  /* justify-content: center; */
  align-items: center;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flex-item-colum-sec-other {
  display: flex;
  padding-bottom: 20px;
  margin-left: 70px;
  justify-content: center;
  align-items: center;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flex-item-colum-sec-last {
  margin-left: 70px;
  display: flex;
  height: 40px;
}

.flex-item-specail {
  display: flex;
  height: 40px;
  margin-bottom: 18px;
}

.flex-item-specail-sel {
  display: flex;
  height: 40px;
  /* margin-left: 70px; */
}

.flex-item-specail-last {
  display: flex;
  height: 40px;
}

.flex-item-specail-third {
  position: relative;
  display: flex;
  height: 40px;
  margin-bottom: 18px;
  top: -10px;
}

.sec-flex-last {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: auto;
}

.sec-flex {
  /* display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
  display: grid;
  flex-direction: column;
  grid-template-columns: repeat(2, 50%);
  justify-content: space-between;
  -moz-column-gap: 50px;
  column-gap: 50px;
}

.sec-sec-flex {
  margin-left: 60px;
}

.tir-title {
  color: #4f9fdd;
  font-size: 16px;
  width: 125px;
  display: flex;
  flex-direction: column;
  font-weight: 600;
  justify-content: center;
}

.adjust-box {
  display: flex;
  margin-left: 145px;
  width: 1220px;
  /* justify-content: space-between; */
}
.adjust-flex-item {
}
.adjust-left-box {
  display: flex;
  width: 400px;
  justify-content: space-between;
}
.adjust-sel-box {
  display: flex;
  margin-left: 75px;
  flex: 1;
  justify-content: space-between;
}
.context-last {
  display: flex;
  margin-left: 40px;
}
.fri-flex-last {
  margin-left: 245px;
}
.compute {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.box-footer {
  margin-bottom: 50px;
}
.diving {
  height: 0.1vw;
  background: #ecedef;
  margin-top: 50px;
}
.compute-btn {
  width: 96px;
  height: 32px;
  background: #4f9fdd;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  position: absolute;
  right: 40px;
  bottom: 30px;
}

.compute-btn:hover {
  cursor: pointer;
}
</style>