<template>
  <box
    componentkey="DeviceAlarm"
    title="设备告警"
  >
    <!-- <div class="wrapper">
      <schema-table
        ref="table"
        :schema="schema"
      >
        <template #pagination><span /></template>
        <preview-dialog ref="previewDialog" />
      </schema-table>
    </div> -->
    <div class="header">
      <div class="label">时间</div>
      <div class="label">内容</div>
      <div class="label">处理方式</div>
      <div class="label">处理结果</div>
      <div class="label">短信通知</div>
      <div class="label">邮件通知</div>
    </div>
    <div
      class="l-flex--row center"
      :class="{full:full}"
      style="margin-bottom:10px"
    >
      <vue-seamless-scroll
        :data="listData"
        class="warp"
        :class-option="classOption"
      >
        <div
          v-for="item in listData"
          :key="item.id"
          class="line"
        >
          <div class="value">{{ item.happenTime }}</div>
          <div class="value">{{ item.type }}</div>
          <div class="value">{{ item.handle }}</div>
          <div class="value">{{ item.status }}</div>
          <div class="value"><el-tag
            class="o-tag"
            :type="item.note.type"
          >{{ item.note.label }}</el-tag></div>
          <div class="value"><el-tag
            class="o-tag"
            :type="item.email.type"
          >{{ item.email.label }}</el-tag></div>

        </div>
      </vue-seamless-scroll>
    </div>
  </box>
</template>

<script>
import Box from './Box'
import { getDeviceAlarms } from '@/api/device'
import { createListOptions } from '@/utils'
import { AssetType } from '@/constant'
import vueSeamlessScroll from './vue-seamless-scroll.min.js'

const Alarms = {
  0: '疑似黑屏',
  1: '设备离线',
  2: '屏幕拓扑结构异常',
  3: '播放非法视频',
  4: '接收卡离线',
  5: '发送控制设备离线',
  6: '浪潮智能网关离线',
  7: '屏幕监控摄像头离线',
  8: '人流监测摄像头离线',
  9: '设备上线',
  1000: '分割器异常'
}

function getAlarmType (type) {
  if (type >= 1101 && type <= 1116) {
    return '分割器异常'
  }
  return Alarms[type] || '-'
}
export default {
  components: {
    Box,
    vueSeamlessScroll
  },
  props: {
    device: {
      type: Object,
      required: true
    },
    full: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      classOption: {
        step: 0.5,
        hoverStop: false
      },
      listData: [],
      options: createListOptions({ deviceId: this.device.id }),
      schema: {
        pageSize: 4,
        keepalive: true,
        condition: { deviceId: this.device.id },
        list: getDeviceAlarms,
        transform: this.transform,
        cols: [
          { type: 'refresh' },
          { prop: 'asset', label: '截图', type: 'asset', on: this.onView },
          { prop: 'type', label: '告警类型' },
          { prop: 'handle', label: '处理方式' },
          { prop: 'status', label: '处理结果', type: 'tag' },
          { prop: 'note', label: '短信通知', type: 'tag' },
          { prop: 'email', label: '邮件通知', type: 'tag' },
          { prop: 'happenTime', label: '告警时间' }
        ]
      }
    }
  },
  computed: {
    listSlice () {
      if (!this.$refs.table) {
        return []
      }
      return this.$refs.table.customOptions.list.slice(0, 4) || []
    }
  },
  created () {
    this.getDeviceAlarms()
  },
  methods: {
    getDeviceAlarms () {
      getDeviceAlarms({
        pageIndex: 1,
        pageSize: 100,
        deviceId: this.device.id
      }).then(({ data }) => {
        this.listData = data.map(item => {
          return {
            ...item,
            note: this.getTag(item.note),
            email: this.getTag(item.email),
            type: getAlarmType(item.type),
            handle: ['应用重启', '设备重启', '恢复出厂', '未干预'][item.handle] || '-',
            status: item.handle <= 2 && item.status <= 2
              ? ['处理中', '成功', '失败'][item.status] || '-'
              : '-'
          }
        })
      })
    },
    getTag (value) {
      switch (value) {
        case 0:
          return {
            type: 'danger',
            label: '否'
          }
        case 1:
          return {
            type: 'success',
            label: '是'
          }
        default:
          return {
            type: 'danger',
            label: '否'
          }
      }
    },
    transform ({ pic, picUrl, type, handle, status, note, email, happenTime }) {
      return {
        asset:
          pic && picUrl
            ? {
              type: AssetType.IMAGE,
              url: picUrl
            }
            : null,
        type: getAlarmType(type),
        handle: ['应用重启', '设备重启', '恢复出厂', '未干预'][handle] || '-',
        status:
          handle <= 2 && status <= 2
            ? {
              type: ['primary', 'success', 'danger'][status],
              label: ['处理中', '成功', '失败'][status]
            }
            : '-',
        note: {
          type: ['danger', 'success'][note],
          label: ['否', '是'][note]
        },
        email: {
          type: ['danger', 'success'][email],
          label: ['否', '是'][email]
        },
        happenTime
      }
    },
    onView (asset) {
      this.$refs.previewDialog.show(asset)
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  ::v-deep.el-table,
  ::v-deep.el-table tr,
  ::v-deep.c-table thead.has-gutter th.el-table__cell {
    background-color: transparent;
  }
  ::v-deep.el-table {
    color: #fff;
  }
  ::v-deep.el-table tbody tr:hover > td {
    background-color: transparent;
  }
}
.header {
  width: 100%;
  display: flex;
  margin: 10px;
      height: 30px;
    line-height: 30px;
  .label {
    flex: 1;
    text-align: center;

    color: #9ea9cd;
  }
}
.warp {
  height: 170px;
  width: 100%;
  overflow: hidden;
  font-size: 12px;
  .line {
    width: 100%;
    display: flex;
    height: 30px;
    line-height: 30px;
    margin: 10px;
    .value {
      flex: 1;
      text-align: center;

      color: #ffffff;
    }
  }
  ::v-deep{
    .el-tag.el-tag--danger{
      background-color:#F73F3F;
      color: #fff;
      border-color: transparent;
    }
    .el-tag.el-tag--success{
            background-color:#00C787;
      color: #fff;
      border-color: transparent;
    }
  }
}
.full{
  .warp{
    height:calc(100% - 50px);
    font-size: 18px;
  }
}
</style>
