RunForge-Frontend/src/pages/lepao/accountList/index.vue

<template>
  <div class="container">
    <Breadcrumb :items="['校园乐跑', '乐跑账号']" />

    <userCard />

    <a-card title="账号列表" style="margin-top: 15px;">
      <div class="buttonGroup">
        <a-button type="primary" size="large" @click="editAccount()">
          <template #icon>
            <icon-plus />
          </template>
          添加账号
        </a-button>

        <!-- <a-button size="large" @click="download('windows')" style="margin-left: 10px;">
          <template #icon>
            <icon-desktop />
          </template>
          Windows操作说明
        </a-button>

        <a-button size="large" @click="download('android')" style="margin-left: 10px;">
          <template #icon>
            <icon-mobile />
          </template>
          安卓手机操作说明
        </a-button>

        <a-button size="large" @click="download('iphone')" style="margin-left: 10px;">
          <template #icon>
            <icon-mobile />
          </template>
          iPhone操作说明
        </a-button>

        <a-button size="large" @click="download('page')" style="margin-left: 10px;" v-if="!isElectron()">
          <template #icon>
            <icon-download />
          </template>
          客户端/登录器下载
        </a-button> -->
      </div>

      <a-row class="queryForm">
        <a-col :flex="1">
          <a-form :model="queryDataForm" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
            label-align="left">
            <a-row :gutter="16">
              <a-col :span="6">
                <a-form-item field="area" label="跑区">
                  <a-select v-model="queryDataForm.area" placeholder="请选择乐跑跑区" default-value="">
                    <a-option value="">所有跑区</a-option>
                    <a-option v-for="(item, index) in area" :key="index" :value="item">
                      {{ item }}
                    </a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item field="email" label="邮箱">
                  <a-input v-model="queryDataForm.email" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item field="username" label="姓名">
                  <a-input v-model="queryDataForm.username" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item field="student_num" label="学号">
                  <a-input v-model="queryDataForm.student_num" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item field="area" label="状态">
                  <a-select v-model="queryDataForm.state" :options="state" placeholder="请选择账号状态" :default-value="-1" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item field="auto_time" label="乐跑时段">
                  <a-select v-model="queryDataForm.auto_time" placeholder="请选择自动乐跑时段" :default-value="-1">
                    <a-option :value="0">所有时段</a-option>
                    <a-option v-for="(item, index) in auto_time" :key="index" :value="item.value">
                      {{ item.label }}
                    </a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item field="queryTime" label="更新时间">
                  <a-range-picker v-model="queryDataForm.queryTime" show-time format="YY-MM-DD HH:mm" value-format="x"
                    @ok="search()" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 84px" direction="vertical" />
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              搜索
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-alert v-if="notice" style="margin-bottom: 15px;">{{ notice }}</a-alert>

      <a-table :data="data" :bordered="false" hoverable class="table" :loading="loading" expandable :scroll="{
        x: 1780
      }" :pagination="{
        showPageSize: true,
        showJumper: true,
        showTotal: true,
        pageSize: pagination.pagesize,
        current: pagination.current,
        total: pagination.total
      }" @page-change="handlePageChange" @page-size-change="handlePageSizeChange">
        <template #name-filter="{ filterValue, setFilterValue, handleFilterConfirm, handleFilterReset }">
          <div class="custom-filter">
            <a-space direction="vertical">
              <a-input :model-value="filterValue[0]" @input="(value) => setFilterValue([value])" />
              <div class="custom-filter-footer">
                <a-button @click="handleFilterReset">重置</a-button>
                <a-button @click="handleFilterConfirm">确定</a-button>
              </div>
            </a-space>
          </div>
        </template>

        <template #columns>
          <a-table-column title="" :width="50" data-index="user_avatar" tooltip>
            <template #cell="{ record }">
              <a-avatar>
                <img :alt="record.name ?? ''"
                  :src="record.user_avatar || 'https://lepao-cloud.xxoo365.top/view.php/25aa126dc406974ff3579a99a2c6501a.png'" />
              </a-avatar>
            </template>
          </a-table-column>
          <a-table-column title="学号" :width="110" data-index="student_num" ellipsis tooltip></a-table-column>
          <a-table-column title="姓名" :width="120">
            <template #cell="{ record }">
              {{ record.name ?? '请使用乐跑登录器更新账号信息' }}
            </template>
          </a-table-column>
          <a-table-column title="性别" :width="80" ellipsis tooltip :filterable="{
            filters: [
              { text: '男', value: 1 },
              { text: '女', value: 2 }
            ],
            filter: (value, record) => record.sex == value
          }">
            <template #cell="{ record }">
              <icon-man v-if="record.sex === 1" />
              <icon-woman v-else-if="record.sex === 2" />
              {{ record.sex === 1 ? '男' : (record.sex === 2 ? '女' : '') }}
            </template>
          </a-table-column>
          <a-table-column title="班级" :width="200" data-index="class_id" ellipsis tooltip></a-table-column>
          <a-table-column title="跑区" :width="120">
            <template #cell="{ record }">
              {{ record.area || '随机分配' }}
            </template>
          </a-table-column>
          <a-table-column title="通知方式" :width="200" ellipsis tooltip>
            <template #cell="{ record }">
              <span v-if="record.notice_type === 'email'"><icon-email /> {{ record.email ?? '未绑定' }}</span>
              <span v-else-if="record.notice_type === 'bot'"><icon-robot /> {{ record.bot_account ?? '未绑定' }}</span>
              <span v-else><icon-notification-close /> 无通知</span>
            </template>
          </a-table-column>
          <a-table-column title="帐号状态" :width="100" ellipsis tooltip>
            <template #cell="{ record }">
              <div v-if="record.state === 0" class="state">
                <div class="circle zero"></div>需登录
              </div>
              <div v-else-if="record.state === 1" class="state">
                <div class="circle one"></div>正常
              </div>
              <div v-else class="state">
                <div class="circle else"></div>状态异常
              </div>
            </template>
          </a-table-column>
          <a-table-column title="自动乐跑" :width="105" ellipsis tooltip :filterable="{
            filters: [
              { text: '开启', value: 1 },
              { text: '关闭', value: 0 }
            ],
            filter: (value, record) => record.auto_run == value
          }">
            <template #cell="{ record }">
              <a-tag color="green" v-if="record.auto_run">开启</a-tag>
              <a-tag color="red" v-else>关闭</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="自动乐跑星期" :width="155" ellipsis tooltip>
            <template #cell="{ record }">
              <span v-if="record.auto_run && record.auto_day && record.auto_day.length > 0">
                {{record.auto_day.slice().sort((a, b) => {
                  if (a === 0) return 1; if (b === 0) return -1; return a - b;
                }).map(day => auto_day.find(item => item.value === day)?.label).join(',').replace(/周/g, '')}}
              </span>
              <span v-else>-</span>
            </template>
          </a-table-column>
          <a-table-column title="自动乐跑时段" :width="130" ellipsis tooltip>
            <template #cell="{ record }">
              {{ record.auto_run ? autoTimeLabel(record) : '-' }}
            </template>
          </a-table-column>
          <a-table-column title="目标里程" :width="100" ellipsis tooltip>
            <template #cell="{ record }">
              {{ record.target_count === 0 ? '不限' : formatKm(record.target_count) }}
            </template>
          </a-table-column>
          <a-table-column title="自动距离区间" :width="155" ellipsis tooltip>
            <template #cell="{ record }">
              {{ record.auto_run ? formatAutoDistanceRangeLabel(record.auto_run_distance_min_km ?? 2, record.auto_run_distance_max_km ?? 2) : '—' }}
            </template>
          </a-table-column>
          <a-table-column title="自动配速区间" :width="150" ellipsis tooltip>
            <template #cell="{ record }">
              <span v-if="record.auto_run">{{ formatAutoPaceRangeLabel(record.pace_min_sec_per_km ?? 180, record.pace_max_sec_per_km ?? 600) }}</span>
              <span v-else>—</span>
            </template>
          </a-table-column>
          <a-table-column title="本月里程" :width="100" ellipsis tooltip>
            <template #cell="{ record }">
              {{ formatKm(record.term_num) }}
            </template>
          </a-table-column>
          <a-table-column title="累计里程" :width="110" ellipsis tooltip>
            <template #cell="{ record }">
              {{ formatKm(record.total_num) }}
            </template>
          </a-table-column>
          <a-table-column title="添加时间" :width="150" ellipsis tooltip :sortable="{
            sortDirections: ['ascend', 'descend']
          }">
            <template #cell="{ record }">
              {{ stramptoTime(record.create_time) }}
            </template>
          </a-table-column>
          <a-table-column title="上次更新时间" :width="150" ellipsis tooltip>
            <template #cell="{ record }">
              {{ record.update_time ? stramptoTime(record.update_time) : '待登录' }}
            </template>
          </a-table-column>
          <a-table-column title="备注" :width="200" ellipsis tooltip>
            <template #cell="{ record }">
              {{ record.notes }}
            </template>
          </a-table-column>

          <a-table-column title="" fixed="right" :width="100">
            <template #cell="{ record }">
              <a-dropdown :popup-max-height="false" trigger="hover">
                <a-button>操作 <icon-down /></a-button>
                <template #content>
                  <a-doption @click="editAccount(record)"><icon-edit /> 编辑账号</a-doption>
                  <!-- <a-doption @click="faceRecoRef.openModal(record)"><icon-video-camera /> 人脸采集</a-doption> -->
                  <a-doption @click="bindBotRef.openModal(record)"><icon-robot-add /> 绑定智能机器人</a-doption>
                  <a-doption @click="SingleRun(record)"><icon-play-circle /> 开始单次乐跑</a-doption>
                  <a-doption @click="ChangeAutoRun(record)"><icon-translate /> {{ record.auto_run ? '关闭' :
                    '开启' }}自动乐跑</a-doption>
                  <a-doption @click="UpdateSelfAccount(record)"><icon-refresh /> 更新账号信息</a-doption>
                  <a-doption @click="DeleteAccount(record)"><icon-minus-circle /> 解绑账号</a-doption>
                </template>
              </a-dropdown>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
  </div>

  <!-- 账号编辑对话框 -->
  <a-modal v-model:visible="visible" title="编辑账号" @cancel="handleCancel" @before-ok="handleBeforeOk" draggable
    :ok-loading="ok_loading" esc-to-close closable>
    <a-form :model="form">
      <a-form-item label="自动识别" v-if="!form.id">
        <a-textarea
          v-model="autoFillText"
          placeholder="粘贴包含学号、邮箱、跑区等信息的文本，点击“识别并填入”自动填写"
          :auto-size="{ minRows: 2, maxRows: 4 }"
          allow-clear
        />
        <template #extra>
          <a-space>
            <a-button type="primary" @click="handleAutoFill" size="small">识别并填入</a-button>
            <span class="auto-fill-tip">示例：2301234567，abc@qq.com，南山校区</span>
          </a-space>
        </template>
      </a-form-item>
      <a-form-item field="student_num" label="学号">
        <a-input v-model="form.student_num" placeholder="账号所有者学号，填写错误将无法登录" allow-clear />
      </a-form-item>
      <a-form-item field="notice_type" label="通知方式">
        <a-radio-group v-model="form.notice_type">
          <a-radio value="email"><icon-email /> 邮件</a-radio>
          <!-- <a-radio value="bot"><icon-robot /> 智能机器人</a-radio> -->
          <a-radio value="none"><icon-notification-close /> 无通知</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item field="email" label="通知邮箱" v-if="form.notice_type === 'email'">
        <a-auto-complete :data="email" @search="handleSearch" v-model="form.email" placeholder="用于接收乐跑失败、登录失效的通知"
          allow-clear />
      </a-form-item>
      <a-form-item field="area" label="乐跑跑区">
        <a-select v-model="form.area" placeholder="请选择乐跑跑区" default-value="">
          <a-option value="">随机分配</a-option>
          <a-option v-for="(item, index) in area" :key="index" :value="item">
            <span class="vipcontent">
              <span>{{ item }} </span>
            </span>
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="auto_run" label="自动乐跑开关">
        <a-switch v-model="form.auto_run" :checked-value="1" :unchecked-value="0" />
      </a-form-item>
      <a-form-item field="target_count" label="月度目标里程" v-if="form.auto_run">
        <a-input-number v-model="form.target_count" placeholder="0–200，0 表示不限制" mode="button" :min="0" :max="200"
          :precision="2" :step="0.5" />
        <template #extra>
          <div>月度里程（Km）达到目标后自动乐跑将关闭；填 0 表示不限制</div>
        </template>
      </a-form-item>
      <a-form-item field="auto_day" label="自动乐跑星期" v-if="form.auto_run">
        <a-checkbox-group v-model="form.auto_day" placeholder="请选择每天自动乐跑的星期" :options="auto_day" />
      </a-form-item>
      <a-form-item field="auto_time" label="自动乐跑时段" v-if="form.auto_run">
        <a-select v-model="form.auto_time" placeholder="请选择每天自动乐跑的时段" :options="auto_time" />
      </a-form-item>
      <a-form-item field="auto_run_distance_range" label="自动距离区间" v-if="form.auto_run">
        <a-space>
          <a-input-number
            v-model="form.auto_run_distance_min_km"
            mode="button"
            :min="1"
            :max="AUTO_SINGLE_RUN_MAX_KM"
            :precision="2"
            :step="0.1"
            placeholder="下限"
          />
          <span>~</span>
          <a-input-number
            v-model="form.auto_run_distance_max_km"
            mode="button"
            :min="1"
            :max="AUTO_SINGLE_RUN_MAX_KM"
            :precision="2"
            :step="0.1"
            placeholder="上限"
          />
        </a-space>
        <template #extra>
          <div>每次自动乐跑在区间内随机取值；上下限可相同（固定距离）；范围 1～10 km</div>
        </template>
      </a-form-item>
      <a-form-item field="pace_range" label="自动配速区间" v-if="form.auto_run">
        <a-space>
          <a-input v-model="form.pace_min_str" allow-clear placeholder="如 3:00" style="width: 7.5rem" />
          <span>–</span>
          <a-input v-model="form.pace_max_str" allow-clear placeholder="如 10:00" style="width: 7.5rem" />
        </a-space>
        <template #extra>
          <div>每公里配速，格式为 分:秒（如 5:30）；范围 3:00–10:00/km，每次自动乐跑在区间内随机</div>
        </template>
      </a-form-item>
      <a-form-item field="notes" label="备注">
        <a-textarea v-model="form.notes" placeholder="添加对账号的备注（非必填）" :max-length="{ length: 50 }" allow-clear
          show-word-limit />
      </a-form-item>
    </a-form>
  </a-modal>

  <faceModal :faceInfo="faceInfo" ref="faceRecoRef" />
  <bindBot ref="bindBotRef" />
  <SingleRunModal
    v-model:visible="singleRunVisible"
    :account="singleRunAccount"
    @success="getAccountsAsync"
  />
</template>

<script setup>
import { ref, reactive, onUnmounted, onMounted, h } from 'vue'
import { accountList, deleteAccount, addAccount, changeAutoRun, updateSelfAccount } from '@/api/lepao'
import { Modal, Notification, Message } from '@arco-design/web-vue'
import { IconSearch } from '@arco-design/web-vue/es/icon'
import userCard from '@/components/userCard/userCard.vue'
import faceModal from '@/components/FaceModal/faceModal.vue'
import bindBot from '@/components/BindBot/bindBot.vue'
import SingleRunModal from '@/components/SingleRunModal/SingleRunModal.vue'
import { useRoute } from 'vue-router'
import { getNotice, getSemesterTimestamps } from '@/utils/util'
import {
  formatKm,
  formatAutoPaceRangeLabel,
  formatAutoDistanceRangeLabel,
  formatSecPerKmAsMinSec,
  parsePaceMinSecInput
} from '@/utils/lepaoRecord'

/** 与后端 jkes.autoSingleRunMaxKm 默认一致，保存时由服务端再校验 */
const AUTO_SINGLE_RUN_MAX_KM = 10

const notice = ref('')

const email = ref([])
const faceInfo = ref({})
const faceRecoRef = ref(null)
const bindBotRef = ref(null)

const queryDataForm = reactive({
  area: '',
  student_num: '',
  email: '',
  username: '',
  state: -1,
  auto_time: 0,
  queryTime: []
})
const queryData = reactive({
  area: '',
  student_num: '',
  email: '',
  username: '',
  state: -1,
  auto_time: 0,
  queryTime: []
})

const pagination = reactive({
  total: 0,
  current: 1, // 默认从第1页开始
  pagesize: 20
})

const handleSearch = (value) => {
  const emailSuffix = ["qq.com", "163.com"]
  const input = (value || "").trim()

  if (!input) {
    email.value = []
    return
  }

  // 没有输入 @，直接拼接所有后缀
  if (!input.includes("@")) {
    email.value = emailSuffix.map(suffix => `${input}@${suffix}`)
    return
  }

  // 输入了 @ 但结尾是 @，拼接所有后缀
  if (input.endsWith("@")) {
    email.value = emailSuffix.map(suffix => `${input}${suffix}`)
    return
  }

  // 输入了 @ 且有部分后缀，智能匹配
  const [prefix, suffixPart] = input.split("@")
  email.value = emailSuffix
    .filter(suffix => suffix.startsWith(suffixPart))
    .map(suffix => `${prefix}@${suffix}`)
}

const area = ["学府大道校区", "南山校区"]
const state = [
  { label: '全部', value: -1 }, { label: '需登录', value: 0 }, { label: '正常', value: 1 }, { label: '状态异常', value: 2 }
]

const search = () => {
  pagination.current = 1

  queryData.area = queryDataForm.area
  queryData.student_num = queryDataForm.student_num
  queryData.email = queryDataForm.email
  queryData.username = queryDataForm.username
  queryData.state = queryDataForm.state
  queryData.auto_time = queryDataForm.auto_time
  queryData.queryTime = queryDataForm.queryTime

  getAccountsAsync()
}

const reset = () => {
  queryDataForm.area = ''
  queryDataForm.student_num = ''
  queryDataForm.email = ''
  queryDataForm.username = ''
  queryDataForm.state = -1
  queryDataForm.auto_time = 0
  queryDataForm.queryTime = getSemesterTimestamps()

  queryData.area = ''
  queryData.student_num = ''
  queryData.email = ''
  queryData.username = ''
  queryData.state = -1
  queryData.auto_time = 0
  queryData.queryTime = getSemesterTimestamps()

  getAccountsAsync()
}

// 分页 - 页码变化
const handlePageChange = (page) => {
  pagination.current = page
  getAccountsAsync()
}

// 分页 - 每页条数变化
const handlePageSizeChange = (size) => {
  pagination.pagesize = size
  pagination.current = 1 // 页大小变化后回到第一页
  getAccountsAsync()
}

const auto_day = [
  { label: '周一', value: 1 },
  { label: '周二', value: 2 },
  { label: '周三', value: 3 },
  { label: '周四', value: 4 },
  { label: '周五', value: 5 },
  { label: '周六', value: 6 },
  { label: '周日', value: 0 }
]

const auto_time = [
  { label: '随机分配', value: -1 },
  ...Array.from({ length: 17 }, (_, i) => {
    const hour = i + 7
    return { label: `${hour} ~ ${hour + 1}时`, value: hour }
  })
]

const autoTimeLabel = (record) => {
  if (record.auto_time === -1) {
    if (record.today_auto_time)
      return `随机-今日${record.today_auto_time}时`
    return '随机-待分配'
  }
  const match = auto_time.find(item => item.value === record.auto_time)
  return match ? match.label : '-'
}

const data = ref([])
const loading = ref(false)

const visible = ref(false)
const ok_loading = ref(false)
const autoFillText = ref('')
const form = reactive({
  id: null,
  student_num: '',
  email: '',
  area: '',
  auto_time: -1,
  auto_run: 1,
  notice_type: 'email',
  target_count: 30,
  auto_run_distance_min_km: 2.5,
  auto_run_distance_max_km: 3,
  pace_min_str: '6:00',
  pace_max_str: '10:00',
  auto_day: [0, 1, 2, 3, 4, 5, 6],
  notes: ''
})

const download = (device) => {
  const a = document.createElement('a')

  if (device === 'windows') {
    a.href = 'https:\/\/lepao-cloud.xxoo365.top/down.php\/682d99f9694c6fe76b64b86c5741a2d8.pdf'
    a.download = '哪吒乐跑-Windows操作说明.pdf'
  } else if (device === 'iphone') {
    a.href = 'https:\/\/lepao-cloud.xxoo365.top/down.php\/fba1d571166b4c95592c7c4e624a9390.pdf'
    a.download = '哪吒乐跑-iPhone操作说明.pdf'
  } else if (device === 'android') {
    a.href = 'https:\/\/lepao-cloud.xxoo365.top\/down.php\/3326850aa879cea586677a15af470beb.pdf'
    a.download = '哪吒乐跑-Android操作说明.pdf'
  } else if (device === 'page') {
    a.href = 'https:\/\/download.xxoo365.top'
  } else {
    return
  }

  a.target = '_blank'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

const normalizeText = (value) => (value || '').replace(/[\n\r\t，；、]/g, ' ').trim()

const matchArea = (text) => {
  const normalized = normalizeText(text)
  if (!normalized) return null

  const exact = area.find(item => normalized.includes(item))
  if (exact) return exact

  const areaAliasMap = [
    { keywords: ['南山'], value: '南山校区' },
    { keywords: ['学府'], value: '学府大道校区' },
  ]

  const matchedAlias = areaAliasMap.find(item => item.keywords.some(keyword => normalized.includes(keyword)))
  return matchedAlias ? matchedAlias.value : null
}

const handleAutoFill = () => {
  const text = normalizeText(autoFillText.value)
  if (!text) {
    Message.warning('请先粘贴需要识别的文本')
    return
  }

  const studentMatch = text.match(/\b2\d{9}\b/)
  const emailMatch = text.match(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/)
  const areaMatch = matchArea(text)

  let hitCount = 0

  if (studentMatch?.[0]) {
    form.student_num = studentMatch[0]
    hitCount += 1
  }
  if (emailMatch?.[0]) {
    form.email = emailMatch[0]
    form.notice_type = 'email'
    hitCount += 1
  }
  if (areaMatch) {
    form.area = areaMatch
    hitCount += 1
  }

  if (hitCount === 0) {
    Message.warning('未识别到可填写信息，请检查文本内容')
    return
  }

  Message.success(`识别成功，已填入 ${hitCount} 项信息`)
}

const editAccount = (item) => {
  if (item) {
    form.id = item.id
    form.student_num = item.student_num
    form.email = item.email
    form.area = item.area
    form.auto_time = item.auto_time
    form.auto_run = item.auto_run
    form.target_count = Number(item.target_count)
    form.auto_run_distance_min_km = Number(item.auto_run_distance_min_km ?? 2)
    form.auto_run_distance_max_km = Number(item.auto_run_distance_max_km ?? item.auto_run_distance_min_km ?? 2)
    {
      const a = formatSecPerKmAsMinSec(item.pace_min_sec_per_km ?? 180)
      const b = formatSecPerKmAsMinSec(item.pace_max_sec_per_km ?? 600)
      form.pace_min_str = a === '—' ? '3:00' : a
      form.pace_max_str = b === '—' ? '10:00' : b
    }
    form.notice_type = item.notice_type || 'email'
    form.auto_day = item.auto_day
    form.notes = item.notes
    autoFillText.value = ''
  } else {
    form.id = null
    form.student_num = ''
    form.email = ''
    form.auto_run = 1
    form.auto_time = -1
    form.target_count = 30
    form.auto_run_distance_min_km = 2.5
    form.auto_run_distance_max_km = 3
    form.pace_min_str = '6:00'
    form.pace_max_str = '10:00'
    form.auto_day = [0, 1, 2, 3, 4, 5, 6]
    form.notice_type = 'email'
    form.area = ''
    form.notes = ''
    autoFillText.value = ''
  }
  visible.value = true
}

const handleBeforeOk = async (done) => {
  try {
    ok_loading.value = true
    const { student_num, email, notice_type } = form
    if (!student_num || (!email && notice_type === 'email')) {
      Message.error('请填写完整的账号信息')
      return false
    }

    const sid = String(student_num || '').trim()
    if (!/^[A-Za-z0-9_-]{2,64}$/.test(sid)) {
      Message.error('学号/账号编码格式不正确（2–64 位字母数字下划线横线）')
      return false
    }

    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
    if (notice_type === 'email' && !emailRegex.test(email)) {
      Message.error('请检查邮箱格式是否正确')
      return false
    }

    const pLo = parsePaceMinSecInput(form.pace_min_str)
    const pHi = parsePaceMinSecInput(form.pace_max_str)
    if (pLo == null || pHi == null) {
      Message.error('配速格式不正确，请使用 分:秒，如 5:30 或 10:00')
      return false
    }
    if (pLo < 180 || pLo > 600 || pHi < 180 || pHi > 600) {
      Message.error('配速须在 3:00–10:00/km 范围内')
      return false
    }
    if (pLo > pHi) {
      Message.error('配速下限不能慢于上限（左侧应更快，分:秒更小）')
      return false
    }

    if (form.auto_run) {
      const tk = Number(form.target_count)
      if (!Number.isFinite(tk) || tk < 0 || tk > 200) {
        Message.error('目标里程须在 0–200 公里之间')
        return false
      }
      const dMin = Number(form.auto_run_distance_min_km)
      const dMax = Number(form.auto_run_distance_max_km)
      if (
        !Number.isFinite(dMin) ||
        !Number.isFinite(dMax) ||
        dMin < 1 ||
        dMin > AUTO_SINGLE_RUN_MAX_KM ||
        dMax < 1 ||
        dMax > AUTO_SINGLE_RUN_MAX_KM
      ) {
        Message.error(`自动乐跑距离区间须在 1–${AUTO_SINGLE_RUN_MAX_KM} 公里之间`)
        return false
      }
      if (dMin > dMax) {
        Message.error('自动乐跑距离下限不能大于上限')
        return false
      }
    }

    const data = {
      id: form.id,
      student_num: form.student_num,
      email: form.email,
      area: form.area,
      auto_time: form.auto_time,
      auto_run: form.auto_run,
      notice_type: form.notice_type,
      target_count: form.target_count,
      auto_run_distance_min_km: form.auto_run_distance_min_km,
      auto_run_distance_max_km: form.auto_run_distance_max_km,
      auto_day: form.auto_day,
      notes: form.notes,
      pace_min_sec_per_km: pLo,
      pace_max_sec_per_km: pHi
    }

    const res = await addAccount(data)
    if (!res || res.code !== 0) {
      Notification.error({
        title: '保存乐跑账号失败！',
        content: res?.msg ?? '请稍后再试'
      })
      return false
    }

    Message.success('保存成功！')
    if (form.notice_type === 'bot' && res.data && !res.data.umo) {
      bindBotRef.value.openModal(res.data)
    }
    done()
    getAccountsAsync()

  } catch (error) {
    Notification.error({
      title: '保存乐跑账号失败！',
      content: error.message || '请稍后再试'
    })
    return false
  } finally {
    ok_loading.value = false
  }
}

const handleCancel = () => {
  visible.value = false
}

const getAccountsAsync = async () => {
  loading.value = true
  await getAccounts()
  loading.value = false
}

const getAccounts = async () => {
  try {
    const reqData = {
      ...queryData,
      pagesize: pagination.pagesize,
      current: pagination.current
    }
    const res = await accountList(reqData)
    if (!res || res.code !== 0)
      return Notification.error({
        title: '获取乐跑账号数据失败！',
        content: res?.msg ?? '请稍后再试'
      })

    data.value = res.data
    pagination.total = res.pagination.total
  } catch (error) {
    Notification.error({
      title: '获取乐跑账号数据失败！',
      content: error.message || '请稍后再试'
    })
  }
}

const GetNotice = async () => {
  const { path } = useRoute()
  const res = await getNotice(path)
  notice.value = res
}

const singleRunVisible = ref(false)
const singleRunAccount = ref(null)

const SingleRun = (item) => {
  if (item.state !== 1) {
    return Notification.warning({
      title: '当前乐跑账号需登录，请登录后再试',
      content: '如有疑问请联系哪吒乐跑客服'
    })
  }
  singleRunAccount.value = item
  singleRunVisible.value = true
}

const DeleteAccount = async (item) => {
  Modal.confirm({
    title: '解绑账号',
    content: () => h('div', [
      h('p', '您是否要解绑该账号？')
    ]),
    onOk: async () => {
      const res = await deleteAccount({ id: item.id })
      if (!res || res.code !== 0)
        return Notification.error({
          title: '解绑失败',
          content: res?.msg ?? '请稍后再试'
        })
      Message.success('解绑成功！')
      getAccounts()
    }
  })
}

const ChangeAutoRun = async (record) => {
  const oldValue = record.auto_run;
  record.auto_run = oldValue === 1 ? 0 : 1;
  try {
    const res = await changeAutoRun({ id: record.id });
    if (!res || res.code !== 0) {
      record.auto_run = oldValue;
      Notification.error({
        title: '切换自动乐跑状态失败！',
        content: res?.msg ?? '请稍后再试'
      })
    } else {
      Message.success(`自动乐跑状态已${record.auto_run === 1 ? '开启' : '关闭'}`)
      getAccounts()
    }
  } catch (error) {
    record.auto_run = oldValue;
    Message.error('切换自动乐跑状态失败！');
  }
}

const UpdateSelfAccount = async (record) => {
  try {
    const res = await updateSelfAccount({
      student_num: record.student_num
    })
    if (!res || res.code !== 0) {
      return Notification.error({
        title: '更新账号信息失败！',
        content: res?.msg ?? '请稍后再试'
      })
    }
    Message.success('更新账号信息成功！')
    getAccounts()
  } catch (error) {
    Notification.error({
      title: '更新账号信息失败！',
      content: error.message || '请稍后再试'
    })
  }
}

const stramptoTime = (time) => {
  return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}

let timer = null

// 轮询
const startPolling = () => {
  if (!timer) {
    timer = setInterval(async () => {
      await getAccounts()
    }, 5000)
  }
}

// 停止轮询
const stopPolling = () => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}

onMounted(async () => {
  queryData.queryTime = getSemesterTimestamps()
  queryDataForm.queryTime = getSemesterTimestamps()
  getAccountsAsync()
  GetNotice()
  startPolling()
})

// 组件销毁时停止轮询
onUnmounted(() => {
  stopPolling()
})
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}

.queryForm {
  margin-top: 20px;
  padding: 0 15px
}

.table {
  font-family: -apple-system, BlinkMacSystemFont;

  .state {
    display: flex;
    align-items: center;

    .circle {
      border-radius: 50%;
      height: 8px;
      min-height: 8px;
      width: 8px;
      min-width: 8px;
      margin-right: 5px;
    }

    .zero {
      background-color: rgb(var(--orange-6));
    }

    .one {
      background-color: rgb(var(--green-6));
    }

    .else {
      background-color: rgb(var(--red-6));
    }
  }
}

.custom-filter {
  padding: 20px;
  background: var(--color-bg-5);
  border: 1px solid var(--color-neutral-3);
  border-radius: var(--border-radius-medium);
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
}

.custom-filter-footer {
  display: flex;
  justify-content: space-between;
}

.vipcontent {
  display: flex;
  align-items: center;
}

.auto-fill-tip {
  color: rgb(var(--gray-6));
}
</style>