<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"
              v-if="Number(field) === 0"
              @click="add"
              type="primary"
              >+新增触发器</Button
            >
            <!-- <Button
              style="margin-left: 20px; margin-top: -60px"
              v-if="Number(field) === 0"
              type="primary"
              @click="del(field)"
              >删除</Button
            > -->
            <Button
              style="margin-left: 5px; margin-top: 35px"
              v-if="field > 0"
              @click="add"
              type="primary"
              >+新增触发器</Button
            >
            <Button style="margin-left: 10px" v-if="field > 0" @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 },
    props: ['deviceInfo'],
    setup(props) {
      const getValueData: any = ref({});
      const getPushValueData: any = ref([]);
      // const newMapGetPushValueData: 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) {
        resetFields();
      }
      watch(
        () => props.deviceInfo,
        async (newV) => {
          const options = await screenLinkPageByDeptIdGetDevice({ organizationId: newV });
          options.items.forEach((v) => {
            return (v.value = v.id);
          });
          updateSchema({
            field: 'deviceId',
            componentProps: {
              options: options.items,
            },
          });
        }
      );
      //回显数据
      const setFieldsFormValue = (v) => {
        setFieldsValue(v);
      };
      // //去除字符串的数字
      // function trimNumber(str) {
      //   return str.replace(/\d+/g, '');
      // }
      // function unique(arr) {
      //   return Array.from(new Set(arr));
      // }
      function getAllFields(getV) {
        const values = getFieldsValue();
        getValueData.value = values;
        getV = getValueData.value;
        getPushValueData.value.push(getV);
        console.log(getPushValueData.value);
        return getV;
      }
      function funcResetFields() {
        resetFields();
      }
      const addString: any = ref('tiggerEvent1') || ref('tiggerEvent2') || ref('tiggerEvent3');

      const n = ref(1);
      function add() {
        const values = getFieldsValue();
        getPushValueData.value.push(values);
        console.log(getPushValueData.value);
        // newMapGetPushValueData.value = getPushValueData.value.map((m) => {
        //   const getKeys = Object.keys(m);
        //   getKeys.map((f) => {
        //     return unique(trimNumber(f));
        //   });
        // });
        // console.log(newMapGetPushValueData.value);
        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: `${n.value}no1`,
            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: `${n.value}no2`,
            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: `${n.value}no3`,
            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) {
        removeSchemaByFiled([
          `kong${field}`,
          `tiggerEvent${field}`,
          `deviceId${field}`,
          `${field}no1`,
          `touchWay${field}`,
          `${field}no2`,
          `attributeChoose${field}`,
          `compare${field}`,
          `value${field}`,
          `sceneLinkageId${field}`,
          `${field}no3`,
          `${field}`,
        ]);
        n.value--;
      }
      return { setFieldsFormValue, registerTrigger, add, del, getAllFields, funcResetFields };
    },
  });
</script>

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