<template>
  <div class="info-block">
    <div class="block-body">
      <el-row class="body-right">
        <el-row>
          <el-col :span="12">
            <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="12">
            <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.substr(0,10) }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item-div">
              <span class="item-title">通车时间：</span>
              <span class="item-value-middle">{{ bridgeForm.openTime.substr(0,10) }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div class="item-div">
              <span class="item-title" style="vertical-align: top;">桥梁图片：</span>
              <span v-show="photo===''" class="item-value-middle">无</span>
              <el-image
                v-if="photo!==''"
                :src="photo!==''?photo:null"
                fit="cover"
                style="width: 430px; height: 275px; margin-top:20px; margin-left: 10px;vertical-align: top;"/>
              <el-upload
                ref="upload"
                :before-upload="handleBeforeUpload"
                :http-request="uploadPhoto"
                :show-file-list="false"
                style="display: inline-block;vertical-align: top;"
                action="string"
                accept=".jpg,.jpeg,.png">
                <el-button v-show="isEditMode" class="edit_btn" type="primary" size="small" style="vertical-align: bottom;" @click="uploadPhoto">上传桥梁图片</el-button>
              </el-upload>
            </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-if="showMap" id="map" style="height: 480px; width: 800px; margin-left: 130px" keep-alive/>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="item-div">
              <span class="item-title" style="vertical-align: top;">桥梁简介：</span>
              <span v-show="!isEditMode" class="item-value-long">{{ bridgeForm.description }}</span>
              <span v-show="isEditMode" class="item-value-long" ><el-input v-model="bridgeForm.description" :rows="3" :maxlength="100" type="textarea" show-word-limit/></span>
            </div>
          </el-col>
        </el-row>
        <el-row v-show="isEditMode" style="margin-top: 30px;text-align: center">
          <el-button type="primary" @click="saveData">保存</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-row>
      </el-row>
    </div>
    <div class="clearfloat"/>
  </div>
</template>
<script>
import { getDetail, updateBridge } from '@/api/system/bridge'
import L from 'leaflet'

export default {
  name: 'Detail',
  data() {
    return {
      showMap: false,
      isEditMode: false,
      bridgeList: [
        { id: 1, name: '永胜桥', lat: 27.763248, lng: 116.043450 },
        { id: 2, name: '黄洲桥', lat: 27.760096, lng: 116.053659 },
        { id: 3, name: '光明桥', lat: 27.767046, lng: 116.058659 }
      ],
      map: null,
      baselayer: [],
      icon: 'static/images/well/0100.png',
      photo: '',
      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: {
    fetchData(bridgeId) {
      getDetail(bridgeId).then(response => {
        this.bridgeForm = response.data
        this.photo = this.bridgeForm.photo
        this.listLoading = false
      })
    },
    checkMap() {
      this.initMap()
      this.initMap()
    },
    initMap() {
      debugger
      this.showMap = true
      const map = L.map('map', {
        minZoom: 2,
        maxZoom: 18,
        center: [27.763248, 116.043450],
        zoom: 16,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      map.invalidateSize(true)
      map.doubleClickZoom.disable()
      this.map = map // data上需要挂载
      window.map = map
      this.baselayer.push(L.tileLayer(
        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
      ).addTo(map))
      this.baselayer.push(L.tileLayer(
        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
      ).addTo(map))
      var Icon = L.icon({
        iconUrl: require('../../../assets/global_images/location_green.png'),
        iconSize: [30, 30]
      })
      if (this.bridgeForm.name === '永胜桥') {
        this.map.setView({ lat: 27.763248, lng: 116.043450 }, 16)
        L.marker([27.763248, 116.043450], {
          icon: Icon
        }).addTo(this.map)
      } else if (this.bridgeForm.name === '黄洲桥') {
        this.map.setView({ lat: 27.760096, lng: 116.053659 }, 16)
        L.marker([27.760096, 116.053659], {
          icon: Icon
        }).addTo(this.map)
      } else if (this.bridgeForm.name === '光明桥') {
        this.map.setView({ lat: 27.767046, lng: 116.058659 }, 16)
        L.marker([27.767046, 116.058659], {
          icon: Icon
        }).addTo(this.map)
      }
    },
    showUploadBut() {
      this.isEditMode = true
    },
    saveData() {
      // 照片不为空则对照片进行处理
      if (this.photo !== '') {
        let index = this.photo.indexOf('/static/')
        if (index !== -1) {
          index += 8
        }
        this.bridgeForm.photo = this.photo.substring(index)
      }
      updateBridge(this.bridgeForm).then(res => {
        if (res.code === 200) {
          this.$message.success('编辑成功')
        }
      })
      this.isEditMode = false
    },
    // 图片上传
    uploadPhoto(file) {
      // console.log('uploadFile:' + file.file.name)
      // const base_url = process.env.BASE_API + '/static/'

      // 转base64
      this.getBase64(file.file).then(resBase64 => {
        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
        console.log(this.photo)
      })
    },
    // 上传前判断文件格式及大小
    handleBeforeUpload(file) {
      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
      let res = true
      console.log(file.size)
      const isLt2M = file.size / 1024 < 200
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
        res = false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 200KB!')
        res = false
      }
      return res
    },
    // 上传成功后回显
    handleSuccess(response, file) {
      console.log('handleSuccess')
      debugger
      const base_url = process.env.BASE_API + '/static/'
      if (response.code === 200) {
        this.photo = base_url + response.data
      } else {
        this.$message.warning(response.message)
      }
    },
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        let fileResult = ''
        reader.readAsDataURL(file)
        // 开始转
        reader.onload = function() {
          fileResult = reader.result
        }
        // 转 失败
        reader.onerror = function(error) {
          reject(error)
        }
        // 转 结束  咱就 resolve 出去
        reader.onloadend = function() {
          resolve(fileResult)
        }
      })
    },
    cancel() {
      this.isEditMode = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $left-width: 160px;
  .info-block{
    /*overflow-y: scroll;*/
    /*white-space: nowrap;*/
    margin: 10px 20px;
    padding-bottom: 120px;
    /*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{
      background-color: #fffffb !important;
      margin-top: 20px;
      margin-left: 50px;
      .body-left{
        width: $left-width;
        /*float: left;*/
      }
      .body-right{
        width: calc( 100% - 160px );
        float: left;
        .item-div{
          line-height: 55px;
          font-size:17px;
          .item-title{
            text-align: right;
            width:120px;
            color: #909090;
            font-weight: bold;
            display: inline-block;
          }
          .item-value-middle{
            margin-left: 10px;
            color: #a5a5a5;
            width: 280px !important;
            display: inline-block;
          }
          .item-value-long{
            margin-left: 10px;
            color: #a5a5a5;
            width: 680px !important;
            display: inline-block;
          }
        }
      }
    }
  }
  avatar-uploader .el-upload {
    margin-left: 12px;
    margin-top: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar {
    margin: 10px;
    display: block;
  }
  // 地图
  .overview-map-container{
    width: 100%;
    padding: 5px;
    .map-demo{
      width: 100%;
      height: calc(100vh - 78px);
      .svg-icon{
        width: 20px;
        height: 20px;
      }
      .alarm-icon{
        width:30px;
        height: 30px;
      }
      .nomal-info-window{
        background-color: pink;
      }
      .info-window{
        max-width: 250px;
        /*background-color: lightcyan;*/
        .info-header{
          padding: 10px 10px 5px 10px;
          line-height: 30px;
          font-weight: bold;
          /*background-color: #eaf4ff;*/
        }
        .info-body{
          padding: 5px 10px 10px 10px;
          line-height: 23px;
          font-size: 14px;
        }
      }
      .alarm-window{
        max-width: 250px;
        /*background-color: #ffeaf1;*/
        .alarm-header {
          padding: 10px 10px 5px 10px;
          line-height: 30px;
          color: red;
          font-weight: bold;
          /*background-color: #ffecec;*/
        }
        .alarm-body{
          padding: 5px 10px 10px 10px;
          line-height: 23px;
          font-size: 14px;
          .alarm-red{
            color: #ff0000;
          }
        }
      }
    }
  }
</style>