<!--
 * @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" v-if="showMap">
          <baidu-map
            style="height: 345px;width:610px;margin-right: 63px;min-width: 610px;"
            :zoom="zoom"
            :dragging="true"
            :scroll-wheel-zoom="true"
            @ready="handler"
            @click="getPoint"
          >
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-geolocation
              style="width: 100px; height: 100px"
              anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
              :showAddressBar="true"
              :autoLocation="true"
            ></bm-geolocation>
            <bm-marker
              :position="{ lng: form.lng, lat: form.lat }"
            ></bm-marker>
          </baidu-map>
        </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 {
      zoom: 15,　 //地图展示级别
      showMap: false,
      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.getCompanyInfo()
  },
  methods: {
    /**
     * 加载地图
     * */
    handler ({BMap, map}) {
      let that = this
      var point = new BMap.Point(this.form.lng, this.form.lat);//定义一个中心点坐标
      map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
      window.map = map;//将map变量存储在全局
      map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
      map.enableScrollWheelZoom();//启用地图滚轮放大缩小
      map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
      map.enableKeyboard();//启用键盘上下左右键移动地图
      //向地图中添加缩略图控件
      var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
      map.addControl(ctrl_ove);
      //向地图中添加比例尺控件
      var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      map.addControl(ctrl_sca);
      window.map.panTo(point) //将地图的中心点更改为选定坐标点
    },
    /**
     * 点击地图取点
     * @param e
     */
    getPoint(e){    //点击地图获取一些信息，
      let geocoder= new BMap.Geocoder();  //创建地址解析器的实例
      geocoder.getLocation(e.point,rs=>{
        this.form.address = rs.address;  //记录该点的详细地址信息
        this.form.lat = rs.point.lat;
        this.form.lng = rs.point.lng;
        window.map.clearOverlays() //清除地图上所有覆盖物
        this.mk = new BMap.Marker(rs.point) //根据所选坐标重新创建Marker
        window.map.addOverlay(this.mk) //将覆盖物重新添加到地图中
        window.map.panTo(rs.point) //将地图的中心点更改为选定坐标点
      });
    },
    /**
     * 浏览器定位函数
     */
    geolocation() {
      var that = this;
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(res){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          that.getPoint(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(window.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 = item.point.lat
      this.form.lng = item.point.lng
      window.map.clearOverlays() //清除地图上所有覆盖物
      this.mk = new BMap.Marker(item.point) //根据所选坐标重新创建Marker
      window.map.addOverlay(this.mk) //将覆盖物重新添加到地图中
      window.map.panTo(item.point) //将地图的中心点更改为选定坐标点
    },
    onContentChange (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 // 简介
          }
          this.showMap = true
        } else {
          this.$notify({
            title: "失败",
            message: res.message,
            type: "error",
            duration: 2000
          });
        }
      });
    },
    /**
     * 关于我们-数据保存
     */
    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>
