<template>
  <custom-modal v-model="visible" centered :width="420" title="Processing Monitor" class="processing-monitor">
    <div class="processing-monitor-content">
      <div class="processing-monitor-content-bar" :style="{ width: `${350 * percent}px` }">
        <span class="processing-monitor-content-bar-percent">{{ percent * 100 }}%</span>
      </div>
    </div>
    <div style="margin-top: 15px; font-size: 12px">{{ analysedFileName.length > 0 ? analysedFileName[0] : '' }}</div>
    <div slot="custom-footer">
      <a-button @click="visible = false">Cancel</a-button>
    </div>
  </custom-modal>
</template>

<script>
import ModalMixin from '@/mixins/ModalMixin'
export default {
  mixins: [ModalMixin],
  props: ['percent', 'analysedFileName'],
  // props: {
  //   percent: {
  //     type: Number,
  //   },
  //   analysedFileName: {
  //     type: Array,
  //     default: () => [],
  //   },
  // },
  watch: {
    percent(newValue, oldValue) {
      if (newValue == 1) {
        this.visible = false
      }
    },
  },
}
</script>

<style lang="less" scoped>
.processing-monitor {
  &-content {
    width: 350px;
    height: 16px;
    background: url(~@/assets/images/abnormalAlarm/green-bg.png) repeat;
    &-bar {
      position: relative;
      height: 100%;
      background: url(~@/assets/images/abnormalAlarm/green.png) repeat;
      &-percent {
        position: absolute;
        right: -10px;
        top: -1px;
      }
    }
  }
}
</style>