<template>
  <PageWrapper>
    <a-card>
      <BasicForm
        autoFocusFirstItem
        :labelWidth="0"
        :schemas="schemas"
        :rowProps="{ gutter: [16, 0] }"
        :showActionButtonGroup="false"
      />
      <div class="flex justify-between">
        <span class="text-xl">预警数据统计</span>
        <a-button @click="handleSetting">设置</a-button>
      </div>
      <div class="mt-20px flex">
        <EarlyWarningItem
          class="mr-16px last:mr-0"
          v-for="(item, index) in earlyWarningList"
          :key="index"
          :data="item"
        />
      </div>
      <div class="flex items-center">
        <div
          v-for="item in tagMenus"
          :key="item.value"
          class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer"
          :class="{ active: item.value == activeKey }"
          @click="onChangeTag(item)"
        >
          <img
            class="w-16px h-16px"
            :src="item.value == activeKey ? item.icon : item.icon1"
            alt=""
          />
          <div class="ml-3px">{{ item.lable }}</div>
        </div>
      </div>
      <div class="mt-20px">
        <LineCharts :loading="false" :title="currentActiveLable" />
      </div>
    </a-card>
    <FormDrawer @register="registerDrawer" @success="handleSuccess" />
  </PageWrapper>
</template>

<script lang="ts">
  import { PageWrapper } from '/@/components/Page';
  import { defineComponent, ref, computed } from 'vue';
  import { BasicForm, FormSchema } from '/@/components/Form/index';
  import { Card, Button } from 'ant-design-vue';
  import { ColEx } from '/@/components/Form/src/types';
  import EarlyWarningItem from './components/EarlyWarningItem.vue';
  import icon1 from '/@/assets/images/icon_1.png';
  import uicon1 from '/@/assets/images/uicon_1.png';
  import LineCharts from './components/LineCharts.vue';
  import FormDrawer from './components/FormDrawer.vue';
  import { useDrawer } from '/@/components/Drawer';
  const valueSelectA = ref<string[]>([]);

  interface EarlyWarningItem {
    icon: String;
    title: String;
    value: String;
  }

  const colProps: Partial<ColEx> = {
    xs: 24,
    sm: 12,
    md: 8,
    lg: 6,
    xl: 6,
    xxl: 4,
  };

  const schemas: FormSchema[] = [
    {
      field: 'field1',
      component: 'Select',
      label: '',
      colProps,
      componentProps: {
        placeholder: '基地',
        options: [
          {
            label: '选项2',
            value: '1',
            key: '1',
          },
        ],
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'field1',
      component: 'Select',
      label: '',
      colProps,
      componentProps: {
        placeholder: '检测点',
        options: [
          {
            label: '选项2',
            value: '1',
            key: '1',
          },
        ],
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'time',
      component: 'RangePicker',
      label: '',
      colProps,
      componentProps: {
        placeholder: ['开始日期', '结束日期'],
      },
    },
    {
      field: 'disclosure',
      component: 'RadioButtonGroup',
      label: '',
      colProps: colProps,
      componentProps: {
        options: [
          {
            label: '今天',
            value: '1',
          },
          {
            label: '近一周',
            value: '2',
          },
          {
            label: '近一个月',
            value: '3',
          },
        ],
      },
    },
  ];

  const earlyWarningList: EarlyWarningItem[] = [
    {
      icon: 'yujing1',
      title: 'Ⅰ级预警',
      value: '1',
    },
    {
      icon: 'yujing2',
      title: 'Ⅱ级预警',
      value: '1',
    },
    {
      icon: 'yujing3',
      title: 'Ⅲ级预警',
      value: '1',
    },
    {
      icon: 'yujing4',
      title: 'Ⅳ级预警',
      value: '100',
    },
  ];

  const tagMenus = [
    {
      lable: '温度',
      value: 0,
      icon: icon1,
      icon1: uicon1,
    },
    {
      lable: '电导率',
      value: 1,
      icon: icon1,
      icon1: uicon1,
    },
    {
      lable: '水分',
      value: 2,
      icon: icon1,
      icon1: uicon1,
    },
    {
      lable: '氮',
      value: 3,
      icon: icon1,
      icon1: uicon1,
    },
    {
      lable: '磷',
      value: 4,
      icon: icon1,
      icon1: uicon1,
    },
    {
      lable: '钾',
      value: 5,
      icon: icon1,
      icon1: uicon1,
    },
  ];

  export default defineComponent({
    components: {
      [Card.name]: Card,
      [Button.name]: Button,
      BasicForm,
      PageWrapper,
      EarlyWarningItem,
      LineCharts,
      FormDrawer,
    },

    setup() {
      const activeKey = ref(1);

      const [registerDrawer, { openDrawer }] = useDrawer();

      const currentActiveLable = computed(
        () => tagMenus.find((e) => e.value == activeKey.value)?.lable ?? '',
      );

      function onChangeTag(item) {
        activeKey.value = item.value;
      }

      function handleSetting() {
        openDrawer(true, {
          isUpdate: false,
        });
      }

      function handleSuccess() {
        // reload();
        console.log('=========');
      }

      return {
        activeKey,
        valueSelectA,
        schemas,
        earlyWarningList,
        tagMenus,
        currentActiveLable,
        registerDrawer,
        onChangeTag,
        handleSetting,
        handleSuccess,
      };
    },
  });
</script>

<style scoped lang="less">
  .active {
    @apply text-primary;
  }
</style>
