<template>
  <div class="barpercent" style="padding-top: 64px">
    <div class="barpercent-title">{{ t('单位') }}：{{ config.unit }}</div>
    <div class="barpercent-list" v-if="apiData.length > 0">
      <div class="barpercent-item" v-for="(item, index) in apiData" :key="index">
        <template v-if="item">
          <div class="label">{{ item.name }}</div>
          <div class="percent-bar">
            <div class="active" :style="'width: ' + item.barWidth + '%;'"></div>
            <div class="num">{{ item.value }}/{{ item.target }}</div>
          </div>
        </template>
      </div>
    </div>
    <EmptyBox v-else />
  </div>
</template>

<script setup lang="ts">
  import { EmptyBox } from '/@/components/ModalPanel/index';
  import { inject, onMounted, ref, watch } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { refreshChart } from '../../../types/tool';
  import { cloneDeep } from 'lodash-es';
  const props = defineProps({
    config: { type: Object, default: () => {} },
    refreshkey: String,
  });
  const { t } = useI18n();
  const apiData = ref<any>([]);
  const widgetFormModel = inject('widgetFormModel', ref<any>({}));
  watch(
    () => [props.config, props.refreshkey],
    async () => {
      reloadData();
    },
    { deep: true },
  );
  onMounted(async () => {
    reloadData();
  });
  async function reloadData() {
    let newconfig = cloneDeep(props.config);
    await refreshChart(newconfig.apiConfig, newconfig, widgetFormModel.value);
    apiData.value = newconfig.apiData.map((ele) => {
      let barWidth = 0;
      if (ele[newconfig.labelKey] && ele[newconfig.valueKey] && ele[newconfig.targetKey]) {
        if (
          ele[newconfig.valueKey] &&
          ele[newconfig.valueKey] >= 0 &&
          ele[newconfig.targetKey] &&
          ele[newconfig.targetKey] >= 0
        ) {
          let num = Math.ceil((ele[newconfig.valueKey] / ele[newconfig.targetKey]) * 100);
          barWidth = num <= 100 ? num : 100;
        }
        return {
          name: ele[newconfig.labelKey],
          value: ele[newconfig.valueKey],
          target: ele[newconfig.targetKey],
          barWidth: barWidth,
        };
      }
    });
  }
</script>

<style lang="less" scoped>
  .barpercent {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .barpercent-title {
    color: #707070;
    font-size: 12px;
    padding-left: 12px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 12px;
  }

  .barpercent-list {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 24px 24px 0;
  }

  .barpercent-item {
    position: relative;
    width: 100%;
    height: 24px;
    padding-left: 100px;
  }

  .barpercent-item .label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    color: #707070;
    padding-right: 8px;
    text-align: right;
  }

  .barpercent-item .percent-bar {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: rgb(94 149 255 / 50%);
  }

  .barpercent-item .active {
    position: relative;
    height: 100%;
    width: 0;
    background: linear-gradient(270deg, #5e95ff, #695eff);
  }

  .barpercent-item:hover .percent-bar {
    background-color: rgb(255 196 96 / 50%);
  }

  .barpercent-item:hover .active {
    background: linear-gradient(270deg, #ffc45e, #ff9100);
  }

  .barpercent-item .num {
    position: absolute;
    top: 0;
    right: 8px;
    font-size: 12px;
    color: #fff;
    line-height: 24px;
  }
</style>
