<template>
    <div>

        <div class="dialog-h-content scroll-h">

            <el-form ref="ref_form" :inline="true" :model="formData" :rules="dataRule" class="form">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="车牌号码" label-width="100px" prop="name">
             
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车主姓名" label-width="100px" prop="name">
          
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车主电话" label-width="100px" prop="name">

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车主身份证" label-width="100px" prop="name">

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车辆品牌" label-width="100px" prop="name">
 
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="设备名称" prop="linkPhone" label-width="100px">

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车辆颜色" prop="linkPhone" label-width="100px">
  
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="核载人数" prop="linkPhone" label-width="100px">
                     
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="购置日期" prop="linkPhone" label-width="100px">
                        
                            <!-- <span style="margin: 0 10px">至</span><el-date-picker
                                v-model="formData.shelveOnTimeTo" type="datetime" placeholder="结束时间"
                                format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" label-width="100px" prop="name">
                          
                        </el-form-item>
                    </el-col>
                </el-row></el-form>
            <!-- <div class="div_btn">
                <el-button size="small" @click="handleCancle">取 消</el-button>
                <el-button size="small" type="primary" @click="handleComfirm">确
                    定</el-button>
            </div> -->
        </div>

    </div>
</template>
   
   
   <script>
   import { mapGetters } from 'vuex'
  //  import { Loading } from 'element-ui' // 引入Loading服务
   import { requestPost,requestGet } from '@/js/dai/request'
   import Tinymce from '@c/tinymce2/index.vue'
   import daiMap from "@/utils/dai-map";
   import util from '@js/util.js';
   // import UploadImage from './upload-image.vue'
   import UploadImage from '@/views/modules/plugins/rent/upload-image.vue'
   
   var map
   var search
   var markers
   var infoWindowList
   var geocoder // 新建一个正逆地址解析类
   export default {
      data() {
          return {

            showdisabled:false,
            searchOptions:[],
              fileList:[],
              searchValue:"",
              Organizationaltype:[
                  { label: "社区", value: 1 },
                  { label: "企业", value: 2 },
                  { label: "学校", value: 3 },
              ],
              SiteData:[],
              tableDate:{},
              formData:    
                  {
                    attrs:[],
                  positionId:"",//挂靠阵地
                  address: "",//地址
                  longitude: this.$store.state.user.longitude, //经度
                  latitude: this.$store.state.user.latitude,//纬度
                  },
              uploadUrl: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
              customerId: localStorage.getItem('customerId'),
   
          }
          
      },
   
      components: { Tinymce, UploadImage },
      mounted() {
        this.getSiteTableData()
         this.formData.agencyId=this.$store.state.user.agencyId
         this.formData.agencyName=this.$store.state.user.agencyName
         let { latitude, longitude } = this.$store.state.user;
          if (!latitude || latitude == "" || latitude == "0") {
              latitude = 39.9088810666821;
              longitude = 116.39743841556731;
          }
          this.formData.latitude = latitude;
          this.formData.longitude = longitude;
          this.activityType()
      },
   
      methods: {
          //获取阵地列表
          async getSiteTableData() {
              // const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/project-list";
              const url = "/voluntary/position/list";
              let params = {
                  name: "",
                  type: "",
                  pageNo: "",
                  pageSize: ""
              }
              const { data, code, msg } = await requestGet(url, params);
              if (code === 0) {
                  console.log("列表请求成功！！！！！！！！！！！！！！");
                  // this.total = data.total || 0;
                  this.SiteData = data.list
              } else {
              }
          },
        //父组件传的
        async initForm(type, unitId) {
          console.log(type, unitId,"i就理解哦i");
          if(type=="info"){
            this.showdisabled=true
            this.getTableDetail(unitId)
          }
          if (type == "edit") {
            this.getTableDetail(unitId)
          }
    
      },
      //获取详情
      getTableDetail(id) {
          console.log(id,"dskljfksdljf");
          let url = `/voluntary/positionVenues/edit/${id}`;
            requestGet(url).then((res) => {
              console.log(res);
              if (res.code == 0) {
                  this.formData = res.data
                  this.searchValue= res.data.address
                  this.fileList=[{fileUrl:res.data.attrs[0].url}]
              } else {
                  this.$message.error(res.msg)
              }
          
          })
           
          
      },
          async activityType() {
              this.$nextTick(() => {
                  if (!map) {
                      this.initMap(this.formData.latitude, this.formData.longitude);
                      console.log("map", map,this.formData.latitude, this.formData.longitude)
                  } else {
                      map.setCenter(this.formData.latitude, this.formData.longitude);
                      map.setMarker(this.formData.latitude, this.formData.longitude);
                      console.log("mapmapmap", map)
                  }
              })
          },
   
          handleOnlineRegistration(value) {
              // 
              if (value) {
                  this.online = true;
                  this.formData.online = 1;
              } else {
                  this.online = false;
                  this.formData.cutOffTime = ''
                  this.formData.online = 0;
              }
          },
          onChangeFileList(e) {
              console.log(e, 'sssssb');
              this.fileList = e.length > 0 ? e.map(item => ({
                fileType: '0',
                  type:'image',
                  fileType: '0',
                  name:item.response.data.fileName,
                  fileUrl: item.response.data.url,
                  format: item.response.data.fileName.split('.').pop(),
                  url: item.response.data.url
              })) : []; // 当e为空时清空fileList
              if (e.length > 0) {
                console.log(this.fileList,"this.fileList");
                  this.formData.attrs=this.fileList;
                 console.log(this.formData.attrs,"this.fileList");
              } else {
                  this.formData.coverPic = '';
              }
          },
   
          removedImg() {
              this.formData.coverPic = ''
          },
          onChangeFileList1(e) {
              console.log(e, 'sssssb');
              this.fileList1 = e.length > 0 ? e.map(item => ({
                  fileType: '0',
                  fileUrl: item.response.data.url
              })) : []; // 当e为空时清空fileList
              if (e.length > 0) {
                  this.formData.brandImg = e[0].response.data.url;
              } else {
                  this.formData.brandImg = '';
              }
          },
   
          onChangeImgs(e, rowIndex = 0) {
              console.log('onChangeFileList', e)
              if (e.length > 0) {
                  this.activityImgs = []
                  e.forEach(item => {
                      let ob = {
                          fileType: '0',
                          fileUrl: item.response.data.url
                      }
                      this.activityImgs.push(ob)
                  })
              }
          },
   
          // onChangeImgs(e) {
          //     this.activityImgs = [];
          //     if (e.length > 0) {
          //         e.forEach(item => {
          //             let ob = {
          //                 fileType: '0',
          //                 fileUrl: item.response.data.url
          //             };
          //             this.activityImgs.push(ob);
          //         });
          //         console.log('this.activityImgs',this.activityImgs)
          //     }
          // },
   
          handleChange(value) {},
          handleTimeChange(time) {
              if (time) {
                  const startTimeArray = util.dateFormatter(time[0], 'time').split('-')
                  console.log(startTimeArray);
                  const endTimeArray = util.dateFormatter(time[1], 'time').split('-')
                  console.log(endTimeArray);
                  this.formData.startTime = startTimeArray[0] + '-' + startTimeArray[1] + '-' + startTimeArray[2] 
                  this.formData.endTime = endTimeArray[0] + '-' + endTimeArray[1] + '-' + endTimeArray[2] 
                  // this.startTimeShow = startTimeArray[0] + '年' + startTimeArray[1] + '月' + startTimeArray[2] + '日'
                  // this.endTimeShow = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日'
              } else {
                  this.formData.startTime = ''
                  this.formData.endTime = ''
              }
   
          },
   
   
          async getDemandOptions() {
              this.$http
                  .post("/actual/base/serviceitem/listAllCategory")
                  .then(({ data: res }) => {
                      if (res.code !== 0) {
                          return this.$message.error(res.msg);
                      } else {
                          console.log(res.data);
                          this.demandOptions = this.getFlagData(
                              this.getTreeData(res.data),
                              "usableFlag"
                          );
                      }
                  })
                  .catch(() => {
                      return this.$message.error("网络错误");
                  });
          },
          getFlagData(data, flag) {
              if (!Array.isArray(data)) return [];
              let arr1 = data.filter((item) => item[flag]);
              let arr2 = arr1.map((item) => {
                  if (item.childCateList)
                      return { ...item, childCateList: this.getFlagData(item.childCateList, flag) };
                  else return item;
              });
              return arr2;
          },
          getTreeData(data) {
              if (!Array.isArray(data)) return [];
              let arr = data.map((item) => {
                  let _item = {};
                  if (item.childCateList) {
                      if (item.childCateList.length === 0)
                          _item = { ...item, childCateList: undefined };
                      else _item = { ...item, childCateList: this.getTreeData(item.childCateList) };
                  } else {
                      _item = { ...item };
                  }
                  return _item;
              });
              return arr;
          },
          async loadGrid() {
              const url = "/gov/org/customergrid/gridoption"
   
              let params = {
                  agencyId: this.agencyId
              }
   
              const { data, code, msg } = await requestPost(url, params)
   
              if (code === 0) {
                  this.gridList = data
   
              } else {
                  this.$message.error(msg)
              }
   
          },
          async handleComfirm() {
           console.log(this.formData,"     this.formData");
           
             if (!this.formData.address) {
                this.$message.error('请输入具体位置');
                return;
             }
      
   
    
             if (!this.formData.attrs             ) {
                this.$message.error('请上传图片');
                return;
             }
   
             if (!this.formData.linkPhone) {
                this.$message.error('请填写联系电话');
                return;
             }
   
             if (!this.formData.positionId) {
                this.$message.error('请选择挂靠阵地');
                return;
             }
   
     
             this.addActivity()
          },
          //增加
          async addActivity() {
                  let url = '/voluntary/positionVenues/saveOrUpdate'
                  const { data, code, msg } = await requestPost(url, this.formData)
                  if (code === 0) {
                      this.$message({
                          type: 'success',
                          message: '操作成功'
                      })
                   //    this.resetData()
                      this.$emit('showAddClose')
                  } else {
                      this.$message.error(msg)
                  }
              
              
   
   
          },
   
          handleCancle() {
               console.log("sdlkfjklsdf ");
              this.$emit('showAddClose')
   
          },
   
          // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
          initMap(latitude, longitude) {
              console.log(latitude, longitude,"564564568");
              map = new daiMap(
                  document.getElementById("app_activity"),
                  { latitude, longitude },
                  {
                      zoom: 16.2, // 设置地图缩放级别
                      pitch: 43.5, // 设置俯仰角
                      rotation: 45, // 设置地图旋转角度
                  }
              );           
   
              // 监听地图平移结束
              /*  map.on("dragend", (e) => {
                  this.handleMoveCenter(e);
                });*/
              map.on("click", (e) => {
                  this.handleMoveCenter(e);
              });
   
              map.setCenter(latitude, longitude);
              map.setMarker(latitude, longitude);
   
          },
   
   
          async handleMoveCenter(e) {
              //修改地图中心点
              // const { lat, lng } = map.getCenter();
              const { lat, lng } = e.latLng;
              this.formData.latitude = lat;
              this.formData.longitude = lng;
              map.setMarker(lat, lng);
   
              let { msg, data } = await map.getAddress(lat, lng);
              if (msg == "success") {
                  this.formData.address = data.address;
                  this.searchValue=data.address
                  console.log(this.formData.address," this.formData.address ");
                  
                  this.searchValue = data.address
                  this.searchOptions = []
                  // console.log('data,this.searchValue ', this.searchValue)
   
              }
          },
   
          async remoteMethod(query) {
              console.log(query, "sfsvsdv");
              if (query !== '') {
                  const { msg, data } = await map.searchNearby(query);
                  this.resultList = []
   
                  if (msg == "success" && data.resultList && data.resultList.length > 0) {
   
                      if (data.resultList && data.resultList.length > 0) {
                          this.resultList = data.resultList
                          console.log(this.resultList, "this.resultList");
                          this.searchOptions = this.resultList.map(item => {
                              return { value: `${item.id}`, label: `${item.address + item.title}` };
   
                          });
                          console.log(this.searchOptions, "this.searchOptions");
                      }
                  } else {
                      this.searchOptions = [
                          {
                              value: '0',
                              label: '未检索到结果'
                          }
                      ]
                  }
              } else {
                  this.searchOptions = [];
              }
          },
   
          handleClickKey(index) {
              let selPosition = this.resultList[index]
              let lonlat = selPosition.lonlat.split(" ")
              map.setCenter(lonlat[1], lonlat[0]);
              map.setMarker(lonlat[1], lonlat[0]);
              this.formData.latitude = lonlat[1];
              this.formData.longitude = lonlat[0];
              this.formData.address=selPosition.address + selPosition.nam
              this.searchValue = selPosition.address + selPosition.name
              console.log(this.formData.address," this.formData.address ");
              
          },
   
  
  
      },
      computed: {
          dataRule() {
              return {
                positionId: [
                      { required: true, message: '请选择挂靠组织', trigger: 'blur' }
                  ],
                  name: [
                      { required: true, message: '请填写名称', trigger: 'blur' }
                  ],
                  linkPhone: [
                      { required: true, message: '电话不能为空不能为空', trigger: 'blur' },
                      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
                  ],
              
                  fileList: [
                      { required: true, message: '请选择封面图片', trigger: 'blur' }
                  ],
                  address: [
                      { required: true, message: '请选择位置', trigger: 'blur' }
                  ],

              }
          },
   
      },
      props: {
   
   
   
      },
      destroyed () {
       map = null
     }
   }
   </script>
   
   
   <style lang="scss" scoped>
   @import "@/assets/scss/modules/visual/communityManageForm.scss";
   </style>
   <style lang="scss" scoped>
   .item_width_1 {
      width: 634px;
   
      /deep/.tox .tox-dialog {
          z-index: 20000;
      }
   }
   .u-item-width-normal{
      width: 222px;
   }
   
   .tinymce_view {
      ::v-deep .tox .tox-dialog {
          z-index: 2000000000;
      }
   }
   
   .div_map {
      position: relative;
   }
   
   .div_searchmap {
      z-index: 5000;
      position: absolute;
      top: 5px;
      left: 5px;
   }
   
   .tinymce_view {
      height: 400px;
      overflow: auto;
   }
   
   .text_p {
      margin: 0;
      padding: 0 10px;
      border: 1px solid #d9d9d9;
      border-radius: 5px;
   
      >p {
          margin: 0;
      }
   }
   .div_btn {
    height: 50px;
       display: flex;
       justify-content: center;
       align-items: center;
       text-align: center;
   }
   
</style>