<template>
  <div class="cascader-container">
    <!-- 下拉框触发按钮 -->
    <el-input
        v-model="selectedText"
        placeholder="请选择技术领域"
        readonly
        @click="toggleDropdown"
        class="cascader-input"
    >
      <template #suffix>
        <el-icon :class="{ 'rotate-180': showDropdown }"><ArrowDown /></el-icon>
      </template>
    </el-input>

    <!-- 下拉框内容 -->
    <div v-if="showDropdown" class="dropdown-panel" v-click-outside="closeDropdown">
      <div class="dropdown-columns">
        <!-- 第一级列表 -->
        <div class="dropdown-column">
          <div
              v-for="item in level1Options"
              :key="item.value"
              class="dropdown-item"
              :class="{ active: level1Selected === item.value }"
              @click="selectLevel1(item)"
          >
            {{ item.label }}
          </div>
        </div>

        <!-- 第二级列表 -->
        <div class="dropdown-column" v-if="level2Options.length > 0">
          <div
              v-for="item in level2Options"
              :key="item.value"
              class="dropdown-item"
              :class="{ active: level2Selected === item.value }"
              @click="selectLevel2(item)"
          >
            {{ item.label }}
          </div>
        </div>

        <!-- 第三级列表 -->
        <div class="dropdown-column" v-if="level3Options.length > 0">
          <div
              v-for="item in level3Options"
              :key="item.value"
              class="dropdown-item"
              :class="{ active: level3Selected === item.value }"
              @click="selectLevel3(item)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, watch } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'

export default {
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    // 技术领域数据
    const techOptions = reactive({
      // 第一级
      level1: [
        { value: 'electronics', label: '电子信息' },
        { value: 'biomedicine', label: '生物与新医药' },
        { value: 'aerospace', label: '航空航天' },
        { value: 'newMaterials', label: '新材料' },
        { value: 'highTechService', label: '高技术服务' }
      ],

      // 第二级
      level2: {
        electronics: [
          { value: 'software', label: '软件' },
          { value: 'microelectronics', label: '微电子技术' },
          { value: 'computer', label: '计算机产品及其网络应用技术' },
          { value: 'communication', label: '通信技术' },
          { value: 'broadcasting', label: '广播影视技术' }
        ],
        biomedicine: [
          { value: 'biotech', label: '生物技术' },
          { value: 'pharmacy', label: '医药生物技术' },
          { value: 'tcm', label: '中药天然药物' }
        ],
        aerospace: [
          { value: 'aircraft', label: '飞行器' },
          { value: 'engine', label: '航空发动机' },
          { value: 'equipment', label: '机载设备' }
        ],
        newMaterials: [
          { value: 'metal', label: '金属材料' },
          { value: 'inorganic', label: '无机非金属材料' },
          { value: 'organic', label: '有机高分子材料' }
        ],
        highTechService: [
          { value: 'consulting', label: '高技术咨询服务' },
          { value: 'training', label: '高技术人才培训' },
          { value: 'transfer', label: '技术转移服务' }
        ]
      },

      // 第三级
      level3: {
        software: [
          { value: 'basicSoftware', label: '基础软件' },
          { value: 'embeddedSoftware', label: '嵌入式软件' },
          { value: 'cadSoftware', label: '计算机辅助设计与辅助工程管理软件' }
        ],
        microelectronics: [
          { value: 'icDesign', label: '集成电路设计' },
          { value: 'semiconductor', label: '半导体材料' }
        ],
        computer: [
          { value: 'computerProduct', label: '计算机产品' },
          { value: 'networkTech', label: '网络应用技术' }
        ],
        biotech: [
          { value: 'gene', label: '基因工程技术' },
          { value: 'cell', label: '细胞工程技术' }
        ],
        pharmacy: [
          { value: 'biopharmacy', label: '生物医药技术' },
          { value: 'vaccine', label: '疫苗技术' }
        ]
      }
    })

    // 选中状态
    const level1Selected = ref('')
    const level2Selected = ref('')
    const level3Selected = ref('')

    // 当前显示的选项
    const level1Options = techOptions.level1
    const level2Options = ref([])
    const level3Options = ref([])

    // 下拉框显示状态
    const showDropdown = ref(false)
    const selectedText = ref(props.modelValue || '')

    // 监听外部值变化
    watch(() => props.modelValue, (newVal) => {
      selectedText.value = newVal || ''
    })

    // 打开/关闭下拉框
    const toggleDropdown = () => {
      showDropdown.value = !showDropdown.value
    }

    const closeDropdown = () => {
      showDropdown.value = false
    }

    // 选择第一级
    const selectLevel1 = (item) => {
      level1Selected.value = item.value
      level2Selected.value = ''
      level3Selected.value = ''
      level2Options.value = techOptions.level2[item.value] || []
      level3Options.value = []
    }

    // 选择第二级
    const selectLevel2 = (item) => {
      level2Selected.value = item.value
      level3Selected.value = ''
      level3Options.value = techOptions.level3[item.value] || []
    }

    // 选择第三级
    const selectLevel3 = (item) => {
      level3Selected.value = item.value

      // 构建选中的文本
      const level1 = level1Options.find(i => i.value === level1Selected.value)?.label || ''
      const level2 = level2Options.value.find(i => i.value === level2Selected.value)?.label || ''
      const level3 = item.label || ''

      selectedText.value = `${level1}/${level2}/${level3}`
      emit('update:modelValue', selectedText.value)
      closeDropdown()
    }

    return {
      level1Selected,
      level2Selected,
      level3Selected,
      level1Options,
      level2Options,
      level3Options,
      showDropdown,
      selectedText,
      toggleDropdown,
      closeDropdown,
      selectLevel1,
      selectLevel2,
      selectLevel3
    }
  }
}
</script>

<style scoped>
.cascader-container {
  position: relative;
  width: 100%;
}

.cascader-input {
  cursor: pointer;
}

.rotate-180 {
  transform: rotate(180deg);
  transition: transform 0.3s;
}

.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 600px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 2000;
  margin-top: 5px;
}

.dropdown-columns {
  display: flex;
  height: 300px;
  overflow: hidden;
}

.dropdown-column {
  flex: 1;
  overflow-y: auto;
  border-right: 1px solid #e4e7ed;
}

.dropdown-column:last-child {
  border-right: none;
}

.dropdown-item {
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dropdown-item:hover {
  background-color: #f5f7fa;
}

.dropdown-item.active {
  color: #409eff;
  background-color: #f0f7ff;
  font-weight: bold;
}
</style>
