<template>
  <dv-flyline-chart 
    :config="config" 
    :style="{
      position: 'absolute',
     width: val.width  + '%',
      height: val.height  + '%',
      left: val.left  + '%',
      top: val.top  + '%',
      zIndex: val.z,
      backgroundColor: val.bgColor
    }"/>
</template>

<script>

import stylec from "./style.vue";
const WIDGET_NAME = "dataV-flylinechart";
const option ={
   centerPoint: [0.48, 0.35],
  points: [
    [0.52, 0.23],
    [0.43, 0.29],
    [0.59, 0.35],
    [0.53, 0.47],
    [0.45, 0.54],
    [0.36, 0.38],
    [0.62, 0.55],
    [0.56, 0.56],
    [0.37, 0.66],
    [0.55, 0.81],
    [0.55, 0.67],
    [0.37, 0.29],
    [0.20, 0.36],
    [0.76, 0.41],
    [0.59, 0.18],
    [0.68, 0.17],
    [0.59, 0.10]
  ],
  bgImgUrl: 'http://datav.jiaminghi.com/img/flylineChart/map.jpg',
  centerPointImg: {
    url: 'http://datav.jiaminghi.com/img/flylineChart/mapCenterPoint.png'
  },
  pointsImg: {
    url: 'http://datav.jiaminghi.com/img/flylineChart/mapPoint.png'
  }
}
export default {
  name: WIDGET_NAME,
  props: ["h", "val", "playState", "w"],
  data() {
    return {
      config: {}
    };
  }, 
  icon: {
    type: "ios-jet"
  },
  title: "飞线图",
  panel: stylec,
  setting: {
    type: WIDGET_NAME,
    isContainer: true,
    isUpload: false,
    hasGuide: true,
    isChild: true,
    draggable: true,
    resizable: true,
    name: "飞线图",
    width: 30,
    height: 30,
    left: 10,
    offsetLeft: 10,
    offsetTop: 10,
    offsetWidth: 100,  // 父组件相对于page的百分比
    offsetHeight: 100, // 父组件相对于page的百分比
    z: 0,
    bgColor: '#00265f',
    backPic: "",
    backPicUrl: "",
    text: "飞线图",
    belong: "page",
    animationName: "",
    option: option
  },
   watch: {
    val: {
      handler: function (newValue, oldval) {
        this.config = newValue.option
        // console.log( this.config,999999)
        this.config={...this.config} //
      },
      deep: true// 对象内部的属性监听，也叫深度监听
    }
  },
  mounted(){
    console.log(this.val,6666666)
    this.config = this.val.option
  }  
};
</script>

<style scoped>
</style>
