<script setup>
import { useWorkflowStore } from "../../stores/workflow.js";

const workflow = useWorkflowStore();
</script>

<template>
  <DashboardCard title="视频发布" step="07" :grow="true">
    <div
      v-for="(platform, index) in workflow.publishPlatforms"
      :key="index"
      class="dashboard-platform-row mb-2"
    >
      <label class="flex shrink-0 items-center gap-2 text-sm" style="min-width: 70px">
        <Checkbox v-model="platform.checked" binary />
        {{ platform.label }}
      </label>
      <Select
        v-model="platform.account"
        placeholder="选择账号"
        size="small"
        class="min-w-0 flex-1"
      />
    </div>
    <div class="mt-3 flex gap-2">
      <Button label="发布" size="small" class="flex-1" />
      <Button label="定时发布" size="small" class="flex-1" />
    </div>
    <p class="mt-2 text-center text-xs leading-relaxed text-gray-400 opacity-80">
      首次发布：请手动关闭浏览器内出现的任何弹窗提示（说明等），防止干扰脚本，下次即可流畅运行
    </p>
  </DashboardCard>
</template>
