<template>
  <div class="problemDetailWin">
    <div class="info-header">
      <img src="../../../assets/img/command/details.png"/>
      <img @click="closeInfoWindow" src="../../../assets/img/command/close.png">
    </div>
    <el-timeline>
      <el-timeline-item timestamp="问题情报" placement="top">
        <div>
          <div>{{dataChild.createUserName}}</div>
          <div>{{dataChild.createUserDept}}</div>
        </div>
        <div><span v-if="dataChild.createTime">{{dataChild.createTime.split(' ')[0]}}</span></div>
      </el-timeline-item>
      <el-timeline-item v-if="dataChild.status==2" timestamp="问题处理" placement="top">
        <div>
          <div>{{dataChild.assignUserName}}</div>
          <div>{{dataChild.assignUserDept}}</div>
        </div>
        <div><span v-if="dataChild.assignTime">{{dataChild.assignTime.split(' ')[0]}}</span></div>
      </el-timeline-item>
      <el-timeline-item v-if="dataChild.status==3" timestamp="处理完成" placement="top">
        <div>
          <div>{{dataChild.handlerUserName}}</div>
          <div>{{dataChild.handlerUserDept}}</div>
        </div>
        <div><span v-if="dataChild.handlerTime">{{dataChild.handlerTime.split(' ')[0]}}</span></div>
      </el-timeline-item>
    </el-timeline>
    <div class="info-detail">
      <div>
        <div>
          <div>河道名称：</div>
          <div>{{dataChild.driverName}}</div>
        </div>
        <div>
          <div>水质问题：</div>
          <div>{{dataChild.questionType}}</div>
        </div>
      </div>
      <div>
        <div>
          <div>处理人员：</div>
          <div>{{dataChild.handlerUserName}}</div>
        </div>
        <div>
          <div>处理时间：</div>
          <div><span v-if="dataChild.handlerTime">{{dataChild.handlerTime.split(' ')[0]}}</span></div>
        </div>
      </div>
      <div>
        <div>地理位置：</div>
        <div>{{dataChild.location}}</div>
      </div>
      <div>
        <div>问题图片：</div>
        <viewer>
          <img v-lazy="dataChild.imgUrl"
               :data-source="dataChild.originUrl">
        </viewer>
      </div>
    </div>
  </div>
</template>

<script>
  import api from '@/api/command/index'
  export default {
    name: "problemDetailWin",
    data(){
      return {
        dataChild:{}
      }
    },
    props: {
      id:{
        type:Number,
        default(){
          return 0
        }
      }
    },
    watch:{
      id(){
        if(this.id){
          this.getQuestionDetail()
        }
      }
    },
    methods: {
      closeInfoWindow() {
        this.$emit('closeInfoWindow')
      },
      getQuestionDetail(){
        api.getQuestionDetail(this.id).then(res => {
          this.dataChild=res.data?res.data:{}
        }).catch(e => {
          this.dataChild={}
        });
      }
    }
  }
</script>

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

    .info-detail {
      padding-left: 0.743rem;
      padding-right: 0.622rem;
      >div:first-child,>div:nth-child(2){
        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;
          }
          >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(2),div:nth-child(3){
        margin-top: 0.06rem;
      }
      >div:nth-child(3){
        display: flex;
        line-height: 0.2rem;
        >div:first-child{
          font-family: PingFangSC-Regular;
          font-size: 0.14rem;
          color: #989898;
        }
        >div:last-child{
          font-family: PingFangSC-Regular;
          font-size: 0.14rem;
          margin: 0 0.05rem;
          color: #FFFFFF;
          flex: 1;
        }
      }
      >div:last-child{
        margin-top: 0.06rem;
        display: flex;
        >div:first-child{
          font-family: PingFangSC-Regular;
          font-size: 0.14rem;
          color: #989898;
          line-height: 0.2rem;
        }
        >div:last-child{
          display: flex;
        }
        img{
          width: 2.74rem;
          height: 1.44rem;
        }
      }
    }

    .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;
      }
    }

    .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>
