<template>
  <CollapseContainer class="prefixRedDot" title="执行动作" style="background-color: #eeeeee">
    <div style="position: relative">
      <BasicForm
        :labelWidth="100"
        :showResetButton="false"
        :showSubmitButton="false"
        :emptySpan="10"
        @register="registerAction"
      >
        <template #add="{ field }">
          <Button
            style="margin-left: -99px; margin-top: 5px; display: inline-block"
            v-if="Number(field) === 0"
            @click="add"
            type="primary"
            >+新增执行动作</Button
          >
          <br />
          <Button
            style="margin-left: -98px; margin-top: -5px"
            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>
</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 { useActionDrawerSchema, isMsg, isScene } from '../config.d';
  import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';

  export default defineComponent({
    components: { CollapseContainer, BasicForm, [Input.name]: Input, Button },
    props: ['deviceInfo2'],
    setup(props) {
      const getValueData: any = ref({});
      const [
        registerAction,
        {
          setFieldsValue,
          resetFields,
          updateSchema,
          appendSchemaByField,
          getFieldsValue,
          removeSchemaByFiled,
        },
      ] = useForm({
        labelWidth: 100,
        schemas: useActionDrawerSchema,
        actionColOptions: { span: 24 },
      });
      let isJudge = ref(1);
      if (isJudge.value == 1) {
        resetFields();
      }
      watch(
        () => props.deviceInfo2,
        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 getAllFields(getV) {
        const values = getFieldsValue();
        getValueData.value = values;
        getV = getValueData.value;
        return getV;
      }
      function funcResetFields() {
        resetFields();
      }
      const n = ref(1);
      function add() {
        appendSchemaByField(
          {
            field: `kong${n.value}`,
            label: `执行动作${n.value + 1 + `.......`}`,
            component: 'Slider',
            colProps: { span: 24 },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `outTarget${n.value}`,
            label: '',
            component: 'Select',
            componentProps: {
              placeholder: '设备输出',
              options: [
                { label: '设备输出', value: 'DEVICE_OUT' },
                { label: '消息通知', value: 'MSG_NOTIFY' },
                { label: '场景联动', value: 'SCENE_ACT' },
              ],
            },
            colProps: { span: 12 },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `deviceId${n.value}`,
            label: '',
            component: 'Select',
            componentProps: {
              placeholder: '请选择设备',
            },
            ifShow: ({ values }) =>
              !isScene(Reflect.get(values, 'outTarget')) &&
              !isMsg(Reflect.get(values, 'outTarget')),
            colProps: {
              span: 12,
            },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `command${n.value}`,
            component: 'Input',
            label: '',
            componentProps: {
              placeholder: '请输入下发指定',
            },
            ifShow: ({ values }) =>
              !isScene(Reflect.get(values, 'outTarget')) &&
              !isMsg(Reflect.get(values, 'outTarget')),
            colProps: {
              span: 12,
            },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `wu1${n.value}`,
            label: '',
            component: 'Input',
            componentProps: {
              placeholder: '无',
              style: {
                visibility: 'hidden',
              },
            },
            colProps: { span: 12 },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `wu2${n.value}`,
            component: 'Input',
            label: '',
            componentProps: {
              placeholder: '暂不实现',
            },
            colProps: {
              span: 12,
            },
            ifShow: ({ values }) => isMsg(Reflect.get(values, 'outTarget')),
          },
          ''
        );
        appendSchemaByField(
          {
            field: `sceneLinkageId${n.value}`,
            label: '',
            component: 'ApiSelect',
            colProps: {
              span: 12,
            },
            componentProps: {
              placeholder: '请选择场景触发器',
              options: [
                { label: '场景触发器1', value: '1' },
                { label: '场景触发器2', value: '2' },
                { label: '场景触发器3', value: '3' },
                { label: '场景触发器4', value: '4' },
              ],
            },
            ifShow: ({ values }) => isScene(Reflect.get(values, 'outTarget')),
          },
          ''
        );

        appendSchemaByField(
          {
            field: `${n.value}`,
            component: 'Input',
            label: ' ',
            colProps: {
              span: 12,
            },
            slot: 'add',
          },
          ''
        );
        n.value++;
      }

      function del(field) {
        removeSchemaByFiled([
          `kong${field}`,
          `outTarget${field}`,
          `deviceId${field}`,
          `command${field}`,
          `wu1${field}`,
          `wu2${field}`,
          `sceneLinkageId${field}`,
          `${field}`,
        ]);
        n.value--;
      }

      return { setFieldsFormValue, registerAction, add, del, getAllFields, funcResetFields };
    },
  });
</script>

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