<template>
  <div class="drag-info-main">
    <!-- <template v-if="!mobileInPc">
      <el-row style="justify-content: center">
        <Icon name="dv-drag-tips"
          ><dvDragTips class="svg-icon" style="width: 125px; height: 125px"
        /></Icon>
      </el-row>
      <el-row class="tips-info"> {{ tips }} </el-row>
    </template>
    <div v-else class="mobile-in-pc-tips">请从右侧添加可视化组件</div> -->
  </div>
</template>

<script lang="ts" setup>
// import dvDragTips from '@/assets/svg/dv-drag-tips.svg'
// import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
// import { storeToRefs } from 'pinia'
// import { useI18n } from '@/hooks/web/useI18n'
// const { t } = useI18n()

// const dvMainStore = dvMainStoreWithOut()
// const { dvInfo, mobileInPc } = storeToRefs(dvMainStore)

// const tips =
//   t('visualization.resource_create_tips') +
//   (dvInfo.value.type === 'dashboard'
//     ? t('work_branch.dashboard')
//     : t('work_branch.big_data_screen'))
</script>

<style lang="less" scoped>
.drag-info-main {
  position: absolute;
  left: calc(50% - 125px);
  top: calc(40% - 90px);
  width: 250px;
  height: 180px;

  .mobile-in-pc-tips {
    color: #646a73;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    text-align: center;
    margin-top: 40%;
  }
}

.tips-info {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  color: rgba(100, 106, 115, 1);
}
</style>
