<style>
  .my_map-container {
    background-size: cover;
    background-position: center;
  }

</style>
<template>
  <div :class="{'active':mapData.isCked}">
    <div class="diy-component-options" v-if="mapData.isCked">
      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
        style="right: -25px; top: 0;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
        style="right: -25px; top: 30px;"></el-button>
    </div>
    <div class="diy-component-preview">
      <div :style="'padding-top: '+data.marginTop+'px; background-color: '+data.marginTopColor">
        <div :style="cContainerStyle" class="my_map-container">
          <div :style="cMapStyle" style="background-size: cover;background-position: center;"></div>
        </div>
      </div>
    </div>
    <div class="diy-component-edit" v-if="mapData.isCked">
      <el-form label-width="100px" @submit.native.prevent>
        <el-form-item label="地图">
          <el-button type="primary" @click="isShowMap=true" size="small">地图选点</el-button>
        </el-form-item>
        <el-form-item label="经纬度">
          <el-input size="small" v-model="data.location" placeholder="请使用地图选点选择经纬度"></el-input>
        </el-form-item>
        <el-form-item label="地图高度">
          <el-slider v-model="data.height" :max="1500" show-input></el-slider>
        </el-form-item>
        <el-form-item label="上下边距">
          <el-slider v-model="data.paddingY" :max="1500" show-input></el-slider>
        </el-form-item>
        <el-form-item label="左右边距">
          <el-slider v-model="data.paddingX" :max="375" show-input></el-slider>
        </el-form-item>
        <el-form-item label="顶部外边距">
          <el-slider v-model="data.marginTop" :max="1500" show-input></el-slider>
        </el-form-item>
        <el-form-item label="外边距颜色">
          <el-color-picker v-model="data.marginTopColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker v-model="data.backgroundColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="背景图片">
          <div class="zk_pic_box" @click="choicImg=true" flex="main:center cross:center"
            :style="{backgroundImage:'url(' + getIconLink(data.backgroundPicUrl) + ')'}">
            <i v-if="data.backgroundPicUrl==''" class="el-icon-picture-outline"></i>
            <el-button type="danger" v-if="data.backgroundPicUrl!=''" class="image-delete" size="mini"
              icon="el-icon-close" @click.stop="data.backgroundPicUrl=''" circle></el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
    <!-- 地图选址 -->
    <el-dialog title="地图展示" :visible.sync="isShowMap" width="960px">
      <commonMap @map-submit="mapEvent"></commonMap>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import commonMap from "../../common/commonMap.vue";

  export default {
    props: ["mapData", "index", "dataLeng"],
    components: {
      ChooseImg,
      commonMap
    },
    data() {
      return {
        choicImg: false,
        isShowMap: false,
        mapDemoPic: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/map-demo.png',
        data: this.mapData.data,
      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        this.data.backgroundPicUrl = msg.url;
        this.choicImg = false;
      },
      //得到地图信息
      mapEvent(e) {
        this.data.location = e.lat + ',' + e.long;
        this.isShowMap=false;
      },

    },
    computed: {
      cContainerStyle() {
        let style = `padding: ${this.data.paddingY}px ${this.data.paddingX}px;` +
          `background-color: ${this.data.backgroundColor};` +
          `background-image: url(${this.getIconLink(this.data.backgroundPicUrl)});`;
        return style;
      },
      cMapStyle() {
        let style = `height: ${this.data.height}px;` +
          `background-image: url(${this.mapDemoPic});`;
        return style;
      },
    },
    mounted() {

    }
  };

</script>
