<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
          @deselect="handleDeSelect"
          notFoundContent="请选择设备"
        />
        <div style="margin-top: 1.5vh"></div>
        <DeviceAttrCpns
          ref="deviceAttrRef"
          @change="handleChange"
          :value="deviceList"
          :orgId="organizationId || orgId"
          :deSelectValue="deSelectValue"
        />
      </template>
    </BasicForm>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, computed, unref, reactive, watch } 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';

  const emit = defineEmits(['success', 'register']);
  const deviceAttrRef: any = ref(null);
  const isUpdate = ref(true);
  const editId = ref('');
  const orgId = ref('');
  let deviceAttrData: any = ref([]);
  const selectOptions: any = ref([]);
  const selectDevice = ref([]);
  const deviceList = 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 deSelectValue = ref('');
  const handleDeSelect = ({ key }) => {
    //取消选中的key
    deSelectValue.value = key;
  };
  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 模拟的数据 待服务端返回
      deviceAttrData.value = [
        {
          device: '8943f0b0-f1f7-11ec-98ad-a9680487d1e0',
          attribute: 'CO2',
          name: '宝马默认设备',
        },
        {
          device: '8f5b4280-f29e-11ec-98ad-a9680487d1e0',
          attribute: 'co',
          name: '新增奥迪测试设备',
        },
        {
          device: '54e199d0-f1f7-11ec-98ad-a9680487d1e0',
          attribute: 'hot',
          name: '奥迪默认设备',
        },
        {
          device: '6d9043f0-f1f7-11ec-98ad-a9680487d1e0',
          attribute: 'wet',
          name: '奔驰默认设备',
        },
      ];
      deviceAttrRef.value?.echoDynamicInputFunc(deviceAttrData.value);
    } else {
      editId.value = '';
      orgId.value = '';
      selectDevice.value = [];
      selectOptions.value = [];
      deviceList.value = [];
    }
  });
  const getAttrDevice: any = ref([]);
  const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置'));
  const handleChange = (e) => (getAttrDevice.value = e);
  let postObj: any = reactive({});
  let queryCondition: any = reactive({});
  let executeContent: any = reactive({});
  const endTs: any = 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>