/* eslint-disable vue/require-prop-types */
<template>
  <div>
    <CollapseContainer title="触发器" style="background-color: #eeeeee">
      <div style="position: relative">
        <BasicForm
          :labelWidth="100"
          :showResetButton="false"
          :showSubmitButton="false"
          :emptySpan="10"
          @register="registerTrigger"
        >
          <template #add="{ field }">
            <Button
              style="margin-left: -99px; margin-top: 0px; display: inline-block"
              :style="addHideButton > 1 ? 'display:none' : 'display:inline-block'"
              v-if="Number(field) === 0"
              @click="add"
              type="primary"
              >+新增触发器</Button
            >
            <Button
              v-if="Number(field) > 0"
              style="margin-left: 5px; margin-top: 35px"
              @click="add"
              type="primary"
              >+新增触发器</Button
            >
            <Button
              v-if="Number(field) > 0"
              style="margin-left: 10px"
              @click="del(field)"
              type="primary"
              >删除</Button
            >
          </template>
        </BasicForm>
      </div>
    </CollapseContainer>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Input } from 'ant-design-vue';
  import { Button } from '/@/components/Button';
  import {
    useTriggerDrawerSchema,
    isTime,
    isUpAndDown,
    isWenDu,
    isScene,
    isHand,
  } from '../config.d';
  import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';

  export default defineComponent({
    components: { CollapseContainer, BasicForm, [Input.name]: Input, Button },
    // eslint-disable-next-line vue/require-prop-types
    props: ['deviceInfo'],
    emits: ['eGetAddPushValueData'],
    setup(props, { emit }) {
      const getPushValueData: any = ref([]);
      const addHideButton = ref(1);
      const addHideButtonTemp: any = ref(null);
      const getAddPushValueData: any = ref([]);
      const [
        registerTrigger,
        {
          setFieldsValue,
          resetFields,
          appendSchemaByField,
          removeSchemaByFiled,
          getFieldsValue,
          updateSchema,
        },
      ] = useForm({
        labelWidth: 100,
        schemas: useTriggerDrawerSchema,
        actionColOptions: { span: 24 },
      });
      let isJudge = ref(1);
      if (isJudge.value == 1) {
        setTimeout(() => {
          resetFields();
        }, 1000);
      }
      watch(
        () => props.deviceInfo,
        async (newV) => {
          const options = await screenLinkPageByDeptIdGetDevice({ organizationId: newV });
          options.items.forEach((v) => {
            return (v.value = v.id), (v.label = v.name);
          });
          updateSchema({
            field: 'deviceId',
            componentProps: {
              options: options.items,
            },
          });
        }
      );
      //回显数据
      const setFieldsFormValue = (v) => {
        setFieldsValue(v);
      };
      //新增清空设备选择
      const clearSelectDevice = () => {
        updateSchema({
          field: 'deviceId',
          componentProps: {
            options: [],
          },
        });
      };
      const editSelectDevice = (v) => {
        updateSchema({
          field: 'deviceId',
          componentProps: {
            options: v,
          },
        });
      };
      const clearGetPushValueDataEmpty = () => {
        getPushValueData.value.length = 0;
      };

      const getAllFields = (getV: any) => {
        getV = {
          data: getFieldsValue(),
          count: 1,
        };
        return getV;
      };
      async function funcResetFields() {
        await resetFields();
      }
      const addString: any = ref('tiggerEvent1') || ref('tiggerEvent2') || ref('tiggerEvent3');

      const n = ref(1);
      const clearAddTriggerStatusFunc = () => {
        // addHideButton.value = 1;
      };
      const addClearGetAddPushValueDataArrayIsEmpty = () => {
        getAddPushValueData.value = [];
      };
      function add() {
        const pushValue = getFieldsValue();
        getAddPushValueData.value.push(pushValue);
        emit('eGetAddPushValueData', {
          data: getAddPushValueData.value,
          count: 2,
        });
        addHideButton.value++;
        addHideButtonTemp.value = addHideButton.value;
        addHideButtonTemp.value -= 2;
        if (addHideButton.value == 3) {
          setTimeout(() => {
            let getDom1 = document.getElementById('1') as HTMLElement;
            getDom1.style.display = 'none';
          }, 500);
        }
        if (addHideButton.value == 4) {
          setTimeout(() => {
            let getDom2 = document.getElementById('2') as HTMLElement;
            getDom2.style.display = 'none';
            let getDom41 = document.getElementById('1') as HTMLElement;
            getDom41.style.display = 'none';
          }, 500);
        }
        if (addHideButton.value == 5) {
          setTimeout(() => {
            let getDom3 = document.getElementById('3') as HTMLElement;
            getDom3.style.display = 'none';
            let getDom51 = document.getElementById('1') as HTMLElement;
            getDom51.style.display = 'none';
            let getDom52 = document.getElementById('2') as HTMLElement;
            getDom52.style.display = 'none';
          }, 500);
        }
        if (addHideButton.value == 6) {
          setTimeout(() => {
            let getDom4 = document.getElementById('4') as HTMLElement;
            getDom4.style.display = 'none';
            let getDom61 = document.getElementById('1') as HTMLElement;
            getDom61.style.display = 'none';
            let getDom62 = document.getElementById('2') as HTMLElement;
            getDom62.style.display = 'none';
            let getDom63 = document.getElementById('3') as HTMLElement;
            getDom63.style.display = 'none';
          }, 500);
        }
        if (addHideButton.value == 7) {
          setTimeout(() => {
            let getDom7 = document.getElementById('5') as HTMLElement;
            getDom7.style.display = 'none';
            let getDom71 = document.getElementById('1') as HTMLElement;
            getDom71.style.display = 'none';
            let getDom72 = document.getElementById('2') as HTMLElement;
            getDom72.style.display = 'none';
            let getDom73 = document.getElementById('3') as HTMLElement;
            getDom73.style.display = 'none';
            let getDom74 = document.getElementById('4') as HTMLElement;
            getDom74.style.display = 'none';
          }, 500);
        }
        if (addHideButton.value == 8) {
          setTimeout(() => {
            let getDom8 = document.getElementById('6') as HTMLElement;
            getDom8.style.display = 'none';
            let getDom81 = document.getElementById('1') as HTMLElement;
            getDom81.style.display = 'none';
            let getDom82 = document.getElementById('2') as HTMLElement;
            getDom82.style.display = 'none';
            let getDom83 = document.getElementById('3') as HTMLElement;
            getDom83.style.display = 'none';
            let getDom84 = document.getElementById('4') as HTMLElement;
            getDom84.style.display = 'none';
            let getDom85 = document.getElementById('5') as HTMLElement;
            getDom85.style.display = 'none';
          }, 500);
        }

        appendSchemaByField(
          {
            field: `kong${n.value}`,
            label: `触发器${n.value + 1 + `...........`}`,
            component: 'Slider',
            colProps: { span: 24 },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `tiggerEvent${n.value}`,
            label: '',
            component: 'Select',
            componentProps: {
              placeholder: '设备触发',
              options: [
                { label: '设备触发', value: 'DEVICE_ACT' },
                { label: '定时触发', value: 'TIME_ACT' },
                { label: '场景触发', value: 'SCENE_ACT' },
                { label: '手动触发', value: 'HAND_ACT' },
              ],
            },
            colProps: { span: 12 },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `deviceId${n.value}`,
            label: '',
            component: 'Select',
            componentProps: {
              placeholder: '请选择设备',
            },
            ifShow: ({ values }) =>
              !isTime(Reflect.get(values, addString.value)) &&
              !isScene(Reflect.get(values, addString.value)) &&
              !isHand(Reflect.get(values, addString.value)),
            colProps: {
              span: 12,
            },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `no1${n.value}`,
            component: 'Input',
            label: '',
            componentProps: {
              placeholder: '请输入Cron表达式',
            },
            colProps: {
              span: 12,
            },
            ifShow: ({ values }) => isTime(Reflect.get(values, addString.value)),
          },
          ''
        );
        appendSchemaByField(
          {
            field: `touchWay${n.value}`,
            label: '',
            component: 'Select',
            componentProps: {
              placeholder: '属性触发',
              options: [
                { label: '属性触发', value: 'ATTRIBUTE_ACT' },
                { label: '上下线触发', value: 'UP_DOWN_ACT' },
              ],
            },
            ifShow: ({ values }) =>
              !isTime(Reflect.get(values, addString.value)) &&
              !isScene(Reflect.get(values, addString.value)) &&
              !isHand(Reflect.get(values, addString.value)),
            colProps: { span: 12 },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `no2${n.value}`,
            label: '',
            component: 'Select',
            componentProps: {
              placeholder: '请选择上下线',
              options: [
                { label: '上下线', value: '1' },
                { label: '上线', value: '2' },
                { label: '下线', value: '3' },
              ],
            },
            colProps: { span: 12 },
            ifShow: ({ values }) =>
              isUpAndDown(Reflect.get(values, `touchWay${n.value}`)) &&
              !isTime(Reflect.get(values, addString.value)) &&
              !isScene(Reflect.get(values, addString.value)) &&
              !isHand(Reflect.get(values, addString.value)),
          },
          ''
        );
        appendSchemaByField(
          {
            field: `attributeChoose${n.value}`,
            label: '',
            component: 'Select',
            componentProps: {
              placeholder: '全部属性',
              options: [
                { label: '全部属性', value: 'All_ATTR' },
                { label: 'wendu', value: 'WENDU' },
              ],
            },
            colProps: { span: 12 },
            ifShow: ({ values }) =>
              !isTime(Reflect.get(values, addString.value)) &&
              !isScene(Reflect.get(values, addString.value)) &&
              !isHand(Reflect.get(values, addString.value)) &&
              !isUpAndDown(Reflect.get(values, `touchWay${n.value}`)),
          },
          ''
        );
        appendSchemaByField(
          {
            field: `compare${n.value}`,
            label: '',
            component: 'Select',
            componentProps: {
              placeholder: '',
              options: [
                { label: '=', value: '0' },
                { label: '<', value: '1' },
                { label: '>', value: '2' },
                { label: '<=', value: '3' },
                { label: '>=', value: '4' },
              ],
            },
            ifShow: ({ values }) =>
              isWenDu(Reflect.get(values, 'attributeChoose')) &&
              !isUpAndDown(Reflect.get(values, `touchWay${n.value}`)) &&
              !isTime(Reflect.get(values, addString.value)) &&
              !isScene(Reflect.get(values, addString.value)) &&
              !isHand(Reflect.get(values, addString.value)),
            colProps: { span: 12 },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `value${n.value}`,
            component: 'Input',
            label: '',
            componentProps: {
              placeholder: '请输入比较值',
            },
            ifShow: ({ values }) =>
              isWenDu(Reflect.get(values, 'attributeChoose')) &&
              !isUpAndDown(Reflect.get(values, `touchWay${n.value}`)) &&
              !isTime(Reflect.get(values, addString.value)) &&
              !isScene(Reflect.get(values, addString.value)) &&
              !isHand(Reflect.get(values, addString.value)),
            colProps: {
              span: 12,
            },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `sceneLinkageId${n.value}`,
            label: '',
            component: 'Select',
            colProps: {
              span: 12,
            },
            ifShow: ({ values }) => isScene(Reflect.get(values, addString.value)),
            componentProps: {
              placeholder: '请输入场景触发器',
              options: [
                { label: '场景触发器1', value: '1' },
                { label: '场景触发器2', value: '2' },
                { label: '场景触发器3', value: '3' },
              ],
            },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `no3${n.value}`,
            label: '',
            component: 'ApiSelect',
            colProps: {
              span: 12,
            },
            componentProps: {
              placeholder: '暂不实现',
            },
            ifShow: ({ values }) => isHand(Reflect.get(values, addString.value)),
          },
          ''
        );
        appendSchemaByField(
          {
            field: `${n.value}`,
            component: 'Input',
            label: '',
            colProps: {
              span: 12,
            },
            slot: 'add',
          },
          ''
        );
        n.value++;
      }

      function del(field) {
        addHideButton.value--;
        if (addHideButton.value == 2) {
          setTimeout(() => {
            let getDom1 = document.getElementById('1') as HTMLElement;
            getDom1.style.display = 'flex';
          }, 500);
        }
        if (addHideButton.value == 3) {
          setTimeout(() => {
            let getDom2 = document.getElementById('2') as HTMLElement;
            getDom2.style.display = 'flex';
            let getDom21 = document.getElementById('1') as HTMLElement;
            getDom21.style.display = 'none';
          }, 500);
        }
        if (addHideButton.value == 4) {
          setTimeout(() => {
            let getDom3 = document.getElementById('3') as HTMLElement;
            getDom3.style.display = 'flex';
            let getDom31 = document.getElementById('1') as HTMLElement;
            getDom31.style.display = 'none';
            let getDom32 = document.getElementById('2') as HTMLElement;
            getDom32.style.display = 'none';
          }, 500);
        }
        if (addHideButton.value == 5) {
          setTimeout(() => {
            let getDom4 = document.getElementById('4') as HTMLElement;
            getDom4.style.display = 'flex';
            let getDom41 = document.getElementById('1') as HTMLElement;
            getDom41.style.display = 'none';
            let getDom42 = document.getElementById('2') as HTMLElement;
            getDom42.style.display = 'none';
            let getDom43 = document.getElementById('3') as HTMLElement;
            getDom43.style.display = 'none';
          }, 500);
        }
        if (addHideButton.value == 6) {
          setTimeout(() => {
            let getDom5 = document.getElementById('5') as HTMLElement;
            getDom5.style.display = 'flex';
            let getDom51 = document.getElementById('1') as HTMLElement;
            getDom51.style.display = 'none';
            let getDom52 = document.getElementById('2') as HTMLElement;
            getDom52.style.display = 'none';
            let getDom53 = document.getElementById('3') as HTMLElement;
            getDom53.style.display = 'none';
            let getDom54 = document.getElementById('4') as HTMLElement;
            getDom54.style.display = 'none';
          }, 500);
        }
        if (addHideButton.value == 7) {
          setTimeout(() => {
            let getDom7 = document.getElementById('6') as HTMLElement;
            getDom7.style.display = 'flex';
            let getDom71 = document.getElementById('1') as HTMLElement;
            getDom71.style.display = 'none';
            let getDom72 = document.getElementById('2') as HTMLElement;
            getDom72.style.display = 'none';
            let getDom73 = document.getElementById('3') as HTMLElement;
            getDom73.style.display = 'none';
            let getDom74 = document.getElementById('4') as HTMLElement;
            getDom74.style.display = 'none';
            let getDom75 = document.getElementById('5') as HTMLElement;
            getDom75.style.display = 'none';
          }, 500);
        }
        if (addHideButton.value == 8) {
          setTimeout(() => {
            let getDom8 = document.getElementById('7') as HTMLElement;
            getDom8.style.display = 'flex';
            let getDom81 = document.getElementById('1') as HTMLElement;
            getDom81.style.display = 'none';
            let getDom82 = document.getElementById('2') as HTMLElement;
            getDom82.style.display = 'none';
            let getDom83 = document.getElementById('3') as HTMLElement;
            getDom83.style.display = 'none';
            let getDom84 = document.getElementById('4') as HTMLElement;
            getDom84.style.display = 'none';
            let getDom85 = document.getElementById('5') as HTMLElement;
            getDom85.style.display = 'none';
            let getDom86 = document.getElementById('6') as HTMLElement;
            getDom86.style.display = 'none';
          }, 500);
        }
        removeSchemaByFiled([
          `kong${field}`,
          `tiggerEvent${field}`,
          `deviceId${field}`,
          `no1${field}`,
          `touchWay${field}`,
          `no2${field}`,
          `attributeChoose${field}`,
          `compare${field}`,
          `value${field}`,
          `sceneLinkageId${field}`,
          `no3${field}`,
          `${field}`,
        ]);
        n.value--;
      }
      return {
        addClearGetAddPushValueDataArrayIsEmpty,
        clearAddTriggerStatusFunc,
        addHideButtonTemp,
        addHideButton,
        editSelectDevice,
        clearSelectDevice,
        clearGetPushValueDataEmpty,
        setFieldsFormValue,
        registerTrigger,
        add,
        del,
        getAllFields,
        funcResetFields,
      };
    },
  });
</script>

<style>
  .ant-slider-handle {
    display: none !important;
  }
</style>