<template>
  <CollapseContainer title="执行条件" style="background-color: #eeeeee">
    <div style="position: relative">
      <BasicForm
        :labelWidth="100"
        :emptySpan="10"
        :showResetButton="false"
        :showSubmitButton="false"
        @register="registerCondition"
      >
        <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
            @click="del(field)"
            style="margin-left: 10px"
            v-if="Number(field) === 0"
            type="primary"
            >删除</Button
          > -->
          <Button
            style="margin-left: -95px; margin-top: 20px"
            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 { useConditionDrawerSchema, isShiDu, isTimeAll } from '../config.d';
  import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';

  export default defineComponent({
    components: { CollapseContainer, BasicForm, [Input.name]: Input, Button },
    props: ['deviceInfo1'],
    setup(props) {
      const getValueData: any = ref({});
      const [
        registerCondition,
        {
          setFieldsValue,
          resetFields,
          updateSchema,
          appendSchemaByField,
          removeSchemaByFiled,
          getFieldsValue,
        },
      ] = useForm({
        labelWidth: 100,
        schemas: useConditionDrawerSchema,
        actionColOptions: { span: 24 },
      });
      let isJudge = ref(1);
      if (isJudge.value == 1) {
        resetFields();
      }
      watch(
        () => props.deviceInfo1,
        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: `status${n.value}`,
            label: '',
            component: 'Select',
            componentProps: {
              placeholder: '设备状态',
              options: [
                { label: '设备触发', value: 'DEVICE_STATUS' },
                { label: '时间范围', value: 'TIME_ALL' },
              ],
            },
            colProps: { span: 12 },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `deviceId${n.value}`,
            label: '',
            component: 'Select',
            componentProps: {
              placeholder: '请选择设备',
            },
            ifShow: ({ values }) => !isTimeAll(Reflect.get(values, 'status')),
            colProps: {
              span: 12,
            },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `createTime${n.value}`,
            label: '',
            component: 'DatePicker',
            componentProps: {
              placeholder: '请选择起始时间',
            },
            colProps: {
              span: 12,
            },
            ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'status')),
          },
          ''
        );
        appendSchemaByField(
          {
            field: `updateTime${n.value}`,
            label: '',
            component: 'DatePicker',
            componentProps: {
              placeholder: '请选择结束时间',
            },
            colProps: {
              span: 12,
            },
            ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'status')),
          },
          ''
        );
        appendSchemaByField(
          {
            field: `property${n.value}`,
            label: '',
            component: 'Select',
            componentProps: {
              placeholder: '请选择或者输入属性',
              options: [
                { label: 'shidu', value: 'SHINDU' },
                { label: 'wendu', value: 'WENDU' },
              ],
            },
            ifShow: ({ values }) => !isTimeAll(Reflect.get(values, 'status')),
            colProps: { span: 12 },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `wu${n.value}`,
            label: '',
            component: 'Input',
            componentProps: {
              placeholder: '无',
              style: {
                visibility: 'hidden',
              },
            },
            colProps: { span: 12 },
          },
          ''
        );
        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 }) =>
              isShiDu(Reflect.get(values, 'property')) && !isTimeAll(Reflect.get(values, 'status')),
            colProps: { span: 12 },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `value${n.value}`,
            component: 'Input',
            label: '',
            componentProps: {
              placeholder: '请输入比较值',
            },
            ifShow: ({ values }) =>
              isShiDu(Reflect.get(values, 'property')) && !isTimeAll(Reflect.get(values, 'status')),
            colProps: {
              span: 12,
            },
          },
          ''
        );

        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 }) =>
              isShiDu(Reflect.get(values, 'property')) && !isTimeAll(Reflect.get(values, 'status')),
            colProps: { span: 12 },
          },
          ''
        );
        appendSchemaByField(
          {
            field: `value${n.value}`,
            component: 'Input',
            label: '',
            componentProps: {
              placeholder: '请输入比较值',
            },
            ifShow: ({ values }) =>
              isShiDu(Reflect.get(values, 'property')) && !isTimeAll(Reflect.get(values, 'status')),
            colProps: {
              span: 12,
            },
          },
          ''
        );

        appendSchemaByField(
          {
            field: `${n.value}`,
            component: 'Input',
            label: ' ',
            colProps: {
              span: 12,
            },
            slot: 'add',
          },
          ''
        );
        n.value++;
      }
      function del(field) {
        removeSchemaByFiled([
          `kong${field}`,
          `status${field}`,
          `deviceId${field}`,
          `createTime${field}`,
          `updateTime${field}`,
          `property${field}`,
          `wu${field}`,
          `compare${field}`,
          `value${field}`,
          `compare${field}`,
          `value${field}`,
          `${field}`,
        ]);
        n.value--;
      }
      return { setFieldsFormValue, registerCondition, add, del, getAllFields, funcResetFields };
    },
  });
</script>