<template>
  <view>
    <view class="tab">
      <uni-data-checkbox
        mode="tag"
        selectedColor="#2bf"
        v-model="currentTab"
        :localdata="tabData"
      ></uni-data-checkbox>
    </view>
    
    <scroll-view scroll-y v-if="currentTab === 1">
      <view class="content-card">
        <k-metric-card
          :items="webStatus"
          :columns="2"
        ></k-metric-card>
      </view>

      <view class="content-card">
        <k-collapse-panel title="状态统计">
          <template #extra>
            <view class="filter-btn" @click="openTimePicker">
              <uni-icons type="calendar" size="16" color="white"></uni-icons>
              <text class="filter-text">{{ timeRange }}</text>
            </view>
          </template>
          <qiun-data-charts type="line" :chartData="chartData" />
        </k-collapse-panel>
      </view>

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

      <view class="content-card">
        <k-collapse-panel title="机组跟踪">
          <view style="padding: 30rpx; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 20rpx;">
            <k-info-card
              v-for="(item, index) in crewTracking"
              :key="index"
              :title="item.title"
              :value="item.value"
              :info="item.info"
            ></k-info-card>
          </view>
        </k-collapse-panel>
      </view>

      <view class="content-card">
        <k-collapse-panel title="能耗">
          <k-metric-card
            :items="energyStatus"
            :columus="3"
          ></k-metric-card>
        </k-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>

    <!-- 时间选择弹出层 -->
    <uni-popup ref="timePickerPopup" type="bottom" background-color="#fff" @change="popupChange">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">选择时间范围</text>
          <view class="popup-close" @click="closeTimePicker">
            <uni-icons type="close" size="20" color="#666"></uni-icons>
          </view>
        </view>
        <view class="time-picker-container">
          <uni-datetime-picker 
            type="datetimerange"
            v-model="selectedTimeRange"
            @change="onTimeRangeChange"
            start="2020-01-01 00:00:00"
            end="2025-12-31 23:59:59"
          />
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 1,
      tabData: [
        {
          text: "实时监控",
          value: 1,
        },
        {
          text: "生产统计",
          value: 2,
        },
        {
          text: "停机统计",
          value: 3,
        },
        {
          text: "班组绩效",
          value: 4,
        },
      ],
      chartData: {},
      webStatus: [
        { label: '网络状态', value: '正常' },
        { label: '当前班组', value: '乙 / 中' }
      ],
      energyStatus: [
        { label: '工艺缎带钢线速度', value: '9.9' },
        { label: '轧机出口带钢线速度', value: '126.0' }
      ],
      crewTracking: [
        { 
          title: '轧机',
          value: 6390000
        },
        {
          title: '圆剪盘',
          value: 6390000,
          info: [
            { label: '设备编号', value: 'A-01' },
            { label: '运行状态', value: '正常' },
            { label: '当前产量', value: 2500, unit: '件' },
            { label: '合格率', value: '100%' }
          ]
        },
        {
          title: '酸洗',
          value: 6390000,
        },
        {
          title: '入口活套',
          value: 6390000,
          info: [
            { label: '设备编号', value: 'A-01' },
            { label: '运行状态', value: '正常' },
            { label: '当前产量', value: 2500, unit: '件' },
            { label: '合格率', value: '100%' }
          ]
        }
      ],
      selectedTimeRange: []
    };
  },
  computed: {
    timeRange() {
      if (!this.selectedTimeRange || this.selectedTimeRange.length !== 2) {
        return '选择时间';
      }
      const start = new Date(this.selectedTimeRange[0]).toLocaleDateString('zh-CN');
      const end = new Date(this.selectedTimeRange[1]).toLocaleDateString('zh-CN');
      return `${start} - ${end}`;
    }
  },
  mounted() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      // 模拟从服务器获取数据时的延时
      uni.showLoading({
        title: '加载中'
      });
      
      setTimeout(() => {
        let 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));
        uni.hideLoading();
      }, 500);
    },
    openTimePicker() {
      this.$refs.timePickerPopup.open();
      uni.showLoading({
        title: '加载中'
      });
      // 模拟数据加载
      setTimeout(() => {
        uni.hideLoading();
      }, 500);
    },
    closeTimePicker() {
      this.$refs.timePickerPopup.close();
    },
    popupChange(e) {
      if (e.show === false) {
        // 弹窗关闭时的处理
      }
    },
    onTimeRangeChange(e) {
      if (!e) return;
      this.selectedTimeRange = e;
      this.closeTimePicker();
      // 这里可以调用接口重新获取数据
      this.getServerData();
    }
  }
};
</script>

<style scoped lang="scss">
view-scroll {
  gap: 30rpx;
}

.tab {
  margin: auto;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  position: sticky;
  top: 88rpx;
  z-index: 999;
  background-color: #fff;
}

.content-card {
  background-color: white;
}

/** */
.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%; /* 留出4%的间隔 */
  display: flex;
  align-items: baseline; /* 文字基线对齐 */
}

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

.info-value {
  color: #333;
  font-size: 30rpx;
  font-weight: 500;
  word-break: break-all; /* 长文本自动换行 */
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 16rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4rpx;
  
  .filter-text {
    font-size: 24rpx;
    color: white;
  }
}

.popup-content {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 32rpx;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: 500;
    }
    
    .popup-close {
      padding: 8rpx;
    }
  }
  
  .time-picker-container {
    padding: 16rpx 0;
  }
}
</style>
