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

const imageGitPullLoading = ref(false);


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();
}

async function scriptClientImageGitPull() {
  imageGitPullLoading.value = true;
  clientImageGitPull({ step: 1 }).then(() => {
    notification.success({
      message: '操作成功',
      description: '已成功执行客户端图片更新脚本。',
    });
    imageGitPullLoading.value = false;
  }).catch(() => {
    notification.error({
      message: '操作失败',
      description: '执行客户端图片更新脚本失败，请稍后再试。',
    });
    imageGitPullLoading.value = false;
  });
}

</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>

    <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 color="green">Language</Tag><Tag>Image</Tag><Tag>Client</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="scriptClientImageGitPull" :loading="imageGitPullLoading">Start</Button>
          </h1>
        </div>
      </div>
    </div>
  </Page>


</template>
