<template>
  <div class="container">
    <div class="left">
      <div class="lt box-bg-color">
        <Ltop1 v-if="devCode == codeList.cp" :data="info"></Ltop1>
        <Ltop2 v-else-if="devCode == codeList.pb" :data="info"></Ltop2>
        <Ltop3 v-else :data="info"></Ltop3>
      </div>
      <div class="lc">
        <Lcenter1 v-if="devCode == codeList.cp || devCode == codeList.pb" :abnormalData="abnormalData"
          :errorList="errorList" @ignoreError="ignoreError"></Lcenter1>
        <Lcenter2 v-else :oeeData="oeeData" :abnormalData="abnormalData" :errorList="errorList" @ignoreError="ignoreError"></Lcenter2>
      </div>
      <div class="lb box-bg-color">
        <bottomTable title="检测结果" v-if="devCode == codeList.cp" :columns="columns" :table-data="tableData">
          <template #checkResult="scope">
            <span v-if="scope.row.checkResult == 'NG'" style="color: red">{{ scope.row.checkResult }}</span>
            <span v-else style="color: #17C27B;">{{ scope.row.checkResult }}</span>
          </template>
        </bottomTable>
        <bottomTable title="识别记录" v-else-if="devCode == codeList.pb" :columns="columns" :table-data="tableData">
          <template #totalTime="scope">
            {{ (scope.row.totalTime/60).toFixed(1) }} min
          </template>
        </bottomTable>
        <bottomTable title="工作记录" v-else :columns="columns" :table-data="tableData">
          <template #workTime="scope">
            {{ (scope.row.workTime/60).toFixed(1) }} min
          </template>
          
        </bottomTable>
      </div>
    </div>
    <div class="right">
      <div class="rt box-bg-color">
        <imageCard :data="info" :isRate="is_rate"></imageCard>
      </div>
      <div class="rc box-bg-color">
        <devInfo :data="info"></devInfo>
      </div>
      <div class="rb box-bg-color">
        <Rbottom1 v-if="devCode == codeList.cp" :data="reqOKOrNGCount"></Rbottom1>
        <bottomTable v-else title="保养提醒" :columns="remind_column" :table-data="remind_data"></bottomTable>

      </div>
    </div>
  </div>
</template>

<script setup>
import Ltop1 from './components/ltop1.vue'
import Ltop2 from './components/ltop2.vue'
import Ltop3 from './components/ltop3.vue'
import Lcenter1 from './components/lcenter1.vue'
import Lcenter2 from './components/lcenter2.vue'
import bottomTable from './components/bottomTable.vue'
import imageCard from './components/imageCard.vue'
import devInfo from './components/devInfo.vue'
import Rbottom1 from './components/rbottom1.vue'
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { device, deviceCheck, getOKOrNGList, abnormalShutdown, getSewingList,oee,getScanList } from '@/api/pms/device'
import { computed, onUnmounted, reactive, ref } from 'vue'

let devCode = ref('3051502')
let codeList = {
  cp: '3051903',//裁片
  pb: '3051502',//平板扫描
  ck: '33202006',//冲孔
  fr: '334011' //缝纫
}
let is_rate = ref(false)
const columns = ref([])



let remind_column = [
  { prop: 'devCode', label: '编码', width: '60px' },
  { prop: 'name', label: '设备名称', },
  { prop: 'subject', label: '保养内容', },
  { prop: 'person', label: '负责人', width: '60px' },
  { prop: 'time', label: '保养时间', width: '75px' }
]
let remind_data = ref()
let tableData = ref([
  { code: '123456789', status: '正常', offset: '0.00', date: '2021-01-01', num: '100' },
  { code: '123456789', status: '正常', offset: '0.00', date: '2021-01-01', num: '100' }
])

let errorList = ref([])

let info = reactive({
  name: '',
  devCode: '',
  file: '',
  checkTime: '',
  state: 0,
  checkNum: 0,
  runTime: 0,
  errorCount: 0,
  electTotal: 0,
  speed: 0,
  output: 0,
  outputToday: 0,
  cutNum: 0,
  fileName:'',
  schedule: 0,
  totalTime: 0,
  visionState:0
})
//获取设备信息
function getDevice() {
  device({ devCode: devCode.value }).then(res => {
    info.name = res.data.name
    info.devCode = res.data.code
    info.file = res.data.file
    info.checkTime = res.data.checkTime
    info.state = res.data.state
    info.checkNum = res.data.checkNum || 0
    info.runTime = res.data.runTime
    info.errorCount = res.data.errorCount
    info.electTotal = res.data.electTotal || 0
    info.output = res.data.output
    info.outputToday = res.data.outputToday
    info.cutNum = res.data.cutNum || 0
    info.totalTime = res.data.totalTime ||0
    info.visionState = res.data.state


  })
}

let reqOKOrNGCount = reactive({
  ok: 0,
  ng: 0
})
//裁片视觉检测 工作记录
function reqOKOrNGList() {
  getOKOrNGList({ devCode: devCode.value, type: 'd' }).then(res => {
    columns.value = [
      { prop: 'productCode', label: '产品编码' },
      { prop: 'checkResult', label: '检查结果', slot: 'checkResult', width: '80px' },
      { prop: 'deviationValue', label: '偏差值' },
      { prop: 'ts', label: '检测时间' },
      { prop: 'checkNum', label: '检测数量' },
    ]
    tableData.value = res.data.accessData
    reqOKOrNGCount.ok = res.data.okNum
    reqOKOrNGCount.ng = res.data.ngNum
  })
}


//缝纫列表
function reqSewingList() {
  getSewingList({ devCode: devCode.value, type: 'd' }).then(res => {
    tableData.value = res.data
    columns.value = [
      { prop: 'fileName', label: '花样名称' },
      { prop: 'patternCount', label: '针数'},
      { prop: 'workTime', label: '工作时长', slot: 'workTime' },
      { prop: 'total', label: '产量' },
    ]
  })
}
//平板扫描列表
function reqScanList() {
  getScanList({ devCode: devCode.value, type: 'd' }).then(res => {
    tableData.value = res.data
    columns.value = [
      { prop: 'fileName', label: '图片名称' },
      { prop: 'repeatOpen', label: '重新打开图片次数'},
      { prop: 'fileNameNew', label: '裁片名称'},
      { prop: 'cutNum', label: '识别数量'},
      { prop: 'totalTime', label: '总用时', slot: 'totalTime' },
      { prop: 'totalAlterNum', label: '修改次数' },
    ]
  })
}





let abnormalData = ref()
//异常分类统计
function getAbnormalShutdown() {
  abnormalShutdown({ devCode: devCode.value }).then(res => {
    abnormalData.value = res.data

  })
}



/**获取保养记录 */
function getDeviceCheck() {
  deviceCheck(devCode.value).then(res => {
    remind_data.value = res.data

  })
}

//清除报警信息
function ignoreError(item) {
  //如果item 为空对象，则清除所有报警信息
  if (Object.keys(item).length == 0) {
    errorList.value = []
  } else {
    errorList.value = errorList.value.filter(v => v.key != item.key)
  }
}

let oeeData = ref({})
//OEE
function getOEE() {
  oee({devCode: devCode.value}).then(res=>{
    oeeData.value = res.data
  })

}


//socket
function getWebsocket(val) {
  try {
    let data = JSON.parse(val);

    if (data.type == "status" && data.msg.devCode == devCode.value) {
      info.state = data.msg.status
      if (data.msg.status == 0 ) {
        info.visionState = 0
      }     

    }
    if (data.type == "visionState" && data.msg.devCode == devCode.value) {
      info.visionState =  data.msg.visionState
    }
    if (data.type == "speed" && data.msg.devCode == devCode.value) {
      info.speed = data.msg.speed

    }
    if (data.type == "schedule" && data.msg.devCode == devCode.value) {
    
      info.schedule = data.msg.schedule
      info.fileName = data.msg.fileName

    }
    if (data.type == "errorCode" && data.msg.devCode == devCode.value) {

      //生成随机数
      let key = Math.random().toString(36).substring(2);

      errorList.value.push({
        key: key,
        msg: data.msg.errorMsg,
        devCode: data.msg.devCode,
        ts: data.msg.ts
      })
      abnormalData.value.alarm++
    }
  } catch (err) {
    console.log(err);
  }
}
function errWebsocket(val) {
  // headerref.value.HeadererrWebsocket(val)
  // console.log(val);
}

function init() {
  getDevice()
  getDeviceCheck()
  getAbnormalShutdown()
  if (devCode.value == codeList.cp) {
    reqOKOrNGList()
  }
  if (devCode.value == codeList.fr|| devCode.value == codeList.ck) {
    reqSewingList()
    getOEE()
  }
  if (devCode.value == codeList.pb) {
    reqScanList()
  }
}

onMounted(() => {
  // devCode.value = localStorage.getItem('devStorage')?JSON.parse(localStorage.getItem('devStorage')).devCode:""

  init()
  if (devCode.value == '33202006') {
    is_rate.value = true
  } else if (devCode.value == '334011') {
    is_rate.value = true
  } else {
    is_rate.value = false
  }

  connectWebsocket('', '', getWebsocket, errWebsocket)
})
onUnmounted(() => {
  closeWebsocket()
})
</script>

<style lang="scss" scoped>
.box-bg-color {
  background-color: #192124;
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
  overflow: hidden;
}

.container {
  width: 100vw;
  height: calc(100vh - 50px);
  padding: 9px 8px;
  box-sizing: border-box;
  background: #131617;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    width: 65.5vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .lt {
      width: 100%;
      height: 24.4%;
    }

    .lc {
      width: 100%;
      height: 36.2%;
    }

    .lb {
      width: 100%;
      height: 33.4%;
    }
  }

  .right {
    width: 32.6vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .rt {
      width: 100%;
      height: 29.2%;
    }

    .rc {
      width: 100%;
      height: 27.8%;
    }

    .rb {
      width: 100%;
      height: 37.6%;
    }
  }
}
</style>
