<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { Button, Card, Space, notification, Tag } from 'ant-design-vue';
import { useVbenDrawer, VbenButton } from '@vben/common-ui';
import ExtraDrawer from './drawer.vue';
const [Drawer, drawerApi] = useVbenDrawer({
  connectedComponent: ExtraDrawer,
});


function startScript(id: number) {
  notification.success({
    message: '脚本已启动',
    description: '文案自动化脚本已成功启动，正在运行中。',
  });
  drawerApi.setState({
    title: '文案自动化脚本',
  });
  drawerApi.setData({
    scriptLaber: '文案自动化脚本',
    scriptInstanceId: id,
  });
  drawerApi.open();
}

function startScript2(id: number) {
  notification.success({
    message: '脚本已启动',
    description: 'US环境同步自动化脚本已成功启动，正在运行中。',
  });
  drawerApi.setState({
    title: 'US环境同步自动化脚本',
  });
  drawerApi.setData({
    scriptLaber: 'US环境同步自动化脚本',
    scriptInstanceId: id,
  });
  drawerApi.open();
}


</script>
<template>
  <Page>
    <Drawer />
    <div class="p-5">
      <div class="card-box p-4 py-6 flex justify-between h-12">
        <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
          <h1 class="text-md font-semibold md:text-ml text-center">
            <span>Script Name</span>
          </h1>
        </div>
        <div class="flex flex-col justify-center  md:mt-0 lg:w-3/12">
          <h1 class="text-md font-semibold md:text-ml text-center">
            <span>TAGS</span>
          </h1>
        </div>

        <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
          <h1 class="text-md font-semibold md:text-ml  text-center">
            <span>Start</span>
          </h1>
        </div>
      </div>
    </div>

    <div class="p-5">
      <div class="card-box p-4 py-6 flex justify-between h-12">
        <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
          <h1 class="text-md font-semibold md:text-ml text-center">
            <span>文案自动化脚本</span>
          </h1>
        </div>
        <div class="flex flex-col justify-center  md:mt-0 lg:w-3/12">
          <h1 class="text-md font-semibold md:text-ml text-center">
            <Tag>xlsx</Tag><Tag>文案</Tag><Tag>策划</Tag>
          </h1>
        </div>

        <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
          <h1 class="text-md font-semibold md:text-ml  text-center">
            <Button type="primary" @click="startScript(1)">Start</Button>
          </h1>
        </div>
      </div>
    </div>

    <div class="p-5">
      <div class="card-box p-4 py-6 flex justify-between h-12">
        <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
          <h1 class="text-md font-semibold md:text-ml text-center">
            <span>US环境同步自动化脚本</span>
          </h1>
        </div>
        <div class="flex flex-col justify-center  md:mt-0 lg:w-3/12">
          <h1 class="text-md font-semibold md:text-ml text-center">
            <Tag color="green">DB</Tag><Tag>环境</Tag><Tag>QA</Tag>
          </h1>
        </div>

        <div class="flex flex-col justify-center  md:mt-0 lg:w-1/12">
          <h1 class="text-md font-semibold md:text-ml  text-center">
            <Button type="primary" @click="startScript2(2)">Start</Button>
          </h1>
        </div>
      </div>
    </div>
  </Page>


</template>
