<template>
  <div class="container">
    <div class="left">
      <div class="lt box-bg-color">
        <div class="title">
          {{ proxy.tLang('common', '设备状态分析') }}
        </div>
        <div class="content">
          <div class="status-list">
            <div class="status-item" v-for="item of infoList">
              <span class="status-name">{{ item.name }}:</span>
              <span class="status-value">{{ item.value }} min</span>
            </div>
          </div>
          <div class="status-chart">
            <StackBarChart :data="deviceStatusChartData"></StackBarChart>
          </div>
        </div>

      </div>
      <div class="lc box-bg-color">
        <Lcenter :totalElect="totalElect" :lineData="lineData"></Lcenter>
      </div>
      <div class="lb box-bg-color">
        <Lbottom1 v-if="devStorage.devCode == codeList.cp" :column="columns" :data="cpData" :title="tableTitle"></Lbottom1>
        <Lbottom2 v-else :column="columns" :data="bottomData" :title="tableTitle"></Lbottom2>

      </div>
    </div>
    <div class="right">
      <div class="rt box-bg-color">
        <div class="title">{{ tLang('message', '维修记录') }}</div>
        <div class="content">
          <BottomTable v-tableAutoScroll="{ delay: 15 }" :columns="repair_column" :tableData="repair_data">
          </BottomTable>
        </div>
      </div>
      <div class="rc box-bg-color">
        <div class="title">{{ tLang('message', '保养记录') }}</div>
        <div class="content">
          <BottomTable v-tableAutoScroll="{ delay: 15 }" :columns="remind_column" :tableData="remind_data">
          </BottomTable>
        </div>
      </div>
      <div class="rb box-bg-color">
        <div class="title">{{ tLang('message', '产量统计') }}</div>
        <div class="content">
          <LineChart :data="productionChartData"></LineChart>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import StackBarChart from './components/stackBarChart.vue';
import Lcenter from './components/lcenter.vue';
import BottomTable from './components/bottomTable.vue';
import LineChart from './components/lineChart.vue';
import Lbottom1 from './components/lbottom1.vue';
import Lbottom2 from './components/lbottom2.vue';
import { checkRecord, deviceRepair, productionChartByDevice, deviceStatusChartByDevice, powerConsumptionTrend, getOKOrNGList, getSewingList,getScanList } from '@/api/pms/device'
const { proxy } = getCurrentInstance()
const route = useRoute()
let params = ref(route.params.timeFrame)
let deviceStatusChartData = reactive({
  xAxis: [],
  series: []
})
let devStorage = { "devCode": "3051502", "sn": "358284933" } //JSON.parse(localStorage.getItem('devStorage'))
let codeList = {
  cp: '3051903',//裁片
  pb: '3051502',//平板扫描
  ck: '33202006',//冲孔
  fr: '334011' //缝纫
}
let repair_column = [
  { prop: 'devCode', label: '编码', width: '60px' },
  { prop: 'name', label: '设备名称', },
  { prop: 'subject', label: '报警内容', },
  { prop: 'person', label: '负责人', width: '65px' },
  { prop: 'time', label: '报警时间', width: '80px' }
]
let remind_column = [
  { prop: 'devCode', label: '编码', width: '60px' },
  { prop: 'name', label: '设备名称', },
  { prop: 'subject', label: '保养内容', },
  { prop: 'person', label: '负责人', width: '65px' },
  { prop: 'time', label: '保养时间', width: '80px' }
]

let tableTitle = ref('')
let columns = ref([])

let devTime = reactive({
  workTime: 0,
  waitTime: 0,
  stopTime: 0,
  faultTime: 0
})
let infoList = computed(() => {
  return [
    { name: '总工作时长', value: devTime.workTime.toFixed(1) },
    { name: '总待机时长', value: devTime.waitTime.toFixed(1) },
    { name: '总停机时长', value: devTime.stopTime.toFixed(1) },
    { name: '总故障时长', value: devTime.faultTime.toFixed(1) },
  ]
})

let repair_data = ref()
let remind_data = ref()

let totalElect = ref(0)
let lineData = reactive({
  xAxis: [],
  series: []
})

function getPowerConsumptionTrend() {
  powerConsumptionTrend({ type: params.value, devCode: devStorage.devCode }).then(res => {
    lineData.xAxis = res.data.time
    lineData.series = res.data.elec
    totalElect.value = res.data.totalElect
  })
}

/**获取保养记录 */
function getCheckRecord() {
  let query = { devCode: devStorage.devCode, pageNum: 1, pageSize: 10, status: 2 }
  checkRecord(query).then(res => {
    remind_data.value = res.rows.map(item => {
      return {
        devCode: item.devCode,
        name: item.deviceName,
        subject: item.subjectCodesName,
        person: item.director,
        time: item.deadline
      }
    })

  })
}

/**
 * 获取维修报警记录
 */
function getDeviceRepair() {
  deviceRepair(devStorage.devCode).then(res => {
    repair_data.value = res.data

  })
}

let productionChartData = reactive({
  xAxis: [],
  series: []
})
/**
 * 设备产量
 */
function getproductionChart() {
  productionChartByDevice({ type: params.value, devCode: devStorage.devCode }).then(res => {
    productionChartData.xAxis = res.data.map(item => item.date);
    productionChartData.series = res.data.map(item => item.num);

  })
}

const getDeviceStatusChart = async () => {
  const res = await deviceStatusChartByDevice({ type: params.value, devCode: devStorage.devCode });
  let data = res.data
  let xAxis = []
  let series = {
    work: [],
    wait: [],
    stop: [],
    fault: []
  }
  data.forEach(item => {
    xAxis.push(item.ts)
    series.work.push(item.workTime)
    series.wait.push(item.waitTime)
    series.stop.push(item.stopTime)
    series.fault.push(item.faultTime)
    devTime.workTime += item.workTime
    devTime.waitTime += item.waitTime
    devTime.stopTime += item.stopTime
    devTime.faultTime += item.faultTime
  })
  deviceStatusChartData.xAxis = xAxis;
  deviceStatusChartData.series = []
  deviceStatusChartData.series.push({
    name: proxy.tLang('common', '工作'),
    data: series.work
  })
  deviceStatusChartData.series.push({
    name: proxy.tLang('common', '待机'),
    data: series.wait
  })
  // deviceStatusChartData.series.push({
  //   name: proxy.tLang('common', '停机'),
  //   data: series.stop
  // })
  deviceStatusChartData.series.push({
    name: proxy.tLang('common', '故障'),
    data: series.fault
  })
}

let cpData = ref()
//裁片视觉检测 工作记录
function reqOKOrNGList() {
  getOKOrNGList({ devCode: devStorage.devCode, type: params.value }).then(res => {
    columns.value = [
      { prop: 'productCode', label: '产品编码' },
      { prop: 'checkResult', label: '检查结果', slot: 'checkResult', width: '80px' },
      { prop: 'deviationValue', label: '偏差值' },
      { prop: 'ts', label: '检测时间' },
      { prop: 'checkNum', label: '检测数量' },
    ]
    cpData.value = res.data
  })
}
let bottomData = ref()
//缝纫列表
function reqSewingList() {
  getSewingList({ devCode: devStorage.devCode, type: params.value  }).then(res => {
    bottomData.value = res.data
    columns.value = [
      { prop: 'fileName', label: '花样名称' },
      { prop: 'patternCount', label: '针数'},
      { prop: 'workTime', label: '工作时长', slot: 'workTime' },
      { prop: 'total', label: '产量' },
    ]
  })
}

//平板扫描列表
function reqScanList() {
  getScanList({ devCode: devStorage.devCode, type: params.value }).then(res => {
    bottomData.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: '修改次数' },
    ]
  })
}



function init() {
  getDeviceStatusChart()
  getCheckRecord()
  getDeviceRepair()
  getproductionChart()
  getPowerConsumptionTrend()

  if (devStorage.devCode == codeList.cp) {
    reqOKOrNGList()
  }
  if (devStorage.devCode == codeList.fr|| devStorage.devCode == codeList.ck) {
    reqSewingList()
  }
  if (devStorage.devCode == codeList.pb) {
    reqScanList()
  }

}
onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #cfcfcf;

}

.content {
  width: 100%;
  height: calc(100% - 20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.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: 63vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .lt {
      width: 100%;
      height: 31.7%;

      .content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .status-list {
          width: 35%;
          height: 100%;

          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          font-size: 12px;

          .status-item {
            width: 100%;
            height: 26px;
            box-sizing: border-box;
            padding: 0 10px;
            display: flex;
            align-items: center;

            .status-name {
              color: #999898;
            }

            span {
              text-align: left;
              margin: 0 10px;
            }
          }
        }

        .status-chart {
          width: 65%;
          height: 100%;
        }
      }
    }

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

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

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

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

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

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