<template>
  <div class="new-water">
    <dv-water-level-pond :key="`${key}`" :config="option" :style="{ width:'100%',height:height}" />
  </div>
</template>
<script>
  export default {
    name: "new-water",
    props: ["option", 'config', "modalSet", "index", "site", 'scale', 'ext', 'contentH'],
    data() {
      return {
        key: 1,
      }
    },
    computed: {
      height() {
        let height = this.site.h
        if (this.contentH) {
          height = this.site.h * 44
        }
        return height + "px";
      },
    },
    watch: {
      option: {
        handler() {
          this.init();
        },
        deep: true,
      },
      site: {
        handler() {
          this.init();
        },
        deep: true,
      }
    },

    methods: {
      init() {
        this.$nextTick(() => {
          this.key++;
        });
      },
      update(data) {
        let name = this.config.indexParamList[0].columnTitle
        this.option.data = [Number(data[0][name])]
        this.init();
      },

    }
  }

</script>
<style>
</style>
