<script >


import EventBus  from "../eventBus.js";
import HyperSpectralMainViewMethods from './HyperSpectralMethod.js';
import eventBus from "../eventBus.js";
  export default {
    name: 'HyperSpectralMainView',
    mounted() {
      this.initChart();
      eventBus.on("plotsetwavelength",this.setwavelength);
      eventBus.on('setprogressbar',this.setprogressbar);
      eventBus.on('setplotname',this.setplotname);

    },
    data() {
      return {
        Comname: '请选择',
        options:[],
        datatosave:[],
        percent:0,
        progressinfo:"",
        progressstate:false,

        Pathtosave:"",
        nowNumber:0,
        Filename:"Plot",
        pathofdir:"./data",
        sideropen:false ,
      }
    },
    methods: {
      ...HyperSpectralMainViewMethods,
      onClose(){
        this.sideropen=false;
      },

    }
  }

function echartresize()
{

}

</script>

<template>

  <div class="chart-container" id="charmian" ref="chart" ></div>
  <BProgress :max="100"   class="progressbar" >
    <BProgressBar style="background-color: #335c60" striped :animated="progressstate"
        :value="percent"
        :label="`${(percent).toFixed(2)}%`"

    />

  </BProgress>
  <b-form-floating-label style="font-size: 80%;color: #06efcc">{{progressinfo}}</b-form-floating-label>
<!--  <a-drawer-->
<!--      title="Basic Drawer"-->
<!--      placement="right"-->
<!--      :closable="false"-->
<!--      :open="sideropen"-->
<!--      :get-container="false"-->
<!--      :style="{ position: 'absolute' }"-->
<!--      @close="onClose"-->
<!--  >-->
<!--    <p>Some contents...</p>-->
<!--  </a-drawer>-->
</template>

<style scoped>
.chart-container {
  background-color: #f8f9fa;
  width:100%;
  height: 90vh;
}
.progressbar{
  width:90%;
  margin-left: 5%;
  position: absolute;
  bottom: 10px;
  align-self: center;
}
</style>
