<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';

import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { ElButton, ElMessage, ElMessageBox, ElTag } from 'element-plus';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { cdcmRuleAPI } from '#/cdcm/api/api';
import req from '#/cdcm/api/req_code';

import Add from './add.vue';

const [Modal, modalApi] = useVbenModal({
  footer: false,
  fullscreen: true,
  fullscreenButton: false,
  closeOnPressEscape: false,
});

const [addModal, addApi] = useVbenModal({
  connectedComponent: Add,
  onOpenChange: (isOpen: boolean) => {
    if (!isOpen) {
      gridApi.reload();
    }
  },
});

interface RowType {
  id: string;
  label: string;
  info: string;
  disabled: boolean;
}

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    // { field: 'id', title: 'ID' },
    { field: 'label', title: '名称' },
    { field: 'info', title: '描述' },
    { field: 'disabled', title: '状态', slots: { default: 'disabled' } },
    {
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      title: '管理',
      width: 240,
    },
  ],
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async () => {
        return {
          items: await cdcmRuleAPI(null, req.CruleGetFlows),
        };
      },
    },
  },
  pagerConfig: {
    enabled: false,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
});

// 新增
const btn_add = () => {
  addApi.open();
};

const iframeUrl = ref('');
const btn_open = (row: RowType) => {
  modalApi.open();
  const fullUrl = window.location.host;
  iframeUrl.value = `${fullUrl}/rule/#flow/${row.id}`;
  ElMessage.success(`${fullUrl}/rule/#flow/${row.id}`);
};

// const btn_edit = (row: RowType) => {
//   // console.log('编辑', row);
// };

// 删除
const btn_delete = async (row: RowType) => {
  try {
    ElMessageBox.confirm('确定要删除这条记录吗？', '删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    await cdcmRuleAPI({ id: row.id }, req.CruleDeleteFlow);
    gridApi.reload();
    ElMessage.success('删除成功');
  } catch (error) {
    if (error === 'cancel') {
      ElMessage.info('已取消删除');
    } else {
      ElMessage.error('删除失败');
    }
  }
};

const btn_start = async (row: RowType) => {
  try {
    await cdcmRuleAPI({ id: row.id }, req.CruleStartFlow);
    gridApi.reload();
    ElMessage.success('启用成功');
  } catch {
    ElMessage.error('启用失败');
  }
};

const btn_stop = async (row: RowType) => {
  try {
    await cdcmRuleAPI({ id: row.id }, req.CruleStopFlow);
    gridApi.reload();
    ElMessage.success('停用成功');
  } catch {
    ElMessage.error('停用失败');
  }
};
</script>

<template>
  <div class="vp-raw w-full">
    <Grid>
      <template #toolbar-tools>
        <ElButton class="mr-2" type="success" @click="btn_add"> 新增 </ElButton>
      </template>
      <template #disabled="{ row }">
        <ElTag :type="row.disabled ? 'info' : 'success'">
          {{ row.disabled ? '停用' : '运行' }}
        </ElTag>
      </template>
      <template #action="{ row }">
        <!-- <ElButton size="small" type="primary" round @click="btn_edit(row)">
          编辑
        </ElButton> -->
        <ElButton size="small" type="primary" round @click="btn_open(row)">
          打开
        </ElButton>
        <ElButton
          size="small"
          type="success"
          round
          @click="btn_start(row)"
          v-show="row.disabled ? true : false"
        >
          启用
        </ElButton>
        <ElButton
          size="small"
          type="info"
          round
          @click="btn_stop(row)"
          v-show="row.disabled ? false : true"
        >
          停用
        </ElButton>
        <ElButton size="small" type="danger" round @click="btn_delete(row)">
          删除
        </ElButton>
      </template>
    </Grid>
    <Modal title="逻辑编程">
      <iframe
        :src="iframeUrl"
        style="width: 100%; height: 100%; border: none"
      ></iframe>
    </Modal>
    <addModal />
  </div>
</template>
