<!--
 * @Author: your name
 * @Date: 2020-12-01 09:07:41
 * @LastEditTime: 2021-01-06 11:26:39
 * @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 label="图片">
          <div class="flex-aic">
            <el-upload
              class="avatar-uploader1"
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :show-file-list="false"
              :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
              :on-success="handleSuccess1">
              <img v-if="form.image1" :src="form.image1">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="flex-fdc">
              <div class="flex-aic">
                <el-upload
                  class="avatar-uploader2"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :show-file-list="false"
                  :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
                  :on-success="handleSuccess2">
                  <img v-if="form.image2" :src="form.image2" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-upload
                  class="avatar-uploader2"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :show-file-list="false"
                  :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
                  :on-success="handleSuccess3">
                  <img v-if="form.image3" :src="form.image3" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-upload
                  class="avatar-uploader2"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :show-file-list="false"
                  :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
                  :on-success="handleSuccess4">
                  <img v-if="form.image4" :src="form.image4" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <div class="flex-aic">
                <el-upload
                  class="avatar-uploader3"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :show-file-list="false"
                  :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
                  :on-success="handleSuccess5">
                  <img v-if="form.image5" :src="form.image5" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-upload
                  class="avatar-uploader4"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :show-file-list="false"
                  :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
                  :on-success="handleSuccess6">
                  <img v-if="form.image6" :src="form.image6" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </div>
          </div>
        </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 type="javascript">
import KindEditor from "@/components/Kindeditor";
import loadBMap from '@/utils/loadBMap.js'
import { addUpdate, companyInfo } from "api/website/aboutUs"
import {objDeepCopy} from "../../../utils";
export default {
  name: "AboutUs",
  components: {
      KindEditor
  },
  data() {
    return {
      zoom: 15,　 //地图展示级别
      showMap: false,
      BASE_API: process.env.BASE_API,
      fileList2: [],//图片
      form: {
        id: undefined,
        phone: undefined, // 联系电话
        email: undefined, // 邮箱
        address: undefined, // 地址
        lat: 23.12005,
        lng: 113.30765,
        image1: '',// 图片1
        image2: '',// 图片2
        image3: '',// 图片3
        image4: '',// 图片4
        image5: '',// 图片5
        image6: '',// 图片6
        bottomImgArr: [], // 关于我们图片
        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"
        },
      },
      dialogImageUrl: '',
      dialogVisible: false,
      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 () {

    },
    /**
     * banner上传
     * */
    handleSuccess1(res, file){
      this.form.image1 = res.data;
    },
    /**
     * banner上传
     * */
    handleSuccess2(res, file){
      this.form.image2 = res.data;
    },
    /**
     * banner上传
     * */
    handleSuccess3(res, file){
      this.form.image3 = res.data;
    },
    /**
     * banner上传
     * */
    handleSuccess4(res, file){
      this.form.image4 = res.data;
    },
    /**
     * banner上传
     * */
    handleSuccess5(res, file){
      this.form.image5 = res.data;
    },
    /**
     * banner上传
     * */
    handleSuccess6(res, file){
      this.form.image6 = res.data;
    },
    /**
     * 关于我们-信息
     */
    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, // 简介
            bottomImgArr: res.data.bottomImgs?res.data.bottomImgs.split(','): [],
            image1: '',// 图片1
            image2: '',// 图片2
            image3: '',// 图片3
            image4: '',// 图片4
            image5: '',// 图片5
            image6: '' // 图片6
          }
          if(this.form.bottomImgArr.length>=6){
            this.form.image1 = this.form.bottomImgArr[0]
            this.form.image2 = this.form.bottomImgArr[1]
            this.form.image3 = this.form.bottomImgArr[2]
            this.form.image4 = this.form.bottomImgArr[3]
            this.form.image5 = this.form.bottomImgArr[4]
            this.form.image6 = this.form.bottomImgArr[5]
          }
          this.showMap = true
        } else {
          this.$notify({
            title: "失败",
            message: res.message,
            type: "error",
            duration: 2000
          });
        }
      });
    },
    /**
     * 关于我们-数据保存
     */
    onSubmit() {
      let params = objDeepCopy(this.form)
      let bottomImgArr = []
      bottomImgArr.push(this.form.image1)
      bottomImgArr.push(this.form.image2)
      bottomImgArr.push(this.form.image3)
      bottomImgArr.push(this.form.image4)
      bottomImgArr.push(this.form.image5)
      bottomImgArr.push(this.form.image6)
      if(bottomImgArr.length != 6){
        this.$message.warning('请上传6张图片！')
        return
      }
      params.bottomImgs = bottomImgArr.join(',')
      this.$refs["form"].validate(valid => {
        if (valid) {
          addUpdate(params).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 {
  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%;
    padding-bottom: 10px;
    height: calc(99% - 68px);
  }

  .avatar-uploader1 /deep/.el-upload--picture-card{
    width: 475px;
    height: 370px;
    line-height: 370px;
    margin-right: 13px;
    overflow: hidden;
    image{
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }
  .avatar-uploader2 /deep/.el-upload--picture-card{
    width: 229px;
    height: 165px;
    line-height: 165px;
    margin-bottom: 12px;
    margin-right: 12px;
    overflow: hidden;
    image{
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }
  .avatar-uploader3 /deep/.el-upload--picture-card{
    width: 400px;
    height: 193px;
    line-height: 193px;margin-right: 12px;
    overflow: hidden;
    image{
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }
  .avatar-uploader4 /deep/.el-upload--picture-card{
    width: 299px;
    height: 193px;
    line-height: 193px;margin-right: 12px;
    overflow: hidden;
    image{
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }
  #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>
