<!--suppress ALL -->
<template>
  <div v-loading="loading" id="detailroute" class="app-container">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="（一）基本信息" name="1" >
        <el-form ref="dataForm" :model="routeForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="路线描述" prop="routeName" >
                <el-input v-model.trim="routeForm.routeName" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'':'必填'" type="text"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="起点地址">
                <el-input v-model.trim="routeForm.startAddress" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'':'起点地址'" type="text"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="终点地址">
                <el-input v-model.trim="routeForm.endAddress" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'':'终点地址'" type="text"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="主要途径道路">
                <el-input v-model.trim="routeForm.mainRoad" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'':'主要途径道路'" type="text"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始日期">
                <el-date-picker
                  v-model="routeForm.startDate"
                  :disabled="dialogStatus=='detail'"
                  :placeholder="dialogStatus=='detail'?'':'开始日期'"
                  style="width: 100%"
                  type="date"
                  value-format="yyyy-MM-dd"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束日期">
                <el-date-picker
                  v-model="routeForm.endDate"
                  :disabled="dialogStatus=='detail'"
                  :placeholder="dialogStatus=='detail'?'':'结束日期'"
                  style="width: 100%"
                  type="date"
                  value-format="yyyy-MM-dd"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="准行时间段">
                <el-checkbox-group v-model="accessTime">
                  <el-checkbox v-for="time in times" :label="time" :key="time" :disabled="dialogStatus=='detail'" style="width: 90px;line-height: 10px">{{ time }}:00</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model.trim="routeForm.remarks" :disabled="dialogStatus=='detail'" :placeholder="dialogStatus=='detail'?'':'备注'" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="（二）关联车辆" name="2">
        <div v-if="carlist.length==0" style="margin-left: 40px;padding-top: 10px">
          暂无关联车辆
        </div>
        <div v-else class="infinite-list-wrapper" style="overflow:auto;padding-left: 40px;padding-top: 10px">
          <el-checkbox-group v-model="removelist" class="checkbox" disabled>
            <el-checkbox v-for="item in carlist" :label="item.id" :key="item.id" style="width: 150px">{{ item.description }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-collapse-item>
      <el-collapse-item title="（三）地图展示" name="3">
        <div id="map">
          <map-view ref="map" @ready="initMap">
            <l-polyline :lat-lngs="pathlist" />
            <l-marker
              v-for="(star,index) in pathlist"
              :icon="index==0?iconStart:index==(pathlist.length-1)?iconEnd:iconMiddle"
              :key="'star'+index"
              :lat-lng="star"/>
          </map-view>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import { getRouteInfo } from '@/api/sanitation/route'
import * as L from 'leaflet'
import { LMarker, LPolyline } from 'vue2-leaflet'
import MapView from '../mapViews/mapView'
import {getConstant} from '@/utils/routeutils'
import { getPathBounds, getCenterByBounds, getZoomByBounds } from '@/utils/maputils'
export default {
  components: { MapView, LMarker, LPolyline },
  data() {
    const routeConstant = getConstant()
    return {
      loading: true, // 加载状态
      dialogStatus: 'detail', // 对话框类型：create,update
      activeNames: ['1', '2', '3'], // 可以展开的面板
      deptShow: true,
      routeId: '', // 路线id
      map: null, // 地图对象
      list: [], // ?
      accessTime: [], // 允许通行时间列表
      carlist: [], // ?
      removelist: [], // 移除车辆列表
      pathlist: [], // 路线列表
      routeForm: {
        id: '',
        routeName: '',
        alarmType: '',
        alarmDistance: '',
        startAddress: '',
        endAddress: '',
        mainRoad: '',
        startDate: '',
        endDate: '',
        accessTime: '',
        remarks: ''
      }, // 路线基本信息表单
      times: routeConstant.times, // 所有时间列表
      options: routeConstant.timeSelectOptions, // 允许通行时间下拉选项
      iconStart: L.icon({
        iconUrl: require('../../assets/icons/start.png'),
        iconSize: [45, 45], // 图片大小
        iconAnchor: [22, 35] // 偏移x,y，针对图片的左上角
      }), // 开始图标
      iconEnd: L.icon({
        iconUrl: require('../../assets/icons/end.png'),
        iconSize: [45, 45], // 图片大小
        iconAnchor: [22, 35] // 偏移x,y，针对图片的左上角
      }), // 结束图标
      iconMiddle: L.divIcon({
        className: 'my-div-icon', // 自定义icon css样式
        iconSize: [15, 15]// 点大小
      }) // 中间图标
    }
  },
  created() {
    this.initdata()
  },
  methods: {
    // 初始化地图
    initMap() {
      this.map = this.$refs.map.map
    },
    // 初始化基础数据
    initdata() {
      if (this.$route.query) {
        this.routeId = this.$route.query.id
        this.routeForm = {
          id: this.$route.query.id,
          routeName: this.$route.query.routeName,
          alarmType: this.$route.query.alarmType,
          alarmDistance: this.$route.query.alarmDistance,
          startAddress: this.$route.query.startAddress,
          endAddress: this.$route.query.endAddress,
          mainRoad: this.$route.query.mainRoad,
          startDate: this.$route.query.startDate,
          endDate: this.$route.query.endDate,
          accessTime: this.$route.query.accessTime,
          remarks: this.$route.query.remarks
        }
        if (this.routeForm.accessTime.length !== 0) {
          var accesslist = this.routeForm.accessTime.split(',')
          this.accessTime = []
          for (var i = 0; i < accesslist.length; i++) {
            this.accessTime.push(Number(accesslist[i]))
          }
        }
      }
      // 获取路线详情
      getRouteInfo(this.routeId).then(response => {
        this.loading = false
        this.carlist = response.data.carList // 车辆列表
        this.removelist = []
        for (var i = 0; i < this.carlist.length; i++) {
          this.removelist.push(this.carlist[i].id)
        }
        this.pathlist = []
        for (i = 0; i < response.data.pathList.length; i++) {
          var item = [Number(response.data.pathList[i].startLat), Number(response.data.pathList[i].startLng)]
          this.pathlist.push(item)
          if (i === response.data.pathList.length - 1) {
            item = [Number(response.data.pathList[i].endLat), Number(response.data.pathList[i].endLng)]
            this.pathlist.push(item)
          }
        }
        if (this.pathlist.length !== 0) {
          this.setZoom(this.pathlist)
        }
      })
    },
    // 计算缩放边界
    setZoom(points) {
      console.log(points)
      if (points.length > 0) {
        // 计算边界
        const { maxLng, minLng, maxLat, minLat } = getPathBounds(points)
        // 计算中心点
        const { cenLat, cenLng } = getCenterByBounds({ maxLng, minLng, maxLat, minLat })
        // 计算缩放
        const zoom = getZoomByBounds({ maxLng, minLng, maxLat, minLat })
        this.map.setView({ lat: cenLat, lng: cenLng }, zoom)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  #detailroute .el-checkbox__label {
    font-size: 15px ;
    font-weight: bold;
  }
  #map {
    width:100%;
    height:50vh;
  }
  .my-div-icon {
    width: 10px;
    height: 10px;
    background-color: orange;
    border-radius: 50%;
  }
  #detailroute .el-form-item {
    margin-bottom: 10px;
  }
  .el-input.is-disabled .el-input__inner {
    background-color: #f8fafd;
    border-color: #E4E7ED;
    color: #696b6f;
    cursor: default;
  }
  .el-textarea.is-disabled .el-textarea__inner{
    background-color: #f8fafd;
    border-color: #E4E7ED;
    color: #696b6f;
    cursor: default;
  }
  .el-checkbox__input.is-disabled + span.el-checkbox__label{
    color: #696b6f;
    cursor: default;
  }
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
    border-color: #696b6f;
  }
</style>