<template>
  <div class="app-container" style="padding-top: 20px;height: 120vh; "  >
    <div class="ntgs">
     <div>
       <div class="topug">
         <p>地图设置</p>
         <p>保存</p>
       </div>
       <div style="border-bottom: 1px solid #E6E6E6;margin-bottom: 30px;cursor: pointer;" class="qieht">
         <p @click="isqie(0)" :class="isgse == 0 ? 'isesf' : ''">地图范围</p>
         <p @click="isqie(1)" :class="isgse == 1 ? 'isesf' : ''">园区地图</p>
       </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="70px">
       <el-row>
         <el-col :span="20" class="shish">
           <el-form-item label="省市区" prop="staffName">
                      <area-select
                          style="display: flex"
                          type="all"
                          v-model="areaList"
                          :level="2"
                          :disableLinkage="linkage"
                          :data="pcaa"
                      ></area-select>
          </el-form-item>
         </el-col>
         <el-col :span="16">
           <el-form-item label="详细地址" prop="staffName">
                     <el-input v-model="form.staffName" placeholder="请输入人员姓名" />
          </el-form-item>
         </el-col>
         <el-col :span="16">
           <el-col :span="24" >
             <el-form-item label="经纬度" prop="staffName" >
                  <div style="display: flex; " class="jisnge">
                    <el-input style="width: 160px; margin-right: 10px;" v-model="form.staffName" placeholder="请输入人员姓名" />
                    <el-input style="width: 160px;" v-model="form.staffName" placeholder="请输入人员姓名" />
                    <div style="display: flex; align-items: center;" class="giet">
                      <span style="font-size: 14px;color: #606266; width: 100px; margin-left: 10px;font-weight: 700;">半径范围</span>
                      <el-input v-model="form.staffName" placeholder="请输入人员姓名" />
                      <span style=" margin-left: 10px; font-weight: 800;font-size: 13px;color: #3D455B;">米</span>
                    </div>
                  </div>
             </el-form-item>
           </el-col>
         </el-col>
         <el-col :span="16" class="ditweyuq" v-if="isgse">
           <el-form-item label="园区鸟瞰" prop="staffName">
                  <image-uploadrss :limit="1" v-model="form.staffImage"/>
           </el-form-item>
         </el-col>
       </el-row>
        </el-form>
     </div>
	</div>


  </div>
</template>

<script>
  import { listWarnManage, getWarnManage, delWarnManage, addWarnManage, updateWarnManage } from "@/api/manage/warnManage"
import 'vue-area-linkage/dist/index.css'
import { pca, pcaa } from 'area-data'
import Bscroll from "better-scroll";
export default {
  name: "Post",
  dicts: ['sys_normal_disable','sys_yes_no','youke','tjzh','youkes','lafafen','fange','jluly'],
  // components: {
  //     vueQr,
	 //  videoPlayer
  //   },
  data() {
    return {
      // 遮罩层
      loading: true,
	  opent:false,
	  bg:null,
    titles:'',
      // 表单参数
      form: {},
      rules:{},
      pca: pca,
      		pcaa: pcaa,
          searchData:[],
    isgse:0

     }
  },
  created() {

  },
  mounted() {

  },
   beforeDestroy() {

    },
  methods: {
    // 地图切换
    isqie(row){
      this.isgse = row
    },

    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
              if (valid) {
                // if (this.form.reservatId != null) {
                  updateReservat(this.form).then(response => {
                    this.$modal.msgSuccess("操作成功");
                    this.open = false;
                    this.getList();
                  });
                // } else {
                //   addReservat(this.form).then(response => {
                //     this.$modal.msgSuccess("新增成功");
                //     this.open = false;
                //     this.getList();
                //   });
                // }
              }
            });
    },

  }
};
</script>

<style lang="scss">
  .ditweyuq{
    .el-upload-dragger{
      // border: none;
      border-color: #E6E6E6;
      width: 100%;
      height: 220px;
    }
    .el-upload--picture-card{
      border: none;
       width: 100%;
    }
    .component-upload-image{
      width: 100%;
      margin-top: 20px;
    }
    .qundew{
      margin-right: 28px !important;
      margin-top: 40px !important;
    }
  }
  .shish{
    .el-form-item--medium .el-form-item__content{
      line-height:16px;
    }
    .area-select-wrap .area-select:nth-child(1){
      margin-left: 0;
    }
  }
  .botsne{

  }
  .jisnge{
    .el-input__inner{
      width: 158px;
    }
  }
  .giet{
    .el-input__inner{
      width: 100%;
    }
  }

	.isjses{
		.el-tabs--left .el-tabs__nav-wrap.is-left::after{
			width:6px;
		}
		.el-tabs--left .el-tabs__active-bar.is-left,{
			width:6px;
		}
	}
	.ingaqe{
		.el-input--medium{
			width:100%;
		}
	}
	.nhgrls{
		.el-dialog__body{
			padding: 0;
		}
	}
  .hyr{
    span{
      text-decoration:underline;
    }
  }
</style>
<style scoped lang="scss">
  .qieht{
    display: flex;
    p{
      margin: 0;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 15px;
      color: #3D455B;
      margin-right: 20px;
      padding: 0 10px;
      margin-bottom: -1px;
      line-height: 40px;
    }
    .isesf{
      color: #03BF8A;
       border-bottom: 2px solid #03BF8A;
    }
  }
  .topug{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    p{
      margin: 0;
    }
    p:nth-child(1){
      font-family: PingFang SC;
      font-weight: 800;
      font-size: 15px;
      color: #333333;
      border-left: 6px solid #03BF8A;
      padding-left: 10px;
      margin-left: -20px;
    }
    p:nth-child(2){
      width: 86px;
      height: 38px;
      background: #03BF8A;
      border-radius: 4px;
      text-align: center;
      line-height:38px ;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 13px;
      color: #FFFFFF;
    }
  }
	.nghwgq{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 90px;
		div{
			color:#aaa;
		}
	}

	.nhgwesvq{
		width:1610px !important;
	}





  .lqw{
    padding: 0 10px;
    margin: 0;
    margin-bottom: 20px;
  }
.nhgel{
  height: 170px;
  background-color: #313b61;
  width: 100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 0;
}
	.app-container{
		background-color: #f3f4f6;
		padding-top: 10px;
		height: 180vh;

	}
	.ntgs{
	position: relative;
		background-color: #fff;
		padding: 5px;
    height: 100%;
		// border-radius: 5px;
		padding-top: 10px;
	     padding: 10px 20px;
		.pagination-container{
			height: 50px;
		}
	}
	.nghfs{
	position: relative;
		background-color: #fff;
		padding-top: 18px !important;
		padding: 5px;
		// border-radius: 5px;
		// margin-bottom: 20px;
	}
	.ksf{
		img{
			width:100%;
			height: 100%;
		}
	}
   .ingwfaq{
	   font-weight: bold;
	   font-size: 16px;
   }
</style>
