<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">
            {{wellForm.wellCode}}
          </div>
          <div v-for="item in wellInfo" :key="item.title" class="well-info">
            <span class="info-name">{{item.title}}</span>
            <span class="info-value">{{item.value}}</span>
          </div>
        </div>
        <div class="well-info-card" @click="watchDataByWell">
          <div class="well-info-button">
            <span class="info-name">监控内容</span>
            <span class="info-value"><i class="iconfont icon-fanhui2"></i></span>
          </div>
        </div>
        <div class="well-info-card" v-if="imageList.length>0">
          <div class="well-info-button">
            <span class="info-name">路标图片</span>
          </div>
          <div class="img-area">
          <img class="imgzip" v-for="img in imageList" :src="img.url" @click="showBigImage(img.url)"/>
          </div>
        </div>
        <div class="button-div">
          <mt-button type="primary" @click="goToMap">到这里去</mt-button>
        </div>
      </div>
      <mt-popup v-model="bigImageVisible" class="imageShowPopup">
        <img :src="bigImageSrc" style="width: 100%; max-height: 100%"/>
      </mt-popup>

    </div>
  </transition>
</template>

<script>
  import { openMapWindow } from '@/utils/common'
  import { getWellInfo } from '@/api/well'

  export default {
    name: "WellDetail",
    data() {
      return {
        wellForm: {
          id: '', // 闸井id
          wellCode: '', // 闸井编号
          wellName: '', // 闸井名称
          wellType: '', // 闸井类型
          wellTypeName: '', // 闸井类型名称
          deptid: '', // 权属单位
          deptName: '', // 权属单位名称
          bfztName: '', // 布防状态
          deep: '', // 井深，
          position: '', // 位置描述
          coordinateX: '', // 经度
          coordinateY: '', // 纬度
          photos:'',
          notes: '', // 备注,
          qu: '',
          area: '', // 街道
          responsibleDept: '' // 维护人员部门
        }, // 表单
        bigImageVisible:false,//是否显示大图
        bigImageSrc:'',//大图图片路径
      }
    },
    computed:{
      wellInfo(){
        return [
          {
            title:'闸井名称',
            value:this.wellForm.wellName
          },
          {
            title:'闸井类型',
            value:this.wellForm.wellTypeName
          },
          {
            title:'布防状态',
            value:this.wellForm.bfztName
          },
          {
            title:'井深（米）',
            value:this.wellForm.deep
          },
          {
            title:'位置描述',
            value:this.wellForm.position
          }
        ]
      },
      imageList(){
        const urls = this.wellForm.photos.split(';')
        let imageList=[]
        const base_url = process.env.BASE_API + '/static/'
        for (const url of urls) {
          if (url) {
            imageList.push({ name: url, url: base_url + url })
          }
        }
        return imageList
      }
    },
    mounted(){
      this.fetchData(this.$route.params.id)
    },
    methods:{
      fetchData(id){
        getWellInfo(id).then(response => {
          if(response.code==200){
            this.wellForm = response.data
          }
        })
      },
      watchDataByWell(){
        const id = this.wellForm.id
        this.$router.push({
          path:`/watchData/${id}`
        })
      },
      goToMap(){
        openMapWindow(this.wellForm.lngGaode,this.wellForm.latGaode,this.wellForm.wellName)
      },
      //显示大图
      showBigImage(src){
        this.bigImageVisible = true
        this.bigImageSrc = src
      }
    }
  }
</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 0.6rem
      }
      .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{
          float left
        }
        .info-value{
          float right
          color #4b4b4b
          max-width 70%
          text-align right
        }
      }
      .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
      }
    }
  }
  .imageShowPopup{
    width:80%
  }

</style>