<!--
 * @Author: your name
 * @Date: 2020-12-01 09:07:41
 * @LastEditTime: 2020-12-18 13:19:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \rs-cloud\src\views\webSiteManagement\aboutUs.vue
-->
<template>
  <div id="AboutUs">
    <!-- 顶部功能栏 -->
    <div class="top">
      <div class="title">关于我们</div>
    </div>
    <div class="content">
      <el-form ref="form" :model="form" label-width="180px" :rules="rule">
        <el-form-item label="联系电话" prop="phone">
          <el-col :span="12">
              <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-col :span="12">
              <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="公司地址" prop="address">
          <el-col :span="12">
              <!-- <el-input v-model="form.address" placeholder="请输入公司地址"></el-input> -->
              <el-autocomplete style="width:100%;"
                popper-class="autoAddressClass"
                v-model="form.address"
                :fetch-suggestions="querySearchAsync"
                :trigger-on-focus="false"
                placeholder="详细地址"
                @select="handleSelect"
                clearable>
              <template slot-scope="{ item }">
                <i class="el-icon-search fl mgr10"></i>
                <div style="overflow:hidden;">
                  <div class="title">{{ item.title }}</div>
                  <span class="address ellipsis">{{ item.address }}</span>
                </div>
              </template>
            </el-autocomplete>
          </el-col>
        </el-form-item>
        <el-form-item label="" prop="lat">
          <div id="map-container">

          </div>
        </el-form-item>
        <el-form-item label="公司简介" prop="intro">
            <el-col :span="20">
                <kind-editor id="editor_id" :content.sync="form.intro" :afterChange="afterChange()" :loadStyleMode="false"@on-content-change="onContentChange"></kind-editor>
            </el-col>
        </el-form-item>
        <el-form-item>
          <el-button>取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  getCompanyInfo,
  setCompanyInfo,
} from "@/api/website/aboutUs/index";
import KindEditor from "@/components/Kindeditor";
import loadBMap from '@/utils/loadBMap.js'
import { addUpdate, companyInfo } from "api/website/aboutUs"
export default {
  name: "AboutUs",
  components: {
      KindEditor
  },
  data() {
    return {
      form: {
        id: undefined,
        phone: undefined, // 联系电话
        email: undefined, // 邮箱
        address: undefined, // 地址
        lat: 23.12005,
        lng: 113.30765,
        intro: undefined // 简介
      },
      rule: {
        phone: {
          required: true,
          message: "请输入电话",
          trigger: "blur"
        },
        email: {
          required: true,
          message: "请输入邮箱",
          trigger: "blur"
        },
        address: {
          required: true,
          message: "请输入地址",
          trigger: "blur"
        },
        lng: {
          required: true,
          message: "请输入经纬度",
          trigger: "blur"
        },
        lat: {
          required: true,
          message: "请输入经纬度",
          trigger: "blur"
        },
        intro: {
          required: true,
          message: "请输入简介",
          trigger: "blur"
        },
      },
      map: '', //地图实例
      mk: '' //Marker实例
    };
  },
  async mounted() {
    await loadBMap('gvQPveN9YrlPSgKUMPK2u2u2BA4yQFRm')
    this.initMap()     
  },
  methods: {
    initMap() {
      var that = this;
      this.map = new BMap.Map("map-container", {enableMapClick:false})  //新建地图实例，enableMapClick:false ：禁用地图默认点击弹框
      var point = new BMap.Point(this.form.lng, this.form.lat);
      this.map.centerAndZoom(point,19)

      /** 设置图像标注并绑定拖拽标注结束后事件 */
      this.mk = new BMap.Marker(point,{enableDragging:true}) //创建一个图像标注实例，enableDragging：是否启用拖拽，默认为false
      this.map.addOverlay(this.mk) //将覆盖物添加到地图中
      this.mk.addEventListener('dragend', function(e){
        that.getAddrByPoint(e.point) //拖拽结束后调用逆地址解析函数，e.point为拖拽后的地理坐标
      });

      /** 添加（右上角）平移缩放控件 */
      var navigationControl = new BMap.NavigationControl({ //创建一个特定样式的地图平移缩放控件
        anchor: BMAP_ANCHOR_TOP_RIGHT, //靠右上角位置
        type: BMAP_NAVIGATION_CONTROL_SMALL //SMALL控件类型
      });
      this.map.addControl(navigationControl ) //将控件添加到地图

      /** 添加（左下角）定位控件  */
      var geolocationControl = new BMap.GeolocationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}) //创建一个地图定位控件
        geolocationControl.addEventListener("locationSuccess", function(e){ //绑定定位成功后事件
        that.getAddrByPoint(e.point) //定位成功后调用逆地址解析函数
      });
      geolocationControl.addEventListener("locationError",function(e){ //绑定定位失败后事件
        // alert(e.message);
        console.log("绑定定位失败后事件",e.message)
      });
      this.map.addControl(geolocationControl) //将控件添加到地图
      /** 浏览器定位 */
      this.geolocation()
      /** 绑定点击地图任意点事件 */
      this.map.addEventListener('click', function(e){ //给地图绑定点击事件
        that.getAddrByPoint(e.point) //点击后调用逆地址解析函数
      });
    },
    /**
     * 逆地址解析函数（根据坐标点获取详细地址）
     * @param {Object} point   百度地图坐标点，必传
     */
    getAddrByPoint(point){
      var that = this;
      var geco = new BMap.Geocoder();
      geco.getLocation(point, function(res){
        console.log(res)  //内容见下图
        that.mk.setPosition(point) //重新设置标注的地理坐标
        that.map.panTo(point)  //将地图的中心点更改为给定的点
        that.form.address = res.address;  //记录该点的详细地址信息
        that.form.lat = point.lat
        that.form.lng = point.lng
        // that.form.addrPoint = point;  //记录当前坐标点
      })
    },
    /**
     * 浏览器定位函数
     */
    geolocation() {
      var that = this;
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(res){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          that.getAddrByPoint(res.point) //当成功时，调用逆地址解析函数
        } else {
          // alert('failed'+this.getStatus()); //失败时，弹出失败状态码
          console.log("失败状态码",this.getStatus())
        }
      },{enableHighAccuracy: true}) //enableHighAccuracy：是否要求浏览器获取最佳效果，默认为false
    },
    /**
     * 异步检索搜索的地址
     */
    querySearchAsync(str,cb){
      var options = {
        onSearchComplete: function(res){ //检索完成后的回调函数
          var s = [];
          if (local.getStatus() == BMAP_STATUS_SUCCESS){
            for (var i = 0; i < res.getCurrentNumPois(); i ++){
              s.push(res.getPoi(i));
            }
            cb(s) //获取到数据时，通过回调函数cb返回到<el-autocomplete>组件中进行显示
          } else{
            cb(s)
          }
        }
      }
      var local = new BMap.LocalSearch(this.map, options) //创建LocalSearch构造函数
      local.search(str) //调用search方法，根据检索词str发起检索
    },
    /**
     * 选中地址
     */
    handleSelect(item) {
      this.form.address = item.address + item.title; //记录详细地址，含建筑物名
      // this.form.addrPoint = item.point; //记录当前选中地址坐标
      this.form.lat = point.lat
      this.form.lng = point.lng
      this.map.clearOverlays() //清除地图上所有覆盖物
      this.mk = new BMap.Marker(item.point) //根据所选坐标重新创建Marker
      this.map.addOverlay(this.mk) //将覆盖物重新添加到地图中
      this.map.panTo(item.point) //将地图的中心点更改为选定坐标点
    },
    onContentChange (val) {
      console.log(val)
    },
    afterChange () {

    },
    /**
     * 关于我们-信息
     */
    getCompanyInfo(){
      companyInfo().then((res) => {
        if(res.status == 200){
          this.form = {
            id: res.data.id,
            phone: res.data.phone, // 联系电话
            email: res.data.email, // 邮箱
            address: res.data.address, // 地址
            lng: parseFloat(res.data.lng), // 经纬度
            lat: parseFloat(res.data.lat), // 经纬度
            intro: res.data.intro // 简介
          }
        } else {
          this.$notify({
            title: "失败",
            message: res.message,
            type: "error",
            duration: 2000
          });
        }
        this.initMap()
      });
    },
    /**
     * 关于我们-数据保存
     */
    onSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addUpdate(this.form).then((res) => {
            if(res.status == 200){
              this.$notify({
                title: "成功",
                message: '提交成功',
                type: "success",
                duration: 2000
              });
            } else {
              this.$notify({
                title: "失败",
                message: res.message,
                type: "error",
                duration: 2000
              });
            }
          });
        } else {
          return false;
        }
      });
      console.log('submit!');
    }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
#AboutUs {
  margin: 0 1% 0 1%;
  width: 98%;
  height: auto;
  .top {
    width: 100%;
    height: 68px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid #eeeeee;
    .title {
      width: 114px;
      height: 46px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      color: #000000;
      overflow: hidden;
    }
  }
  .content {
    margin: 1% 1% 0 1%;
    width: 98%;
    height: calc(99% - 68px);
  }
  #map-container{
    width: 45%;
    height: 250px;
  }
}
.autoAddressClass{
      li {
        i.el-icon-search {margin-top:11px;}
        .mgr10 {margin-right: 10px;}
        .title {
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .address {
          line-height: 1;
          font-size: 12px;
          color: #b4b4b4;
          margin-bottom: 5px;
        }
      }
    }
</style>
