<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 } 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';

type TDeviceList = {
  key?: string,
  value?: string,
  label?: string,
  attribute?: string,
  device?: 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: [['timeZone', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
});
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  await resetFields();
  setDrawerProps({ confirmLoading: false });
  isUpdate.value = !!data?.isUpdate;
  if (unref(isUpdate)) {
    //回显基础数据
    editId.value = data.record.id;
    await setFieldsValue(data.record);
    //回显嵌套数据
    setFieldsValue({
      agg: queryCondition?.agg,
      interval: queryCondition?.interval,
    });
    //回显设备
    orgId.value = data.record.organizationId;
    //获取该组织下的设备--排除网关设备
    const { items } = await screenLinkPageByDeptIdGetDevice({
      organizationId: data.record.organizationId,
    });
    selectOptions.value = items.map((item) => {
      if (item.deviceType !== 'GATEWAY')
        return {
          label: item.name,
          value: item.tbDeviceId,
        };
    });
    //TODO 模拟的数据 待服务端返回
    const deviceIds: any = [
      {
        label: '奥迪网关子设备',
        key: '8a4cc9a0-f201-11ec-98ad-a9680487d1e0',
      },
      {
        label: '宝马默认设备',
        key: '8943f0b0-f1f7-11ec-98ad-a9680487d1e0',
      },
      {
        label: '奔驰默认设备',
        key: '6d9043f0-f1f7-11ec-98ad-a9680487d1e0',
      },
      {
        label: '新增奥迪测试设备',
        key: '8f5b4280-f29e-11ec-98ad-a9680487d1e0',
      },
    ];
    selectDevice.value = deviceIds;
    //回显设备属性 TODO 模拟的数据 待服务端返回
    deviceList.value = [
      {
        value: '8a4cc9a0-f201-11ec-98ad-a9680487d1e0',
        attribute: 'CO2',
        label: '奥迪网关子设备',
      },
      {
        value: '8943f0b0-f1f7-11ec-98ad-a9680487d1e0',
        attribute: 'co',
        label: '宝马默认设备',
      },
      {
        value: '6d9043f0-f1f7-11ec-98ad-a9680487d1e0',
        attribute: 'hot',
        label: '奔驰默认设备',
      },
      {
        value: '8f5b4280-f29e-11ec-98ad-a9680487d1e0',
        attribute: 'wet',
        label: '新增奥迪测试设备',
      },
    ];
    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
  });
};
let postObj: any = reactive({});
let queryCondition: any = reactive({});
let executeContent: any = reactive({});
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 = {};
    }
    if (values.timeZone) {
      const getTime = JSON.stringify(values.timeZone);
      endTs.value = moment(JSON.parse(getTime)[0]).valueOf() || 1659424160000;
    }
    queryCondition = {
      agg: values.agg,
      interval: values.interval,
      limit: values.limit,
    };
    delete values.devices;
    delete values.agg;
    delete values.interval;
    delete values.timeZone;
    postObj = {
      ...values,
      ...{ executeAttributes: getAttrDevice.value },
      ...{ queryCondition },
      ...{ 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>