<template>
  <BasicDrawer 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>
        <div v-for="(item, index) in deviceList" :key="index">
          <DeviceAttrCpns ref="deviceAttrRef" @change="handleChange" :value="item" :orgId="organizationId || orgId" />
        </div>
      </template>
    </BasicForm>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, computed, unref, reactive, watch, nextTick, 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';

type TDeviceList = {
  key?: string,
  value?: string,
  label?: string,
  attribute?: string,
  device?: string,
  name?: string
}
const emit = defineEmits(['success', 'register']);
const deviceAttrRef: any = ref(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([]);

watch(organizationId, async (newValue: string) => {
  if (!newValue) return;
  //获取设备
  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) => {
  deviceList.value = e;
};
const [registerForm, { validate, setFieldsValue, resetFields }] = 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)) {
    //编辑回显数据
    const editResData: any = await reportEditDetailPage(data.record.id)
    console.log(editResData.data)
    // //回显基础数据
    editId.value = editResData.data.id;
    await setFieldsValue(editResData.data);
    //回显嵌套数据
    setFieldsValue({
      agg: editResData.data.queryCondition?.agg,
      interval: editResData.data.queryCondition?.interval,
    });
    //回显设备
    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;
    //回显设备属性 TODO 模拟的数据 待服务端返回
    deviceList.value = editResData.data.executeAttributes
    nextTick(() => { });
  } else {
    editId.value = '';
    orgId.value = '';
    selectDevice.value = [];
    selectOptions.value = [];
    deviceList.value = [];
  }
});
const getAttrDevice: Ref<TDeviceList[]> = ref([]);
const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置'));
const handleChange = (e: any) => {
  getAttrDevice.value.push({
    device: e.value,
    attribute: e.attribute,
    name: e.device
  });
};
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 (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.limit,
    };
    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;
    postObj = {
      ...values,
      ...{ executeAttributes: 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>