<template>
  <d-modal
    title="贡献者分布"
    v-model="visible"
    class="file-search-modal"
    :style="{ width: '800px' }"
    @close="handleClose"
  >
    <Card simple class="jyh-card mb-4" style="box-shadow: none;padding: 0">
      <d-chart :option="optionOrgChart" style="width: 100%; height: 400px"></d-chart>
      <p class="text-center mt-translate-y">组织/公司分布</p>
    </Card>
    <template #footer>
      <d-modal-footer style="text-align: center;">
        <d-button variant="solid" color="primary"  @click="handleClose">确认</d-button>
        <d-button @click="handleClose">取消</d-button>
      </d-modal-footer>
    </template>
  </d-modal>
</template>

<script setup lang="ts">
import { ref, defineExpose, reactive } from 'vue';
import { DChart } from 'vue-devui/echarts';

const optionOrgChart = reactive({
  tooltip: {
    show: true,
    trigger: 'item'
  },
  xAxis: {
    type: 'category',
    data: ['公司1', '公司2', '公司3', '公司4', '公司5', '公司6', '公司7', '公司8', '公司9', '公司10']
  },
  yAxis: {
    // 给y轴添加单位后缀
    axisLabel: {
      formatter: '{value}%'
    },
    name: '单位',
    type: 'value'
  },
  series: [
    {
      data: [12, 14.8, 23.6, 18.6, 17.3, 13.1, 16, 11.8, 13.9, 16.4],
      type: 'bar',
      barWidth: '40%',
      // 给label添加单位后缀
      label: {
        show: true,
        position: 'top',
        formatter: '{c}%'
      },
      itemStyle: {
        color: '#2CB8C9',
        borderRadius: [5, 5, 0, 0]
      }
    }
  ]
});

// 控制模态框显示/隐藏
const visible = ref(false);

// 打开模态框
const openModal = () => {
  visible.value = true;
};

// 关闭模态框
const handleClose = () => {
  visible.value = false;
};

// 暴露方法，供父组件调用
defineExpose({
  openModal,
});
</script>

<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';

</style>
