<template>
  <div>
    <el-table
      :data="props.data"
      v-loading="props.loading"
      border
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="序号"
        width="60"
      >
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column
        label="服务名称"
        align="center"
        prop="server_name"
      />

      <el-table-column
        label="服务地址"
        align="center"
        prop="server_url"
      />

      <el-table-column
        label="用户名"
        align="center"
        width="100px"
      >
        <template #default="scope">
          {{ scope.row.username || '-' }}
        </template>
      </el-table-column>

      <el-table-column
        label="密码"
        align="center"
        width="100px"
      >
        <template #default="scope">
          <span v-if="scope.row.password">***</span>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column
        label="查看项目"
        align="center"
        width="100px"
      >
        <template #default="scope">
          <router-link
            :to="{
              path: '/project/list',
              query: { scrapydServerId: scope.row.id },
            }"
          >
            <el-icon><Document /></el-icon> 项目
          </router-link>
        </template>
      </el-table-column>

      <el-table-column
        label="启用/禁用"
        align="center"
        width="100px"
      >
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            @change="handleStatusChange(scope.row, $event)"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="编辑"
        align="center"
        width="80px"
      >
        <template #default="scope">
          <ScrapydServerAdd
            type="edit"
            :row="scope.row"
            @success="emit('success')"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="删除"
        align="center"
        width="80px"
      >
        <template #default="scope">
          <ScrapydServerDelete
            :row="scope.row"
            @success="emit('success')"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';
import { ElMessage } from 'element-plus';
import { Document } from '@element-plus/icons-vue';
import ScrapydServerAdd from './ScrapydServerAdd.vue';
import ScrapydServerDelete from './ScrapydServerDelete.vue';
import { updateScrapydServerStatus } from '@/api/scrapydServer';

// 定义props
const props = defineProps<{
  data?: ScrapydServer[]; 
  loading?: boolean;
}>();

// 定义事件
const emit = defineEmits(['success']);

// 定义类型
interface ScrapydServer {
  id: number;
  server_name: string;
  server_url: string;
  username?: string;
  password?: string;
  status: number;
}

// 处理状态变更
const handleStatusChange = async (row: ScrapydServer, value: number) => {
  try {
    const params = {
      scrapydServerId: row.id,
      status: value
    };

    const res = await updateScrapydServerStatus(params);

    if (res.code === 0) {
      ElMessage.success('更新成功');
    } else {
      ElMessage.error(res.message || '更新失败');
    }
  } catch (error) {
    console.error('更新状态失败:', error);
    ElMessage.error('更新失败');
  }
};
</script>
