<template>
  <a-modal
      :visible="visible"
      title="爬虫设置"
      width="800px"
      @cancel="handleCancel"
      @ok="handleOk"
      :mask-closable="false"
  >
    <a-form :model="form" layout="vertical">
      <a-form-item label="爬取频率">
        <a-select v-model="form.frequency">
          <a-option value="hourly">每小时</a-option>
          <a-option value="daily">每天</a-option>
          <a-option value="weekly">每周</a-option>
          <a-option value="monthly">每月</a-option>
        </a-select>
      </a-form-item>

      <a-form-item label="关键词过滤">
        <a-input-tag
            v-model="form.keywords"
            placeholder="输入关键词后回车"
            allow-clear
        />
      </a-form-item>

      <a-form-item label="来源平台">
        <a-checkbox-group v-model="form.platforms">
          <a-row :gutter="[16, 16]">
            <a-col :span="8">
              <a-checkbox value="国能e招">国能e招</a-checkbox>
            </a-col>
            <a-col :span="8">
              <a-checkbox value="中国节能">中国节能</a-checkbox>
            </a-col>
            <a-col :span="8">
              <a-checkbox value="科幻集团">科幻集团</a-checkbox>
            </a-col>
            <a-col :span="8">
              <a-checkbox value="三峡招标">三峡招标</a-checkbox>
            </a-col>
            <a-col :span="8">
              <a-checkbox value="三峡采购">三峡采购</a-checkbox>
            </a-col>
            <a-col :span="8">
              <a-checkbox value="北京京能">北京京能</a-checkbox>
            </a-col>
            <a-col :span="8">
              <a-checkbox value="华润守正">华润守正</a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </a-form-item>

      <a-form-item label="自动通知">
        <a-switch v-model="form.autoNotify" />
      </a-form-item>

      <template v-if="form.autoNotify">
        <a-form-item label="通知方式">
          <a-checkbox-group v-model="form.notifyMethods">
            <a-checkbox value="inApp">站内消息</a-checkbox>
            <a-checkbox value="email">电子邮件</a-checkbox>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item v-if="form.notifyMethods.includes('email')" label="通知邮箱">
          <a-input v-model="form.notifyEmail" placeholder="请输入接收通知的邮箱" />
        </a-form-item>
      </template>

      <a-divider />

      <a-form-item label="爬虫日志">
        <div class="log-container">
          <div v-for="(log, index) in logs" :key="index" class="log-item">
            [{{ log.time }}] {{ log.message }}
          </div>
        </div>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk">保存设置</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { Message } from '@arco-design/web-vue'

interface LogEntry {
  time: string
  message: string
}

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'save'])

const form = reactive({
  frequency: 'daily',
  keywords: ['风电', '叶片', '检查', '运维'],
  platforms: ['国能e招', '中国节能', '三峡招标'],
  autoNotify: true,
  notifyMethods: ['inApp', 'email'],
  notifyEmail: 'user@example.com'
})

const logs = ref<LogEntry[]>([
  { time: '2025-07-30 22:00', message: '爬虫任务已启动' },
  { time: '2025-07-30 21:00', message: '爬虫任务已启动' },
  { time: '2023-11-01 09:30', message: '成功爬取中国招标投标网数据' },
  { time: '2023-11-01 09:32', message: '成功爬取某省公共资源交易中心数据' },
  { time: '2023-11-02 10:15', message: '爬取企业自有招标平台失败：连接超时' }
])

const handleCancel = () => {
  emit('update:visible', false)
}

const handleOk = () => {
  Message.success('设置保存成功')
  emit('save', form)
  emit('update:visible', false)
}

// Watch for email notification toggle
watch(() => form.notifyMethods, (newVal) => {
  if (!newVal.includes('email')) {
    form.notifyEmail = ''
  }
})
</script>

<style scoped lang="less">
.log-container {
  height: 200px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  background-color: var(--color-fill-2);
}

.log-item {
  padding: 4px 0;
  font-family: monospace;
  font-size: 13px;
  color: var(--color-text-2);
}

.log-item:not(:last-child) {
  border-bottom: 1px dashed var(--color-border-2);
}
</style>