<template>
  <div class="hpDetailWin">
    <div class="info-header">
      <img src="../../../assets/img/command/hp-detail.png"/>
      <img @click="closeInfoWindow" src="../../../assets/img/command/close.png">
    </div>
    <div class="info-detail">
      <div>
        <div>
          <div>河道名称：</div>
          <div>{{askChild.driverName}}</div>
        </div>
        <div>
          <div>区属：</div>
          <div>{{askChild.areaName}}</div>
        </div>
      </div>
      <div>
        <div>
          <div>起点：</div>
          <div>{{askChild.startPoint}}</div>
        </div>
        <div>
          <div>终点：</div>
          <div>{{askChild.endPoint}}</div>
        </div>
      </div>
      <div>
        <div>
          <div>巡检时间：</div>
          <div>{{askChild.inspectTime}}</div>
        </div>
        <div>
        </div>
      </div>
      <div>
        <div>拍摄照片：</div>
        <viewer v-if="askChild.imageList&&askChild.imageList.length>0">
          <img v-lazy="item.thumbImg" :data-source="item.originalImg"  :key=index v-for="(item,index) in askChild.imageList">
        </viewer>
      </div>
      <div v-if="askChild.driverVideo">
        <div>拍摄视频：</div>
        <dVideo :videoUrl="askChild.driverVideo"></dVideo>
      </div>
    </div>
  </div>
</template>

<script>
  import dVideo from '@/components/dVideo'
  export default {
    name: "problemDetailWin",
    props: {
      driverId:{
        type:Number,
        default(){
          return 0
        }
      },
      askChild:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    watch:{
      askChild(){
        console.log(this.askChild)
      }
    },
    components:{dVideo},
    methods: {
      closeInfoWindow() {
        this.$emit('closeInfoWindow')
      }
    }
  }
</script>

<style lang="less">
  .hpDetailWin {
    width: 5.66rem;
    min-height: 5.68rem;
    background-position: center center;
    background-size: cover;
    background-image: url(../../../assets/img/command/popup.png);

    .info-detail {
      margin-top: 0.147rem;
      padding-left: 0.56rem;
      padding-right: 0.67rem;
      padding-bottom: 0.66rem;
      >div{
        margin-top: 0.113rem;
      }
      >div:first-child,>div:nth-child(2),>div:nth-child(3){
        display: flex;
        line-height: 0.2rem;
        >div{
          width: 50%;
          display: flex;
          justify-content: left;
          >div:first-child{
            font-family: PingFangSC-Regular;
            font-size: 0.14rem;
            color: #989898;
            width: 0.9rem;
          }
          >div:last-child{
            font-family: PingFangSC-Regular;
            font-size: 0.14rem;
            margin: 0 0.05rem;
            color: #FFFFFF;
            flex: 1;
          }
        }
        >div:last-child{
          justify-content: end;
        }
      }
      >div:nth-child(4){
        display: flex;
        >div:first-child{
          font-family: PingFangSC-Regular;
          font-size: 0.14rem;
          color: #989898;
          line-height: 0.2rem;
          width: 0.9rem;
          flex: none;
        }
        >div:last-child{
          display: flex;
          flex-wrap: wrap;
        }
        img{
          width: 0.95rem;
          height: 0.95rem;
          margin-left: 0.13rem;
        }
        img:first-child{
          margin-left: 0px;
        }
        >img:first-child{
          margin-left: 0;
        }
      }
      >div:nth-child(5) {
        display: flex;

        > div:first-child {
          font-family: PingFangSC-Regular;
          font-size: 0.14rem;
          color: #989898;
          line-height: 0.2rem;
        }
        >div:last-child{
          width: 3.6rem;
          height: 1.79rem;
        }
      }
    }

    .info-header {
      display: flex;
      justify-content: space-between;
      padding-left: 0.566rem;
      padding-right: 0.456rem;
      padding-top: 0.345rem;

      > img:first-child {
        width: 0.898rem;
      }

      > img:last-child {
        width: 0.24rem;
        height: 0.24rem;
      }
    }

    .el-timeline-item__wrapper {
      padding-left: 0.19rem;
      /*top: -3px;*/
    }

    .el-timeline {
      padding: 0.22rem 0.62rem 0rem 0.57rem;
      font-family: PingFangSC-Medium;
      font-size: 0.16rem;
      color: #FFFFFF;
    }

    .el-timeline-item__node--normal {
      width: 0.041rem;
      height: 0.041rem;
    }

    .el-timeline-item__node {
      background-color: #FFFFFF;
      border: 0.04rem solid rgba(86, 244, 248, 0.36);;
    }

    .el-timeline-item__timestamp.is-top {
      margin-bottom: 0.058rem;
      padding-top: 0.01rem;
    }

    .el-timeline-item__timestamp {
      color: #FFFFFF;
      line-height: 0.22rem;
      font-size: 0.16rem;
    }

    .el-timeline-item {
      padding-bottom: 0.195rem;
    }

    .el-timeline-item__tail {
      left: 0.04rem;
      border-left: 1px solid #56F4F8;
    }

    .el-timeline-item__content {
      position: relative;

      > div:first-child {
        display: flex;
        font-family: PingFangSC-Regular;
        font-size: 0.14rem;
        color: #FFFFFF;
        line-height: 0.2rem;

        > div:last-child {
          margin-left: 0.065rem;
          flex: 1;
        }
      }

      > div:last-child {
        position: absolute;
        right: 0rem;
        top: -0.22rem;
        font-family: PingFangSC-Regular;
        font-size: 0.12rem;
        line-height: 0.17rem;
        color: rgba(255, 255, 255, 0.60);
      }
    }
  }
</style>
