<template>
  <span>
    <el-button
      size="small"
      type="text"
      @click="handleDialogVisibleClick"
    >
      <el-icon><VideoPlay /></el-icon>
    </el-button>

    <el-dialog
      title="运行一次"
      v-model="dialogVisible"
      width="500px"
      center
    >
       <spider-form
         v-if="dialogVisible"
         :spider="spider"
         :project="project"
         :scrapyd-server-id="scrapydServerId"
         :options="options"
         @on-success="handleFormSuccess"
         @on-cancel="handleDialogClose"
       />
     </el-dialog>
  </span>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { VideoPlay } from '@element-plus/icons-vue'

const props = defineProps({
  scrapydServerId: { type: String, default: '' },
  project: { type: String, default: '' },
  spider: { type: String, default: '' },
  options: { type: String, default: '' },
})

const emit = defineEmits(['on-success'])

const dialogVisible = ref(false)

const handleDialogVisibleClick = () => {
  dialogVisible.value = true
}

const handleDialogClose = () => {
  dialogVisible.value = false
}

const handleFormSuccess = () => {
  dialogVisible.value = false
  emit('on-success')
}
</script>

<style lang="scss" scoped></style>
