<template>
  <ModelBox name='1-2'>
    <div class='eq-alarm'>
      <dv-scroll-board ref='locationScrollBoard' :config="config" style="width:580px;height:250px;margin-top: 10px;" />
      <span class='split-line' style='left: 66px;'></span>
      <span class='split-line' style='left: 226px;'></span>
      <span class='split-line' style='left: 366px;'></span>
    </div>
  </ModelBox>
</template>
<script>
import ModelBox from './ModelBox.vue';
export default {
  name: 'EqAlarm',
  components: {
    ModelBox
  },
  props: {
    dataObj: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    dataObj: {
      handler(newVal, oldVal) {
        console.log(newVal, 'newVal');
        if (newVal) {
          this.tableData = newVal
          let eqArr = this.tableData.map((item, index) => [
            `<span style="color:#000;" >${index + 1 || ''}
            </span>`,
            // formatDate(item.planStartTime) || '',
            `
          <span style="color:#000;" >${this.formatDate(item.time)  || ''}
            </span>`,
            `<span style="color:#000;">${item.equipmentName || ''}</span>`,
            `<span style="color:#000;">${item.content || ''}</span>`,
          ])
          this.config.data = eqArr
          this.$refs['locationScrollBoard'].updateRows(eqArr)
        }
        // this.getChart(this.todayClass)
      },
      deep: true  // 深度监听
    }
  },
  data() {
    return {
      tableData:[],
      config:{
        header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">报警时间</span>', '<span style="color:#000;">报警设备</span>', '<span style="color:#000;">报警内容</span>'],
        headerHeight: 25,
        headerBGC: '#E8EDF8',
        oddRowBGC:'#E8EDF8',
        evenRowBGC:'#fff',
        rowNum: 8,
        columnWidth: [66, 160, 140, 214],
        align	: ['center', 'center', 'center', 'center'],
        data: [
        ]
      }
    }
  },
  methods: {
    init() {

    },
    formatDate(time) {
      if (!time) return '';

      // 如果是时间戳格式
      if (typeof time === 'number' || !isNaN(time)) {
        const date = new Date(parseInt(time));
        return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      }

      // 如果是ISO字符串格式
      if (typeof time === 'string') {
        const date = new Date(time);
        if (!isNaN(date.getTime())) {
          return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
        }
      }

      return time;
    }
  }
}
</script>
<style lang='scss' scoped>
.eq-alarm {
  position: relative;
  .split-line {
    position: absolute;
    top: 0;
    width: 1px;
    height: 250px;
    background: #CDD3DF;
  }
}
</style>
