<!--
 * @Author: lb
 * @Date: 2022-06-22 14:00:17
 * @LastEditors: lb
 * @LastEditTime: 2022-06-22 14:00:17
 * @Description: 产线生产实时数据
-->
<template>
  <div>
    <div class="app-container">
      <small-title :size="'md'">{{ $t('module.factory.realtime.productLine.name') }}</small-title>
      <base-table
        v-if="tableReady"
        :table-config="tableProps"
        :table-data="tableData.length ? tableData : []"
        :is-loading="listLoading"
        :index-config="{ align: 'left', fixed: 'left' }"
      />
    </div>
  </div>
</template>

<script>
// import BaseTable from '@/components/BaseTable/index-compound'
import SmallTitle from '@/components/small-title'
import moment from 'moment'
// import fetchList from '@/api/factory-manage/realtimeData'

export default {
  name: 'RealtimeDataOfLine',
  components: { BaseTable, SmallTitle },
  data() {
    return {
      tableReady: false,
      dynamicPropSet: false,
      tableProps: [{ label: 'default', prop: 'default' }],
      tableData: [],
      testData: null,
      listLoading: false,
      intervalId: null
    }
  },

  mounted() {
    this.clearData()
    fetchList('line').then(res => {
      this.testData = res
      this.handleData()
    })

    this.intervalId = setInterval(() => {
      this.$message({
        message: this.$t('module.factory.realtime.productLine.refresh'),
        type: 'warning',
        onClose: () => {
          this.clearData()
          fetchList('line').then(res => {
            this.testData = res
            this.handleData()
          })
        }
      })
    }, 1000 * 60 * 5)
  },

  beforeDestroy() {
    if (this.intervalId) clearInterval(this.intervalId)
  },

  methods: {
    clearData() {
      this.dynamicPropSet = false
      this.tableReady = false
      this.testData = null
      this.tableData.splice(0)
      this.tableProps.splice(0)
      this.setStaticTableProps()
    },

    handleData() {
      this.expandDataStepOne()
      // this.expandDataStepTwo()
      if (this.tableData.length > 0) this.tableReady = true
      else {
        this.$message({
          message: '没有查询到相关数据!',
          type: 'error',
          duration: 2000
        })
      }
    },

    expandDataStepOne() {
      // 扩展服务器返回的数据第一阶段
      console.log('create new one')
      this.tableData = this.testData.data.map(item => {
        const newItem = {
          lineName: item.lineName,
          orderName: item.orderName,
          productSize: item.productSize ?? '-'
        }

        if (item.det) {
          item.det.forEach(obj => {
            // Step2: 设置动态props
            if (!this.dynamicPropSet) {
              this.tableProps.push({
                label: moment(obj.recordTime).format('YYYY-MM-DD HH:mm:ss'),
                children: [
                  { prop: obj.recordTime + '-inputNum', label: this.$t('module.factory.realtime.productLine.input') },
                  { prop: obj.recordTime + '-outputNum', label: this.$t('module.factory.realtime.productLine.output') },
                  {
                    prop: obj.recordTime + '-passArea',
                    label: this.$t('module.factory.realtime.productLine.passArea')
                  },
                  {
                    prop: obj.recordTime + '-scrapNum',
                    label: this.$t('module.factory.realtime.productLine.scrapNum')
                  },
                  {
                    prop: obj.recordTime + '-scrapRate',
                    label: this.$t('module.factory.realtime.productLine.scrapRate')
                  }
                ]
              })
            }

            Object.defineProperty(newItem, obj.recordTime + '-inputNum', {
              value: obj.inputNum ?? '-',
              enumerable: true,
              writable: true
            })
            Object.defineProperty(newItem, obj.recordTime + '-outputNum', {
              value: obj.outputNum ?? '-',
              enumerable: true,
              writable: true
            })
            Object.defineProperty(newItem, obj.recordTime + '-scrapNum', {
              value: obj.scrapNum ?? '-',
              enumerable: true,
              writable: true
            })

            const scrapRate = obj.scrapRate ?? '-'
            Object.defineProperty(newItem, obj.recordTime + '-scrapRate', {
              value: scrapRate === '-' ? '-' : scrapRate * 100 + '%',
              enumerable: true,
              writable: true
            })
            Object.defineProperty(newItem, obj.recordTime + '-passArea', {
              value: obj.passArea ?? '-',
              enumerable: true,
              writable: true
            })
          })

          this.dynamicPropSet = true
          return newItem
        } else {
          // console.log('没有item.det属性')
        }
      })
    },

    setStaticTableProps() {
      // Step1: 设置静态的 table props
      const staticTableProps = [
        { prop: 'lineName', label: this.$t('module.factory.realtime.productLine.pl'), fixed: true },
        { prop: 'orderName', label: this.$t('module.factory.realtime.productLine.currOrder'), fixed: true },
        { prop: 'productSize', label: this.$t('module.factory.realtime.productLine.pSpecs'), fixed: true }
      ]
      this.tableProps = staticTableProps
    }
  }
}
</script>
