<template>
  <view class="custom-header">
    <!-- 中间产线标题（带下拉选择） -->
		<view class="header-title-container">
			<picker
			  mode="selector" 
			  :range="lineList" 
			  range-key="name" 
			  v-model="currentLineIndex" 
			  @change="handleLineChange"
			>
			  <view class="header-title">
			    <text class="line-name">{{ currentLine.name }}</text>
			    <uni-icons type="arrowdown" size="20" color="#666" class="arrow-icon" />
			  </view>
			</picker>
			<uni-icons type="down"></uni-icons>
		</view>
    
  </view>
</template>

<script>

export default {
  // 2. 组件接收的属性（可根据需求扩展）
  props: {
    // 可选：外部传入默认选中的产线索引（优先级高于内部默认）
    defaultLineIndex: {
      type: Number,
      default: 0
    }
  },
  // 3. 响应式数据
  data() {
    return {
      // 产线列表（原Tab列表改造，可外部传入，此处保留默认值）
      lineList: [
        { name: "科伦普重工-酸轧机组", key: "acidity" },
				// { name: "科伦普重工-彩涂机组", key: "paint" },
        { name: "科伦普重工-镀锌线一组", key: "zinc1" },
        // { name: "科伦普重工-镀锌线二组", key: "zinc2" },
        // { name: "科伦普重工-镀锌线三组", key: "zinc3" },
      ],
      // 当前选中的产线索引（关联picker）
      currentLineIndex: 0,
      // 当前选中的产线对象（方便模板渲染与回调传递）
      currentLine: {}
    };
  },
  // 4. 生命周期钩子：初始化当前产线
  mounted() {
    // 优先使用外部传入的默认索引，否则用内部默认0
    this.currentLineIndex = this.defaultLineIndex;
    // 初始化当前产线对象
    this.currentLine = this.lineList[this.currentLineIndex];
  },
  // 5. 方法定义（交互逻辑与回调触发）
  methods: {
    // 产线切换逻辑（picker选择后触发）
    handleLineChange(e) {
      // 更新当前选中索引
      this.currentLineIndex = e.detail.value;
      // 更新当前选中的产线对象
      this.currentLine = this.lineList[this.currentLineIndex];
      // 触发外部回调，传递选中的产线信息（供父组件接收）
      this.$emit("lineChange", {
        index: this.currentLineIndex,
        line: this.currentLine // 包含name和key的完整产线对象
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// 标题栏整体样式（padding:20rpx 符合需求）
.custom-header {
  display: flex;
	position: sticky;
	top: 0;
	z-index: 9999;
  align-items: center;
  padding-top: 40px;
	padding-bottom: 20px;
  background-color: #fff;
  border-bottom: 1rpx solid #eee; // 底部边框分隔，优化视觉
  box-sizing: border-box;
  width: 100%;
}

// 左侧返回按钮容器
.header-left {
  width: 60rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

// 中间产线标题容器（占满剩余宽度，居中对齐）
.header-title-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

// 产线标题文本与箭头容器
.header-title {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 产线名称样式
.line-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-right: 8rpx; // 与箭头保持间距
}

// 下拉箭头样式
.arrow-icon {
  transition: transform 0.3s ease;
  // 可选：选中时旋转箭头（如需扩展可加逻辑）
  // &.active { transform: rotate(180deg); }
}
</style>