<template>
  <view class="type-view">
    <view class="type-view-increase">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="16"
        viewBox="0 0 32 16"
        fill="none"
      >
        <rect x="1.5" y="4.5" width="29" height="7" fill="#3FD15F" stroke="white" />
      </svg>
      增加
    </view>
    <view class="type-view-lower">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="16"
        viewBox="0 0 32 16"
        fill="none"
      >
        <rect x="1.5" y="4.5" width="29" height="7" fill="#FF8074" stroke="white" />
      </svg>
      减少
    </view>
  </view>
  <view :id="htmlId" :style="{ width: '100%', height: `400rpx` }"></view>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { nextTick, watchEffect } from 'vue';
import type { AddLowerDataItem } from '@/components/echarts-add-lower/add-lower';

const props = withDefaults(
  defineProps<{
    htmlId: string;
    data: AddLowerDataItem[];
  }>(),
  {},
);
const initEcharts = async () => {
  const myChart = echarts.init(document.getElementById(props.htmlId));
  console.log('myChart', myChart);
  const option = {
    grid: {
      left: '40px',
      right: '20px',
      top: '20',
      bottom: '20',
    },
    legend: {
      data: ['增加', '减少'],
    },
    xAxis: {
      type: 'category',
      data: props.data.map(item => {
        return item.text;
      }),
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        type: 'bar',
        barWidth: '40',
        label: {
          show: true,
          position: 'top',
          valueAnimation: true,
        },
        data: props.data.map((item: AddLowerDataItem) => {
          return {
            value: item.value,
            itemStyle: {
              color: item.isAdd ? '#3FD15F' : '#FF8074',
            },
          };
        }),
      },
    ],
  };
  myChart && myChart.setOption(option);
};

watchEffect(() => {
  if (props.data && props.data.length > 0) {
    console.log('props.data', props.data);
    nextTick(() => {
      initEcharts();
    });
  }
});
</script>
<style scoped lang="scss">
.k-g-s-title {
  color: #333333;
  text-align: center;
  font-size: 32rpx;
  font-style: normal;
  font-weight: 500;
  line-height: 48rpx; /* 150% */
}

.type-view {
  display: flex;
  gap: 20rpx;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;

  svg {
    width: 32rpx;
    height: 16rpx;
  }
}
</style>
