tkNewAdmin/src/views/server/employeehosts/index.vue

<template>
  <transition name="fade">
    <div v-show="isShowSearch">
      <ContentWrap>
        <!-- 搜索工作栏 -->
        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
          <el-form-item :label="$t('employee.hostsId')" prop="hostsId">
            <el-input v-model="queryParams.hostsId" :placeholder="$t('employee.placeHostId')" clearable
              @keyup.enter="handleQuery" class="!w-240px" />
          </el-form-item>
          <el-form-item :label="$t('employee.hostsLevel')" prop="hostsLevel">
            <el-select v-model="queryParams.hostsLevel" :placeholder="$t('employee.placeHostLevel')" clearable
              class="!w-240px" multiple>
              <el-option v-for="dict in getStrDictOptions(DICT_TYPE.HOST_LEVEL)" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('employee.hostsCoins')" prop="hostsCoins">
            <el-input v-model="queryParams.hostsCoinsMin" :placeholder="$t('employee.min')" clearable
              @keyup.enter="handleQuery" class="!w-115px" />
            <span>&nbsp;-&nbsp;</span>
            <el-input v-model="queryParams.hostsCoinsMax" :placeholder="$t('employee.max')" clearable
              @keyup.enter="handleQuery" class="!w-115px" />
          </el-form-item>
          <el-form-item :label="$t('employee.onlineFans')" prop="onlineFans">
            <el-input v-model="queryParams.onlineFansMin" :placeholder="$t('employee.min')" clearable
              @keyup.enter="handleQuery" class="!w-115px" />
            <span>&nbsp;-&nbsp;</span>
            <el-input v-model="queryParams.onlineFansMax" :placeholder="$t('employee.max')" clearable
              @keyup.enter="handleQuery" class="!w-115px" />
          </el-form-item>
          <el-form-item :label="$t('employee.fans')" prop="fans">
            <el-input v-model="queryParams.fansMin" :placeholder="$t('employee.min')" clearable
              @keyup.enter="handleQuery" class="!w-115px" />
            <span>&nbsp;-&nbsp;</span>
            <el-input v-model="queryParams.fansMax" :placeholder="$t('employee.max')" clearable
              @keyup.enter="handleQuery" class="!w-115px" />
          </el-form-item>
          <el-form-item :label="$t('employee.fllowernum')" prop="fllowernum">
            <el-input v-model="queryParams.fllowernumMin" :placeholder="$t('employee.min')" clearable
              @keyup.enter="handleQuery" class="!w-115px" />
            <span>&nbsp;-&nbsp;</span>
            <el-input v-model="queryParams.fllowernumMax" :placeholder="$t('employee.max')" clearable
              @keyup.enter="handleQuery" class="!w-115px" />
          </el-form-item>

          <el-form-item :label="t('newHosts.hostsCountry')" prop="region">
            <el-select v-model="queryParams.region" :placeholder="t('newHosts.placeHostsCountry')" clearable
              class="!w-240px" @change="changeCountry(queryParams.region)">
              <el-option v-for="dict in getStrDictOptions(DICT_TYPE.COUNTRY_GROUP)" :key="dict.value"
                :label="$t(dict.label)" :value="dict.value" />
            </el-select>
          </el-form-item>

          <el-form-item :label="t('newHosts.hostsCountryinfo')" prop="country">
            <el-select v-model="queryParams.country" :placeholder="t('newHosts.placeHostsCountry')" clearable
              class="!w-240px">
              <el-option v-for="dict in countryinfoList" :key="dict.id" :label="dict.countryName"
                :value="dict.countryName" />
            </el-select>
          </el-form-item>

          <el-form-item :label="$t('employee.hostsKind')" prop="hostsKind">
            <el-select v-model="queryParams.hostsKind" :placeholder="t('newHosts.placeHostsKind')" clearable
              class="!w-240px" @change="changeCountry(queryParams.hostsKind)">
              <el-option v-for="dict in getStrDictOptions(DICT_TYPE.HOSTS_KIND)" :key="dict.value"
                :label="$t(dict.label)" :value="dict.value" />
            </el-select>
          </el-form-item>

          <el-form-item :label="$t('employee.createTime')" prop="createTime">
            <el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="date"
              class="!w-240px" />
          </el-form-item>

          <el-form-item :label="$t('employee.updataTime')" prop="updataTime">
            <el-date-picker v-model="queryParams.updateTime" value-format="YYYY-MM-DD HH:mm:ss" type="date"
              class="!w-240px" />
          </el-form-item>
          <el-form-item label="旗帜" prop="flag">
            <el-select v-model="queryParams.flag" placeholder="请选择状态" clearable class="!w-240px" style="width: 50px">
              <el-option label="请选择" :value="''" />
              <el-option v-for="dict in getStrDictOptions(DICT_TYPE.FLAG_TYPE)" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item :label="$t('employee.userId')" prop="userId">
            <el-select v-model="queryParams.userId" :placeholder="$t('employee.placeAllocationUser')" clearable
              class="!w-240px">
              <el-option v-for="(user, index) in allocationUserList" :key="index" :label="user.label"
                :value="user.value" />
            </el-select>
          </el-form-item> -->
          <el-form-item :label="$t('employee.invitationType')" prop="invitationType">
            <el-select v-model="queryParams.invitationType" :placeholder="$t('employee.placeInvitationType')" clearable
              class="!w-240px">
              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.HOSTS_INVITATION_TYPE)" :key="dict.value"
                :label="$t(dict.label)" :value="dict.value" />
            </el-select>

          </el-form-item>
          <el-form-item :label="$t('employee.operationStatus')" prop="operationStatus">
            <el-select v-model="queryParams.operationStatus" :placeholder="$t('employee.placeOperationStatus')"
              clearable class="!w-240px">
              <el-option v-for="dict in getIntDictOptions(DICT_TYPE.OPERATION_STATE)" :key="dict.value"
                :label="$t(dict.label)" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('newHosts.sortName')" prop="sortName">
            <el-select v-model="queryParams.sortName" :placeholder="t('newHosts.sortName')" clearable class="!w-240px">
              <el-option v-for="dict in getStrDictOptions(DICT_TYPE.SORT_TYPE)" :key="dict.value" :label="t(dict.label)"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item :label="t('newHosts.sortType')" prop="sortType">
            <el-select v-model="queryParams.sort" :placeholder="t('newHosts.sortType')" clearable class="!w-240px">
              <el-option v-for="dict in getStrDictOptions(DICT_TYPE.SORT_STATE)" :key="dict.value"
                :label="t(dict.label)" :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery">
              <Icon icon="ep:search" class="mr-5px" /> {{ $t('employee.search') }}
            </el-button>
            <el-button @click="resetQuery">
              <Icon icon="ep:refresh" class="mr-5px" /> {{ $t('employee.reset') }}
            </el-button>
            <el-button v-if="!isMobile" @click="exportAi">
              <Icon icon="ep:copy-document" class="mr-5px" /> {{ $t('employee.exportAi') }}
            </el-button>
            <el-button v-if="!isMobile" type="success" @click="handleExport" :loading="exportLoading">
              <Icon icon="ep:copy-document" class="mr-5px" /> {{ t('newHosts.export') }}
            </el-button>
            <!-- <el-button type="success" plain @click="handleExport" v-hasPermi="['server:new-hosts:export']">
              <Icon icon="ep:download" class="mr-5px" /> {{ t('newHosts.export') }}
            </el-button> -->
            <el-button v-if="!isMobile" :disabled="checkedIds.length === 0" type="danger" @click="handleDeleteList">
              <Icon icon="ep:delete" class="mr-5px" /> 批量删除
            </el-button>
            <el-button v-else type="danger" @click="handleDeletePageList">
              <Icon icon="ep:delete" class="mr-5px" /> 删除本页
            </el-button>
            <el-switch style="margin-left: 20px;" v-model="isUpdata" />复制且转化
          </el-form-item>
        </el-form>
      </ContentWrap>
    </div>
  </transition>

  <!-- 列表区域 -->
  <ContentWrap>
    <div style="display: flex;align-items: center;gap: 20px;">
      <el-switch v-model="isMobile" size="large" active-text="卡片" inactive-text="列表" />

      <el-switch v-model="Simplify" size="large" active-text="简表" inactive-text="全表" />

      <div class="center-justify">
        <el-button type="primary" @click="isShowSearch = !isShowSearch">{{ isShowSearch ? $t('employee.showSearch') :
          $t('employee.hideSearch') }}</el-button>
      </div>

    </div>

    <!-- ✅ PC 端使用 table -->
    <el-table v-if="!isMobile" v-loading="loading" :data="list" :stripe="true"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />

      <el-table-column :label="$t('employee.hostsId')" align="center" prop="hostsId">
        <template #default="scope">
          <div style="color: green; text-decoration: underline;" @click="openHtml(scope.row, scope.row.hostsId)">
            {{ scope.row.hostsId }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="hostsId" width="75">
        <template #default="scope">
          <el-link type="primary" @click="handleCopy(scope.row.hostsId, scope.row)">复制</el-link>
        </template>
      </el-table-column>

      <el-table-column v-if="!Simplify" :label="$t('employee.hostsLevel')" align="center" prop="hostsLevel" />

      <el-table-column v-if="!Simplify" :label="t('newHosts.invitationType')" align="center" prop="invitationType"
        width="200">
        <template #default="scope">
          <el-tag size="small" :type="scope.row.invitationType == 1 ? 'primary' : 'warning'">
            {{ dictLabelI18n(DICT_TYPE.HOSTS_INVITATION_TYPE, scope.row.invitationType) || '-' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column v-if="!Simplify" label="uid" align="center" prop="uid" />

      <el-table-column v-if="!Simplify" :label="$t('employee.hostsCoins')" align="center" prop="hostsCoins" />

      <!-- <el-table-column :label="$t('employee.invitationType')" align="center" prop="invitationType" /> -->
      <el-table-column v-if="!Simplify" :label="$t('employee.onlineFans')" align="center" prop="onlineFans" />

      <el-table-column v-if="!Simplify" :label="$t('employee.fans')" align="center" prop="fans" />

      <el-table-column v-if="!Simplify" :label="$t('employee.fllowernum')" align="center" prop="fllowernum" />

      <el-table-column v-if="!Simplify" :label="$t('employee.yesterdayCoins')" align="center" prop="yesterdayCoins" />

      <el-table-column v-if="!Simplify" :label="$t('employee.hostsCountry')" align="center" prop="country">
        <template #default="scope">
          {{ t('newHosts.min') == '最小值' ? scope.row.country : scope.row.countryEng }}
        </template>
      </el-table-column>

      <el-table-column v-if="!Simplify" :label="$t('employee.hostsKind')" align="center" prop="hostsKind" />

      <el-table-column v-if="!Simplify" :label="$t('employee.remark')" align="center" prop="remake" />

      <el-table-column v-if="!Simplify" :label="$t('employee.flag')" align="center" prop="flag">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.FLAG_TYPE" :value="scope.row.flag" />
        </template>
      </el-table-column>

      <el-table-column :label="$t('employee.operationStatus')" align="center" prop="operationStatus">
        <template #default="scope">
          <el-tag size="small" :type="scope.row.operationStatus == 1 ? 'primary' : 'warning'">
            {{ dictLabelI18n(DICT_TYPE.OPERATION_STATE, scope.row.operationStatus) || '-' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column v-if="!Simplify" :label="$t('employee.createTime')" align="center" prop="createTime"
        :formatter="dateFormatter" width="180px" />

      <el-table-column v-if="!Simplify" :label="$t('employee.updateTime')" align="center" prop="updateTime"
        :formatter="dateFormatter" width="180px" />

      <el-table-column v-if="!Simplify" :label="$t('employee.action')" align="center" min-width="120px">
        <template #default="scope">
          <el-button link type="primary" @click="openForm('update', scope.row.id)">{{ $t('employee.edit') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- ✅ 移动端使用卡片列表 -->
    <div v-else>
      <div v-if="simpleModel">
        <!-- ✅ PC 端使用 table -->
        <el-table v-loading="loading" :data="list" :stripe="true" @selection-change="handleSelectionChange">
          <!-- <el-table-column type="selection" width="55" /> -->

          <el-table-column :label="$t('employee.hostsId')" align="center" prop="hostsId">
            <template #default="scope">
              <div style="color: green; text-decoration: underline;" @click="openHtml(scope.row, scope.row.hostsId)">
                {{ scope.row.hostsId }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('employee.operationStatus')" align="center" prop="operationStatus">
            <template #default="scope">
              <el-tag size="small" :type="scope.row.operationStatus == 1 ? 'success' : 'info'">
                {{ dictLabelI18n(DICT_TYPE.OPERATION_STATE, scope.row.operationStatus) || '-' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column :label="$t('employee.remark')" align="center" prop="remake" />


          <!-- <el-table-column :label="$t('employee.createTime')" align="center" prop="createTime"
            :formatter="dateFormatter" width="180px" />
          <el-table-column :label="$t('employee.updateTime')" align="center" prop="updateTime"
            :formatter="dateFormatter" width="180px" />
          <el-table-column :label="$t('employee.action')" align="center" min-width="120px">
            <template #default="scope">
              <el-button link type="primary" @click="openForm('update', scope.row.id)">{{ $t('employee.edit')
              }}</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div v-else>
        <div v-for="(item, index) in list" :key="index" class="mobile-card">
          <div class="card-row" style="color:green;">
            <b>{{ $t('employee.hostsId') }}：</b><span @click="openHtml(item, item.hostsId)"
              style=" text-decoration: underline;margin-right: 50px;">{{ item.hostsId }}</span>
            <el-link @click="handleCopy(item.hostsId, item)" type="primary">复制id</el-link>
          </div>

          <!-- <div class="card-row"><b>{{ $t('employee.userId') }}：</b>{{ item.userId }}</div> -->
          <div class="card-row"><b>{{ $t('employee.hostsLevel') }}：</b>{{ item.hostsLevel }}</div>
          <div class="card-row"><b>{{ $t('employee.hostsCoins') }}：</b>{{ item.hostsCoins }}</div>
          <div class="card-row"><b>{{ $t('employee.fans') }}：</b>{{ item.fans }}</div>
          <div class="card-row"><b>{{ $t('employee.fllowernum') }}：</b>{{ item.fllowernum }}</div>
          <div class="card-row"><b>{{ $t('employee.hostsCountry') }}：</b>{{ item.country }}</div>
          <div class="card-row"><b>{{ $t('employee.hostsKind') }}：</b>{{ item.hostsKind }}</div>
          <div class="card-row"><b>{{ $t('employee.remark') }}：</b>{{ item.remake }}</div>
          <div class="card-row"><b>{{ $t('employee.flag') }}：</b><dict-tag :type="DICT_TYPE.FLAG_TYPE"
              :value="item.flag" />
          </div>
          <div class="card-row"><b>{{ $t('employee.operationStatus') }}：</b>
            <el-tag size="small" :type="item.operationStatus == 1 ? 'success' : 'info'">
              {{ dictLabelI18n(DICT_TYPE.OPERATION_STATE, item.operationStatus) || '-' }}
            </el-tag>
          </div>
          <div class="card-row"><b>{{ $t('employee.createTime') }}：</b>{{ formatTimestamp(item.createTime) }}</div>
          <div class="card-row"><b>{{ $t('employee.updateTime') }}：</b>{{ formatTimestamp(item.updateTime) }}</div>
          <div class="card-row action-row">
            <el-button link type="primary" @click="openForm('update', item.id, index)">{{ $t('employee.edit')
            }}</el-button>
            <el-button link type="danger" @click="handleDelete(item.id)">{{ $t('employee.delete')
            }}</el-button>
          </div>
        </div>
      </div>
    </div>
    <MobilePagination v-if="isMobile" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
      :total="total" :page-sizes="[10, 20, 30, 50]" @size-change="getList()" @load="getList()" @load-pre="getList()" />

    <!-- ✅ PC 显示分页，移动端隐藏 -->
    <Pagination v-if="!isMobile" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
      @pagination="getList" />
  </ContentWrap>

  <!-- 表单弹窗 -->
  <EmployeeHostsForm ref="formRef" @success="formSuccess" />
</template>

<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { ElMessage } from 'element-plus'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { EmployeeHostsApi, EmployeeHostsVO } from '@/api/server/employeehosts'
import EmployeeHostsForm from './EmployeeHostsForm.vue'
import { getAllocation, getCountry } from '@/api/system/user'
import { useCache } from '@/hooks/web/useCache'
import { func } from 'vue-types'
import MobilePagination from '@/components/MobilePagination.vue'
import { useDictStore } from '@/store/modules/dict'  // 如果你项目里有字典 store
const dictStore = useDictStore?.() // 有就用；没有的话把 dictStore 相关行删掉

let isUpdata = ref(false)
// 统一用字符串比较，自动识别并翻译 i18n key
function dictLabelI18n(type: string, val: any) {
  const v = val == null ? '' : String(val)

  // 优先从 store 取；若没有，就从你现有的工具取（getIntDictOptions / getStrDictOptions）
  const opts =
    (dictStore?.getDictOptions?.(type) as any[]) ||
    getIntDictOptions(type) ||
    getStrDictOptions(type) ||
    []

  const hit = opts.find(o => String(o.value) === v)
  const label = hit?.label ?? ''
  // 形如 a.b 或包含点号的，大概率是 i18n key，则用 t() 翻
  return label && label.includes('.') ? t(label) : label
}





const { wsCache } = useCache()

let simpleModel = ref(false)

/** 员工分配主播 列表 */
defineOptions({ name: 'EmployeeHosts' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<EmployeeHostsVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 20,
  hostsId: undefined,
  hostsLevel: undefined,
  onlineFansMin: undefined,
  onlineFansMax: undefined,
  fansMin: undefined,
  fansMax: undefined,
  hostsCoinsMin: undefined,
  hostsCoinsMax: undefined,
  fllowernumMin: undefined,
  fllowernumMax: undefined,
  invitationType: undefined,
  yesterdayCoins: undefined,
  country: undefined,
  region: undefined,
  flag: undefined,
  hostsKind: undefined,
  isAssigned: undefined,
  sortName: "createTime",  //排序字段
  sort: 'desc',    //排序方式
  createTime: [],
  updateTime: [],
  userId: undefined,
  operationStatus: undefined,
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
let isShowSearch = ref(true) // 是否显示搜索
let allocationUserList = ref([
  {
    label: '分配用户1',
    value: '1'
  }
]) //选中的分配用户
let selectHostList = ref([]) //选中的主播列表
let allocationUser = ref() //选中的分配用户
let countryinfoList = ref([])

/** 批量删除按钮操作 */
const checkedIds = ref<number[]>([])
const checkedPageIds = ref<number[]>([])
/** 查询列表pc直接赋值 */
const getList = async () => {
  loading.value = true
  try {
    const data = await EmployeeHostsApi.getEmployeeHostsPage(queryParams)
    list.value = data.list
    total.value = data.total
    checkedPageIds.value = data.list.map((row) => row.id)
    console.log(checkedPageIds.value)
  } finally {
    loading.value = false
  }
}
/** 查询列表手机叠加赋值 */
const getListPhone = async () => {
  loading.value = true
  try {
    const data = await EmployeeHostsApi.getEmployeeHostsPage(queryParams)
    data.list.forEach(element => {
      list.value.push(element)
    });
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.fansMin = undefined
  queryParams.fansMax = undefined
  queryParams.hostsCoinsMin = undefined
  queryParams.hostsCoinsMax = undefined
  queryParams.fllowernumMin = undefined
  queryParams.fllowernumMax = undefined
  queryParams.onlineFansMin = undefined
  queryParams.onlineFansMax = undefined
  queryParams.yesterdayCoins = undefined
  queryParams.isAssigned = undefined

  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number, index?: number) => {
  formRef.value.open(type, id, index)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await EmployeeHostsApi.deleteEmployeeHosts(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch { }
}
/** 删除按钮操作 */
const handleDeleteList = async () => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await EmployeeHostsApi.deleteEmployeeHostsList(checkedIds.value)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch { }
}
/** 删除本页按钮操作 */
const handleDeletePageList = async () => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await EmployeeHostsApi.deleteEmployeeHostsList(checkedPageIds.value)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch { }
}
/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await EmployeeHostsApi.exportEmployeeHosts(queryParams)
    download.excel(data, '员工分配主播.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
// /** 查询员工 */
// const getAllocationList = async () => {
//   loading.value = true
//   allocationUserList.value = []
//   try {
//     const data = await getAllocation(wsCache.get('user').user.deptId)
//     console.log('data', data)
//     data.forEach((item) => {
//       if (wsCache.get('user').user.id == item.id) {

//       } else {
//         allocationUserList.value.push({
//           label: item.nickname,
//           value: item.id
//         })
//       }


//     })
//     console.log(allocationUserList.value)
//   } finally {
//     loading.value = false
//   }
// }

function openHtml(item, id) {
  let data = item
  data.operationStatus = 1
  EmployeeHostsApi.updateEmployeeHosts({ id: data.id, userId: data.userId, hostsId: data.hostsId, operationStatus: 1 }).then(res => {
    getList()
  })
  window.open(`https://www.tiktok.com/@${id}`)

}
const loadList = () => {


}

const loadpreviousList = () => {
  if (queryParams.pageNo > 1) {
    getList()
  }
}

function formSuccess(data, index) {
  if (isMobile.value) {
    console.log(data, index)
    list.value[index] = data
  } else {
    getList()
  }

}

function formatTimestamp(milliseconds) {
  const date = new Date(milliseconds); // 直接使用毫秒级时间戳
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}


//分配按钮操作
const handleSelectionChange = (val) => {
  selectHostList.value = val
  checkedIds.value = val.map((row) => row.id)
  console.log(selectHostList.value)
}

function exportAi() {
  if (selectHostList.value.length === 0) {
    ElMessage.error('请选择主播')
    return
  }

  const data = selectHostList.value.map(item => item.hostsId).join('\n')

  const copyToClipboard = async (text) => {
    // 优先使用 Clipboard API
    if (navigator.clipboard && window.isSecureContext) {
      try {
        await navigator.clipboard.writeText(text)
        ElMessage.success('✅ 复制成功 ' + selectHostList.value.length + ' 条数据')
      } catch (err) {
        ElMessage.error('❌ 复制失败')
        console.error(err)
      }
    } else {
      // fallback 兼容方案
      const textarea = document.createElement('textarea')
      textarea.value = text
      textarea.style.position = 'fixed' // 避免跳动
      textarea.style.opacity = '0'
      document.body.appendChild(textarea)
      textarea.select()
      try {
        const result = document.execCommand('copy')
        if (result) {
          ElMessage.success('✅（兼容模式）复制成功 ' + selectHostList.value.length + ' 条数据')
        } else {
          ElMessage.error('❌（兼容模式）复制失败')
        }
      } catch (err) {
        ElMessage.error('❌（兼容模式）复制异常')
        console.error(err)
      } finally {
        document.body.removeChild(textarea)
      }
    }
  }

  copyToClipboard(data)
}


function AllocationFun() {
  console.log(allocationUser.value)
  console.log(selectHostList.value)
}

function handleCopy(text, data) {
  // fallback 兼容方案
  const textarea = document.createElement('textarea')
  textarea.value = text
  textarea.style.position = 'fixed' // 避免跳动
  textarea.style.opacity = '0'
  document.body.appendChild(textarea)
  textarea.select()
  try {
    const result = document.execCommand('copy')
    if (result) {
      ElMessage.success('✅复制成功 ')
      if (isUpdata.value) {
        EmployeeHostsApi.updateEmployeeHosts({ id: data.id, userId: data.userId, hostsId: data.hostsId, operationStatus: 1 }).then(res => {
          getList()
        })
      }

    } else {
      ElMessage.error('❌复制失败')
    }
  } catch (err) {
    ElMessage.error('❌复制异常')
    console.error(err)
  } finally {
    document.body.removeChild(textarea)
  }
}

const isMobile = ref(window.innerWidth <= 768)

const Simplify = ref(false)

onMounted(() => {
  getList()
  // getAllocationList()
  //实时监听实际还是电脑
  window.addEventListener('resize', () => {
    if ((window.innerWidth <= 768) != isMobile.value) {
      getList()
    }
    isMobile.value = window.innerWidth <= 768

  })


})

function changeCountry(region) {
  console.log(region)
  getCountry(region).then((res) => {
    countryinfoList.value = res

  })
}
// /** 初始化 **/
// onMounted(() => {
//   getList()
// })
</script>

<style scoped>
.center-align {
  display: flex;
  justify-content: space-between;

}

.center-justify {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@media screen and (max-width: 768px) {
  .mobile-card {
    background: #fff;
    margin: 12px;
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-size: 14px;
  }

  .card-row {
    margin-bottom: 6px;
    word-break: break-word;
  }

  .card-row b {
    color: #555;
    font-weight: 500;
    margin-right: 4px;
  }

  .action-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
  }
}
</style>