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

import { ElButton, ElDivider } from 'element-plus';

import { useVbenForm } from '#/adapter/form';

import SetHistory from './setHistory.vue';

const [Drawer, drawerApi] = useVbenDrawer({
  onCancel() {
    drawerApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = drawerApi.getData<any>();
      if (data) {
        console.warn(data);
      }
    }
  },
});

const [setModal] = useVbenModal({
  connectedComponent: SetHistory,
});

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

      componentProps: {
        placeholder: '总计数',
      },

      fieldName: 'total_count',
      label: '总计数',
      disabled: true,
      labelWidth: 160,
    },
    {
      component: 'Input',

      componentProps: {
        placeholder: '成功计数',
      },

      fieldName: 'success_count',
      label: '成功计数',
      disabled: true,
      labelWidth: 160,
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '最后一次成功时间',
      },

      fieldName: 'last_success_time',
      label: '最后一次成功时间',
      disabled: true,
      labelWidth: 160,
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '失败计数',
      },

      fieldName: 'failure_count',
      label: '失败计数',
      disabled: true,
      labelWidth: 160,
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '最后一次失败时间',
      },

      fieldName: 'last_failure_ctime',
      label: '最后一次失败时间',
      disabled: true,
      labelWidth: 160,
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '最后一次失败原因',
      },

      fieldName: 'last_failure_cause',
      label: '最后一次失败原因',
      disabled: true,
      labelWidth: 160,
    },
  ],
  wrapperClass: 'grid-cols-1',
});
const [TemplateForm1] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  // handleSubmit: onSubmit,
  showDefaultActions: false,
  // 垂直布局，label和input在不同行，值为vertical
  // 水平布局，label和input在同一行
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',

      componentProps: {
        placeholder: '总计数',
      },

      fieldName: 'total_count',
      label: '总计数',
      disabled: true,
      labelWidth: 160,
    },
    {
      component: 'Input',

      componentProps: {
        placeholder: '成功计数',
      },

      fieldName: 'success_count',
      label: '成功计数',
      disabled: true,
      labelWidth: 160,
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '最后一次成功时间',
      },

      fieldName: 'last_success_time',
      label: '最后一次成功时间',
      disabled: true,
      labelWidth: 160,
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '失败计数',
      },

      fieldName: 'failure_count',
      label: '失败计数',
      disabled: true,
      labelWidth: 160,
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '最后一次失败时间',
      },

      fieldName: 'last_failure_ctime',
      label: '最后一次失败时间',
      disabled: true,
      labelWidth: 160,
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '最后一次失败原因',
      },

      fieldName: 'last_failure_cause',
      label: '最后一次失败原因',
      disabled: true,
      labelWidth: 160,
    },
  ],
  wrapperClass: 'grid-cols-1',
});

const resetHealth = () => {};
</script>
<template>
  <Drawer title="详情" :footer="false" class="w-[800px]">
    <div class="vp-raw w-full" style="height: 600px">
      <fieldset class="box2 titleBox">
        <legend class="box-ht">点位名称</legend>
        <span></span>
        <ElButton type="primary" size="large" @click="resetHealth">
          重置
        </ElButton>
      </fieldset>
      <fieldset class="box2">
        <!-- <legend class="box-ht">读计数</legend> -->
        <ElDivider content-position="left">读计数</ElDivider>
        <TemplateForm />
      </fieldset>
      <fieldset class="box2">
        <ElDivider content-position="left">写计数</ElDivider>
        <TemplateForm1 />
      </fieldset>
    </div>
    <setModal />
  </Drawer>
</template>
<style lang="scss" scoped>
.titleBox {
  display: flex;
  justify-content: space-between;
}
</style>
