<template>
    <view>
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th rowspan="2">NO</th>
                        <th rowspan="2" width="50px">产线</th>
						<th rowspan="2" width="50px">班次</th>
                        <th rowspan="2">生产产品</th>
                        <th rowspan="2" width="50px">品类</th>
                        <th rowspan="2">规格 PC/car</th>
						<th rowspan="2">计划产量/箱</th>
						<th rowspan="2">实际产量/箱</th>
                        <th rowspan="2">标准用人</th>
                        <th rowspan="2">实际用人</th>
                        <th rowspan="2">生产时长/H</th>
                        <th rowspan="2">标准人均效率</th>
                        <th rowspan="2">实际人均效率</th>
                        <th rowspan="2">达成率</th>
						<th rowspan="2">单箱电耗</th>
						<th rowspan="2">影响效率原因</th>
						<th rowspan="2">用人情况说明</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in tableData" :key="index">
                                            <td>{{ index + 1 }}</td>
                                            <td>{{ item.equipmentName }}</td>
											<td>{{ item.shift }}</td>
                                            <td>{{ item.productName }}</td>
                                            <td>{{ item.category }}</td>
                                            <td>{{ item.spec }}</td>
                                            <td>{{ item.planProduction }}</td>
                                            <td>{{ item.actualProduction }}</td>
                                            <td>{{ item.standardMan }}</td>
                                            <td>{{ item.actualMan }}</td>
                                            <td>{{ item.workTime }}</td>
                                            <td>{{ item.standardEfficiency }}</td>
                                            <td>{{ item.actualEfficiency }}</td>
                                            <td>{{ item.achievementRate }}</td>
											<td>{{ item.singleKw }}</td>
											<td>{{ item.reason }}</td>
											<td>{{ item.useManRemark }}</td>
											
                    </tr>
					
					 <tr>
                                            <td></td>
                                            <td>合计</td>
                                            <td></td>
											<td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
											<td>{{ totalActualProduction }}</td>
											<td></td>
											<td>{{ totalActualMan }}</td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
											<td></td>
					</tr>
                </tbody>
            </table>
        </div>
<!-- 提示文字 -->
        <div class="scroll-hint">
            <p>*可左右滑动查看</p>
        </div>
        <div class="charts-box">
<!-- 		 <qiun-data-charts 
			   type="column"
			   :opts="opts"
			   :chartData="chartData"
			   :ontouch="true"
			 /> -->
		    <qiun-data-charts 
		      type="bar"
		      :opts="opts"
		      :chartData="chartData"
			  :ontouch="true"
		    />	 
        </div>
		
    </view>
</template>

<script>


export default {
  name: 'production-summary',
  props: {
      title: {  // 接收父组件传递的 title
        type: String,
        required: true
      }
    },
  data() {
    return {
      option: {},
      chartData: {},
      tableData: [],
      categories: [],
      series: [],
	  opts: {
	        //   color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
	        //   padding: [15,15,0,5],
	        //   touchMoveLimit: 24,
	        //   enableScroll: true,
	        //   legend: {},
	        //   xAxis: {
	        //     disableGrid: true,
	        //     scrollShow: true,
	        //     itemCount: 4
	        //   },
	        //   yAxis: {
	        //     data: [
	        //       {
	        //         min: 0
	        //       }
	        //     ]
	        //   },
	        //   extra: {
	        //     column: {
	        //       type: "group",
	        //       width: 30,
	        //       activeBgColor: "#000000",
	        //       activeBgOpacity: 0.08
	        //     }
	        //   }
	        // },
			
			color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			padding: [0,50,0,5],
			enableScroll: false,
			legend: {},
			xAxis: {
			  boundaryGap: "justify",
			  disableGrid: false,
			  min: 0,
			  axisLine: false,
			  max: 0,
		
			},
			yAxis: {
				
			},
			extra: {
			  bar: {
			    type: "group",
			    width: 30,
			    meterBorde: 1,
			    meterFillColor: "#FFFFFF",
			    activeBgColor: "#000000",
			    activeBgOpacity: 0.08,
			    linearType: "custom",
			    barBorderCircle: true,
			    seriesGap: 2,
			    categoryGap: 2
			
			  }
			}
			},
	    totalActualProduction: 0, // 新增字段用于存储实际产量总和
		totalActualMan: 0         // 新增字段用于存储实际用人总和
    };
  },
  mounted() {
	console.log(this.title+"-----------")
    this.getServerData();
  },
  methods: {
    getServerData() {
      // 模拟从服务器获取数据时的延时
      uni.request({
        url: '/prod-api/mes/h5/dailyProductDetil?productDateStart='+this.title+'&productDateEnd='+this.title+'&pageNum=1&pageSize=50',
        header: {
          Poolname: 'ds_1000'
        },
        success: (res) => {
          console.log('request success', res);
          uni.showToast({
            title: '请求成功',
            icon: 'success',
            mask: true
          });

          // 更新表格数据
          this.tableData = res.data.map(item => {
            return {
              equipmentName: item.equipmentName,
			  shift: item.shiftDesc,						// 班次
              productName: item.productName,             // 生产产品
              category: item.prodType,               // 品类
              spec: item.spec,             // 规格
              planProduction: item.quantitySplit,   // 计划产量
              actualProduction: item.quantityFeedback,     // 实际产量
              standardMan: item.manStandard,    // 标准用人
              actualMan: item.useMan,      // 实际用人
              workTime: item.workTime,     // 生产时长/H
              standardEfficiency: item.manAvgStandard, // 标准人均效率
              actualEfficiency: item.manAvgActual, // 实际人均效率
              achievementRate: item.manAvgDo,// 达成率
			  singleKw: item.singleKw,// 单箱能耗
			  reason: item.reason  ,// 原因
			  useManRemark: item.useManRemark,
            };
          });
		  
		
          


			// 计算合计
		  this.totalActualProduction = this.tableData.reduce((sum, item) => 
		    sum + (Number(item.actualProduction) || 0), 0);

          this.totalActualMan = this.tableData.reduce((sum, item) => sum + item.actualMan, 0);
          // 设置图表数据
          this.categories = res.data.map(item => item.equipmentName);
          this.series = [
            {
              name: "计划产量",
              data: res.data.map(item => item.quantitySplit)
            },
            {
              name: "完成量",
              data: res.data.map(item => item.quantityFeedback)
            }
          ];

          // 格式化 chartData
          this.chartData = {
            categories: this.categories,
            series: this.series,
          };
          // console.log(this.chartData);
        },
        fail: (err) => {
          console.log('request fail', err);
          uni.showModal({
            content: err.errMsg,
            showCancel: false
          });
        },
        complete: () => {
          this.loading = false;
        }
      });
    },
  }
};
</script>

<style scoped>
	
.table-container {
    width: 100%;
    overflow-x: auto; /* 设置水平滚动 */
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1200px; /* 可选：设置表格的最小宽度 */
}

th, td {
    border: 1px solid #000;
    padding: 8px;
    text-align: center;
}

th {
    background-color: #B0E0E6;
    font-size: 14px;
    font-weight: bold;
}

.highlight {
    background-color: #B0E0E6;
}
.scroll-hint {
    text-align: center;
    margin: 10px 0;
    font-size: 14px;
    color: #FF6347;
}
.charts-box {
    width: 100%;
    height: 400px;
	padding-top: 50px;
}
.custom-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #449dcc;
  padding: 10px;
  color: white;
}
</style>
