<template xmlns:align="">
  <div id="addroute" class="app-container">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="（一）基本信息" name="1" >
        <el-form ref="dataForm" :rules="rules" :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="!canclick2" :placeholder="canclick2==false?'':'必填'" type="text"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="起点地址">
                <el-input v-model.trim="routeForm.startAddress" :disabled="!canclick2" :placeholder="canclick2==false?'':'起点地址'" type="text"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="终点地址">
                <el-input v-model.trim="routeForm.endAddress" :disabled="!canclick2" :placeholder="canclick2==false?'':'终点地址'" 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="!canclick2" :placeholder="canclick2==false?'':'主要途径道路'" type="text"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始日期">
                <el-date-picker
                  v-model="routeForm.startDate"
                  :disabled="!canclick2"
                  :placeholder="canclick2==false?'':'开始日期'"
                  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="!canclick2"
                  :placeholder="canclick2==false?'':'结束日期'"
                  style="width: 100%"
                  type="date"
                  value-format="yyyy-MM-dd"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="准行时间段">
                <el-select v-model="routeForm.accessTime" :disabled="canclick2==false" :placeholder="canclick2==false?'':'准行时间段'" filterable clearable value="" style="width: 100%" @change="accessTimeSelect">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="备注">
                <el-input v-model.trim="routeForm.remarks" :disabled="canclick2==false" :placeholder="canclick2==false?'':'备注'" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="timechoose" :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="canclick2==false" style="width: 90px;line-height: 10px">{{ time }}:00</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div v-if="canclick2==true" style="text-align:center">
          <el-button type="primary" style="width: 200px;font-size: 15px;font-weight: bold" @click="saveData"> >> 下一步，关联车辆</el-button>
        </div>
      </el-collapse-item>
      <el-collapse-item :disabled="canclick2" title="（二）关联车辆" name="2">
        <div style="padding-top: 20px;padding-left: 40px">
          <el-form ref="selectForm" :inline="true" :model="listQuery">
            <el-form-item prop="keywords">
              <el-input v-model.trim="listQuery.description" placeholder="车辆描述" clearable/>
            </el-form-item>
            <el-form-item prop="keywords">
              <el-input v-model="listQuery.carCode" placeholder="车牌号" clearable/>
            </el-form-item>
            <el-form-item prop="keywords">
              <el-select v-model="listQuery.carType" filterable placeholder="车辆类型" clearable value="" @change="fetchData()">
                <el-option
                  v-for="item in cartypelist"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item prop="keywords">
              <dept-select v-if="canclick2==false" v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable value=""/>
            </el-form-item>
            <el-button :disabled="canclick3==false" class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
          </el-form>
        </div>
        <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px">
          <el-checkbox-group v-model="carlist" class="checkbox">
            <el-checkbox v-for="item in list" :label="item.id" :key="item.id" :disabled="canclick3==false" style="width: 150px">{{ item.description }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div v-if="canclick3==true" style="text-align:center;padding-top: 10px">
          <el-button type="primary" style="width: 200px;font-size: 15px;font-weight: bold" @click="saveCar"> >> 下一步，规划路线</el-button>
        </div>
      </el-collapse-item>
      <el-collapse-item :disabled="canclick3" title="（三）地图操作" name="3">
        <div v-if="!canclick3" id="map">
          <map-view ref="map" @ready="initMap2">
            <l-control position="topleft" >
              <el-button v-if="!canclick3" class="remove_btn" @click="removeall"/>
            </l-control>
          </map-view>
        </div>
        <div v-if="!canclick3" style="text-align:center;padding-top: 10px;padding-bottom: 50px">
          <el-button type="primary" style="width: 200px;font-size: 15px;font-weight: bold" @click="saveRoute">提交规划路线</el-button>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import { getDictByType } from '@/api/common'
import { addRouteInfo, listUnbindCar, bindCar, addPath } from '@/api/sanitation/route'
import DeptSelect from '@/components/DeptSelect'
import MapView from '../mapViews/mapView'
import LControl from 'vue2-leaflet/src/components/LControl'
import '@geoman-io/leaflet-geoman-free'
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'

export default {
  name: 'AddRoute',
  components: { LControl, MapView, DeptSelect },
  data() {
    return {
      activeNames: ['1'], // 当前激活面板
      deptShow: true, // 部门是否强制显示
      carlist: [], // 选中的车辆列表
      list: [], // 车辆列表
      cartypelist: [], // 车辆类型列表
      canclick2: true, // 可以点击第一个tab
      canclick3: true, // 可以点击第二个tab
      timechoose: false, // 是否自定义时间段
      accessTime: [], // 自定义时间段选中结果
      map: null, // 地图
      baselayer: [], // 地图图层
      markerlayer: null, // 图标图层
      pointForm: {
        routeId: '',
        pointlist: []
      }, // 规划路线表单
      carForm: {
        routeId: '',
        carIds: []
      }, // 关联车辆表单
      listQuery: {
        routeId: '',
        description: '',
        carCode: '',
        carType: '',
        deptId: ''
      }, // 车辆查询条件
      routeForm: {
        sys: '1', // 子系统
        type: '', // 类型：waste垃圾转运，clean路面清扫
        id: '',
        routeName: '',
        alarmType: '',
        alarmDistance: '',
        startAddress: '',
        endAddress: '',
        mainRoad: '',
        startDate: '',
        endDate: '',
        accessTime: '',
        remarks: ''
      }, // 表单
      times: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
      options: [{
        value: '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23',
        label: '全天（0-23）'
      }, {
        value: '8,9,10,11,12,13,14,15,16,17,18',
        label: '工作时间段（8-18）'
      }, {
        value: '8,9,10,11,12',
        label: '上午工作时间段（8-12）'
      }, {
        value: '14,15,16,17,18',
        label: '下午工作时间段（14-18）'
      }, {
        value: '-1',
        label: '自定义时间段'
      }],
      rules: {
        routeName: [{ required: true, message: '路线描述不能为空', trigger: ['blur', 'change'] }]
      }
    }
  },
  created() {
    // 查询车辆类型
    this.fetchCarType()
  },
  mounted() {
    // 1. 根据路由判断routeForm中type的参数
    const path = this.$route.path
    if (path.includes('waste')) {
      this.routeForm.type = 'waste'
    } else {
      this.routeForm.type = 'clean'
    }
  },
  methods: {
    // 移除所有坐标点
    removeall() {
      var base = this.markerlayer
      this.map.eachLayer(function(layer) {
        if (layer === base) {
          layer.remove()
        }
      })
      this.pointForm.pointlist = []
    },
    // 初始化地图
    initMap2() {
      console.log('initMap2')
      const map = this.$refs.map.map
      this.map = map
      // 添加绘制按钮
      this.map.pm.addControls({
        position: 'topleft',
        drawPolygon: false, // 添加绘制多边形
        drawMarker: false, // 添加按钮以绘制标记
        drawCircleMarker: false, // 添加按钮以绘制圆形标记
        drawPolyline: true, // 添加按钮绘制线条
        drawRectangle:	false,	// 添加按钮绘制矩形
        drawCircle: false, //  添加按钮绘制圆圈
        editMode: false, //  添加按钮编辑多边形
        dragMode: false, //   添加按钮拖动多边形
        cutPolygon: false, // 添加一个按钮以删除图层里面的部分内容
        removalMode: false // 清除图层
      })
      // 设置绘制后的线条颜色，文字显示语言等
      this.map.pm.setLang('zh')
      this.map.pm.setPathOptions({
        color: '#409eff',
        fillColor: 'green',
        fillOpacity: 0.4
      })
      // 绘制完成
      this.map.on('pm:create', e => {
        if (this.pointForm.pointlist.length !== 0) {
          this.$message.warning('只能绘制一条路线')
          e.layer.remove()
        } else {
          console.log(e, '绘制完成时调用')
          console.log(e.layer._latlngs[0].lat)
          let icon = null // 图标
          const removepoints = []
          for (var i = 0; i < e.layer._latlngs.length; i++) {
            if (i === 0) { // 开始图标
              icon = L.icon({
                iconUrl: require('../../assets/icons/start.png'),
                iconSize: [35, 35]
              })
            } else if (i === e.layer._latlngs.length - 1) { // 结束图标
              icon = L.icon({
                iconUrl: require('../../assets/icons/end.png'),
                iconSize: [35, 35]
              })
            } else { // 中间点图标
              icon = L.divIcon({
                className: 'my-div-icon', // 自定义icon css样式
                iconSize: [10, 10]// 点大小
              })
            }
            // 添加点
            var marker = L.marker([e.layer._latlngs[i].lat, e.layer._latlngs[i].lng], {
              icon: icon
            })
            removepoints.push(marker)
          }
          this.markerlayer = L.layerGroup(removepoints)
          map.addLayer(this.markerlayer)
          this.pointForm.pointlist = e.layer._latlngs
        }
      })
    },
    // 查询未关联路线车辆
    fetchData() {
      console.log('fetchData')
      listUnbindCar(this.listQuery).then(response => {
        this.list = response.data
      })
    },
    // 如果准行时间段是选择自定义，则timechoose为true，允许用户自选时间点
    accessTimeSelect(val) {
      if (val === '-1') {
        this.timechoose = true
      } else {
        this.timechoose = false
      }
    },
    // 查询车辆
    search() {
      this.fetchData(false)
    },
    // 保存规划路线
    saveRoute() {
      if (this.pointForm.pointlist.length === 0) {
        this.$message.warning('请规划路线')
      } else {
        addPath(this.pointForm).then(response => {
          if (response.code === 200) {
            this.$message.success('新增路线成功！')
            // 关闭当前标签
            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
            this.$router.go(-1)
          }
        })
      }
    },
    // 保存关联车辆
    saveCar() {
      if (this.carlist.length === 0) {
        this.$message.warning('请至少选择一辆车')
      } else {
        for (var i = 0; i < this.carlist.length; i++) {
          this.carForm.carIds.push(Number(this.carlist[i]))
        }
        console.log(this.carForm)
        bindCar(this.carForm).then(response => {
          if (response.code === 200) {
            this.$message.success('绑定车辆信息成功！')
            this.activeNames = ['3']
            this.canclick3 = false
          }
        })
      }
    },
    // 保存路线基本信息
    saveData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.routeForm.startDate > this.routeForm.endDate) {
            this.$message.warning('请确认输入正确起止时间')
          } else if (this.routeForm.accessTime === '-1' && this.accessTime.length === 0) {
            this.$message.warning('请选择时间段')
          } else {
            var timeselect = false
            if (this.routeForm.accessTime === '-1') {
              timeselect = true
              this.routeForm.accessTime = this.accessTime[0]
              for (var i = 1; i < this.accessTime.length; i++) {
                this.routeForm.accessTime += (',' + this.accessTime[i])
              }
            }
            addRouteInfo(this.routeForm).then(response => {
              if (response.code === 200) {
                this.$message.success('添加规划路线基本信息成功！')
                if (timeselect) {
                  this.routeForm.accessTime = '自定义时间段'
                }
                this.canclick2 = false
                this.carForm.routeId = response.data
                this.listQuery.routeId = response.data
                this.pointForm.routeId = response.data
                this.activeNames = ['2']
                this.fetchData()
              }
            })
          }
        }
      })
    },
    // 获取车辆类别
    fetchCarType() {
      getDictByType('carType').then(response => {
        if (response.code === 200) {
          this.cartypelist = response.data
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  #addroute .el-checkbox__label {
    font-size: 15px ;
    font-weight: bold;
  }
  #addroute .el-form-item {
    margin-bottom: 18px;
  }
  #map {
    width:100%;
    height:50vh;
  }
  .my-div-icon {
    width: 10px;
    height: 10px;
    background-color: orange;
    border-radius: 50%;
  }
  .remove_btn {
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
    z-index: 1000;
    background-image: url("../../assets/icons/delete.png");
    background-position:center;
    background-repeat:no-repeat;
    width: 30px !important;
    height: 30px;
    padding: 15px;
    justify-content: center;
    align-items: center;
    border: 2px solid #ccc;
  }
</style>