<template>
  <span>
    <!-- 修改 -->
    <el-button
      v-if="job_id"
      size="small"
      @click="handleDialogVisibleClick"
      type="text"
    >
      <el-icon><Edit /></el-icon>
    </el-button>

    <!-- 添加 -->
    <el-button
      v-else-if="type=='table-add'"
      size="small"
      type="text"
      @click="handleDialogVisibleClick"
    >
      <el-icon><Plus /></el-icon>
      添加
    </el-button>

     <!-- 添加 -->
    <el-button
      v-else
      size="small"
      type="primary"
      @click="handleDialogVisibleClick"
    >
      <el-icon><Plus /></el-icon>
      添加
    </el-button>

    <el-dialog
      :title="btnText + '任务'"
      v-model="dialogVisible"
      width="500px"
      center
    >
      <schedule-form
        v-if="dialogVisible"
        :scrapyd-server-id="scrapydServerId"
        :job_id="job_id"
        :project="project"
        :spider="spider"
        @on-success="handleFormSuccess"
        @on-cancel="handleDialogClose"
      />
    </el-dialog>
  </span>
</template>

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

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

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

const dialogVisible = ref(false)

const btnText = computed(() => {
  return props.job_id ? '修改' : '添加'
})

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

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

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

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