<template>
    <div class="navC mb10">
        <ul>
                <li @click="cur=0" :class="{active:cur==0}"><a href="#" hidefocus="true">图层控制</a></li>
                <li @click="cur=1" :class="{active:cur==1}"><a href="#" hidefocus="true">区域选择</a></li>
				<li @click="cur=2" :class="{active:cur==2}"><a href="#" hidefocus="true">地图编辑</a></li>
				
                
        </ul>
        <div class="tab-content">
            
            <div v-show="cur==2">
                <el-button size="mini" type="primary" id="start-animation" @click="huaxian" ref="startButton" style="margin-bottom:5px;;margin-left:2px;">
                            线
                </el-button>
                <el-button size="mini" type="primary" id="start-animation" @click="huayuan" ref="startButton" style="margin-bottom:5px;margin-left:2px;">
                            圆
                </el-button>
                <el-button size="mini" type="primary" id="start-animatiotn" @click="huajuxing" ref="startButton" style="margin-bottom:5px;;margin-left:2px;">
                            矩形
                </el-button>
                <el-button size="mini" type="primary" id="start-animation" @click="huaduobianxing" ref="startButton" style="margin-bottom:5px;;margin-left:2px;">
                            多边形
                </el-button>
                <el-button size="mini" type="primary" id="start-animation" @click="clearModifyGeo" ref="startButton" style="margin-bottom:5px;margin-left:2px;">
                    清空
                </el-button>
                <el-button size="mini" type="primary" id="start-animation" @click="editDB" ref="startButton" style="margin-bottom:5px;;margin-left:2px;">
                    入库<i class="el-icon-upload el-icon--right"></i>
                </el-button>
                <!--此处放入table表格-->
                <el-table :key="key" :stripe="stripe" :data="allData" border style="width: 100%;height:380px;overflow:auto">
                    <!-- <el-table-column  prop="NUMBER" label="序号" width="80" height="60" style="height:60px;overflow:auto">
                    </el-table-column> -->
                    <el-table-column prop="ID" label="唯一值" height="110" width="120">
                    </el-table-column>
                    <el-table-column prop="GeoJSON" label="Json值" width="400" height="60" style="text-align:center">
                    </el-table-column>
                    <el-table-column label="操作" width="100" height="60">
                        <template slot-scope="scope">
                            <el-button type="text" size="smalsl" @click="handleClick(scope.$index,scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div>
                <el-pagination ref="elPagination"
                        @size-change="handleSizeChange"
                        background
                        @current-change="handleCurrentChange"
                        :page-sizes="[10, 15, 20]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
                </div>
            </div>
            <div v-show="cur==1">
                <div id="itany">
                    
                    <!-- <select v-model="prov" @change="updataCity();updataSub()">
                        <option v-for='v in arr'>{{v.name}}</option>
                    </select>
                    <select v-model="city" @change="updataSub()" v-if="city">
                        <option v-for='v in cityArr'>{{v.name}}</option>
                    </select>
                    <select v-model="sub" v-if="sub">
                        <option v-for="v in subArr">{{v}}</option>
                    </select> -->
                    <!-- <select v-model="prov" @change="updataCity();">
                        <option v-for='v in arr' :value='v.code'>{{v.name}}</option>
                    </select>
                    <select v-model="city" @change="updataSub()">
                        <option  v-for='v in cityArr' :value='v.code'>{{v.name}}</option>
                    </select>
                    <select v-model="sub">
                        <option :value='v.code' v-for="v in subArr">{{v.name}}</option>
                    </select> -->
                    <el-cascader style="width:70%;margin-left:10px; margin-top:5px;" size="mini" :options="options" v-model="selectedOptions" @change="handleChange"></el-cascader>
                    <el-button id = 'downLoadJson' @click = "downGeoJson()" type="primary" size='mini'  round style="margin-left:15px;">边界下载</el-button>
                    <div id = 'priceTableContainer'>
                        <div class = 'priceColumns'>
                           <span class = 'priceColumn'>项目</span>
                           <span class = 'priceColumn'>报价</span>
                        </div>
                        <div v-for="item in priceData" class = 'priceItem' v-bind:key="item.id">
                           
                           <span class = 'priceName'>{{item.name}}</span>
                           <span class = 'priceName'>{{item.price}}</span>
                        </div>
                        <!-- <el-table  :key = "tablekey"
                            :data="priceData"
        
                            style="width: 100%">
                            <el-table-column
                               fixed
                                prop="name"
                                label="项目"
                                width="150">
                            </el-table-column>
                            <el-table-column
                               fixed
                                prop="price"
                                label="报价"
                                width="200">
                            </el-table-column>   
                        </el-table>
                         -->
                    </div>
               
                </div>
            </div>
            <div v-show="cur==0">
                <div id="itany">
					<el-input
						placeholder="输入关键字进行过滤"
						v-model="filterText">
					</el-input>
					<el-tree
						:data="data"
						show-checkbox
						node-key="id"
						:filter-node-method="filterNode"
						ref="tree"
						highlight-current
                        @check="checkStatus"
                        :default-checked-keys="this.savedPermissionIds"
						:props="defaultProps">
					</el-tree>
                </div>
            </div>
        </div>
        <sl-drawModify  ref="drawlx" :id="id" :name="name"  :actived='actived'  @translatePos="translatePos"  @drawend="finish" @radiusAndCenter="radiusAndCenter" @boxCenter="boxCenter"  @editFinish="editFinish" @drawFinish="drawFinish" @polygonCenter="polygonCenter" :type="drawType" :drawStyle="drawStyle"> </sl-drawModify>
    </div>
</template>
<script>
import qs from 'qs'
import axios from 'axios'
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
export default{
    name:'rightTab',
    components:{
    //   DrawModify: DrawModify
	},
	watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    mounted(){
        this.$refs.elPagination.$el.getElementsByClassName('el-pager')[0].style.margin = '0px'
        this.$refs.elPagination.$el.getElementsByClassName('el-pager')[0].style.paddingLeft = '0px'
          let downUrl ="http://172.20.32.31:7001/getAreaCode" 
		axios.post(downUrl).then((response)=> {
            //console.log(response.data)
            this.areaCode = response.data
        })
        
    },
 
	props: {
            poiMap: {
                type: Object
            }
    },
    // mixins: [commonMixin('interaction')],
    // render(h) { },
    data () {
      return {
        savedPermissionIds:['poiLayer','aoiLayer','roadLayer','busLayer','subwayLayer'],
        areaCode : null,
        priceData:  [{
            id:1,
            price: '10000￥',
            name: 'POI' 
            }, {
            id:2,
            price: '15000￥',
            name: 'AOI' 
            }, {
            id:3,
            price: '80000￥',
            name: '栅格瓦片' 
            }, {
            id:4,
            price: '2610000￥',
            name: '路网' 
        }],
		data: [
			{
				id: 'instantRoad',
				label: '全国道路实时交通情况'
            }, 
          
		    {
				id: 'poiLayer',
				label: 'POI数据',
				children: [
                    {code:'01',label:'汽车服务',id:'poi_gasStation',arr:[]},
                    {code:'02',label:'汽车销售',id:'poi_carSales',arr:[]},
                    {code:'03',label:'汽车维修',id:'poi_carFixed',arr:[]},
                    {code:'04',label:'摩托车服务',id:'poi_motor',arr:[]},
                    {code:'05',label:'餐饮服务',id:'poi_restrant',arr:[]},
                    {code:'06',label:'购物服务',id:'poi_supermarket',arr:[]},
                    {code:'07',label:'生活服务',id:'poi_lifeService',arr:[]},
                    {code:'08',label:'体育休闲服务',id:'poi_sport',arr:[]},
                    {code:'09',label:'医疗保健',id:'poi_medicine',arr:[]},
                    {code:'10',label:'住宿服务',id:'poi_liveService',arr:[]},
                    {code:'11',label:'风景名胜',id:'poi_landscape',arr:[]},
                    {code:'12',label:'商务住宅',id:'poi_house',arr:[]},
                    {code:'13',label:'政府机关',id:'poi_government',arr:[]},
                    {code:'14',label:'科教文化服务',id:'poi_school',arr:[]},
                    {code:'15',label:'交通设施服务',id:'poi_park',arr:[]},
                    {code:'16',label:'金融保险服务',id:'poi_bank',arr:[]},
                    {code:'17',label:'公司企业',id:'poi_company',arr:[]},
                    {code:'18',label:'道路附属设施',id:'poi_road',arr:[]},
                    {code:'19',label:'地名地址信息',id:'poi_address',arr:[]},
                    {code:'20',label:'公共设施',id:'poi_toilent',arr:[]},
                    {code:'22',label:'事件活动',id:'poi_activites',arr:[]},
                    {code:'97',label:'室内设施',id:'poi_indoor',arr:[]},
                    {code:'99',label:'通行设施',id:'poi_gate',arr:[]},
				]
			}, 
			{
				id: 'aoiLayer',
				label: 'AOI数据'
			}, 
			{
				id: 'roadLayer',
				label: '道路数据'
			}, 
			{
				id: 'busLayer',
				label: '公交线路'
			}, 
			{
				id: 'subwayLayer',
				label: '地铁线路'
			}
        ],
        tablekey: "priceTable",
        defaultProps: {
          children: 'children',
          label: 'label'
		},
		filterText: '',
            tableData: [],
            options: regionDataPlus,//省市二级联动数据（不带“全部”选项）
            selectedOptions: [],
            drawStyle:{//画时候的手型
                image: {
                    src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAD1klEQVRYR7WWT2gUdxTHv29ms8mui+4uWsRDwe5u6r9raSkSNCYsEhBKoe2p0EMp2UmKgViKpSl6KWhAq9m04sFr7aGK/0qoRrAq1iKF2lPWkkMxgsjMboi7bjMzr/x2nfjbyWRmk2zmuPPb+X7ee9/33o+wFk/+aSxBpcsWK1/Maqk//CSo5fr5p7EkitdB9DaY50yo3X4QrQWQxJlRJEI8CKJ1AHLk4Pt2tS1LYfMYET71g2gNQIN4raj3dHXdPny2pZzIF04TYWApiNUDNKb9JsAqEXUx8y0j2pbFJ1tfJManjhNoWEAASlbX0ncd760O4MxMNGnOTQrDMfCv0W7thLneSlrPbwB4B8w/61rn+0IsOV44AmAEjApAPQ7EygHOzEQT5twEEe12orGBoWIucxKiDVG6ZCnql7P9b9x33ifzj4ZBfFyGWBmAJM6Mm0w4QsAFMI0YWnrMr7XdEMsHcEVu2UpPaSB1I35iOl4c2loMmivr8tObwzD/IsImBs4vD6Ax8nqfA2UA+/Rc5l6T4r8RIQ1gQt9YPdA8QEPk9T5X2s1vABwU7rZI2VPKpR8sBRE7VdjUpuKuLI4Pdv3XHMC56Y5Eef5Xx3AMPOBqqEekPD5eGCHmz2Gre43B1EMvACEeVvkWiLY5kQtxcTYY4Nx0R7JiXgXQLQxHhEi9xegjXUufFx/xq7+feDCAJA7mGVi03QqFVeLqx0Wt87ugmrvEJ/WN1f1O5MGDSBZ/eZqBw0Yu822QsHi/SDwS6hNT0f1f7xLIaQfu2IyjKuECgCiAk3ouM+QH0ay4dwl++jucfNb+i6i5OMC20mcMpK7Fx6a6FIUmAJ5/YXVsKw++PtOE4Sb1JSL3LkFd/BKA7Kt9jtmKYu+o9L/5eMMPU72KpVYMLXW7FeKNGZDFgT9NO9IbovIQgzqKWmY4qO7LSbv8rboHJPGXLxf2eZCw23DMfNuItvV6Gc7rWySLix1OQBVEvfI+b9ZwNfFQLCsuIs2A10qQGC/8SMCHAD+x0L6zFLErifK8WLNdDFw0cpn3/MarM+FWIl4DiH9f2KPYuAZChJkGa+u0NvefX4FCXxv96TtBhlup+IIJk/lH7wJ8XUCA6ZCupUfXMu2LTSiuTDIEcFTPZcSmW/TIbl9N5J5zQIZg8KiR6zwkEzS0GvPveijWvRzDeXeB69cGCMaYoWUG3a0GIY54D7TX5pp1+1LnPHdBHcKeAFGMGWfnLXy1sM9bKN44CV2I6/P/vBWCJa7cMQZKBGxoZeSeHnCnSYZYC3HfDDgwAkKFNWog3teKmruD/B+tPUuq1Y5hZgAAAABJRU5ErkJggg==',
                    size: [30, 30],
                    rotation: 0,
                    opacity: 1
                    },
                    stroke: {
                        color: "#FF5809",
                        width: 4
                    },
                    fill: { color: '#dec674' }
            },
            stripe:false,//是否为斑马纹 table?SZ
			
			downLoadObj:null,
			code:'',
            key:new Date()+"",
            currentPage:1,
            pagesize:10,
            total:0,
            defaultClusterPointStyle: {
                image: {
                icon: 'iconWIFI',
                color: 'green'
                }
            },
            style:{
                image: {
                icon: 'iconGunMachine',
                color: 'blue'
                }
            },
            drawType:'Point',
            cur:0, //默认选中第一个tab,
          
            id: "temp",
            name: "临时图层",
            actived: false,
            type: 'LineString',
            allData: [],
            // arr: array,
            prov: '', //被选择的省
            cityArr:[], //选择对应省的市数据
            city:'',  //被选择的市
            sub: '',  //被选择的区
            subArr:[], //选择对应市的区数据
        }
    
    },
   
    methods: {
        handleSizeChange(val) {
            this.pagesize=val;
        },
		checkStatus(obj,flag){
            let allArr = [
                    {code:'01',label:'汽车服务',id:'poi_gasStation',arr:[]},
                    {code:'02',label:'汽车销售',id:'poi_carSales',arr:[]},
                    {code:'03',label:'汽车维修',id:'poi_carFixed',arr:[]},
                    {code:'04',label:'摩托车服务',id:'poi_motor',arr:[]},
                    {code:'05',label:'餐饮服务',id:'poi_restrant',arr:[]},
                    {code:'06',label:'购物服务',id:'poi_supermarket',arr:[]},
                    {code:'07',label:'生活服务',id:'poi_lifeService',arr:[]},
                    {code:'08',label:'体育休闲服务',id:'poi_sport',arr:[]},
                    {code:'09',label:'医疗保健',id:'poi_medicine',arr:[]},
                    {code:'10',label:'住宿服务',id:'poi_liveService',arr:[]},
                    {code:'11',label:'风景名胜',id:'poi_landscape',arr:[]},
                    {code:'12',label:'商务住宅',id:'poi_house',arr:[]},
                    {code:'13',label:'政府机关',id:'poi_government',arr:[]},
                    {code:'14',label:'科教文化服务',id:'poi_school',arr:[]},
                    {code:'15',label:'交通设施服务',id:'poi_park',arr:[]},
                    {code:'16',label:'金融保险服务',id:'poi_bank',arr:[]},
                    {code:'17',label:'公司企业',id:'poi_company',arr:[]},
                    {code:'18',label:'道路附属设施',id:'poi_road',arr:[]},
                    {code:'19',label:'地名地址信息',id:'poi_address',arr:[]},
                    {code:'20',label:'公共设施',id:'poi_toilent',arr:[]},
                    {code:'22',label:'事件活动',id:'poi_activites',arr:[]},
                    {code:'97',label:'室内设施',id:'poi_indoor',arr:[]},
                    {code:'99',label:'通行设施',id:'poi_gate',arr:[]},
                    {code:'100',label:'AOI数据',id:'aoiLayer',arr:[]},
                    {code:'101',label:'道路数据',id:'roadLayer',arr:[]},
                    {code:'102',label:'公交线路',id:'busLayer',arr:[]},
                    {code:'103',label:'地铁线路',id:'subwayLayer',arr:[]},
                    {code:'104',label:'全国道路实时交通情况',id:'instantRoad',arr:[]}
                    
            ]
            let nodesArr = this.$refs.tree.getCheckedNodes();//这个数组让直接显示
            var result = allArr.filter(function(item1) {
                return nodesArr.every(function(item2) {
                    return item2.id !== item1.id
                })
            })
            if(nodesArr.length!=0){//勾选的显示
                 for(let i = 0;i<nodesArr.length;i++){
                    if(nodesArr[i].id=='instantRoad'){//说明此时为实时路况
                        let trafficLayer = this.findByIdToLayer('trafficLayerId',this.poiMap)
                        if(trafficLayer==undefined){
                            this.createLayer(this.poiMap, {isBaseMap:false, type:4, config:{id:'trafficLayerId',url: "http://tm.amap.com/trafficengine/mapabc/traffictile?v=1.0&;t=1&x={x}&y={y}&z={z}&&t='+longTime+'"}})
                        }
                    }else{
                        this.visibleLikeSpatial(nodesArr[i].id,this.poiMap,true)
                    }
                }
            }
            if(result.length!=0){//勾选的显示
                 for(let i = 0;i<result.length;i++){
                     if(result[i].id=="instantRoad"){
                         this.removeTrafficLayer(this.poiMap,"trafficLayerId")
                     }else{
                         this.visibleLikeSpatial(result[i].id,this.poiMap,false)
                     }
                    
                }
            }
        },
        //更新市数据
        updataCity:function(){ 
            for(let item of this.arr){//从整体数组开始循环
                if(item.code == this.prov){
                    this.cityArr = item.sub;
                }
            }
            this.city = this.cityArr[0].name;//城市
        },
        removeTrafficLayer(map,id){
            if (map.getLayers() != undefined && map != undefined) {
                if (map.getLayers().array_.length != 0) {
                    var newarr = map.getLayers().array_.filter((item, index, self) => {
                        const obj = {}
                        for (let i = index; i < self.length; i++) {
                            if (self[i].values_.id === item.values_.id) {
                                return true
                            }
                        }
                        return false
                    })
                    for (var i = 0; i < newarr.length; i++) {
                        if(newarr[i].values_.id==id){
                                map.removeLayer(newarr[i]) //删除后数组的length改变了
                        }
                    }
                }
            }
        },
		filterNode(value, data) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		},
        //更新区数据
        updataSub:function(){
            this.cityArr.forEach((item,index)=>{
                if(item.name == this.city){
                    this.subArr = item.sub;
                }
            });
            this.sub = this.subArr[0];//区域
            // this.sub = this.subArr[0].name
        },
        downGeoJson(){
            // console.log('show download code:')
            console.log(this.downLoadObj)
            console.log(this.code)
            // console.log(this.areaCode)
            if(this.downLoadObj != null &&  this.areaCode &&  this.areaCode.length > 0)
            {
                for(var i = 0; i < this.areaCode.length ; i++)
                {
                    var curitem = this.areaCode[i]
                    if(curitem.key == this.downLoadObj.features[0].properties.adcode)
                    {
                        if(curitem.level && curitem.level == 1)
                        {
                            console.log('level:' + curitem.level)
                            var prices = [{
                                id:1,
                                price: '400￥',
                                name: 'POI' 
                                }, {
                                id:2,
                                price: '1500￥',
                                name: 'AOI' 
                                }, {
                                id:3,
                                price: '8000￥',
                                name: '栅格瓦片' 
                                }, {
                                id:4,
                                price: '80000￥',
                                name: '路网' 
                            }]
                            this.priceData.splice(0 , this.priceData.length)
                            prices.forEach((item)=>{
                              // console.log(item)
                                this.priceData.push(item)
                            })
                          //  console.log(this.priceData)
                         
                        }
                        else if( curitem.level && curitem.level == 2)
                        {
                             console.log('level:' + curitem.level)
                             var prices = [{
                                    id:1,
                                    price: '300￥',
                                    name: 'POI' 
                                    }, {
                                         id:2,
                                    price: '1000￥',
                                    name: 'AOI' 
                                    }, {
                                         id:3,
                                    price: '1500￥',
                                    name: '栅格瓦片' 
                                    }, {
                                         id:4,
                                    price: '200000￥',
                                    name: '路网'    
                            }]
                            this.priceData.splice(0 , this.priceData.length)
                            prices.forEach((item)=>{
                             //   console.log(item)
                                this.priceData.push(item)
                            }) 
                            // console.log(this.priceData)
                        }
                        else if(curitem.level && curitem.level == 3)
                        {
                            console.log('level:' + curitem.level)
                            var prices = [{
                                     id:1,
                                    price: '200￥',
                                    name: 'POI' 
                                    }, {
                                    id:2,
                                    price: '600￥',
                                    name: 'AOI' 
                                    }, {
                                    id:3,
                                    price: '1000￥',
                                    name: '栅格瓦片' 
                                    }, {
                                     id:4,
                                    price: '100000￥',
                                    name: '路网'  
                                }]
                            this.priceData.splice(0 , this.priceData.length)
                            prices.forEach((item)=>{
                               // console.log(item)
                                this.priceData.push(item)
                            }) 
                            // console.log(this.priceData)
                        }
                        else
                        {
                            console.log('level other:' + curitem.level)
                            var prices= [{
                                
                            }]
                            this.priceData.splice(0 , this.priceData.length)
                            
                        }
                        break;
                    }
                    
                }
            }
            else
            {
                //console.log('level:' + curitem.level)
                var prices = [{
                     id:1,
                    price: '10000￥',
                    name: 'POI' 
                    }, {
                         id:2,
                    price: '15000￥',
                    name: 'AOI' 
                    }, {
                         id:3,
                    price: '80000￥',
                    name: '栅格瓦片' 
                    }, {
                         id:4,
                    price: '2610000￥',
                    name: '路网' 
                }]
                this.priceData.splice(0 , this.priceData.length)
                prices.forEach((item)=>{
                    //console.log(item)
                    this.priceData.push(item)
                }) 
                 //console.log(this.priceData)
            }
            
			this.downloadWithBlob(this.downLoadObj, this.code)
			// this.downLoadObj = null
			// this.code = ''
        },
        downloadWithBlob(url,name) {
            var d = {}
            var datastr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(url));
            var downloadAnchorNode = document.createElement('a')
            downloadAnchorNode.setAttribute("href", datastr);
            downloadAnchorNode.setAttribute("download", name)
            downloadAnchorNode.click();
            downloadAnchorNode.remove();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        huaxian(){
            this.id='drawLine'
            this.drawType="LineString"
            this.actived = true
        },
        huayuan(){
            this.id='drawCircle'
            this.drawType="Circle"
            this.actived = true
        },
        editDB(){
        },
        huajuxing(){
            this.id='drawBox'
            this.drawType="Box"
            this.actived = true
        },
        handleClick(row) {
            console.log(row);
        },
        clearModifyGeo(){
        },
        huaduobianxing(){
            this.id='drawPolygon'
            this.drawType="Polygon"
            this.actived = true
        },
        postQuery(downUrl){
              axios.get(downUrl).then((response)=> {//get请求
					this.downLoadObj = response.data
					let geometry = response.data.features[0].geometry.coordinates[0][0];
					this.clearSpatial('drawPolygon',this.poiMap)
					this.drawGeometry("drawPolygon",this.poiMap,[geometry],{
						strokeColor:'rgba(252,112,82,0.4)',
						strokeWidth:2,
						fillColor:'rgba(0, 0, 255, 0.4)'
					  },10,{'name':'桔弓画的多边形','type':'polygon'})//画多边形
					  let targetLayer1 = this.findByIdToLayer('drawPolygon',this.poiMap)
					  this.poiMap.getView().fit(targetLayer1.getSource().getExtent(),15)
				}).catch (function (error) {
					console.log(error);
				})
        },
        handleChange (value) {
            // let code=""
            let downUrl
			if(value.indexOf('')>-1){
				this.code = value[value.length-2]+".json"
                 downUrl = "https://geo.datav.aliyun.com/areas_v2/bound/"+this.code+""
                this.postQuery(downUrl)
			}else{
				this.code = value[value.length-1]+".json"
                downUrl = "https://geo.datav.aliyun.com/areas_v2/bound/"+this.code+""
                this.postQuery(downUrl)
			}
        },
         handleEdit(index, row) {
            console.log(index, row);
        },
        // handleDelete(index, row) {
        //     console.log(index, row);
        // },
        translatePos(val){
        },
        radiusAndCenter(val){//画圆中心点
        },
        boxCenter(val){//矩形中心点
        },
        polygonCenter(val){//不规则多边形中心点
        },
        editFinish(obj){//修改多边形
            this.actived = false
            console.log("修改后圆或者多边形全部返回geojson")
            console.log(obj)
            this.key = new Date()+"";//需要唯一的key值
            //将更新后的数据存入后端数据库中
            // this.indexDB.updateDataByKey(this.indexDBdb,'drawGeometrys',obj);
             //将data[i].gameName=data[i].gameNameCn改为this.$set(data[i],gameName,data[i].gameNameCn)
            if(this.tableData.length!=0){
                for(var i = 0;i<this.tableData.length;i++){
                    if(obj.id==this.tableData[i].ID){
                        this.$set(this.tableData,i,{
                             ID: obj.id,
                             GeoJSON: obj.wkt,
                            //  NUMBER:this.drawCount+1
                        })
                        break;
                    }
                }
            }
           
        },
        drawFinish(obj){
            console.log("画完圆或者多边形全部返回geojson")
                this.key = new Date()+"";//需要唯一的key值
                this.tableData.push({
                        ID: obj.id,
                        GeoJSON: obj.wkt,
                        // NUMBER:this.drawCount+1
                });
                this.total = this.allData.length;
                this.allData = this.tableData;
                // this.drawCount++;
                // for(var i = 0;i<this.total.length;i++){
                //     this.$set(this.allData[i],i,{
                //         'ID':this.total[i].ID,
                //         'GeoJSON':this.total[i].GeoJSON,
                //     })
                // }
            // obj.id = this.drawCount;
            // let config = {
            //     storeName:'drawGeometrys',
            //     dbName:'test',
            //     version:3
            // }
            // this.indexDB =  new this.UtilDB(config.storeName,config.dbName,config.version)
            // if(this.indexDBdb!=null&&this.indexDBdb!=undefined){//说明数据库是打开状态
            //         console.log("数据库此时是打开状态，直接存储数据即可...");
            //         this.indexDB.addData(this.indexDBdb,obj);
            //         this.tableData.push(
            //             {
            //                 ID: obj.id,
            //                 GeoJSON: obj.wkt,
            //             })
            // }else{
            // this.indexDB.openDB().then((e)=>{
            // this.indexDBdb = e;
            // console.log("数据库打开成功...");
                     console.log("7777")
            console.log(this)
            // this.tableData .push({
            //         ID:'222',
            //         GeoJSON:'222'
            //     })
            // setTimeout(()=>{
            //     this.tableData.push({
            //         ID: obj.id,
            //         GeoJSON: obj.wkt,
            //     })
            // })
            // this.nextTick(()=>{
            // //确保DOM节点已经生成，在这里对表格进行赋值，===>表格未渲染数据
            //  this.tableData.push({
            //     ID: obj.id,
            //     GeoJSON: obj.wkt,
            // })
            // })
            // })
            //  this.$set(this.tableData,this.tableData.length,{
            //     ID: obj.id,
            //     GeoJSON: obj.wkt,
            // });
            //  console.log(this.tableData,'this.tableData=============')
            // this.indexDB.addData(this.indexDBdb,obj);
            // this.drawCount++;
        // })
        // }
        },
        finish(obj) {//画完多边形
            this.actived = false
        }
    }
}
</script>
<style scoped>
.priceColumns{
    float: left;
    width: 100%;
    border-bottom: #dcdfe6 1px solid;
    margin: 5px;
}
.priceItem{
    float: left;
    width: 100%;
    border-bottom: #dcdfe6 1px solid;
        margin: 5px;
}
.priceColumn{
    width: 48%;
    display: inline-block;
    text-align: center; 
    font-weight: bold;
}
.priceName{
    width: 48%;
    display: inline-block;
    text-align: center;
}
#priceTableContainer{
    margin-top: 10px;
}
#downLoadJson{
    margin-top: 10px;   
}
ul,li {
    padding:0;margin:0;
    list-style: none;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, p, blockquote, th, td {  
    margin:0;  
    padding:0;  
    font:宋体;  
    font-size:12px;  
}  
ol, ul {  
    list-style:none outside none;  
} 
select{
    width: 20%;
    margin-left:20px;
    border-radius: 4px;
    background: aliceblue;
    height: 27px;
}
/*link*/  
a{color:#106aa9; text-decoration:none;}  
/*content nav one*/  
.navC{border-bottom:1px solid #cce2ed;}  
.navC li{border-left:1px solid #cce2ed;border-right:1px solid #cce2ed;}  
.navC li a{border-top:1px solid #cce2ed;background:#f1f6fa;font-size:14px;}  
.navC li a:hover{background:#ffffff;text-decoration:none;}  
.navC .current,.navC li:hover{border-left:1px solid #cce2ed;border-right:1px solid #cce2ed;}  
.navC li:hover a{border-top:1px solid #cce2ed;}  
.navC .current a,.navC .current a:hover{background:#ffffff;border-bottom:1px solid #ffffff;color:#333333;border-top:1px solid #cce2ed;}  
.navC .current a{ font-weight:700;}  
.navC{height:28px;line-height:28px;}  
.navC ul{padding-left: 10px;
    margin-bottom: -1px;
    display: block;
    height: 28px;
    border-bottom: 1px solid #cce2ed;
    margin-bottom: 4px;} /*ie6*/  
.navC li{float:left;margin-right:5px;margin-top:0px;}  
.navC li a{float:left;display:block;padding:0 15px;height:28px;overflow:hidden;margin-top:-1px;_position:relative;}
.mb10{ width:100%; }  
.tab-content{
    height: 81%;
    overflow: auto;
    background: #fefefe;
    position: absolute;
    width: 100%;
    /* top: 10%; */
}
.tab-content div{
    float: left;
    width: 100%;
}
tbody>tr>td{
    padding: 0px;
}
.el-pager{
    padding-left: 0px;
    margin: 0px;
}
.el-table .cell{
    height: 30px;
}
</style>