<template>
  <transition name="slide">
    <div class="index-container">
      <!--标题-->
      <mt-header class="header" title="监控内容" fixed>
        <div slot="left">
          <mt-button icon="back" @click="$router.back(-1)"></mt-button>
        </div>
      </mt-header>
      <div class="listbody">
        <div class="well-info-card">
          <div class="well-title">
            监控内容
          </div>
          <div v-for="item in dataList" :key="item.title" class="well-info">
            <div class="info-name">
              {{item.watchType}}
            </div>
            <div class="info-value">
              <div>{{item.devcode}}</div>
              <div v-if="item.data">{{item.data}}</div>
              <div v-else>暂无数据</div>
              <div class="text-grey">{{item.logtime}}</div>
            </div>
          </div>
          <div v-if="noData" class="well-info">
            该井下暂无设备
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import { watchDataByWell } from '@/api/well'
  export default {
    name: "WatchData",
    data() {
      return {
        dataList: [],
        noData:false
      }
    },
    mounted(){
      this.watchData(this.$route.params.id)
    },
    methods:{
      watchData(wellId){
        watchDataByWell(wellId).then(response => {
          if( response.data.length>0 ){
            this.dataList = response.data
            this.noData = false
          }else{
            this.noData = true
          }
        })
      }
    }

  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .listbody{
    margin-top 40px
    padding 0.4rem 0
    .well-info-card{
      margin 5px 1vw 0px 1vw
      background-color #ffffff
      border 1px solid #f0f0f0
      border-radius 4px
      padding 1rem 1rem
      .well-title{
        padding-left 1rem
        font-size 1.2rem
        font-weight 600
        color: #000
        line-height 2rem
        margin-bottom 1rem
        padding-bottom 0.5rem
        border-bottom 1px solid #f0f0f0
      }
      .well-info{
        overflow auto
        border-bottom 1px solid #f0f0f0
        padding 0.7rem 1rem 0.2rem 1rem
        line-height:1.5rem
        font-size:0.9rem
        .info-name{
          font-weight bold;
          float left
        }
        .info-value{
          float right
          color #4b4b4b
          max-width 60%
          text-align right
          .text-grey{
            color #8a8a8a
          }
        }
      }
      .well-info-button{
        overflow auto
        padding 0.2rem 1rem 0.2rem 1rem
        line-height:1.2rem
        font-size:0.9rem
        .info-name{
          float left
        }
        .info-value{
          float right
          color #4b4b4b
          max-width 60%
          text-align right
        }
      }
      .mint-cell{
        font-size:0.9rem
      }
      .well-info:last-child{
        border-bottom none
      }
      .img-area{
        padding 0.5rem 0.5rem
      }
      .imgzip{
        width 19vw
        height 20vw
        margin 0.2rem
      }
    }
    .button-div{
      text-align center
      .mint-button{
        width 50vw
        margin 10px auto
        background-color #1d55c6
      }
    }
  }

</style>