<template>
  <BasicDrawer :maskClosable="false" @close="handleClose" destroyOnClose v-bind="$attrs" @register="registerDrawer"
    showFooter :title="getTitle" width="30%" @ok="handleSubmit">
    <BasicForm @register="registerForm">
      <template #devices>
        <Select placeholder="请选择设备" v-model:value="selectDevice" style="width: 100%" :options="selectOptions"
          @change="handleDeviceChange" mode="multiple" labelInValue allowClear notFoundContent="请选择设备" />
        <div style="margin-top: 1.5vh"></div>
        <DeviceAttrCpns ref="deviceAttrRef" @change="handleChange" :value="deviceList"
          :orgId="organizationId || orgId" />
      </template>
    </BasicForm>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, computed, unref, reactive, watch, Ref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form';
import { formSchema, organizationId } from './config.data';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { createOrEditReportManage, putReportConfigManage, reportEditDetailPage } from '/@/api/report/reportManager';
import { useMessage } from '/@/hooks/web/useMessage';
import moment from 'moment';
import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';
import { Select } from 'ant-design-vue';
import DeviceAttrCpns from './cpns/DeviceAttrCpns.vue';
import { SelectTypes } from 'ant-design-vue/es/select';
import { SchemaFiled } from './config.data';
import { QueryWay } from '../../device/localtion/cpns/TimePeriodForm/config';
import { AggregateDataEnum } from '../../device/localtion/cpns/TimePeriodForm/config';

type TDeviceList = {
  key?: string,
  value?: string,
  label?: string,
  attribute?: string,
  device?: string,
  name?: string
}
const emit = defineEmits(['success', 'register']);
const deviceAttrRef = ref<InstanceType<typeof DeviceAttrCpns> | null>(null)
const isUpdate = ref(true);
const editId = ref('');
const orgId = ref('');
const selectOptions: Ref<SelectTypes['options']> = ref([]);
const selectDevice = ref([]);
const deviceList: Ref<TDeviceList[]> = ref([]);
const editDeviceList: Ref<TDeviceList[]> = ref([]);
let editResData: any = reactive({})
const watchOrgId = ref('')
const editDeviceAttr: any = ref([])

watch(organizationId, async (newValue: string) => {
  if (!newValue) return;
  //获取设备
  watchOrgId.value = newValue
  const { items } = await screenLinkPageByDeptIdGetDevice({
    organizationId: newValue,
  });
  selectOptions.value = items.map((item) => {
    if (item.deviceType !== 'GATEWAY')
      return {
        label: item.name,
        value: item.tbDeviceId,
      };
  });
});
const handleDeviceChange = (e) => {
  console.log(e)
  deviceList.value = e;
};
const [registerForm, { validate, setFieldsValue, resetFields, updateSchema, getFieldsValue }] = useForm({
  labelWidth: 120,
  schemas: formSchema,
  showActionButtonGroup: false,
  fieldMapToTime: [[SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS]]],
});
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  await resetFields();
  setDrawerProps({ confirmLoading: false });
  isUpdate.value = !!data?.isUpdate;
  if (unref(isUpdate)) {
    //编辑回显数据
    editResData = await reportEditDetailPage(data.record.id)
    //回显基础数据
    editId.value = editResData.data.id;
    await setFieldsValue(editResData.data);
    //回显嵌套数据
    await setFieldsValue({
      agg: editResData.data.queryCondition?.agg,
      interval: editResData.data.queryCondition?.interval,
      limit1: editResData.data.queryCondition?.limit,
      orderBy: editResData.data.queryCondition?.orderBy,
      useStrictDataTypes: editResData.data.queryCondition?.useStrictDataTypes
    });
    //回显聚合条件
    const dataCompareOpions = [
      { label: '最小值', value: AggregateDataEnum.MIN },
      { label: '最大值', value: AggregateDataEnum.MAX },
      { label: '平均值', value: AggregateDataEnum.AVG },
      { label: '求和', value: AggregateDataEnum.SUM },
      { label: '空', value: AggregateDataEnum.NONE }
    ]
    const updateSchemaAgg = (options: {}) => {
      updateSchema({
        field: SchemaFiled.AGG,
        componentProps: {
          options,
        },
      });
    }
    if (editResData.data.dataType == 1) updateSchemaAgg(dataCompareOpions.slice(0, 4))
    else updateSchemaAgg(dataCompareOpions.slice(4, 5))
    //回显执行方式和查询周期
    const dataQueryOpions = [
      { label: '固定周期', value: QueryWay.LATEST },
      { label: '自定义周期', value: QueryWay.TIME_PERIOD },
    ];
    const updateSchemaQuery = (options: {}) => {
      updateSchema({
        field: SchemaFiled.WAY,
        componentProps: {
          options,
        },
      });
    }
    if (editResData.data.executeWay == 0) updateSchemaQuery(dataQueryOpions)
    else updateSchemaQuery(dataQueryOpions.slice(0, 1))
    //回显设备
    orgId.value = editResData.data.organizationId;
    const { items } = await screenLinkPageByDeptIdGetDevice({
      organizationId: editResData.data.organizationId,
    });
    selectOptions.value = items.map((item) => {
      if (item.deviceType !== 'GATEWAY')
        return {
          label: item.name,
          value: item.tbDeviceId,
        };
    });
    const deviceIds = editResData.data.executeAttributes.map(m => {
      return {
        label: m.name,
        key: m.device
      }
    })
    selectDevice.value = deviceIds;
    //回显设备属性
    editDeviceAttr.value = editResData.data.executeAttributes?.map(item => {
      return {
        label: item.name,
        value: item.device,
        attributes: item.attributes,
      }
    })
    deviceList.value = editDeviceAttr.value
    editDeviceList.value = editResData.data.executeAttributes
  } else {
    editId.value = '';
    orgId.value = '';
    selectDevice.value = [];
    selectOptions.value = [];
    deviceList.value = [];
    getAttrDevice.value = []
    editDeviceList.value = []
    editDeviceAttr.value = []
    updateSchema({
      field: SchemaFiled.AGG,
      componentProps: {
        options: [],
      },
    });
    //新增显示执行方式和查询周期
    const dataQueryOpions = [
      { label: '固定周期', value: QueryWay.LATEST },
      { label: '自定义周期', value: QueryWay.TIME_PERIOD },
    ];
    const updateSchemaQuery = (options: {}) => {
      updateSchema({
        field: SchemaFiled.WAY,
        componentProps: {
          options,
        },
      });
    }
    if (getFieldsValue().executeWay == 0) updateSchemaQuery(dataQueryOpions)
  }
});
const handleClose = () => {
  deviceList.value = [];
}
const getAttrDevice: Ref<TDeviceList[]> = ref([]);
const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置'));
const handleChange = (e: any) => {
  getAttrDevice.value = e
};
let postObj: any = reactive({});
let queryCondition: any = reactive({});
let executeContent: any = reactive({});
const startTs = ref(0)
const endTs = ref(0);
async function handleSubmit() {
  setDrawerProps({ confirmLoading: true });
  try {
    const { createMessage } = useMessage();
    const values = await validate();
    if (!values) return;
    if (!unref(isUpdate)) {
      if (getAttrDevice.value.length === 0) {
        return createMessage.error('请选择设备及其属性');
      }
    }
    if (values.executeWay == 0) {
      executeContent = null;
    } else {
      executeContent = values.cronTime
    }
    queryCondition = {
      agg: values.agg,
      interval: values.interval,
      limit: values.limit1,
    };
    if (values.way === QueryWay.LATEST) {
      startTs.value = moment().subtract(values.startTs, 'ms').valueOf()
      endTs.value = Date.now()
    } else {
      startTs.value = moment(values.startTs).valueOf()
      endTs.value = moment(values.endTs).valueOf()
    }
    delete values.devices;
    delete values.agg;
    delete values.interval;
    delete values.timeZone;
    delete values.timeWeek;
    delete values.cronTime;
    delete values.cronWeek;
    delete values.cronYear;
    delete values.limit1;
    postObj = {
      ...values,
      ...{ executeAttributes: getAttrDevice.value.length == 0 ? editDeviceList.value : getAttrDevice.value },
      ...{ queryCondition },
      ...{
        startTs: startTs.value
      },
      ...{
        endTs: endTs.value
      },
      ...{ executeContent },
      ...{ id: editId.value !== '' ? editId.value : '' },
    };
    let saveMessage = '添加成功';
    let updateMessage = '修改成功';
    editId.value !== ''
      ? await putReportConfigManage(postObj)
      : await createOrEditReportManage(postObj);

    closeDrawer();
    emit('success');
    createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
  } finally {
    setTimeout(() => {
      setDrawerProps({ confirmLoading: false });
    }, 300);
  }
}
</script>