<template>
  <CollapseContainer class="prefixRedDot" title="执行动作" style="background-color: #eeeeee">
    <div style="position: relative">
      <BasicForm
        :labelWidth="100"
        :showResetButton="false"
        :showSubmitButton="false"
        :emptySpan="10"
        @register="registerAction"
      />
    </div>
  </CollapseContainer>
</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 { useActionDrawerSchema } from '../config';
  import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';

  export default defineComponent({
    components: { CollapseContainer, BasicForm, [Input.name]: Input },
    props: ['deviceInfo2'],

    setup(props) {
      const fieldValue: any = ref({});
      const [registerAction, { getFieldsValue, resetFields, updateSchema }] = useForm({
        labelWidth: 100,
        schemas: useActionDrawerSchema,
        actionColOptions: { span: 24 },
      });
      const getFieldsValueFunc = () => {
        fieldValue.value = getFieldsValue();
        return fieldValue.value;
      };
      const resetFieldsValueFunc = () => {
        resetFields();
      };
      watch(
        () => props.deviceInfo2,
        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 clearSelectDevice = () => {
        updateSchema({
          field: 'deviceId',
          componentProps: {
            options: [],
          },
        });
      };
      const editSelectDevice = (v) => {
        updateSchema({
          field: 'deviceId',
          componentProps: {
            options: v,
          },
        });
      };
      return {
        clearSelectDevice,
        editSelectDevice,
        resetFieldsValueFunc,
        getFieldsValueFunc,
        registerAction,
      };
    },
  });
</script>

<style lang="less">
  .prefixRedDot:before {
    content: '* ';
    color: red;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: 33px;
    left: 5px;
  }
</style>