<template>
  <div>
    <CollapseContainer title="触发器1" 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, reactive, 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, { emit }) {
      const [
        registerTrigger,
        { resetFields, appendSchemaByField, removeSchemaByFiled, getFieldsValue, updateSchema },
      ] = useForm({
        labelWidth: 100,
        schemas: useTriggerDrawerSchema,
        actionColOptions: { span: 24 },
      });
      let formData = reactive({});
      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,
            },
          });
        }
      );

      // async function handleSubmit() {
      //   try {
      //     formData = getFieldsValue();
      //     console.log(formData);
      //     emit('get-triggerdata', formData);
      //     isJudge.value++;
      //   } catch (e) {
      //     console.log(e);
      //   }
      // }
      const n = ref(1);
      function add() {
        try {
          formData = getFieldsValue();
          console.log(formData);
          emit('get-triggerdata', formData);
          isJudge.value++;
        } catch (e) {
          console.log(e);
        }

        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, `tiggerEvent${n.value}`)) &&
              !isScene(Reflect.get(values, `tiggerEvent${n.value}`)) &&
              !isHand(Reflect.get(values, `tiggerEvent${n.value}`)),
            colProps: {
              span: 12,
            },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `${n.value}no1`,
            component: 'Input',
            label: '',
            componentProps: {
              placeholder: '请输入Cron表达式',
            },
            colProps: {
              span: 12,
            },
            ifShow: ({ values }) => isTime(Reflect.get(values, `tiggerEvent${n.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, `tiggerEvent${n.value}`)) &&
              !isScene(Reflect.get(values, `tiggerEvent${n.value}`)) &&
              !isHand(Reflect.get(values, `tiggerEvent${n.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, `tiggerEvent${n.value}`)) &&
              !isScene(Reflect.get(values, `tiggerEvent${n.value}`)) &&
              !isHand(Reflect.get(values, `tiggerEvent${n.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, `tiggerEvent${n.value}`)) &&
              !isScene(Reflect.get(values, `tiggerEvent${n.value}`)) &&
              !isHand(Reflect.get(values, `tiggerEvent${n.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, `tiggerEvent${n.value}`)) &&
              !isScene(Reflect.get(values, `tiggerEvent${n.value}`)) &&
              !isHand(Reflect.get(values, `tiggerEvent${n.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, `tiggerEvent${n.value}`)) &&
              !isScene(Reflect.get(values, `tiggerEvent${n.value}`)) &&
              !isHand(Reflect.get(values, `tiggerEvent${n.value}`)),
            colProps: {
              span: 12,
            },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `sceneLinkageId${n.value}`,
            label: '',
            component: 'Select',
            colProps: {
              span: 12,
            },
            ifShow: ({ values }) => isScene(Reflect.get(values, `tiggerEvent${n.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, `tiggerEvent${n.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 { registerTrigger, add, del };
    },
  });
</script>

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