<template>
  <div class="job-tool">
    <div class="job-tool-row">
      <el-radio-group
        v-model="status"
        :size="size"
        @change="handleStatusChange"
      >
        <el-radio-button label="">全部 {{ statusInfo.total }}</el-radio-button>
        <el-radio-button label="pending">等待中 {{ statusInfo.pending }}</el-radio-button>
        <el-radio-button label="running">运行中 {{ statusInfo.running }}</el-radio-button>
        <el-radio-button label="finished">已结束 {{ statusInfo.finished }}</el-radio-button>
      </el-radio-group>

      <SelectScrapydServer
        class="ml-sm"
        v-model:value="scrapydServerId"
        @on-init="handleServerInit"
        @change="handleServerChange"
      />

      <SelectProject
        ref="projectSelect"
        class="ml-sm"
        :size="size"
        :scrapyd-server-id="scrapydServerId"
        v-model:value="project"
        @on-init="handleProjectInit"
        @change="handleProjectChange"
      />

      <JobCancelAll
        v-if="project"
        class="ml-sm"
        :size="size"
        :scrapyd-server-id="scrapydServerId"
        :project="project"
        @success="$emit('success')"
      />

      <AutoRefresh
        class="ml-sm"
        :size="size"
        @refresh="$emit('success')"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import SelectScrapydServer from '@/components/SelectScrapydServer.vue';
import SelectProject from '@/components/SelectProject.vue';
import AutoRefresh from '@/components/AutoRefresh.vue';
import JobCancelAll from '@/views/job/components/JobCancelAll.vue';

const props = defineProps({
  statusInfo: {
    type: Object,
    default: () => ({
      total: 0,
      finished: 0,
      pending: 0,
      running: 0
    })
  },
  size: {
    type: String,
    default: 'default'
  }
});

const emit = defineEmits([
  'status-change',
  'project-change',
  'server-change',
  'success',
  'on-init'
]);

const route = useRoute();
const projectSelect = ref<any>(null);
const status = ref('');
const project = ref('');
const scrapydServerId = ref('');

// 处理状态变化
const handleStatusChange = () => {
  emit('status-change', status.value);
};

// 处理项目变化
const handleProjectChange = (val: string) => {
  if (val) {
    localStorage.setItem('project', val);
    emit('project-change', val);
  }
};

// 处理项目选择初始化
const handleProjectInit = (data: any[]) => {
  emit('on-init', data);
};

// 处理服务器变化
const handleServerChange = () => {
  // 切换服务器时重新获取项目列表
  if (projectSelect.value) {
    projectSelect.value.resetData();
  }
  emit('server-change', scrapydServerId.value);
};

// 处理服务器选择初始化
const handleServerInit = (servers: any[]) => {
  // 如果当前没有选择服务器，而且有可选的服务器，则选择第一个
  if (!scrapydServerId.value && servers && servers.length > 0) {
    scrapydServerId.value = servers[0].value;
  }
};

onMounted(() => {
  // 从路由参数中获取初始值
  if (route.query.scrapydServerId) {
    scrapydServerId.value = route.query.scrapydServerId as string;
  }
  
  if (route.query.project) {
    project.value = route.query.project as string;
  }
  
  if (route.query.status) {
    status.value = route.query.status as string;
  }
});
</script>

<style lang="scss" scoped>
.job-tool {
  margin-bottom: 20px;
}

.job-tool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ml-sm {
  margin-left: 10px;
}
</style>
