<template>
  <div class="gauss-calculate">
    <!-- 工具选择区域 -->
    <div class="tool-selector-area">
      <div class="tool-selector-label">
        <i class="el-icon-s-tools"></i>
        <span class="label-text">选择工具</span>
        <span class="label-sub">请从下方选择需要使用的计算工具</span>
      </div>
      <el-cascader
        v-model="selectedToolPath"
        :options="toolOptions"
        :props="cascaderProps"
        placeholder="请选择要使用的工具"
        @change="handleToolChange"
        clearable
        class="tool-cascader"
      ></el-cascader>
    </div>
    
    <!-- 动态组件：根据选择的工具显示对应的工具页面 -->
    <div class="tool-content">
      <!-- 当前工具标题 -->
      <div class="tool-header">
        <div class="tool-title">
          <!-- <i class="el-icon-location"></i> -->
          <span>{{ currentToolName }}</span>
        </div>
      </div>
      
      <!-- 工具内容区域（带内边距，不影响子组件布局） -->
      <div class="tool-body">
        <transition name="fade" mode="out-in">
          <component 
            :is="currentToolComponent" 
            :key="currentToolKey"
            ref="currentTool"
            @tool-event="handleToolEvent"
          />
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
// 导入各个工具组件
import GaussPositiveTool from './tools/gausspositive.vue'
import GaussNegativeTool from './tools/gaussnegative.vue'
import GaussBandChangeTool from './tools/gaussbandchange.vue'
import UTMPositiveTool from './tools/utmpositive.vue'
import UTMNegativeTool from './tools/utmnegative.vue'
import UTMBandChangeTool from './tools/utmbandchange.vue'
import GeodeticToSpatialTool from './tools/geodetictospatial.vue'
import SpatialToGeodeticTool from './tools/spatialtogeodetic.vue'
import DegreeToDSTool from './tools/degreetoDMS.vue'
import DMStodegreeTool from './tools/DMStodegree.vue'
import DegreeToRadianTool from './tools/degreetoradian.vue'
import NonParallelismCorrectionTool from './tools/nonparallelismcorrection.vue'

export default {
  name: 'CalculationTools',
  components: {
    GaussPositiveTool,
    GaussNegativeTool,
    GaussBandChangeTool,
    UTMPositiveTool,
    UTMNegativeTool,
    UTMBandChangeTool,
    GeodeticToSpatialTool,
    SpatialToGeodeticTool,
    DegreeToDSTool, 
    DMStodegreeTool,
    DegreeToRadianTool,
    NonParallelismCorrectionTool,
  },
  data() {
    return {
      // 级联选择器选中的值（路径数组）
      selectedToolPath: [],
      // 当前激活的工具组件名称
      currentToolComponent: 'GaussPositiveTool',
      // 当前工具名称
      currentToolName: '高斯正算工具',
      // 当前工具的key（用于强制刷新组件）
      currentToolKey: 0,
      // 级联选择器的配置
      cascaderProps: {
        value: 'id',
        label: 'name',
        children: 'children',
        expandTrigger: 'hover',
      },
      // 工具选项配置（分类 + 工具）
      toolOptions: [
        {
          id: 'gauss-category',
          name: '各种坐标系高斯正算',
          children: [
            {
              id: 'gauss-positive',
              name: '高斯正算工具',
              component: 'GaussPositiveTool'
            },
            {
              id: 'gauss-negative',
              name: '高斯反算工具',
              component: 'GaussNegativeTool'
            },
            {
              id: 'gauss-band-change',
              name: '高斯换带工具',
              component: 'GaussBandChangeTool'
            },
            {
              id: 'utm-positive',
              name: 'UTM投影正算工具',
              component: 'UTMPositiveTool'
            },
            {
              id: 'utm-negative',
              name: 'UTM投影反算工具',
              component: 'UTMNegativeTool'
            },
            {
              id: 'utm-band-change',
              name: 'UTM换带工具',
              component: 'UTMBandChangeTool'
            },
            {
              id: 'geodetic-to-spatial',
              name: '大地坐标转空间坐标工具',
              component: 'GeodeticToSpatialTool'
            },
            {
              id: 'spatial-to-geodetic',
              name: '空间坐标转大地坐标工具',
              component: 'SpatialToGeodeticTool'
            }
          ]
        },
        {
          id: 'degreesandDMS-category',
          name: '度和度分秒转换工具',
          children: [
            {
              id: 'degreetodms',
              name: '度转度分秒工具',
              component: 'DegreeToDSTool'
            },
            {
              id: 'dmstodegree',
              name: '度分秒转度工具',
              component: 'DMStodegreeTool'
            },
            {
              id: 'degreetoradian',
              name: '度转弧度工具',
              component: 'DegreeToRadianTool'
            }
          ]
        },
        {
          id: 'other-category',
          name: '其他计算工具',
          children: [
            {
              id: 'nonparallelism-correction',
              name: '水准测段高差正常水准面不平行改正',
              component: 'NonParallelismCorrectionTool'
            }
          ]
        }
      ]
    }
  },
  mounted() {
    // 首次进入，默认选中第一个工具
    this.setDefaultTool()
  },
  methods: {
    // 设置默认工具（第一个分类下的第一个工具）
    setDefaultTool() {
      if (this.toolOptions.length > 0 && this.toolOptions[0].children.length > 0) {
        const firstCategory = this.toolOptions[0]
        const firstTool = firstCategory.children[0]
        this.selectedToolPath = [firstCategory.id, firstTool.id]
        this.currentToolComponent = firstTool.component
        this.currentToolName = firstTool.name
        // 强制刷新组件
        this.currentToolKey++
      }
    },
    
    // 级联选择器值变化时的处理
    handleToolChange(value) {
      if (!value || value.length === 0) {
        // 如果清空了选择，恢复上一个工具
        if (this.selectedToolPath && this.selectedToolPath.length > 0) {
          this.$nextTick(() => {
            this.selectedToolPath = [...this.prevSelectedPath]
          })
        }
        return
      }
      
      // 保存当前路径
      this.prevSelectedPath = [...value]
      
      // 根据路径找到对应的工具组件
      const categoryId = value[0]
      const toolId = value[1]
      
      const category = this.toolOptions.find(opt => opt.id === categoryId)
      if (category && category.children) {
        const tool = category.children.find(child => child.id === toolId)
        if (tool && tool.component) {
          this.currentToolComponent = tool.component
          this.currentToolName = tool.name
          // 强制刷新组件
          this.currentToolKey++
        }
      }
    },
    
    // 处理工具组件触发的事件
    handleToolEvent(eventData) {
      console.log('工具事件:', eventData)
      if (eventData && eventData.message) {
        this.$message({
          message: eventData.message,
          type: eventData.type || 'info',
          duration: 2000
        })
      }
    }
  }
}
</script>

<style scoped>
.gauss-calculate {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 工具选择区域样式 */
.tool-selector-area {
  background: linear-gradient(135deg, #11a983 0%, rgba(196, 211, 207, 0.85) 100%);
  border-radius: 12px;
  padding: 24px 30px;
  margin-bottom: 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.tool-selector-label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.tool-selector-label i {
  font-size: 28px;
  color: #fff;
}

.label-text {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2px;
}

.label-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin-left: 8px;
}

.tool-cascader {
  width: 100%;
  max-width: 500px;
}

.tool-cascader /deep/ .el-input__inner {
  height: 44px;
  line-height: 44px;
  font-size: 15px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tool-cascader /deep/ .el-input__inner:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* 工具内容区域 */
.tool-content {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  min-height: 500px;
}

/* 工具标题栏 */
.tool-header {
  border-bottom: 1px solid #e8e8e8;
  padding: 16px 24px;
  background-color: #fafafa;
  border-radius: 12px 12px 0 0;
}
.tool-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tool-title i {
  font-size: 18px;
  color: #11a983;
}
/* 工具内容区域（带内边距，不影响子组件布局） */
.tool-body {
  padding: 20px 24px 24px;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>