<template>
  <view class="px-20rpx">
    <view class="bg-white">
      <view class="h-80rpx px-20rpx flex items-center text-bold text-32rpx"
        >水质监测数据</view
      >
      <view>
        <u-line></u-line>
      </view>
      <view class="py-20rpx">
        <u-tabs
          :list="desList"
          bar-height="4"
          height="50"
          font-size="28"
          gutter="18"
          :current="current"
          @change="changeTab"
        ></u-tabs>
      </view>
      <view class="pb-20rpx">
        <qiun-data-charts
          :loadingType="loadingType"
          type="area"
          :opts="opts"
          :chartData="chartData"
        />
      </view>
    </view>
  </view>
</template>
<script>
import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
import { http } from '@/api/index.js'

const desList = [
    {
      key: 'turbidity',
      unit: 'NTU',
      name: '浊度',
    },
    {
      key: 'chlorine',
      unit: 'mg/L',
      name: '余氯',
    },
    {
      key: 'ph',
      unit: 'PH',
      name: 'PH值',
    },
    {
      key: 'temperature',
      unit: '℃',
      name: '温度',
    },
    {
      key: 'oxygen',
      unit: 'mg/L',
      name: '溶解氧',
    },
    {
      key: 'conductivity',
      unit: 'uS/cm',
      name: '电导率',
    },
  ]
export default {
  props: {
    baseId: {
      type: [String, Number],
    },
  },
  components: { QiunDataCharts },
  data() {
    return {
      desList,
      current: 0,
      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: [],
      },
    }
  },
  computed: {
    currentTab() {
      return this.desList[this.current]
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    changeTab(e) {
      this.current = e
      this.init()
    },
    async init() {
      try {
        const { data } = await http.get('/api/device-base-data-statics', {
          params: {
            base_id: this.baseId,
            device_type: 3,
            device_column: this.currentTab.key,
          },
        })
        const resData = data.data
        const arr = []
        const options = {
          categories: [],
          series: [],
        }
        for (const key in resData) {
          if (Object.prototype.hasOwnProperty.call(resData, key)) {
            options.categories = Object.keys(resData[key]).map((e) =>
              this.$u.date(e, 'hh:MM')
            )
            options.series.push({
              name: key,
              type: 'line',
              data: Object.values(resData[key]).map((e) => e ?? 0),
            })
          }
        }
        this.chartData = options
      } catch (error) {}
    },
  },
}
</script>
