<template>
  <div id="dayReport" class="dayReport" :style="styles">
    <ReportHeader top-title="车间生产看板" />
    <div class="main-body" style="
				flex: 1;
				display: flex;
				padding: 16px 20px 22px 24px;
				flex-direction: column;
			">
      <div class="top" style="display: flex; gap: 16px">
        <div class="top-three" style="display: grid; gap: 12px; grid-template-columns: 367px 1493px">
          <agvStatus :agvList='agvAlarmListData' />
          <threeDimensionalChart :dataList="dataList" />
        </div>
      </div>
      <div class="top" style="display: flex; gap: 16px; margin-top: 6px">
        <div class="bottom-three" style="
						display: grid;
						gap: 12px;
						grid-template-columns: 1344px 512px;
					">

          <div class="center-three" style="">
            <!-- <realTask /> -->
            <alarmInfo :agvList='agvAlarmInfo' />

            <!-- <taskStatus /> -->
          </div>
          <div class="left-three" style="display: grid; gap: 16px; grid-template-rows: 213px 213px">
            <taskType :data="taskTypeToday" />
            <taskStatus :data="taskStatusToday" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ReportHeader from './components/Header.vue';
// import screenfull from 'screenfull'
import agvStatus from './components/agvStatus.vue';
import taskType from './components/taskType.vue';
import realTask from './components/realTask.vue';
import alarm from './components/alarm.vue';
import alarmInfo from './components/alarmInfo.vue';

import taskStatus from './components/taskStatus.vue';

import threeDimensionalChart from './components/threeDimensionalChart.vue';
import { getLineEdgeLibraryList, getAgvAlarmInfo, getTaskTypeToday, getTaskStatusToday, getAgvExample } from '../../../api/visualization/visualization';

// import financeCosts from './components/financeCosts.vue'
// import keyProductionIndicators from './components/keyProductionIndicators.vue'
// import coreBottomLeft from './components/coreBottomLeft.vue'
// import orderProgress from './components/orderProgress.vue'
// import keyWork from './components/keyWork.vue'
// import moment from 'moment'
export default {
	name: 'DayReport',
	components: {
		ReportHeader,
		agvStatus,
		threeDimensionalChart,
		taskType,
		taskStatus,
		realTask,
		alarm,
    alarmInfo,
	},
	data() {
		return {
			// isFullScreen: false,
			timer: null,
			beilv: 1,
      value: 100,
      taskTypeToday: [],
      taskStatusToday: [],
      agvAlarmInfo: [],
      agvAlarmListData: [],
      agvAlarmInfoData:[],
      timer: null, // 存储定时器
			dataList: [],
		};
	},

	created() {
    // this.init()
    this.windowWidth(document.documentElement.clientWidth);
    localStorage.removeItem('agv_carousel_position');
	},
	computed: {
		// ...mapGetters(['sidebar']),
		styles() {
			const v = Math.floor(this.value * this.beilv * 100) / 10000;
			return {
				transform: `scale(${v})`,
				transformOrigin: 'left top',
				// overflow: hidden;
			};
		},
	},
	watch: {
		clientWidth(val) {
			if (!this.timer) {
				this.clientWidth = val;
				this.beilv2 = this.clientWidth / 1920;
				this.timer = true;
				let _this = this;
				setTimeout(function () {·
					_this.timer = false;
				}, 500);
			}
			// 这里可以添加修改时的方法
			this.windowWidth(val);
		},
	},
	// beforeDestroy() {
	//   clearInterval(this.timer)
	//   this.destroy()
	// },
	mounted() {
		const _this = this;
		let baseWidth = 1920;
		if (this.$route.query.keyword == 'home') {
			baseWidth = 2180;
		}
		_this.beilv = document.documentElement.clientWidth / baseWidth;
		window.onresize = () => {
			return (() => {
				_this.clientWidth = `${document.documentElement.clientWidth}`;
				this.beilv = _this.clientWidth / baseWidth;
			})();
    };
    this.getData();
    this.loadAgvExampleData()
    this.timer = setInterval(() => {
      this.getData();
    }, 30000);

  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
	methods: {
    async getData(data) {
      console.log(data);
      const [lineEdgeRes, taskTypeRes, taskStatusRes, agvAlarmRes] = await Promise.all([
        getLineEdgeLibraryList(),
        getTaskTypeToday(),
        getTaskStatusToday(),
        getAgvAlarmInfo()
      ]);

      this.dataList = lineEdgeRes.data;
      this.taskTypeToday = taskTypeRes.data;
      this.taskStatusToday = taskStatusRes.data;
      this.agvAlarmListData = agvAlarmRes;
      // this.agvAlarmListData = [
      //   {
      //     "deviceName": "AGV-01",
      //     "alarmTrigger": false,
      //     "data": [
      //       {
      //         "createTime": "2024-01-15 08:30:25",
      //         "updateTime": "2024-01-15 09:15:30",
      //         "creator": "admin",
      //         "updater": "operator1",
      //         "deleted": false,
      //         "id": 1001,
      //         "type": 1,
      //         "code": "ERR-001",
      //         "name": "电机过载保护",
      //         "solutionContent": "检查电机负载，清理轨道障碍物",
      //         "warnName": "电机异常",
      //         "faultComponent": "驱动电机",
      //         "faultEventName": "电机电流过高",
      //         "eventCause": "轨道异物卡滞",
      //         "troubleshootStep": "1.停止AGV运行 2.检查轨道 3.清理异物 4.重启设备",
      //         "classification": 2,
      //         "remark": "需要及时处理，避免电机损坏",
      //         "status": 1,
      //         "sort": 1,
      //         "version": 1
      //       },
      //       {
      //         "createTime": "2024-01-15 08:30:25",
      //         "updateTime": "2024-01-15 09:15:30",
      //         "creator": "admin",
      //         "updater": "operator1",
      //         "deleted": false,
      //         "id": 1001,
      //         "type": 1,
      //         "code": "ERR-001",
      //         "name": "电机过载保护",
      //         "solutionContent": "检查电机负载，清理轨道障碍物",
      //         "warnName": "电机异常",
      //         "faultComponent": "驱动电机",
      //         "faultEventName": "电机电流过高",
      //         "eventCause": "轨道异物卡滞",
      //         "troubleshootStep": "1.停止AGV运行 2.检查轨道 3.清理异物 4.重启设备",
      //         "classification": 2,
      //         "remark": "需要及时处理，避免电机损坏",
      //         "status": 1,
      //         "sort": 1,
      //         "version": 1
      //       }
      //     ]
      //   },
      //   {
      //     "deviceName": "AGV-02",
      //     "alarmTrigger": false,
      //     "data": [
      //       {
      //         "createTime": "2024-01-15 10:20:15",
      //         "updateTime": "2024-01-15 10:45:22",
      //         "creator": "admin",
      //         "updater": "operator2",
      //         "deleted": false,
      //         "id": 1002,
      //         "type": 2,
      //         "code": "ERR-002",
      //         "name": "电池电量过低",
      //         "solutionContent": "AGV已自动返回充电桩充电",
      //         "warnName": "电量告警",
      //         "faultComponent": "锂电池组",
      //         "faultEventName": "电压低于阈值",
      //         "eventCause": "连续运行时间过长，未及时充电",
      //         "troubleshootStep": "1.等待AGV自动充电 2.检查充电桩连接 3.手动更换电池",
      //         "classification": 1,
      //         "remark": "电量剩余15%，需关注充电状态",
      //         "status": 2,
      //         "sort": 2,
      //         "version": 1
      //       }
      //     ]
      //   },
      //   {
      //     "deviceName": "AGV-03",
      //     "alarmTrigger": false,
      //     "data": [
      //       {
      //         "createTime": "2024-01-15 14:35:42",
      //         "updateTime": "2024-01-15 15:00:18",
      //         "creator": "admin",
      //         "updater": "operator3",
      //         "deleted": false,
      //         "id": 1003,
      //         "type": 3,
      //         "code": "ERR-003",
      //         "name": "激光雷达通讯故障",
      //         "solutionContent": "检查雷达连接线，重启雷达驱动",
      //         "warnName": "传感器异常",
      //         "faultComponent": "激光雷达",
      //         "faultEventName": "通讯超时",
      //         "eventCause": "线束松动或电磁干扰",
      //         "troubleshootStep": "1.检查雷达指示灯 2.重新插拔连接线 3.重启系统 4.更换雷达",
      //         "classification": 3,
      //         "remark": "影响导航定位功能",
      //         "status": 1,
      //         "sort": 3,
      //         "version": 2
      //       }
      //     ]
      //   },
      //   {
      //     "deviceName": "AGV-04",
      //     "alarmTrigger": false,
      //     "data": [
      //       {
      //         "createTime": "2024-01-15 09:45:33",
      //         "updateTime": "2024-01-15 10:30:45",
      //         "creator": "admin",
      //         "updater": "operator1",
      //         "deleted": false,
      //         "id": 1004,
      //         "type": 1,
      //         "code": "ERR-004",
      //         "name": "举升机构异常",
      //         "solutionContent": "检查液压系统，补充液压油",
      //         "warnName": "机械故障",
      //         "faultComponent": "举升液压缸",
      //         "faultEventName": "压力不足",
      //         "eventCause": "液压油泄漏或油泵故障",
      //         "troubleshootStep": "1.检查液压油位 2.排查泄漏点 3.更换密封圈 4.测试压力",
      //         "classification": 2,
      //         "remark": "举升高度不达标，需紧急处理",
      //         "status": 1,
      //         "sort": 4,
      //         "version": 1
      //       }
      //     ]
      //   },
      //   {
      //     "deviceName": "AGV-05",
      //     "alarmTrigger": false,
      //     "data": [
      //       {
      //         "createTime": "2024-01-15 16:20:55",
      //         "updateTime": "2024-01-15 17:05:33",
      //         "creator": "admin",
      //         "updater": "operator2",
      //         "deleted": false,
      //         "id": 1005,
      //         "type": 2,
      //         "code": "ERR-005",
      //         "name": "导航定位偏移",
      //         "solutionContent": "重新标定导航路径，更新地图",
      //         "warnName": "定位异常",
      //         "faultComponent": "导航系统",
      //         "faultEventName": "定位精度超差",
      //         "eventCause": "地面二维码磨损或反光柱被遮挡",
      //         "troubleshootStep": "1.清洁二维码/反光柱 2.重新标定 3.更新导航地图 4.校准传感器",
      //         "classification": 3,
      //         "remark": "偏差超过5cm，需重新校准",
      //         "status": 2,
      //         "sort": 5,
      //         "version": 1
      //       }
      //     ]
      //   }
      // ];
      // 根据告警状态决定显示内容
      if (this.isAllAlarmTriggered()) {
        console.log('无告警，加载示例数据');
        // await this.loadAgvExampleData();
        this.agvAlarmInfo = this.agvAlarmInfoData
      } else {
        console.log('有告警，使用真实数据');
        this.agvAlarmInfo = agvAlarmRes;
        // this.agvAlarmInfo = this.agvAlarmListData;

      }
    },
    async loadAgvExampleData() {
      const res = await getAgvExample()
      console.log('getAgvExample 接口返回:', res);
      this.agvAlarmInfoData = res
    },
    isAllAlarmTriggered() {
      if (!this.agvAlarmListData || this.agvAlarmListData.length === 0) return false;
      return this.agvAlarmListData.every(agv => agv.alarmTrigger === false);
    },
		windowWidth(value) {
			this.clientWidth = value;
			this.beilv2 = this.clientWidth / 1920;
		},
	},
};
</script>
<style scoped lang="scss">
.dayReport {
	width: 1920px;
	height: 1080px;
	background: #f2f4f9;
	// background-size: cover;
}
</style>
