<template>
  <div class="container">
    <el-amap ref="map" :center="center" :zoom="zoom" :zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)"
      @init="init" :extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-demo">
      <el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions" :draggable="draggable"
        @click="JSONclick" />
      <el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="marker.id"
        :position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }">
        <div class="markerStyles">
          <div v-if="marker.name" class="marker-Text">{{ marker.name }}</div>
          <img :src="marker.imgSrc" alt="">
        </div>
      </el-amap-marker>

      <el-amap-info-window v-if="personInfo.visible" anchor="bottom-center" :offset="[30, 0]" :closeWhenClickMap="true"
        :position="personInfo.position" :visible.sync="personInfo.visible" :zIndex="900">
        <div class="infowindow-box" v-if="titleShow == '人员'">
          <div class="infowindow-box-title">
            <div>人员信息:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
          </div>
          <div class="infowindow-box-item">
            <div class="isisbox">
              <div>姓名:</div><span>张三</span>
            </div>
            <div class="isisbox">
              <div>部门:</div><span>xxx</span>
            </div>
            <div class="isisbox">
              <div>联系方式:</div><span>13611111111</span>
            </div>
            <div class="isisbox">
              <div>当前位置:</div><span>xxxxxx</span>
            </div>
          </div>
        </div>
        <div class="infowindow-box" v-if="titleShow == '车辆'">
          <div class="infowindow-box-title">
            <div>车辆信息:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
          </div>
          <div class="infowindow-box-item infowindow-box-itemTow">
            <div class="isisbox">
              <div>驾驶员姓名:</div><span>张三</span>
            </div>
            <div class="isisbox">
              <div>联系方式:</div><span>xxx</span>
            </div>
            <div class="isisbox">
              <div>车辆类型:</div><span>13611111111</span>
            </div>
            <div class="isisbox">
              <div>车牌号:</div><span>xxxxxx</span>
            </div>
          </div>
        </div>
      </el-amap-info-window>
    </el-amap>
    <div class="dituzhadian" @click="loogshowCK">
      <div>地图扎点</div>
      <img src="@/assets/images/zhadian.png" alt="">
    </div>
    <div class="toptuli">
      <div>
        图例
      </div>
      <div class="zuoyou">
        <img src="@/assets/images/icon/A-jianguanrenyuan.png" alt="">
        <div>人员</div>
      </div>
      <div class="zuoyou">
        <img src="@/assets/images/icon/A-cheliang.png" alt="">
        <div>车辆</div>
      </div>
    </div>

    <el-dialog :visible.sync="showCK" width="40%" title="地图扎点" @close="close" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <div class="diandian">
        <el-radio v-model="radio" label="1">人员扎点</el-radio>
        <el-radio v-model="radio" label="2">车辆扎点</el-radio>
      </div>
      <div v-if="radio == 1">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="mytitle == '查看人员'">
          <el-form-item label="姓名" size="mini" prop="xm">
            <el-input v-model="form.xm" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="xb">
            <el-select v-model="form.xb" multiple placeholder="请选择" size="mini">
              <el-option v-for="item in options" :key="item.value" :label="item.groupName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="联系方式" size="mini" prop="sfzh">
            <el-input v-model="form.sfzh" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="职责描述" size="mini" prop="zz">
            <el-input v-model="form.zz" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="社会关系" prop="shgx">
            <el-input type="textarea" resize="none" :rows="5" v-model="form.shgx" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="radio == 2">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="mytitle == '查看人员'">
          <el-form-item label="驾驶员姓名" size="mini" prop="xm1">
            <el-input v-model="form.xm1" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="联系方式" size="mini" prop="lxfs1">
            <el-input v-model="form.lxfs1" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="车辆类型" size="mini" prop="sfzha">
            <el-input v-model="form.sfzha" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="车牌号" size="mini" prop="zz1">
            <el-input v-model="form.zz1" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer" v-show="mytitle != '查看人员'">
        <el-button size="mini" icon="el-icon-refresh-left" @click="reset('form')">重置</el-button>
        <el-button size="mini" type="primary" icon="el-icon-document" @click="save('form')">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"

export default {
  name: '',
  components: {},
  data() {
    return {
      mytitle: "地图扎点",
      zoom: 11.8,
      zooms: [3, 20],
      center: [121.298563, 32.451807],
      map: null,
      draggable: false,
      visible: true,
      radio: "1",
      changshazhen: changshazhen,
      polygonOptions: {
        strokeColor: '#00C5EC',
        fillColor: '#00AEFF'
      },
      options: [],
      form: {

      },
      showCK: false,
      rules: {

      },
      personInfo: {
        position: [],
        info: {},
        visible: false,
      },
      titleShow: "人员",
      markers: [
        {
          position: [121.183697866903292, 32.460227941215508],
          id: 1,
          name: "人员",
          content: '<i class="el-icon-user-solid bendiren"></i>',
          imgSrc: require("@/assets/images/icon/A-jianguanrenyuan.png")
        },
        {
          position: [121.235712627230569, 32.447218823220901],
          id: 2,
          name: "车辆",
          content: '<i class="el-icon-user-solid bendiren"></i>',
          imgSrc: require("@/assets/images/icon/A-cheliang.png")
        },
        {
          position: [121.318413448767714, 32.411908360092688],
          id: 3,
          name: "车辆",
          content: '<i class="el-icon-user-solid bendiren"></i>',
          imgSrc: require("@/assets/images/icon/A-cheliang.png")
        },
        {
          position: [121.359751265879749, 32.39683020264299],
          id: 4,
          name: "人员",
          content: '<i class="el-icon-user-solid bendiren"></i>',
          imgSrc: require("@/assets/images/icon/A-jianguanrenyuan.png")
        },
      ],
    }
  },
  created() { },
  mounted() { },
  methods: {
    markersClosePopup(){
      this.personInfo.visible = false

    },
    getMap() {
      // bmap vue component
      console.log('$refs: ', this.$refs.map.$$getInstance())
    },
    init(map) {
      this.map = map;
      // o.setMapStyle('amap://styles/darkblue')
      console.log(this.map.getCenter())
      console.log(this.$refs.map.$$getInstance())
    },
    // 地图点击事件
    click() {
      alert('click map')
    },
    JSONclick() { },
    clickArrayMarker(e) {
      this.personInfo.visible = true
      this.personInfo.position = e.position
      this.personInfo.info = {}
      this.titleShow = e.name

    },
    close() {
      this.form = {

      }
      this.showCK = false;
    },
    loogshowCK() {
      this.showCK = true;

    },

  },
  computed: {}
}
</script>
<style scoped lang='scss'>
.container {
  position: relative;

  .dituzhadian {
    top: 10px;
    left: 10px;
    cursor: pointer;
    position: absolute;
    width: 120px;
    height: 50px;
    color: #000000;
    background: #ffffff;
    border-radius: 5px;
    font-family: 'Source Han Sans CN--Bold';
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 30px;
    }
  }
}

.toptuli {
  top: 10px;
  right: 10px;
  cursor: pointer;
  position: absolute;
  width: 120px;
  color: #000000;
  background: #ffffff;
  border-radius: 5px;
  font-family: 'Source Han Sans CN--Bold';
  font-size: 16px;
  padding: 10px;

  .zuoyou {
    display: flex;
    align-items: center;
    margin: 10px 0;

    img {
      width: 30px;
      margin-right: 10px;
    }
  }
}

.diandian {
  width: 100%;
  margin: 15px 0;
  margin-left: 100px;


}

.infowindow-box {
  width: 300px;
  min-height: 100px;
  color: #000000;
  font-family: 'Source Han Sans CN--Bold';
  background: #fff;

  .infowindow-box-title {
    width: 100%;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    border-bottom: 1px solid #ccc;

    img {
      width: 15px;
      cursor: pointer;
    }
  }

  .infowindow-box-item {
    padding: 20px;

    .isisbox {
      margin: 10px 0;
      display: grid;
      grid-template-columns: 25% 70%;

      div {
        font-size: 14px;
        text-align: right;


      }

      span {
        font-size: 12px;
        color: #4b4848;

      }
    }
  }

  .infowindow-box-itemTow {
    .isisbox {
      display: grid;
      grid-template-columns: 30% 70%;


    }
  }
}
</style>
