<template>
  <div class="chart-show-box">
    <div class="chart-name">
      <div class="title">{{ title }}</div>
    </div>
    <div class="chart-header">
      <div class="chart-filter">
        <div
          v-for="(item, index) in filterConfig"
          :key="index"
          class="filter-item"
        >
          <div>
            <a-radio-group v-model:value="dateType" button-style="solid">
              <a-radio-button value="day">日</a-radio-button>
              <a-radio-button value="week">周</a-radio-button>
              <a-radio-button value="month">月</a-radio-button>
            </a-radio-group>
            <a-range-picker
              v-if="item.type === 'time'"
              class="date-item"
              v-model:value="filterData[item.name]"
              :picker="rangePicker"
              @change="toFilt"
            />
          </div>
        </div>
      </div>
      <a-radio-group v-model:value="chartType">
        <a-radio-button value="line">折线图</a-radio-button>
        <a-radio-button value="bar">柱状图</a-radio-button>
      </a-radio-group>
    </div>
    <div class="chart-wrap">
      <Column v-if="chartType === 'bar'" :config="currentChart" />
      <Line v-if="chartType === 'line'" :config="currentChart" />
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import Line from "@/plugins/antv-g2plot/line.vue";
import Column from "@/plugins/antv-g2plot/column.vue";
import { cloneDeep } from "lodash-es";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  chartCfg: {
    type: Object,
    default: () => ({}),
  },
  filterConfig: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(["toFilt"]);

const chartType = ref("line");
const dateType = ref("day");
const filterData = ref({});

const rangePicker = computed(() => {
  switch(dateType.value) {
    case 'week':
      return 'week';
    case 'month':
      return 'month';
    default:
      return 'date';
  }
});

const currentChart = computed(() => {
  return props.chartCfg[chartType.value];
})

const toFilt = () => {
  const cloneFilter = cloneDeep(props.filterConfig);
  const filter = cloneFilter
    .filter((item) => {
      return filterData.value[item.name] !== undefined && filterData.value[item.name] !== null;
    })
    .map((item) => {
      return item.type === 'time' ? {
        name: item.name,
        type: item.type,
        start_time: filterData.value[item.name][0].format('YYYY-MM-DD'),
        end_time: filterData.value[item.name][1].format('YYYY-MM-DD'),
        date_type: dateType.value,
      } : {
        name: item.name,
        type: item.type,
        value: filterData.value[item.name],
      }
    })
  emit('toFilt', {
    filter,
  });
};
</script>

<style lang="less" scoped>
.chart-wrap {
  padding: 20px;
}

.chart-name {
  margin-bottom: 8px;
  .title {
    font-size: 18px;
    font-weight: bold;
  }
}

.chart-header {
  display: flex;
  justify-content: space-between;
}

.date-item {
  margin-left: 10px;
}
</style>
