<template>
  <div class="h-100" :id="'widget_' + widgetId">
    <template v-if="widgetData">
      <div class="header" :id="'widget_' + widgetId" :style="{ background: getCardBackgroundColor() }">
        <div class="title-wrap">
          <div
            class="widget-title"
            :style="{
              color: getTitleFontColor(),
              fontSize: getTitleFontSize(),
              justifyContent: getTitleAlign(),
            }"
          >
            {{ getTitle().text }}
          </div>
          <div
            class="widget-subtitle"
            :style="{
              color: getSubtitleFontColor(),
              fontSize: getSubtitleFontSize(),
              justifyContent: getSubtitleAlign(),
            }"
          >
            {{ getSubtitle().text }}
          </div>
        </div>
        <div
          class="actions"
          :class="{ single: widgetType === 'command_widget' }"
          v-if="isEditingDashboard"
        >
          <svg
            class="icon pencil"
            v-if="widgetType !== 'command_widget'"
            @click="editWidget()"
          >
            <use xlink:href="/assets/img/mads-common-icons.svg#pencil"></use>
          </svg>
          <svg
            class="copy-icon"
            v-tooltip="'Duplicte Widget'"
            @click="onDuplicateWidget"
          >
            <use xlink:href="/assets/img/mads-common-icons.svg#copy"></use>
          </svg>
          <svg
            class="icon dustbin"
            @click="
              widgetType === 'command_widget'
                ? deleteCommandWidget()
                : deleteWidget()
            "
          >
            <use xlink:href="/assets/img/mads-common-icons.svg#dustbin"></use>
          </svg>
        </div>
        <div
          class="actions single"
          v-if="widgetType === 'highcharts' && !isEditingDashboard"
        >
          <div class="clock-action" v-if="dashboardType === 'userDashboard'">
            <svg
              class="icon clock"
              @click="openRealtimeHistoricalSettings()"
            >
              <use xlink:href="/assets/img/mads-common-icons.svg#clock"></use>
            </svg>
          </div>
          <div class="hamburger-action">
            <b-dropdown
              size="sm"
              variant="link"
              toggle-class="text-decoration-none"
              no-caret
            >
              <template #button-content>
                <svg
                  class="icon hamburger"
                >
                  <use
                    xlink:href="/assets/img/mads-common-icons.svg#hamburger"
                  ></use>
                </svg>
              </template>
              <b-dropdown-item @click="viewFullScreen()"
                >View Full Screen</b-dropdown-item
              >
              <b-dropdown-item @click="printChart()"
                >Print Chart</b-dropdown-item
              >
              <b-dropdown-item @click="downloadPNG()"
                >Download PNG Image</b-dropdown-item
              >
              <b-dropdown-item @click="downloadJPEG()"
                >Download JPEG Image</b-dropdown-item
              >
              <b-dropdown-item @click="downloadPDF()"
                >Download PDF Document</b-dropdown-item
              >
              <b-dropdown-item @click="downloadSVG()"
                >Download SVG Vector Image</b-dropdown-item
              >
              <b-dropdown-item @click="downloadCSV()"
                >Download CSV</b-dropdown-item
              >
              <b-dropdown-item @click="downloadXLS()"
                >Download XLS</b-dropdown-item
              >
              <b-dropdown-item @click="viewData()">{{
                isViewDataTable ? "View Data Table" : "Hide Data Table"
              }}</b-dropdown-item>
            </b-dropdown>
          </div>
        </div>
      </div>
      <command-widget
        v-if="widgetType === 'command_widget'"
        :commandWidgetObject="commandWidgetObject"
        :currentUser="currentUser"
        :selectedDashboard="selectedDashboard"
        :selectedPanel="selectedPanel"
        :dashboardService="dashboardService"
      ></command-widget>
      <div class="widget-wrap" :style="{ height: `calc(100% - ${headerHeight}px)` }">
        <component
          v-bind:is="mappings[widgetData.widget_category[0] + '_' + widgetData.widget_category[1]]"
          :ref="getWidgetRef()"
          :widget="widgetData"
          :visualProperties="getVisualProperties()"
          :series="getSeries()"
          :widgetId="getWidgetUUId()"
          :category="widgetData.widget_category[0]"
          :page="'dashboard'"
          :width="getHighchartWidth(layoutItem.w)"
          :height="getHighchartHeight(layoutItem.h)"
          :timezone="getTimezone()"
          :title="
            widgetData.visual_properties &&
            widgetData.visual_properties.title &&
            widgetData.visual_properties.title.text
          "
        >
        </component>
      </div>
      <div
        v-if="widgetType === 'highcharts'"
        :style="{ backgroundColor: getCardBackgroundColor() }"
      >
      </div>
      <anychart
        v-if="widgetType === 'anychart'"
        :series="getSeries()"
        :widgetId="getWidgetUUId()"
      ></anychart>
      <pivot-table
        v-if="widgetType === 'pivot_table'"
        :headers="getSeries()[0]"
        :rows="getPivotTableData()"
      ></pivot-table>
    </template>
    <template v-else>
      <div v-if="widgetDataError" class="error-wrap">
        <div class="icon-wrap" v-if="isEditingDashboard">
          <svg
            class="icon dustbin"
            @click="
              widgetType === 'command_widget'
                ? deleteCommandWidget()
                : deleteWidget()
            "
          >
            <use xlink:href="/assets/img/mads-common-icons.svg#dustbin"></use>
          </svg>
        </div>
        <div>
          There is some error while loading data for this widget.
        </div>
        <div class="error-message">
          {{widgetDataError}}
        </div>
      </div>
      <b-spinner variant="info" v-else></b-spinner>
    </template>
    <realtime-historical-settings
      ref="widgetRealTimeHistoricalSettings"
      :entityType="'widget'"
      @set-realtime-historical-settings="setRealtimeHistoricalSettings"
    >
    </realtime-historical-settings>
    <edit-widget
      ref="editWidget"
      :dashboardService="dashboardService"
      :imageService="imageService"
      :currentUser="currentUser"
      :selectedDashboard="selectedDashboard"
      :selectedProject="selectedProject"
      :selectedPanel="selectedPanel"
      :compareTreeData="compareTreeData"
      :treeService="treeService"
      :entityService="entityService"
      :orgService="orgService"
      :dataInsightService="dataInsightService"
      @on-update-widget-instance="onUpdateWidgetInstance"
    ></edit-widget>
    <export-widget-edit ref="exportWidgetEdit"></export-widget-edit>
    <duplicate-widget-modal v-if="showDuplicateModal"
      ref="duplicateWidgetModal"
      @on-save="duplicateWidget"
      @on-mounted="modalMounted"
      :currentUser="currentUser"
      :selectedDashboard="selectedDashboard"
      :selectedPanel="selectedPanel"
      :dashboardService="dashboardService"
    ></duplicate-widget-modal>
  </div>
</template>

<script>
import $ from 'jquery'
import Highchart from './widgetsLib/highChart.vue'
import MultiLineWidget from './widgets/multiLineWidget.vue'
import StaticLocationWidget from './widgets/staticLocationWidget.vue'
import AverageCardWidget from './widgets/averageCardWidet.vue'
import AverageComparisionCardWidget from './widgets/averageComparisionWidget.vue'
import StatusIndicatorCardWidget from './widgets/statusIndicatorWidget.vue'
import StaticCardWidget from './widgets/staticCardWidget'
import ImageCardWidget from './widgets/imageCardWidget'
import DynamicCardWidget from './widgets/dynamicCardWidget'
import PivotTable from './widgetsLib/pivotTable.vue'
import Anychart from './widgetsLib/anyChart.vue'
import DataCard from './widgets/dataCardWidget.vue'
import DataPercentCard from './widgets/dataPercentCardWidget.vue'
import UserCard from './widgets/userCardWidget.vue'
import TableCard from './widgets/tableCardWidget.vue'
import LineChart from './widgets/lineChartWidget.vue'
import AreaChart from './widgets/areaChartWidget.vue'
import ColumnStockChart from './widgets/columnStockChartWidget.vue'
import LineStockChart from './widgets/lineStockChartWidget.vue'
import GaugeChart from './widgets/gaugeChartWidget.vue'
import SolidGaugeChart from './widgets/solidGaugeChartWidget.vue'
import CommandWidget from './widgets/commandWidget'
import RealtimeHistoricalSettings from '../modals/dashboardSettings/realTimeHistoricalSettings.vue'
import EditWidget from './addEdit/addEditWidget.vue'
import ExportWidgetEdit from '../modals/exportWidgetEditModal.vue'
import dasbhoardEventBus from '../dashboardBus'
import utilityService from './utility.service'
import DuplicateWidgetModal from '../modals/duplicateWidgetModal.vue'
import MultiDataPointWidget from './widgets/multiDataPointWidget.vue'

const alignMap = {
  'left': 'flex-start',
  'center': 'center',
  'right': 'flex-end'
}

const mappings = {
  chart_multi_line: 'MultiLineWidget',
  card_average_card: 'AverageCardWidget',
  card_average_comparison_card: 'AverageComparisionCardWidget',
  card_status_indicator_card: 'StatusIndicatorCardWidget',
  card_static_location: 'StaticLocationWidget',
  chart_line: 'LineChart',
  chart_area: 'AreaChart',
  stock_chart_column: 'ColumnStockChart',
  stock_chart_line: 'LineStockChart',
  chart_gauge: 'GaugeChart',
  'chart_solid gauge': 'SolidGaugeChart',
  card_dynamic_card: 'DynamicCardWidget',
  card_image_card: 'ImageCardWidget',
  card_percentage_card: 'DataPercentCard',
  card_user_card: 'UserCard',
  card_static_card: 'StaticCardWidget',
  card_data_card: 'DataCard',
  card_table_timeseries: 'TableCard',
  card_multi_data: 'MultiDataPointWidget'
}

export default {
  components: {
    Highchart,
    MultiLineWidget,
    StaticLocationWidget,
    AverageCardWidget,
    AverageComparisionCardWidget,
    StatusIndicatorCardWidget,
    StaticCardWidget,
    ImageCardWidget,
    DynamicCardWidget,
    DataCard,
    DataPercentCard,
    UserCard,
    TableCard,
    LineChart,
    AreaChart,
    LineStockChart,
    ColumnStockChart,
    GaugeChart,
    SolidGaugeChart,
    CommandWidget,
    Anychart,
    PivotTable,
    RealtimeHistoricalSettings,
    EditWidget,
    ExportWidgetEdit,
    DuplicateWidgetModal,
    MultiDataPointWidget
  },
  props: {
    widgetId: {
      type: Number,
      required: true
    },
    widgetInstanceId: {
      type: Number,
      required: true
    },
    widgetType: {
      type: String,
      required: true
    },
    layoutItem: {
      type: Object,
      required: true
    },
    isEditingDashboard: {
      type: Boolean,
      required: true
    },
    dashboardType: {
      type: String,
      required: true
    },
    currentUser: {},
    selectedDashboard: {},
    selectedPanel: {},
    dashboardSocketToken: {},
    dashboardService: {},
    imageService: {},
    selectedProject: {},
    compareTreeData: {},
    treeService: {},
    entityService: {},
    orgService: {},
    dataInsightService: {}
  },
  data () {
    return {
      widgetData: null,
      isViewDataTable: true,
      colWidth: 20,
      colHeight: 20,
      filterMetadata: null,
      realtimeTimerId: null,
      uniqueKey: '',
      isLocalRealtimeHistoricalSettings: false,
      showDuplicateModal: false,
      mappings: mappings,
      widgetDataError: '',
      headerHeight: 0
    }
  },
  methods: {
    isNewWidget () {
      let widgetName = this.widgetData.widget_category[1]
      return this.$_.includes(['multi_line', 'average_card', 'average_comparison_card', 'status_indicator_card', 'static_location', 'multi_data'], widgetName)
    },
    modalMounted () {
      this.$refs.duplicateWidgetModal.show()
    },
    onDuplicateWidget () {
      this.showDuplicateModal = true
      if (this.$refs.duplicateWidgetModal) {
        this.$refs.duplicateWidgetModal.show()
      }
    },
    duplicateWidget (selectedPanel) {
      let data = {
        'widget_id': this.widgetInstanceId,
        'target_panel_id': selectedPanel,
        'label': 'label' + utilityService.getUniqueKey()
      }

      let config = { orgId: this.currentUser.org.id, panelId: this.selectedPanel.id }
      this.dashboardService.widgetDuplicate(config, data)
        .then((widgetInstance) => {
          dasbhoardEventBus.$emit('reload-dashboard-panel')
          this.$toastr.success('Widget duplicated successfully', 'Success', {
            closeButton: true,
            closeDuration: 0
          })
          this.$refs.duplicateWidgetModal.onCancel()
          this.showDuplicateModal = false
        })
        .catch((e) => {
          this.$toastr.error(e.title, 'Error', {
            closeButton: true,
            closeDuration: 0
          })
        })
    },
    setUniqueKey () {
      let result = ''
      let characters = 'abcdefghijklmnopqrstuvwxyz0123456789'
      let charactersLength = characters.length
      for (var i = 0; i < 20; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength))
      }
      this.uniqueKey = result
    },
    loadData () {
      if (this.filterMetadata.last === 'custom') {
        if (this.dashboardType === 'userDashboard') {
          this.loadWidgetInstanceData()
        } else {
          // this.loadExportedDashboardWidgetInstanceData()
          this.loadWidgetInstanceData()
        }
      } else {
        // Update From Date and To Date based on last parameter
        let diff = parseInt(this.filterMetadata.to_date) - parseInt(this.filterMetadata.from_date)
        let toDate = this.$moment().format('x')
        let fromDate = this.$moment(parseInt(toDate)).subtract(diff, 'milliseconds')
        let params = this.$_.merge({}, this.filterMetadata, { from_date: fromDate.format('x'), to_date: toDate.toString() })

        if (this.dashboardType === 'userDashboard') {
          this.loadWidgetInstanceData(params)
        } else {
          // this.loadExportedDashboardWidgetInstanceData(params)
           this.loadWidgetInstanceData()
        }

        // Poll widget instance data for realtime
        if (this.filterMetadata.type === 'realtime') {
          this.loadWidgetInstanceRealtimeData(params)
        }
      }
    },
    loadWidgetInstanceData (params = {}, appendData = false) {
      // let config = { orgId: this.currentUser.org.id, panelId: this.selectedPanel.id, widgetId: this.widgetId, id: this.widgetInstanceId }
      let config;
      if(this.dashboardType === 'userDashboard') {
        config = { orgId: this.currentUser.org.id, panelId: this.selectedPanel.id, widgetId: this.widgetId, id: this.widgetInstanceId }
      } else {
        config = { orgId: this.currentUser.org.id, dashboardId:this.selectedDashboard.id, panelId: this.selectedPanel.id, widgetId: this.widgetId, id: this.widgetInstanceId }
      }
      this.dashboardService.readWidgetInstance(config, params)
        .then((widgetInstance) => {
          let widgetInstanceRef = this.getWidgetRef()
          if (appendData && widgetInstanceRef) {
            this.$_.forEach((widgetInstance.series), (serie, index) => {
              let dataPoint = serie && serie.data[0]
              if (dataPoint && !this.$_.isEmpty(dataPoint)) {
                this.$refs[widgetInstanceRef].addDataPoint(dataPoint, index)
              }
            })
          } else {
            this.widgetData = widgetInstance
          }
        })
        .catch((error) => {
          this.widgetDataError = error.detail
        })
    },
    loadExportedDashboardWidgetInstanceData (params = {}, appendData = false) {
      let dashboardToken = localStorage.getItem('dashboard_token')
      let dashboardUUID = localStorage.getItem('dashboard_uuid')

      // let config = { uuid: dashboardUUID, panelId: this.selectedPanel.id, id: this.widgetInstanceId }
      let config = { orgId: this.currentUser.org.id, panelId: this.selectedPanel.id, widgetId: this.widgetId, id: this.widgetInstanceId }

      this.dashboardService.readExportedDashboardWidgetInstance(config, params, dashboardToken)
        .then((widgetInstance) => {
          let widgetInstanceRef = this.getWidgetRef()
          if (appendData && widgetInstanceRef) {
            this.$_.forEach((widgetInstance.series), (serie, index) => {
              let dataPoint = serie && serie.data[0]
              if (dataPoint && !this.$_.isEmpty(dataPoint)) {
                this.$refs[widgetInstanceRef].addDataPoint(dataPoint, index)
              }
            })
          } else {
            this.widgetData = widgetInstance
          }
        })
    },
    loadWidgetInstanceRealtimeData (params) {
      let realtimeDuration = 0
      if (this.filterMetadata.group_interval_type === 'second') {
        realtimeDuration = this.filterMetadata.group_interval * 1000
      } else if (this.filterMetadata.group_interval_type === 'minute') {
        realtimeDuration = this.filterMetadata.group_interval * 60 * 1000
      }

      this.realtimeTimerId = setInterval(() => {
        let fromDate = this.$moment(parseInt(params.to_date)).add(1, 'milliseconds')
        let toDate = this.$moment(parseInt(params.to_date)).add(realtimeDuration, 'milliseconds')
        params = this.$_.merge({}, params, { from_date: fromDate.format('x'), to_date: toDate.format('x') })

        if (this.dashboardType === 'userDashboard') {
          this.loadWidgetInstanceData(params, true)
        } else {
          this.loadWidgetInstanceData()
          // this.loadExportedDashboardWidgetInstanceData(params, true)
        }
      }, realtimeDuration)
    },
    getCardBackgroundColor () {
      if (this.getVisualProperties().chart || this.getVisualProperties().card) {
        let widgetSettings = (this.getVisualProperties().chart || this.getVisualProperties().card)
        return widgetSettings ? widgetSettings.backgroundColor : '#ffffff'
      } else {
        return this.getVisualProperties().background_and_position ? this.getVisualProperties().background_and_position.background : '#ffffff'
      }
    },
    getTitle () {
      return this.getVisualProperties().title ? this.getVisualProperties().title : {}
    },
    getTitleFontColor () {
      if (this.getTitle().style) {
        return this.getTitle().style ? this.getTitle().style.color : this.getTitle().fontColor
      } else {
        return this.getVisualProperties().title.text_settings ? this.getVisualProperties().title.text_settings.fontColor : '#000000'
      }
    },
    getTitleFontSize () {
      if (this.getTitle().style) {
        return this.getTitle().style ? this.getTitle().style.fontSize : this.getTitle().fontSize
      } else {
        return this.getVisualProperties().title.text_settings ? this.getVisualProperties().title.text_settings.fontSize : '15px'
      }
    },
    getTitleAlign () {
      if (this.getTitle().align) {
        let align = this.getTitle().align
        align = this.$_.isArray(align) ? align[0] : align
        return alignMap[align]
      } else {
        let align = this.getVisualProperties().title.text_settings ? this.getVisualProperties().title.text_settings.align : 'left'
        return alignMap[align]
      }
    },
    getSubtitle () {
      return this.getVisualProperties().subtitle ? this.getVisualProperties().subtitle : {}
    },
    getSubtitleFontColor () {
      return this.getSubtitle().style ? this.getSubtitle().style.color : this.getSubtitle().fontColor
    },
    getSubtitleFontSize () {
      return this.getSubtitle().style ? this.getSubtitle().style.fontSize : this.getSubtitle().fontSize
    },
    getSubtitleAlign () {
      let align = this.getSubtitle().align
      align = this.$_.isArray(align) ? align[0] : align
      return alignMap[align]
    },
    getVisualProperties () {
      return this.widgetData ? this.widgetData.visual_properties : {}
    },
    getTimezone () {
      return this.selectedDashboard.settings['timezone'] || this.$moment.tz.guess()
    },
    getSeries () {
      return this.widgetData.series
    },
    getPivotTableData () {
      let series = this.widgetData.series
      series = series.slice(1)
      return series
    },
    getWidgetUUId () {
      return this.widgetData.uuid
    },
    getWidgetRef () {
      return 'widget' + this.uniqueKey + this.widgetInstanceId
    },
    viewFullScreen () {
      let widgetRef = this.getWidgetRef()
      this.$refs[widgetRef].viewFullScreen()
    },
    downloadCSV () {
      let widgetRef = this.getWidgetRef()
      this.$refs[widgetRef].downloadCSV()
    },
    downloadXLS () {
      let widgetRef = this.getWidgetRef()
      this.$refs[widgetRef].downloadXLS()
    },
    viewData () {
      this.isViewDataTable = !this.isViewDataTable
      let widgetRef = this.getWidgetRef()
      this.$refs[widgetRef].viewData()
    },
    printChart () {
      let widgetRef = this.getWidgetRef()
      this.$refs[widgetRef].printChart()
    },
    downloadPNG () {
      let widgetRef = this.getWidgetRef()
      this.$refs[widgetRef].downloadPNG()
    },
    downloadJPEG () {
      let widgetRef = this.getWidgetRef()
      this.$refs[widgetRef].downloadJPEG()
    },
    downloadPDF () {
      let widgetRef = this.getWidgetRef()
      this.$refs[widgetRef].downloadPDF()
    },
    downloadSVG () {
      let widgetRef = this.getWidgetRef()
      this.$refs[widgetRef].downloadSVG()
    },
    openRealtimeHistoricalSettings () {
      this.$refs.widgetRealTimeHistoricalSettings.open(this.filterMetadata)
    },
    setRealtimeHistoricalSettings (filterMetadata) {
      this.setUniqueKey()
      this.filterMetadata = this.$_.merge({}, filterMetadata)
      if (this.realtimeTimerId) {
        clearInterval(this.realtimeTimerId)
      }
      this.widgetData = null
      this.loadData()
    },
    deleteWidget () {
      let config = { orgId: this.currentUser.org.id, panelId: this.selectedPanel.id, widgetId: this.widgetId, id: this.widgetInstanceId }

      this.dashboardService.deleteWidgetInstance(config)
        .then((response) => {
          this.$emit('on-delete-widget-instance', response.id)
        })
    },
    editWidget () {
      let widget = this.widgetData
      if (widget.source_app === 'data_insights') {
        this.$refs.exportWidgetEdit.show()
      } else {
        this.$refs.editWidget.edit(widget)
      }
    },
    onUpdateWidgetInstance () {
      this.setUniqueKey()
      if (this.realtimeTimerId) {
        clearInterval(this.realtimeTimerId)
      }
      this.widgetData = null
      this.loadData()
    },
    deleteCommandWidget () {
      let widgetId = this.widgetData.id

      let loader = this.$loading.show()

      let config = { orgId: this.currentUser.org.id, panelId: this.selectedPanel.id, id: widgetId }

      this.dashboardService.updateCommandWidget(config)
        .then((response) => {
          loader.hide()
        })
    },
    getHighchartWidth (cols) {
      return this.colWidth * cols - 40
    },
    getHighchartHeight (rows) {
      return this.colHeight * rows - 40
    },
    setWidgetHeaderHeight () {
      let id = '#widget_' + this.widgetId
      let headerHeight = $(id + ' #header').height()
      this.headerHeight = headerHeight
    },
    resizeWidget (item) {
      let ref = this.getWidgetRef()
      this.$refs[ref].resizeWidget(this.getHighchartWidth(item.w), this.getHighchartHeight(item.h))
    }
  },
  mounted () {
    this.setUniqueKey()
    if (this.dashboardType === 'userDashboard') {
      this.filterMetadata = this.selectedPanel.filter_metadata
    } else {
      let exportedDashboardKey = 'exported_dashboard_' + this.selectedDashboard.uuid + '_filter_metadata'
      let exportedDashboardFilterMetadata = localStorage.getItem(exportedDashboardKey)

      if (exportedDashboardFilterMetadata) {
        this.filterMetadata = JSON.parse(exportedDashboardFilterMetadata)
      } else {
        this.filterMetadata = this.selectedPanel.filter_metadata
      }
    }
    this.loadData()
  },
  updated () {
    this.$nextTick(() => {
      this.setWidgetHeaderHeight()
    })
  },
  beforeDestroy () {
    if (this.realtimeTimerId) {
      clearInterval(this.realtimeTimerId)
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  background-color: white;
  position: relative;
  .title-wrap {
    width: 100%;
    padding: 0 0 5px 0;
  }
  .widget-title,
  .widget-subtitle {
    display: flex;
    align-items: center;
    text-transform: capitalize;
  }
  .widget-title {
    font-weight: bold;
  }
  .actions {
    position: absolute;
    width: 90px;
    height: 30px;
    right: 0px;
    top: 0px;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: white;
    border-radius: 4px;
    .icon {
      width: 21px;
      height: 21px;
      cursor: pointer;
      opacity: 0.5;
      &:last-child {
        border-right: none;
      }
      &.pencil,
      &.dustbin {
        width: 18px;
        height: 18px;
      }
    }
    &.single {
      width: 70px;
      height: 28px;
    }
  }
  .copy-icon {
    width: 21px;
    height: 21px;
    cursor: pointer;
    opacity: 0.5;
  }
}
.error-wrap {
  .icon-wrap {
    text-align: right;
    margin-bottom: 10px;
    .icon {
      cursor: pointer;
      width: 21px;
      height: 21px;
    }
  }
}
</style>
