<template>
  <view>
    <!-- 简洁标签栏 -->
    <view class="tab-container">
      <view 
        v-for="item in tabData" 
        :key="item.value"
        @click="currentTab = item.value"
        class="tab-item"
        :class="{ 'tab-active': currentTab === item.value }"
      >
        <text class="tab-label">{{ item.text }}</text>
        <view class="tab-indicator" v-if="currentTab === item.value"></view>
      </view>
    </view>
    
    <scroll-view scroll-y v-if="currentTab === 1">
      <view class="content-card">
        <k-metric-card
          :items="status"
          :columns="2"
        ></k-metric-card>
      </view>

      <view class="content-card">
        <klp-collapse-panel title="状态统计">
          <qiun-data-charts type="line" :chartData="chartData" />
        </klp-collapse-panel>
      </view>

      <view class="content-card">
        <klp-collapse-panel title="轧机状态">
          <qiun-data-charts type="column" :chartData="chartData" />
        </klp-collapse-panel>
      </view>

      <view class="content-card">
        <klp-collapse-panel title="机组跟踪">
          <view style="padding: 30rpx; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 20rpx;">
            <view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border-radius: 10rpx;">
              <text>轧机</text>
              <text>6390000</text>
            </view>

            <view style="border-radius: 10rpx; overflow: hidden;">
              <view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border: 1px solid #d9edf6;">
                <text>圆剪盘</text>
                <text>6390000</text>
              </view>
              <view class="info-container">
                <view class="info-row">
                  <view class="info-item">
                    <text class="info-label">设备编号：</text>
                    <text class="info-value">M-001</text>
                  </view>
                  <view class="info-item">
                    <text class="info-label">运行状态：</text>
                    <text class="info-value">正常</text>
                  </view>
                </view>

                <view class="info-row">
                  <view class="info-item">
                    <text class="info-label">当前产量：</text>
                    <text class="info-value">2580 件</text>
                  </view>
                  <view class="info-item">
                    <text class="info-label">合格率：</text>
                    <text class="info-value">98.5%</text>
                  </view>
                </view>
              </view>
            </view>

            <view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border-radius: 10rpx;">
              <text>酸洗</text>
              <text>6390000</text>
            </view>

            <view style="border-radius: 10rpx; overflow: hidden;">
              <view style="display: flex; justify-content: space-between; align-items: center; padding: 20rpx; background-color: #d9edf6; border: 1px solid #d9edf6;">
                <text>入口活套</text>
                <text>6390000</text>
              </view>
              <view class="info-container">
                <view class="info-row">
                  <view class="info-item">
                    <text class="info-label">设备编号：</text>
                    <text class="info-value">M-001</text>
                  </view>
                  <view class="info-item">
                    <text class="info-label">运行状态：</text>
                    <text class="info-value">正常</text>
                  </view>
                </view>

                <view class="info-row">
                  <view class="info-item">
                    <text class="info-label">当前产量：</text>
                    <text class="info-value">2580 件</text>
                  </view>
                  <view class="info-item">
                    <text class="info-label">合格率：</text>
                    <text class="info-value">98.5%</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </klp-collapse-panel>
      </view>

      <view class="content-card">
        <klp-collapse-panel title="能耗">
          <view class="metric-container">
            <!-- 网络状态指标 -->
            <view class="metric-item">
              <view class="metric-value">
                9.9
              </view>
              <view class="metric-label">
                工艺缎带钢线速度
              </view>
            </view>

            <!-- 班组指标 -->
            <view class="metric-item">
              <view class="metric-value team-number">
                126.0
              </view>
              <view class="metric-label">
                轧机出口带钢线速度
              </view>
            </view>
          </view>
        </klp-collapse-panel>
      </view>
    </scroll-view>

    <scroll-view scroll-y v-if="currentTab == 2">
      <klp-product-statistic></klp-product-statistic>
    </scroll-view>

    <scroll-view scroll-y v-if="currentTab == 3">
      <klp-shutdown-statistic></klp-shutdown-statistic>
    </scroll-view>

    <scroll-view scroll-y v-if="currentTab == 4">
      <klp-team-performance></klp-team-performance>
    </scroll-view>
  </view>
</template>

<script>
import { listPlantStateCurrent, listPlantStateHistory } from '@/api/pocket/plantState'

export default {
  // 响应式数据（替代 Vue 3 的 ref）
  data() {
    return {
      currentTab: 1, // 当前选中的标签页
      tabData: [
        { text: "实时监控", value: 1 },
        { text: "生产统计", value: 2 },
        { text: "停机统计", value: 3 },
        { text: "班组绩效", value: 4 }
      ],
      status: [ // 状态指标数据（供 k-metric-card 使用）
        { label: '网络状态', value: '正常' },
        { label: '当前班组', value: '乙 / 中' }
      ],
      chartData: {} // 图表数据（初始化空对象）
    }
  },
  // 生命周期钩子（替代 Vue 3 的 onMounted）
  mounted() {
    this.getServerData() // 页面挂载后加载数据
    this.loadCurrentState() // 加载当前状态
  },
  // 方法定义（所有函数需放在 methods 中）
  methods: {
    // 加载当前设备状态
    loadCurrentState() {
      uni.showLoading({ title: '加载中' })
      listPlantStateCurrent({ pageNum: 1, pageSize: 10 }).then(response => {
        uni.hideLoading()
        if (response.code === 200 && response.rows) {
          // 处理当前状态数据
          console.log('当前状态数据:', response.rows)
          // 可以根据实际需求更新status数据
        }
      }).catch(error => {
        uni.hideLoading()
        console.error('加载设备状态失败:', error)
      })
    },
    
    // 从服务器获取历史数据用于图表
    getServerData() {
      uni.showLoading({ title: '加载中' })
      
      listPlantStateHistory({ pageNum: 1, pageSize: 20 }).then(response => {
        uni.hideLoading()
        
        if (response.code === 200 && response.rows && response.rows.length > 0) {
          // 处理历史数据，转换为图表需要的格式
          const categories = []
          const targetData = []
          const completeData = []
          
          response.rows.forEach(item => {
            // 根据实际数据结构调整
            const dateStr = this.formatDate(item.insdate)
            categories.push(dateStr)
            // 这里使用value1和value2作为示例，实际应根据业务需求调整
            targetData.push(item.value1 || 0)
            completeData.push(item.value2 || 0)
          })
          
          const res = {
            categories: categories,
            series: [
              { name: '目标值', data: targetData },
              { name: '完成量', data: completeData }
            ]
          }
          
          this.chartData = JSON.parse(JSON.stringify(res))
        } else {
          // 如果没有数据，使用默认数据
          this.loadDefaultChartData()
        }
      }).catch(error => {
        uni.hideLoading()
        console.error('加载历史数据失败:', error)
        // 加载失败时使用默认数据
        this.loadDefaultChartData()
      })
    },
    
    // 加载默认图表数据
    loadDefaultChartData() {
      const res = {
        categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
        series: [
          { name: '目标值', data: [35, 36, 31, 33, 13, 34] },
          { name: '完成量', data: [18, 27, 21, 24, 6, 28] }
        ]
      }
      this.chartData = JSON.parse(JSON.stringify(res))
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      return `${date.getMonth() + 1}/${date.getDate()}`
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background-color: #b2b2b2;
  height: 100vh;
  overflow: auto;
}

/* 简洁标签栏 */
.tab-container {
  display: flex;
  width: 100%;
  background: #fff;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #e8e8e8;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 30rpx 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  
  .tab-label {
    font-size: 28rpx;
    color: #666;
    font-weight: 400;
    transition: all 0.3s ease;
  }
  
  &.tab-active {
    .tab-label {
      color: #1a73e8;
      font-weight: 600;
    }
  }
  
  .tab-indicator {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50rpx;
    height: 4rpx;
    background: #1a73e8;
    border-radius: 2rpx;
  }
}

/* 内容卡片 */
.content-card {
  background: #fff;
  margin-bottom: 20rpx;
}

/* 指标容器 */
.metric-container {
  display: flex;
  justify-content: space-around;
  background: #fff;
  padding: 0;
}

/* 指标项 */
.metric-item {
  flex: 1;
  text-align: center;
  padding: 32rpx;
  border-radius: 12rpx;
  transition: all 0.2s;
}

.metric-value {
  font-size: 48rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
  line-height: 1.2;
}

.metric-label {
  font-size: 28rpx;
  color: #666;
  letter-spacing: 1rpx;
}

/* 信息容器 */
.info-container {
  padding: 20rpx;
  background: #fff;
  border-radius: 12rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

/* 信息项 */
.info-item {
  flex: 0 0 48%;
  display: flex;
  align-items: baseline;
  padding: 16rpx 20rpx;
  background: #f8f9fa;
  border-radius: 10rpx;
  border: 1rpx solid #e8e8e8;
  transition: all 0.2s ease;
  
  &:active {
    background: #f0f2f5;
  }
}

.info-label {
  color: #666;
  font-size: 26rpx;
  flex-shrink: 0;
  margin-right: 16rpx;
}

.info-value {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
  word-break: break-all;
}
</style>