<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui';

import { ElMessage } from 'element-plus';

import { useVbenForm } from '#/adapter/form';
import { cdcmTemplateAPI } from '#/cdcm/api/api.js';
import req from '#/cdcm/api/req_code';
import { useStaticConfigStore } from '#/store';

const get_register_types = () => {
  return [
    {
      label: '线圈',
      value: '线圈',
    },
    {
      label: '离散输入',
      value: '离散输入',
    },
    {
      label: '输入寄存器',
      value: '输入寄存器',
    },
    {
      label: '保持寄存器',
      value: '保持寄存器',
    },
  ];
};
const point_types = useStaticConfigStore().support_point_types;

const get_point_types = (register: String) => {
  return point_types.map((item: String) => {
    if (register === '线圈' || register === '离散输入') {
      // 只能选择bool
      return {
        label: item,
        value: item,
        disabled: item !== 'bool(bit)',
      };
    }
    if (register === '输入寄存器' || register === '保持寄存器') {
      // 不支持bool
      return {
        label: item,
        value: item,
        disabled: item === 'bool(bit)',
      };
    }
    return {
      label: item,
      value: item,
    };
  });
};
const point_access_types = useStaticConfigStore().support_point_access_types;
const get_point_permissions = (register: String) => {
  return point_access_types.map((item: String) => {
    if (register === '离散输入' || register === '输入寄存器') {
      // 只能可读
      return {
        label: item,
        value: item,
        disabled: item === '可写',
      };
    }
    // 可读可写
    return {
      label: item,
      value: item,
    };
  });
};

interface DataType {
  data: {
    description: string;
    id: number;
    name: string;
    point_count: number;
    points: [];
    type: string;
  };
}
const [Modal, modalApi] = useVbenModal({
  onCancel() {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      // const data = modalApi.getData<DataType>();
    }
  },
});

const [TemplateForm] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  handleSubmit: onSubmit,
  // 垂直布局，label和input在不同行，值为vertical
  // 水平布局，label和input在同一行
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',

      componentProps: {
        placeholder: '点位名称',
      },

      fieldName: 'name',

      label: '点位名称',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '点位地址',
      },
      fieldName: 'register_address',
      label: '点位地址',
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        filterOption: true,
        options: get_register_types(),
        placeholder: '寄存器',
        showSearch: true,
      },
      fieldName: 'register_type',
      label: '寄存器',
      rules: 'required',
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        filterOption: true,
        options: get_point_types(''),
        placeholder: '点位类型',
        showSearch: true,
      },
      dependencies: {
        componentProps(values: any) {
          return {
            options: get_point_types(values.register_type),
          };
        },
        triggerFields: ['register_type'],
      },
      fieldName: 'point_type',
      label: '点位类型',
      rules: 'required',
    },
    {
      component: 'Input',

      componentProps: {
        placeholder: '点位描述',
      },
      fieldName: 'description',
      label: '点位描述',
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        filterOption: true,
        options: get_point_permissions(''),
        placeholder: '读写权限',
        showSearch: true,
      },
      dependencies: {
        componentProps(values: any) {
          return {
            options: get_point_permissions(values.register_type),
          };
        },
        triggerFields: ['register_type'],
      },
      fieldName: 'access',
      label: '读写权限',
      rules: 'required',
    },
    {
      component: 'Input',

      componentProps: {
        placeholder: '计算公式',
      },
      fieldName: 'calculation',
      label: '计算公式',
    },
    {
      component: 'Input',

      componentProps: {
        placeholder: '点位单位',
      },

      fieldName: 'unit',

      label: '点位单位',
    },
  ],
  wrapperClass: 'grid-cols-1',
});

async function onSubmit(values: Record<string, any>) {
  const data = modalApi.getData<DataType>();
  const param = {
    template_id: data.data.data.id,
    template_type: data.data.data.type,
    name: values.name,
    point_type: values.point_type,
    description: values.description,
    unit: values.unit,
    access: values.access,
    calculation: values.calculation,
    protocol_ext: {
      register_type: values.register_type,
      register_address: Number(values.register_address),
    },
  };
  const ret = await cdcmTemplateAPI(param, req.PointCreate);
  if (ret.data.code === 0) {
    ElMessage.success(ret.data.data);
    modalApi.close();
  } else {
    ElMessage.error(ret.data.data || ret.data.msg);
  }
}
</script>

<template>
  <Modal title="新增点位" :footer="false">
    <TemplateForm />
  </Modal>
</template>
