<template>
  <CollapseContainer style="background-color: #eeeeee" :title="`执行条件 ${conditionIndex + 1}`">
    <template #action>
      <Tooltip title="移除">
        <Icon
          icon="fluent:delete-off-20-regular"
          size="20"
          class="mr-2 cursor-pointer"
          @click="handleDelete(conditionIndex)"
        />
      </Tooltip>
    </template>
    <BasicForm @register="registerCondition" />
  </CollapseContainer>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Tooltip } from 'ant-design-vue';
  import { useConditionDrawerSchema } from '../config';
  import { screenLinkPageByDeviceIdGetAttribut } from '/@/api/ruleengine/ruleengineApi';
  import { Icon } from '/@/components/Icon';

  export default defineComponent({
    components: { CollapseContainer, BasicForm, Tooltip, Icon },
    props: {
      conditionIndex: {
        type: Number,
        required: true,
      },
    },
    emits: ['deleteCondition'],
    setup(props, { emit }) {
      const [registerCondition, { getFieldsValue, updateSchema, resetFields, setFieldsValue }] =
        useForm({
          schemas: useConditionDrawerSchema,
          showActionButtonGroup: false,
        });
      const getFieldsValueFunc = () => getFieldsValue();
      const resetFieldsValueFunc = () => resetFields();
      const updateFieldDeviceId = (deviceList: any[]) => {
        updateSchema({
          field: 'entityId',
          componentProps: {
            options: deviceList,
            onChange(e) {
              if (e) {
                updateFieldAttributeFunc(e);
              }
            },
          },
        });
      };
      const updateFieldAttributeFunc = async (e) => {
        const data1 = await screenLinkPageByDeviceIdGetAttribut('DEVICE', e);
        const data = data1.map((m) => {
          return {
            label: m,
            value: m,
          };
        });
        updateSchema({
          field: 'type',
          componentProps: {
            placeholder: '请选择属性',
            options: data,
            onChange(e) {
              if (e) {
                updateSchema([
                  {
                    field: 'operation',
                    ifShow: true,
                  },
                  {
                    field: 'value',
                    ifShow: true,
                  },
                ]);
              } else {
                updateSchema([
                  {
                    field: 'operation',
                    ifShow: false,
                  },
                  {
                    field: 'value',
                    ifShow: false,
                  },
                ]);
              }
            },
          },
        });
      };
      const setFieldsFormValueFun = (fieldsValue) => {
        setFieldsValue(fieldsValue);
      };
      const editSelectDevice = () => {
        if (props.bindConditionEntryIdFather !== 1) {
          setTimeout(() => {
            updateSchema({
              field: 'entityId',
              componentProps: {
                options: props.bindConditionEntryIdFather,
              },
            });
          }, 100);
        }
      };

      const handleDelete = (conditionIndex) => {
        emit('deleteCondition', conditionIndex);
      };
      return {
        updateFieldDeviceId,
        editSelectDevice,
        getFieldsValueFunc,
        registerCondition,
        resetFieldsValueFunc,
        handleDelete,

        setFieldsFormValueFun,
      };
    },
  });
</script>