<template>
  <view class="px-20rpx">
    <view class="bg-white">
      <view class="h-80rpx px-20rpx flex items-center text-bold text-32rpx">{{
        name
      }}</view>
      <view>
        <u-line></u-line>
      </view>
      <qiun-data-charts
        :loadingType="loadingType"
        :type="type"
        :opts="opts"
        :chartData="chartData"
      />
    </view>
  </view>
</template>
<script>
import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
import { http } from '@/api/index.js'
export default {
  name: 'BaseChat',
  props: {
    name: {
      type: [String],
    },
    baseId: {
      type: [String, Number],
    },
    cropId: {
      type: [String, Number],
    },
    type: {
      type: [String],
    },
  },
  components: { QiunDataCharts },
  data() {
    return {
      loadingType: 1,
      opts: {
        dataLabel: false, //显示数据
        padding: [20, 10, 0, 10],
        extra: {
          column: {
            type: 'group',
            width: 15,
          },
          area: {
            type: 'curve',
            opacity: 0.9,
            addLine: true,
            gradient: true,
          },
        },
      },
      chartData: {
        categories: [],
        series: [],
      },
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      http
        .get('/api/crop-yield-quarter-statics', {
          params: {
            crop_id: this.cropId,
            base_id: this.baseId,
          },
        })
        .then(({ data }) => {
          const resData = data.data
          const options = {
            categories: [],
            series: [],
          }
          for (const key in resData) {
            if (Object.prototype.hasOwnProperty.call(resData, key)) {
              const obj = resData[key]
              options.categories = Object.keys(obj?.list ?? [])
              options.series.push({
                name: obj.name,
                type: this.type === 'area' ? 'line' : '',
                data: Object.values(obj.list),
                //测试
                // data: Object.values(obj.list).map(
                //   (e, index) => index * Math.pow(0.9, index)
                // ),
              })
            }
          }
          this.chartData = options
        })
    },
  },
}
</script>
