<template>
  <div  style="width:100%;height:100%" :style='initStyle'>
     <el-carousel  style="width:100%;height:100%">
        <el-carousel-item :style="itemStyle" v-for="(item,index) in dataList" :key="index">
          <h3 class="small">{{ item.text }}</h3>
        </el-carousel-item>
      </el-carousel>
  </div>
</template>
<script>
export default {
  props: {
    setOptions: {
      type: Object,
      default() {
        return {}
      }
    },
    itemStyle: {},
    initStyle: {}
  },
  data() {
    return {
      dataList: []
    }
  },
  watch: {
    setOptions: {
      handler: function(newVal, oldVal) {
        this.initData(newVal)
      },
      deep: true
    }
  },
  methods: {
    initData(newVal) {
      this.dataList = newVal.sourceData
    }
  }
}
</script>
