<template>
  <view class="industry-selector-page">
    <scroll-view scroll-y class="selector-content">
      <view class="header-titles">
        <text class="main-title">所在行业</text>
        <text class="sub-title">请选择行业，最多1个</text>
      </view>
      
      <view class="accordion-list">
        <view class="accordion-item" v-for="(category, cIdx) in industryData" :key="cIdx">
          <view class="accordion-header" @tap="toggleCategory(cIdx)">
            <text class="category-name">{{ category.name }}</text>
            <view :class="['arrow-icon', category.expanded ? 'expanded' : '']"></view>
          </view>
          <view class="tags-container" v-if="category.expanded">
            <view 
              v-for="(tag, tIdx) in category.children" 
              :key="tIdx" 
              :class="['tag', (currentIndustry === category.name + '-' + tag) ? 'active' : '']"
              @tap="selectIndustry(category.name, tag)"
            >
              {{ tag }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script src="./industry-select.js"></script>

<style lang="scss" scoped>
@import './industry-select.scss';
</style>
