<template>
  <div class="unit-conversion">
    <!-- 数值输入框，实现双向绑定 -->
    <input type="number" v-model="localValue" placeholder="请输入数值" @input="handleInputChange" class="input-field" />
    <!-- 单位名称显示标签，蓝色字体，绑定点击和双击事件 -->
    <span style="color: blue; cursor: pointer" @click="changeUnit" @dblclick="openUnitSelector" class="unit-label">
      {{ getDisplayUnitName(currentUnitName) }}
    </span>
    <!-- 单位选择弹出窗口 -->
    <div v-if="isUnitSelectorVisible" class="unit-selector" :style="{ top: selectorTop + 'px', left: selectorLeft + 'px' }">
      <ul>
        <!-- 遍历可用单位，绑定点击事件 -->
        <li v-for="unit in availableUnits" :key="unit.id" @click="selectUnit(unit)" class="unit-option">
          {{ getDisplayUnitName(unit.unitName) }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 引入后台单位换算查询的 API
import { listSysUnitConvert } from '@/api/system/sysUnitConvert.js';

export default {
  props: {
    // 单位类型
    unitType: {
      type: String,
      required: true
    },
    // 单位名称，支持双向绑定
    unitName: {
      type: String,
      required: true
    },
    // 数值，支持双向绑定
    value: {
      type: [Number, String],
      default: ''
    },
    // 是否只显示英文部分
    showEnglishOnly: {
      type: Boolean,
      default: false
    },
    // 换算结果小数点的位数
    decimalPlaces: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      // 本地存储的数值，用于双向绑定
      localValue: this.value,
      // 当前选择的单位名称
      currentUnitName: this.unitName,
      // 单位选择弹出窗口是否可见
      isUnitSelectorVisible: false,
      // 弹出窗口的顶部位置
      selectorTop: 0,
      // 弹出窗口的左侧位置
      selectorLeft: 0,
      // 当前单位类型下的所有可用单位
      availableUnits: [],
      // 按照单位类型分组的单位换算数据
      unitConversionData: {}
    };
  },
  watch: {
    // 监听父组件传入的单位类型变化，更新可用单位
    unitType: {
      handler(newVal) {
        this.fetchUnitConversionData();
      },
      immediate: true
    },
    // 监听父组件传入的单位名称变化，更新当前单位名称
    unitName(newVal) {
      this.currentUnitName = newVal;
      console.log(this.currentUnitName);
      this.convertValue();
    },
    // 监听父组件传入的数值变化，更新本地数值
    value(newVal) {
      this.localValue = newVal;
      this.convertValue();
    }
  },
  mounted() {
    // 组件挂载时获取单位换算数据
    this.fetchUnitConversionData();
  },
  methods: {
    // 获取单位换算数据
    async fetchUnitConversionData() {
      try {
        const response = await listConversion({ pageSize: 300, unitType: this.unitType });
        console.log(response);
        // 平铺数据转换成按照 unitType 分组的格式
        this.unitConversionData = this.groupByUnitType(response.rows);
        console.log(this.unitConversionData);
        // 获取当前单位类型下的所有可用单位
        this.availableUnits = this.unitConversionData[this.unitType] || [];
      } catch (error) {
        console.error('获取单位换算数据失败:', error);
      }
    },
    // 按照单位类型分组数据
    groupByUnitType(data) {
      const groupedData = {};
      data.forEach((item) => {
        if (!groupedData[item.unitType]) {
          groupedData[item.unitType] = [];
        }
        groupedData[item.unitType].push(item);
      });
      return groupedData;
    },
    // 处理输入框输入变化事件
    handleInputChange() {
      this.convertValue();
      // 通知父组件数值变化
      this.$emit('update:value', parseFloat(this.localValue));
    },
    // 改变单位
    changeUnit() {
      const currentIndex = this.availableUnits.findIndex((unit) => unit.unitName === this.currentUnitName);
      console.log(currentIndex);
      const nextIndex = (currentIndex + 1) % this.availableUnits.length;
      const nextUnit = this.availableUnits[nextIndex];
      this.selectUnit(nextUnit);
    },
    // 打开单位选择弹出窗口
    openUnitSelector(event) {
      this.isUnitSelectorVisible = true;
      // 获取单位标签的位置
      const rect = event.target.getBoundingClientRect();
      this.selectorTop = rect.bottom;
      this.selectorLeft = rect.left;
    },
    // 选择单位
    selectUnit(unit) {
      const oldUnit = this.getUnitByName(this.currentUnitName);
      const newUnit = unit;
      this.currentUnitName = newUnit.unitName;
      this.convertValue(oldUnit, newUnit);
      this.isUnitSelectorVisible = false;
      // 通知父组件单位名称变化
      this.$emit('update:unitName', newUnit.unitName);
    },
    // 根据单位名称获取单位信息
    getUnitByName(unitName) {
      return this.availableUnits.find((unit) => unit.unitName === unitName);
    },
    // 换算值
    convertValue(oldUnit, newUnit) {
      oldUnit = oldUnit || this.getUnitByName(this.currentUnitName);
      newUnit = newUnit || oldUnit;
      const input = parseFloat(this.localValue);
      if (isNaN(input)) return;
      let result;
      if (this.unitType === 'temperature') {
        // 温度换算的特殊处理
        result = this.convertTemperature(input, oldUnit, newUnit);
      } else {
        // 普通单位换算，以基准单位为中间件计算
        const baseUnit = this.availableUnits.find((unit) => unit.baseUnit === 1);
        const valueInBaseUnit = input * oldUnit.conversionFactor;
        result = valueInBaseUnit / newUnit.conversionFactor;
      }
      // 按照四舍六入五留双处理结果
      const roundedResult = this.roundToDecimalPlaces(result, this.decimalPlaces);
      this.localValue = roundedResult;
      // 提交换算结果给父组件
      this.$emit('conversionResult', input, roundedResult, oldUnit.unitName, newUnit.unitName);
    },
    // 温度换算
    convertTemperature(input, oldUnit, newUnit) {
      if (oldUnit.unitName === 'C(摄氏度)' && newUnit.unitName === 'F(华氏度)') {
        return (input * 9) / 5 + 32;
      } else if (oldUnit.unitName === 'F(华氏度)' && newUnit.unitName === 'C(摄氏度)') {
        return ((input - 32) * 5) / 9;
      }
      return input;
    },
    // 按照四舍六入五留双处理结果 conversionFactor
    roundToDecimalPlaces(value, decimalPlaces) {
      const multiplier = Math.pow(10, decimalPlaces);
      const val = value * multiplier;
      const intVal = Math.trunc(val);
      const decimalPart = val - intVal;
      if (decimalPart < 0.5) {
        return intVal / multiplier;
      } else if (decimalPart > 0.5) {
        return (intVal + 1) / multiplier;
      } else {
        return intVal % 2 === 0 ? intVal / multiplier : (intVal + 1) / multiplier;
      }
    },
    // 获取显示的单位名称
    getDisplayUnitName(unitName) {
      return this.showEnglishOnly ? unitName.split('(')[0] : unitName;
    }
  }
};
</script>

<style scoped>
.unit-conversion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.input-field {
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.unit-label {
  font-size: 14px;
}

.unit-selector {
  position: absolute;
  z-index: 1000;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 5px 0;
  min-width: 100px;
  list-style-type: none;
  margin: 0;
}

.unit-option {
  padding: 5px 10px;
  cursor: pointer;
  font-size: 14px;
}

.unit-option:hover {
  background-color: #f0f0f0;
}
</style>
