<template>
  <view>
    <qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
  </view>
</template>
<script setup>
import { ref, watch, reactive } from 'vue'

const props = defineProps({
  data: Array,
})

const opts = {
  color: ['#ee2c37'],
  dataLabel: false,
  dataPointShape: true,
  enableScroll: false,
  legend: {
    show: false,
  },

  xAxis: {
    boundaryGap: 'justify',
    format: 'ssss',
  },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
  },
  extra: {
    area: {
      type: 'curve',
      opacity: 0.2,
      addLine: true,
      width: 2,
      gradient: true,
      activeType: 'hollow',
    },
    tooltip: {
      legendShow: false,
    },
  },
}

const chartData = reactive({})
watch(
  () => props.data,
  (e) => {
    const obj = {
      categories: e.map((el) => el.key),
      series: [
        {
          name: '金额',
          data: e.map((el) => el.value),
        },
      ],
    }
    Object.assign(chartData, JSON.parse(JSON.stringify(obj)))


    // chartData = {
    //   categories: e.map((el) => el.key),
    //   series: [
    //     {
    //       name: '金额',
    //       data: e.map((el) => el.value),
    //     },
    //   ],
    // }
    console.log(e)
    // chartData.categories= ['03月29日', '03月30日', '03月31日', '04月01日', '04月02日', '04月03日', '04月04日', '04月05日', '04月06日', '04月07日', '04月08日', '04月09日', '04月10日', '04月11日', '04月12日', '04月13日', '04月14日', '04月15日', '04月16日', '04月17日', '04月18日', '04月19日', '04月20日', '04月21日', '04月22日', '04月23日', '04月24日', '04月25日', '04月26日', '04月27日']
    // chartData.categories = e.map((el) => el.key)
    // console.log(e.map((el) => el.value));
    // chartData.series[0].data = e.map((el) => el.value)
    // chartData.series[0].data = ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '2', '0', '0', '0', '0', '0', '0', '0', '1', '11', '112', '1', '0', '100', '20040']
  },
  {
    immediate: true,
    deep: true,
  }
)
</script>
