<template>
  <div class="">
    <ul class="dici-wrap">
      <li v-for="(item, index) in queryscreenList" :key="index">
        <p class="parkName">{{item.guideName}}</p>
        <ul class="diciList">
          <li>
            编号 ：{{item.guideNo}}
          </li>
          <li>
            异常类型 ：{{item.ledDeviceStatus | screenFilter(item.ledScreenStatus)}}
          </li>
          <li>
            故障时间 ：{{item.lastUpdateDate | dataFilter}}
          </li>
        </ul>

      </li>

    </ul>
  </div>
</template>
<script>
import { screenAddress } from '../utils/api'
export default {
  name: 'screen',
  data() {
    return{
      modifyTimeBegin: new Date('2019-04-01 00:00:00'),
      modifyTimeEnd: new Date('2019-04-05 00:00:00'),
      queryscreenList: []
    }

  },
  created() {
    document.title = '诱导屏故障'

    screenAddress({
      modifyTimeBegin:this.modifyTimeBegin,
      modifyTimeEnd: this.modifyTimeEnd,
      orgId: 10003,
      sysCode:'1001',
    })
    .then((res) => {
      console.log(res.data.data)
      const queryscreenList = res.data.data
      this.queryscreenList = queryscreenList
    })
    .catch((res) => {
      console.log(res)
    })
  },
  filters: {
    screenFilter(device,screen){
      if(device === 2 && screen === 2){
        return '设备故障，屏幕已关闭'
      } else if(device ===1 && screen ===2){
        return '屏幕已关闭'
      } else if(device ===2 && screen ===1){
        return '设备故障'
      } else {
        return '正常'
      }

    }
  }
}
</script>

<style scoped lang="scss">
  .dici-wrap > li {
    background-color: $whiteBg;
    margin-bottom: 12px;
    padding: 15px 15px 0 15px;
  }

  .parkName {
    font-size: 1.8rem;
    font-weight: 700;
    padding-left: 2.5rem;
    background: url("../assets/images/screenName.png") no-repeat 0 center;
    background-size: 1.8rem 1.8rem;
  }

  .diciList {
    border-radius: 4px;
    margin-top: 12px;
    > li {
      height: 3.8rem;
      line-height: 3.8rem;
      position: relative;
      &:after {
        @include border-1px(#D9D9D9, bottom);
        opacity: .5;
      }
      &:last-child:after {
        height: 0;
      }
    }
  }
</style>
