<template>
  <div class="info-block">
    <div class="block-body">
      <el-row class="table-title">
        <el-col :span="3">
          <div class="title-header">
            <i class="el-icon-menu" style="margin-right: 10px;"/>{{ bridgeForm.name }}
          </div>
        </el-col>
        <el-col :span="3" :offset="18">
          <el-button v-if="!isEditMode" type="primary" icon="el-icon-edit-outline" @click="edit">编辑</el-button>
        </el-col>
      </el-row>

      <el-form ref="dataForm" :label-position="labelPosition" :model="bridgeForm" label-width="120px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="桥型" prop="typeName">
              <el-input v-model="bridgeForm.typeName" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="桥梁编号" prop="bridgeCode">
              <el-input v-model="bridgeForm.bridgeCode" type="text" placeholder="未知" disabled/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="高度（m）" prop="high">
              <el-input v-model="bridgeForm.high" disabled type="text" placeholder="未知" />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="长度（m）" prop="length">
              <el-input v-model="bridgeForm.length" disabled type="text" placeholder="未知" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="建设时间" prop="buildTime">
              <el-date-picker v-model="bridgeForm.buildTimeStr" disabled type="date" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item label="通车时间" prop="openTime">
              <el-date-picker v-model="bridgeForm.openTimeStr" disabled type="date" placeholder="选择日期" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="21">
            <el-form-item label="简介" prop="description">
              <el-input v-model="bridgeForm.description" disabled type="textarea" autosize placeholder="未知" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="block-body">
      <el-row class="table-title">
        <el-col :span="3">
          <div class="title-header"><i class="el-icon-menu" style="margin-right: 10px;"/>图片</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col v-show="photo!==''">
          <div class="img-box">
            <el-image
              :src="photo"
              :preview-src-list="srcList"
              fit="cover"
              style="vertical-align: top;"/>
          </div>
          <div style="margin-left: 120px; padding: 15px 0px;">共 {{ srcList.length }} 张，点击图片以预览大图</div>
        </el-col>
      </el-row>
    </div>

    <div class="block-body">
      <el-row class="table-title">
        <el-col :span="3">
          <div class="title-header"><i class="el-icon-menu" style="margin-right: 10px;"/>位置</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <div id="map" class="img-box" style="height: 300px;" />
        </el-col>
      </el-row>
    </div>

    <div class="block-body">
      <el-row class="table-title">
        <el-col :span="3"><div class="title-header"><i class="el-icon-menu" style="margin-right: 10px;"/>养护记录</div></el-col>
      </el-row>

      <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small" @change="changePage">
        <template slot="columns">
          <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align">-->
            <template slot-scope="scope">
              <span v-if="column.text == '所属桥梁 / 道路'">{{ scope.row[column.value]!==''? scope.row[column.value]:scope.row['roadName'] }}</span>
              <span v-else>{{ scope.row[column.value] }}</span>
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </div>

    <edit-bridge ref="editBridge" @watchChild="fetchData" />
  </div>
</template>
<script>
import { getDetail } from '@/api/system/bridge'
import { getRecordList } from '@/api/system/order'
import L from 'leaflet'
import EditBridge from '@/views/bridge/components/editBridge'

export default {
  name: 'Detail',
  components: { EditBridge },
  data() {
    return {
      showMap: false,
      isEditMode: false,
      bridgeList: [],
      bridgeId: '',
      map: null,
      baseLayer: [],
      photo: '',
      srcList: [],
      bridgeForm: {
        id: '',
        name: '',
        type: '',
        typeName: '',
        bridgeCode: '',
        roadName: '',
        high: '',
        length: '',
        buildTime: '',
        buildTimeStr: '',
        openTime: '',
        openTimeStr: '',
        position: '',
        description: '',
        status: '',
        statusName: '',
        photo: ''
      },
      labelPosition: 'right',
      listQuery: {
        bridgeId: '', // 所属桥梁id
        offset: 1,
        limit: 10,
        sort: 'maintainTime',
        order: 'desc'
      }, // 筛选条件
      tableOption: {
        head: {
          show: false, // 是否需要标题栏，
          text: '数据列表' // 标题名称
        },
        options: {
          needIndex: true // 是否需要序号列
        },
        toolsOption: {
          selectColumns: false, // 是否需要筛选列
          refresh: false // 是否需要刷新按钮
        }
      },
      columns: [
        {
          text: '日期',
          value: 'maintainTimeStr',
          align: 'center',
          width: 160
        },
        {
          text: '所属桥梁/道路',
          value: 'bridgeName',
          align: 'center',
          width: 160
        },
        {
          text: '责任人',
          value: 'personName',
          align: 'center',
          width: 160
        },
        {
          text: '情况描述',
          value: 'content',
          align: 'center'
        }
      ], // 显示列
      list: [], // 列表数据
      total: 0, // 数据总数
      listLoading: true // 加载动画
    }
  },
  mounted() {
    this.bridgeList = this.baseConfig.bridges
  },
  methods: {
    fetchData(bridgeName) {
      this.bridgeList.forEach(bridge => {
        if (bridge.name.indexOf(bridgeName) >= 0) {
          this.initMap(bridge.lng, bridge.lat)

          this.bridgeId = bridge.id
          this.listQuery.bridgeId = bridge.id
          getRecordList(this.listQuery).then(response => {
            this.list = response.data.rows
            this.total = parseInt(response.data.total)
            this.listLoading = false
          })
        }
      })
      if (this.bridgeId !== '') {
        getDetail(this.bridgeId).then(response => {
          if (response.code === 200) {
            this.bridgeForm = response.data

            // 解析图片
            this.photo = this.bridgeForm.photo
            this.srcList = []
            if (this.photo !== '') {
              const that = this
              this.photo.split(';').forEach(img => {
                if (img.indexOf('http') >= 0) {
                  that.srcList.push(img)
                } else {
                  that.srcList.push(that.baseConfig.baseUrl + 'static/' + img)
                }
              })

              this.photo = this.srcList[0]
            }

            this.listLoading = false
          }
        })
      }
    },
    initMap(lng, lat) {
      this.showMap = true
      const map = L.map('map', {
        minZoom: 15,
        maxZoom: 18,
        center: [lat, lng],
        zoom: 16,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      map.invalidateSize(true)
      map.doubleClickZoom.disable()
      map.scrollWheelZoom.disable()
      map.dragging.disable()
      this.map = map // data上需要挂载
      window.map = map
      this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map))
      this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map))

      const Icon = L.icon({
        iconUrl: require('@/assets/global_images/location_green.png'),
        iconSize: [32, 32],
        iconAnchor: [16, 32],
        popupAnchor: [0, -32]
      })

      L.marker([lat, lng], {
        icon: Icon
      }).addTo(this.map)
    },
    edit() {
      this.$refs.editBridge.initDialog(true, this.bridgeForm)
    },
    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
    changePage(val) {
      if (val && val.size) {
        this.listQuery.limit = val.size
      }
      if (val && val.page) {
        this.listQuery.offset = val.page
      }
      this.fetchData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $left-width: 160px;
  .info-block {
    margin: 10px 20px;

    .block-title-div {
      font-size: 17px;
      color: #1f2d3d;
      font-weight: bold;

      .block-title{
        padding-left: 10px;
        margin-bottom: 10px;
      }
    }
    .block-body {
      background-color: #fffffb !important;
      margin-top: 20px;

      .table-container {
        border-top: none !important;
      }

      .table-title {
        margin-top: 10px;
        margin-bottom: 10px;
        .title-header {
          height: 40px;
          padding: 10px;
          color: #606266;
        }
      }

      .img-box {
        width: 430px;
        margin-left: 120px;
        border: 1px solid #9c9c9c;
        border-radius: 4px;
      }
    }
  }
</style>