<template>
  <el-dialog :visible.sync="dialogFormVisible" title="编辑" append-to-body @close="cancel">
    <div class="info-block">
      <div class="block-body">
        <div class="body-right">
          <el-row>
            <el-col :span="24">
              <div class="item-div">
                <span class="item-title">桥梁名称：</span>
                <span class="item-value-middle">{{ bridgeForm.name }}</span>
                <!--<div class="item-value-middle"><el-input v-model="bridgeForm.name" :disabled="disabled"/></div>-->
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="item-div">
                <span class="item-title">桥型：</span>
                <span class="item-value-middle">{{ bridgeForm.typeName }}</span>
                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.typeName" :disabled="disabled"/></span>-->
              </div>
            </el-col>
            <el-col :span="8">
              <div class="item-div">
                <span class="item-title">柱号：</span>
                <span class="item-value-middle">{{ bridgeForm.bridgeCode }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="item-div">
                <span class="item-title">道路名称：</span>
                <span class="item-value-middle">{{ bridgeForm.roadName }}</span>
                <!--<span class="item-value-middle"><el-input v-model="bridgeForm.roadName" :disabled="disabled"/></span>-->
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="item-div">
                <span class="item-title">高度（m）：</span>
                <span class="item-value-middle">{{ bridgeForm.height }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="item-div">
                <span class="item-title">长度（m）：</span>
                <span class="item-value-middle">{{ bridgeForm.length }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="item-div">
                <span class="item-title">开建时间：</span>
                <span class="item-value-middle">{{ bridgeForm.buildTime }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="item-div">
                <span class="item-title">通车时间：</span>
                <span class="item-value-middle">{{ bridgeForm.openTime }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="item-div">
                <span class="item-title">桥梁照片：</span>
                <span v-show="bridgeForm.photo===''" class="item-value-middle">无</span>
                <el-image
                  v-show="bridgeForm.photo!==''"
                  :src="bridgeForm.photo!==''?bridgeForm.photo:null"
                  fit="cover"
                  style="width: 130px; height: 175px"/></div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="item-div">
                <span class="item-title">桥梁位置：</span>
                <span class="item-value-middle">{{ bridgeForm.position }}</span>
                <el-button class="edit_btn" size="small" @click="checkMap">查看地图</el-button>
                <div v-show="showMap" class="overview-map-container">
                  <div id="map"/>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <div class="item-div">
                <span class="item-title" style="display: inline-block; float: left">桥梁简介：</span>
                <el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" style="display: inline-block; float: left" show-word-limit/>
              </div>
            </el-col>
          </el-row>
        </div>
        <!--<div class="clearfloat"/>-->
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { getDetail } from '@/api/system/bridge'
import * as L from 'leaflet'

export default {
  name: 'EditBridge',
  data() {
    return {
      dialogFormVisible: false,
      showMap: false,
      map: null,
      icon: 'static/images/well/0100.png',
      bridgeForm: {
        id: '',
        name: '',
        type: '',
        typeName: '',
        bridgeCode: '',
        roadName: '',
        height: '',
        length: '',
        buildTime: '',
        openTime: '',
        position: '',
        description: '',
        status: '',
        statusName: '',
        photo: ''
      },
      // baseUrl: process.env.BASE_API + '/static/', // 图片基础路径
      // token: '?token=' + this.$store.getters.token, // token,
      disabled: true,
      defaultPhoto: '' // require('../../../assets/global_images/photo.jpg') // 默认图片路径
    }
  },
  mounted() {
  },
  methods: {
    initDialog: function(dialogFormVisible, bridgeId = '') {
      this.dialogFormVisible = dialogFormVisible
      getDetail(bridgeId).then(response => {
        this.bridgeForm = response.data
      })
    },
    checkMap() {
      this.showMap = true
      const map = L.map('map', {
        minZoom: 3,
        maxZoom: 14,
        center: [39.550339, 116.114129],
        zoom: 12,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      this.map = map // data上需要挂载
      window.map = map
      L.tileLayer(
        // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
      ).addTo(map)
      L.marker([39.550339, 116.114129], {
        // icon: greenIcon,
        title: '桥梁信息'
      }).addTo(map)
    },
    cancel() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $left-width: 160px;
  .info-block{
    margin-left: 40px;
    padding-bottom: 20px;
    /*overflow: ;*/
    .block-title-div{
      font-size: 17px;
      color: #1f2d3d;
      font-weight: bold;
      /*border-bottom: 1px solid #d3dce6;*/
      .block-title{
        padding-left: 10px;
        /*margin-bottom: 10px;*/
        /*border-left: 5px solid #004493;*/
      }
    }
    .block-body{
      /*margin-top: 20px;*/
      /*margin-left: 50px;*/
      .body-left{
        width: $left-width;
        /*float: left;*/
      }
      .body-right{
        width: calc( 100% - 80px );
        /*float: left;*/
        .item-div{
          line-height: 40px;
          font-size:14px;
          .item-title{
            text-align: right;
            width:120px;
            color: #909090;
            font-weight: bold;
            float:left;
          }
          .item-value-middle{
            margin-left: 10px;
            color: #a5a5a5;
            width: 280px !important;
            /*float:left;*/
          }
          .item-value-long{
            margin-left: 10px;
            color: #a5a5a5;
            width: 790px !important;
            /*float:left;*/
          }
        }
      }
    }
    .person-photo{
      width: 106px;
      height: 150px;
      padding: 1px;
      border: 1px solid #92dfff;
    }

  }
</style>