<template>

  <div>
    <!-- map -->
    <Modal v-model="editPositionModal" :style='modalStyle' :width='modalWidth'>
      <Row class="margin-top-50">
        <Card class="table-card" style="position:relative;   ">
          <h4 slot="title">
            <Icon type="android-archive"></Icon>
            <span v-if="mapParams">
             {{title}}
            </span>
          </h4>

          <div slot="extra" style="position:absolute;width:240px; top: -9px;right : 0px;display:flex;">

            <Select style="flex : 1;" @on-change="onMapSearch" v-model="mapSearchInput" placeholder="选择区域" clearable>
              <Option v-for="(item) in mapSearchCandidates" :value="item.code" :key="item.code">{{ item.name }}</Option>
            </Select>
            <Select v-if="secondMapSearchCandidates.length" style="flex : 1;" @on-change="onMapSearchSecond" v-model="mapSearchInputSecond" placeholder="选择区域" clearable>
              <Option v-for="(item) in secondMapSearchCandidates" :value="item.code" :key="item.code">{{ item.name }}</Option>
            </Select>
          </div>
          <Row>
            <mapControl v-if="mapParams" @click="onMapClick" :markers="mapParams.row.trade_regions" ref="mapControl" :height="height" :width="width" />
          </Row>
        </Card>
      </Row>

      <div slot="footer">
        <Row>
          <Col span="2">
          <p style="    line-height: 36px;    text-align: left;">区域半径(km)</p>
          </Col>
          <Col span="10">
          <Slider v-model="mapRadius" :step="1" :max="25" show-input></Slider>
          </Col>
          </Col span="10">
          <Button type="error" size="large" @click="redrawMap">重新绘制</Button>
          <Button type="success" size="large" @click="finishEditMap">完成编辑</Button>
          </Col>
        </Row>
      </div>

    </Modal>

    <Button type="info" @click="setConditionFilterInfo">MewMapSelector</Button>

  </div>
</template>

<script>
import mapControl from '../mew-map';
import areaData from './area-data/data';

export default {
    components: {
        mapControl
    },
    props: {
        height:{
            type:String,
            default: '300px'
        },
        width:{
            type:String,
            default: '300px'
        },
        title:{
            type:String,
            default(){
                return '';
            }
        }
    },
    computed:{
        modalStyle(){
            let style ={};
            style.height=this.height+'px';
           
            return style;

        },
        modalWidth(){
            let modalWidth=this.width+'%';
            return modalWidth;
        }
    },
    data() {
        return {



            editImageModal: false,
            imageViewProduct: {
                row: {
                    image_url: null
                }
            },
            screenHeight: document.documentElement.clientHeight,
            mapSearchInput: '',
            mapRadius: 5,
            mapSearchInputSecond: '',
            mapSearchCandidates: Object.keys(areaData['86']).map(function(code) {
                return {
                    code: code,
                    name: areaData['86'][code]
                };
            }),
            mapParams: undefined,
            secondMapSearchCandidates: [],
            importModal: false,
            editPositionModal: false,
            tempExcel: null,
            tempExcelResult: '',
            uploadExcelURL: '',
            filter: {
                query: '',
                brand: '',
                category: ''
            },
            brands: [],
            categorys: [],
            templateURL: undefined,
            goods: {
                total: 1,
                limit:
          Math.ceil((document.documentElement.clientHeight - 310) / 40) - 2,
                start: 0,
                list: []
            }
        };
    },
    methods: {
        onMapSearchSecond() {
            this.$refs.mapControl.searchAndMoveToLocation(this.mapSearchInputSecond);
        },
        finishEditMap() {

            this.$emit('choosed-location',
            this.mapParams.row.trade_regions  
            );
            
            
        },
        setConditionFilterInfo() {
            var self = this;
            self.editPositionModal = true;
            self.mapParams = {
                row: {
                    trade_regions: []
                }
            };
            self.$nextTick(function() {
                self.$refs.mapControl.updateMakers();
            });
        },

        onMapSearch() {
            var self = this;
            var keys = Object.keys(areaData[this.mapSearchInput]);

            if (keys.length == 1) {
                this.secondMapSearchCandidates = [];
                this.$refs.mapControl.searchAndMoveToLocation(this.mapSearchInput);
            } else {
                this.secondMapSearchCandidates = keys.map(function(code) {
                    return {
                        code: code,
                        name: areaData[self.mapSearchInput][code]
                    };
                });
            }
        },

        onMapClick(poi) {
            if (this.mapParams.row.trade_regions.length < 3) {
                this.mapParams.row.trade_regions.push({
                    type: 'circle',
                    radius: this.mapRadius * 1000,
                    latitude: poi.latitude,
                    longitude: poi.longitude
                });

                this.$refs.mapControl.updateMakers();
            }
        },
    
        redrawMap() {
            this.$Modal.confirm({
                title: '重新绘制',
                content: '请问是否要重新绘制这个经销范围',
                onOk: () => {
                    this.mapParams.row.trade_regions.length = 0;
                    this.$refs.mapControl.updateMakers();
                },
                onCancel: () => {}
            });
        },
        itemTitle(item) {
            if (typeof item.title === 'object') {
                return this.$t(item.title.i18n);
            } else {
                return item.title;
            }
        },
        beforeUploadProductInfo() {
            this.$Loading.start();
            return true;
        },
        uploadProductInfo(result) {
            this.tempExcel = result;
            this.importModal = true;
            this.tempExcelResult = result.result;
            this.$Loading.finish();
        },

        changePage(page) {
            this.goods.start = (page - 1) * this.goods.limit;
            this.search();
        },
        doSearch() {
            this.goods.start = 0;
            this.search();
        },
        redoSearch() {
            this.goods.start = 0;
            this.filter.brand = '';
            this.filter.category = '';
            this.filter.query = '';
            this.filter.priceLow = '';
            this.filter.priceHigh = '';
            this.search();
        },
        search(newFilter) {
            if (newFilter) {
                this.filter = newFilter;
            }
        },
        newGoods() {},
        catTree() {}
    },
    mounted() {
        this.search();
    }
};
</script>