art-design/src/views/admin/inquiry_system/index.vue

<!-- eslint-disable vue/no-parsing-error -->
<!-- eslint-disable vue/valid-attribute-name -->
<!-- eslint-disable prettier/prettier -->
<template>
  <div class="boxshadow">
    <section class="search-bar art-custom-card">
      <el-form v-model:filter="formFilters" label-position="left">
        <el-row class="search-form-row" :gutter="12">
          <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4">
            <el-form-item label="关键字" label-width="70px">
              <el-input v-model="filter.keyword" placeholder="请输入关键字" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4">
            <el-form-item label="状态" label-width="70px">
              <el-select v-model="filter.status">
                <el-option label="全部" value="" />
                <el-option label="待发布" value="0" />
                <el-option label="待跟踪" value="1" />
                <el-option label="已跟踪" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4">
            <el-form-item label="渠道" label-width="70px">
              <el-select v-model="filter.channel">
                <el-option v-for="v in channelOptions" :key="v.id" :label="v.name" :value="v.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-form-item label="时间" label-width="70px">
              <el-date-picker
                v-model="filter.time"
                type="daterange"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                rangeSeparator="至"
                startPlaceholder="开始日期"
                endPlaceholder="结束日期"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" class="action-column">
            <div
              class="action-buttons-wrapper"
              :style="{
                'justify-content': isMobile ? 'flex-end' : 3 <= 2 ? 'flex-start' : 'flex-end'
              }"
            >
              <div class="form-buttons">
                <el-button class="reset-button" @click="handleReset">{{
                  $t('table.searchBar.reset')
                }}</el-button>
                <el-button type="primary" class="search-button" @click="handleSearch">{{
                  $t('table.searchBar.search')
                }}</el-button>
              </div>
              <div class="form-btn-right">
               
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </section>
    <div class="table">
      <el-button class="reset-button" @click="addfn()" v-if="hasAuth('inquiry#store')"><i class="iconfont-sys">&#xe602;</i> 录单</el-button>
      <ArtTable
        ref="tableRef"
        row-key="id"
        :loading="loading"
        :data="tableData"
        :currentPage="pagination.currentPage"
        :pageSize="pagination.pageSize"
        :total="pagination.total"
        :marginTop="10"
        @selection-change="handleSelectionChange"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template #default>
          <el-table-column prop="order_no" label="SN"></el-table-column>
          <el-table-column prop="contacts" label="客户名称"></el-table-column>
          <el-table-column prop="tel" label="电话"></el-table-column>
          <el-table-column prop="phone" label="国家">
            <template #default="scope">
              <span>
                {{scope.row.countryInfo? scope.row.countryInfo.cn_addr : ''}}
              </span>
              <span  v-if="scope.row.countryInfo">
                <el-tag class="steer" type="warning"  v-if="scope.row.countryInfo.steering=='左舵'">{{ scope.row.countryInfo.steering }}</el-tag>
                <el-tag class="steer" type="success" v-else-if="scope.row.countryInfo.steering=='右舵'">{{ scope.row.countryInfo.steering }}</el-tag>
              </span>
              <!-- <span class="steer" v-if="scope.row.countryInfo">{{ scope.row.countryInfo.steering }}</span> -->
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="渠道">
            <template #default="scope">
              <span>
                {{scope.row.channelInfo? scope.row.channelInfo.name : ''}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="quality" label="客户商机">
            <template #default="scope">
              <span :style="scope.row.quality==1 ? { color: '#F5AB00' } : scope.row.quality==2 ? { color: '#8495B8' }: { color: '#9B7200' }">
                {{scope.row.quality==1 ? '金牌商机' : scope.row.quality==2 ? '银牌商机' : '铜牌商机'}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="magnitude" label="发布人">
            <template #default="scope">
              <span>
                {{scope.row.enter? scope.row.enter.name : ''}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="recipient" label="跟单人">
            <template #default="scope">
              <span style="color:#008477;cursor: pointer;" v-if="scope.row.recipientInfo && hasAuth('inquiry#reallocation')" @click="onFenpei(scope.row,'edit')">
                {{scope.row.recipientInfo? scope.row.recipientInfo.name : ''}}
                <i class="iconfont-sys">&#xe626;</i>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template #default="scope">
              <span :style="scope.row.status== 0 ? { color: '#ccc' } :scope.row.status== 1 ? { color: '#00A43F' }: { color: '#3471FF' }">
                {{ scope.row.status== 0 ? '未发布' : scope.row.status== 1 ? '待跟踪' : '已跟踪' }}
              </span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="倒计时" min-width="140">
            <template #default="scope">
              <span :class="getCountdownClass(scope.row.countdown)" v-if="scope.row.status==1">
                <span class="custom-clock-icon" style="margin-right: 4px; vertical-align: middle"
                  ><i class="iconfont-sys">&#xe7b1;</i></span
                >
                {{ getCountdown(scope.row.countdown) }}
              </span>
            </template>
          </el-table-column> -->
          <el-table-column prop="created_at" label="创建时间"></el-table-column>
          <el-table-column fixed="right" label="操作" width="260px">
            <template #default="scope">
              <div class="follow-action fenpei" @click="onFenpei(scope.row,'add')" v-if="scope.row.status!= 2&&hasAuth('inquiry#allocation')">
                <span class="custom-clock-icon" style="margin-right: 2px; vertical-align: middle"
                  ><i class="iconfont-sys">&#xe852;</i></span
                >
                分配
              </div>
              <div class="follow-action detil" @click="onDetail(scope.row)" v-if="hasAuth('inquiry#show')">
                <span class="custom-clock-icon" style="margin-right: 2px; vertical-align: middle"
                  ><i class="iconfont-sys">&#xe70f;</i></span
                >
                详情
              </div>
              <div class="follow-action" @click="onFollow(scope.row)" v-if="scope.row.status==0&&hasAuth('inquiry#release')">
                <span class="custom-clock-icon" style="margin-right: 2px; vertical-align: middle"
                  ><i class="iconfont-sys">&#xe712;</i></span
                >
                发布
              </div>
              <div class="follow-action edit" @click="onEdit(scope.row)" v-if="hasAuth('inquiry#update')">
                <span class="custom-clock-icon" style="margin-right: 2px; vertical-align: middle"
                  ><i class="iconfont-sys">&#xe6bf;</i></span
                >
                编辑
              </div>
              <div class="follow-action delete" @click="onDelete(scope.row)" v-if="hasAuth('inquiry#destroy')">
                <span class="custom-clock-icon" style="margin-right: 2px; vertical-align: middle"
                  ><i class="iconfont-sys">&#xe6d4;</i></span
                >
                删除
              </div>
            </template>
          </el-table-column>
        </template>
      </ArtTable>
    </div>
  </div>
  <el-dialog v-model="detailDialogVisible" title="详情" >
    <div class="detail-info-table">
      <div class="row">
        <div>客户名称：{{ detailRow.contacts }}</div>
        <div>电话：{{ detailRow.tel }}</div>
        <div>国家：{{ detailRow.countryInfo? detailRow.countryInfo.cn_addr:'' }}</div>
      </div>
      <div class="row">
        <div>渠道：{{ detailRow.channelInfo?detailRow.channelInfo.name:'' }}</div>
        <div>邮箱：{{ detailRow.email }}</div>
        <div>WhatsApp：{{ detailRow.whatsapp }}</div>
      </div>
      <div class="row">
        <div>发布人：{{ detailRow.enter? detailRow.enter.name : ''}}</div>
        <div>跟单人：{{ detailRow.recipientInfo? detailRow.recipientInfo.name : ''}}</div>
        <div>录单时间：{{ detailRow.created_at }}</div>
      </div>
      <div class="row">
        <div>
          等级：
          <span :style="detailRow.quality==1 ? { color: '#F5AB00' } : detailRow.quality==2 ? { color: '#8495B8' }: { color: '#9B7200' }">
            {{detailRow.quality==1 ? '金牌商机' : detailRow.quality==2 ? '银牌商机' : '铜牌商机'}}
          </span>
        </div>
        <div
          >状态：<span>{{ detailRow.status== 0 ? '未发布' : detailRow.status== 1 ? '待跟踪' : '已跟踪' }}</span></div
        >
        <div>SN：{{ detailRow.order_no }}</div>
      </div>
    </div>
    <div class="dtitle">详情内容</div>
    <div v-if="detailRow" v-html="detailRow.content" class="detils-content" @click="handleImageClick" style="cursor: pointer;">
      
    </div>
    
    <!-- 图片预览组件 -->
    <ElImageViewer
      v-if="showImageViewer"
      :url-list="imageList"
      :initial-index="currentImageIndex"
      :hide-on-click-modal="true"
      @close="showImageViewer = false"
    />
  </el-dialog>
  <el-dialog 
    :title="dialogType === 'add' ? '录单' : '编辑'"
    v-model="AddDialogVisible" 
    width="800px"
    :close-on-click-modal="false"
  >
    <el-form :model="addForm" ref="addFormRef" label-width="80px" class="add-form">
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="渠道" prop="channel">
            <el-select v-model="addForm.channel" placeholder="请选择渠道">
              <el-option
                v-for="item in channelOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="等级" prop="quality">
            <el-select v-model="addForm.quality" placeholder="请选择等级">
              <el-option
                v-for="item in opportunityOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="国家" prop="country">
            <el-select v-model="addForm.country" filterable placeholder="请选择国家">
              <el-option
                v-for="item in countryOptions"
                :key="item.id"
                :label="item.cn_addr"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Email" prop="email">
            <el-input v-model="addForm.email" placeholder="请输入Email" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="联系方式" prop="tel">
            <el-input v-model="addForm.tel" placeholder="请输入联系方式" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="addForm.contacts" placeholder="请输入联系人" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        
        <el-col :span="12">
          <el-form-item label="WhatsApp" prop="whatsapp">
            <el-input v-model="addForm.whatsapp" placeholder="请输入WhatsApp" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="跟单人" prop="country">
            <el-select v-model="addForm.recipient" filterable placeholder="请选择跟单人">
              <el-option
                v-for="item in userOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="详情内容" prop="content">
        <ArtWangEditor class="el-top" v-model="editorHtml" />
      </el-form-item>
      <div class="form-submit-row">
        <el-button type="primary" size="large" style="width: 50%" @click="handleAddSubmit"
          >提交</el-button
        >
      </div>
    </el-form>
  </el-dialog>
  <!-- 分配 -->
  <el-dialog v-model="fenpeiDialogVisible" :title="dialogTypefp === 'add' ? '分配跟单' : '重新分配跟单'" width="360px">
    <el-form :model="fenpeiForm" label-width="0">
      <el-form-item>
        <el-select v-model="fenpeiForm.recipient" filterable placeholder="请选择" style="width: 100%">
          <el-option
            v-for="item in userOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <div style="display: flex; justify-content: space-around; margin-top: 24px">
        <el-button @click="fenpeiDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleFenpeiSubmit">确定</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted, nextTick } from 'vue'
  import dayjs from 'dayjs'
  import { ElMessageBox, ElImageViewer } from 'element-plus'
  import { CrmService } from '@/api/crmApi'
  import { manageService } from '@/api/adminApi'
  import { useAuth } from '@/composables/useAuth'
  defineOptions({ name: 'InquirySystem' })
  const { hasAuth } = useAuth()
  const loading = ref(false)
  const dialogType = ref('add')
  const dialogTypefp = ref('add')
  const { width } = useWindowSize()
  const isMobile = computed(() => width.value < 500)
  const filter = ref({
    status: '',
    time: '',
    channel: '',
    keyword: ''
  })
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0
  })
  const editorHtml = ref('') // 编辑器内容
  const timer = ref(0)
  const refreshKey = ref(0)
  const fenpeiDialogVisible = ref(false)
  const detailDialogVisible = ref(false)
  const AddDialogVisible = ref(false)
  const detailRow = ref<any>(null)
  const countryOptions = ref<any>()
  const tableData = ref<any[]>([])
  const addFormRef = ref()
  let addForm = reactive({
    channel: '',
    quality: '',
    country: '',
    email: '',
    tel: '',
    contacts: '',
    whatsapp: '',
    content: '',
    recipient: ''
  })
  // 响应式表单数据
  const formFilters = reactive({ ...filter })
  // 重置表单
  const handleReset = () => {
    filter.value = {
      status: '',
      time: '',
      channel: '',
      keyword: ''
    }
    Object.assign(formFilters, { ...filter })
    pagination.currentPage = 1 // 重置到第一页
    gettableList()
  }

  // 搜索处理
  const handleSearch = () => {
    console.log('搜索参数:', formFilters)
    pagination.currentPage = 1 // 搜索时重置到第一页
    gettableList()
  }
  const opportunityOptions = ref<any>()
  //商机
  const getMagnitude = async () => {
    // 这里调用获取品牌列表的接口
    const res = await CrmService.getMagnitude()
    opportunityOptions.value = res || []
  }
  const channelOptions = ref<any>()
  //渠道
  const getgetChannel = async () => {
    const res = await CrmService.getChannel()
    channelOptions.value = res
  }
  //国家
  const getarea = async () => {
    const res = await CrmService.getCountry()
    countryOptions.value = res || []
  }
  const userOptions = ref<any>()
  const getuserList = async () => {
    // 这里调用获取用户列表的接口
    const res = await manageService.presetusers()
    userOptions.value = res || []
    // return res || []
  }
  // 计算属性：将时间格式化为 "开始日期 - 结束日期"
  const formattedTimeRange = () => {
    if (!filter.value.time || filter.value.time.length !== 2) {
      return '' // 如果时间范围无效，返回空字符串
    }
    const [startDate, endDate] = filter.value.time
    return `${startDate} - ${endDate}`
  }
  // 获取列表数据
  const gettableList = async () => {
    loading.value = true
    try {
      const { currentPage, pageSize } = pagination
      const params: any = {
        current: currentPage,
        size: pageSize,
        channel: filter.value.channel,
        status: filter.value.status,
        keyword: filter.value.keyword,
        time: formattedTimeRange()
      }
      const { records, current, size, total } = await manageService.getinquiryList(params)
      tableData.value = records.map((item: any) => ({
        ...item
      }))
      Object.assign(pagination, { currentPage: current, pageSize: size, total })
    } catch (error) {
      console.error('获取用户列表失败:', error)
    } finally {
      loading.value = false
    }
  }
  // 选中的行数据
  const selectedRows = ref<any[]>([])
  // 处理表格行选择变化
  const handleSelectionChange = (selection: any[]) => {
    selectedRows.value = selection
  }
  // 处理表格分页变化
  const handleSizeChange = (newPageSize: number) => {
    pagination.pageSize = newPageSize
    gettableList()
  }

  const handleCurrentChange = (newCurrentPage: number) => {
    pagination.currentPage = newCurrentPage
    gettableList()
  }

  onMounted(() => {
    getgetChannel()
    gettableList()
    getuserList()
    timer.value = window.setInterval(() => {
      refreshKey.value++
    }, 1000)
  })

  onUnmounted(() => {
    if (timer.value) {
      clearInterval(timer.value)
    }
  })
  function getCountdown(targetTimestamp: number) {
    // 让 refreshKey 成为依赖，确保每秒刷新
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    refreshKey.value
    const now = dayjs()
    const target = dayjs.unix(targetTimestamp) // 使用时间戳创建 dayjs 对象
    if (!target.isValid()) return '时间格式错误'
    const diff = target.diff(now)
    if (diff <= 0) return '已超时'
    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
    const minutes = Math.floor((diff / (1000 * 60)) % 60)
    const seconds = Math.floor((diff / 1000) % 60)
    return `${days > 0 ? days + '天' : ''}${hours}小时${minutes}分${seconds}秒`
  }
  // function getCountdown(targetDate: string) {
  //   // 让 refreshKey 成为依赖，确保每秒刷新
  //   // eslint-disable-next-line @typescript-eslint/no-unused-expressions
  //   refreshKey.value
  //   const now = dayjs()
  //   const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
  //   if (!target.isValid()) return '时间格式错误'
  //   const diff = target.diff(now)
  //   if (diff <= 0) return '已超时'
  //   const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  //   const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
  //   const minutes = Math.floor((diff / (1000 * 60)) % 60)
  //   const seconds = Math.floor((diff / 1000) % 60)
  //   return `${days > 0 ? days + '天' : ''}${hours}小时${minutes}分${seconds}秒`
  // }

  function getCountdownClass(targetDate: number) {
    const now = dayjs()
    // const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
    const target = dayjs.unix(targetDate)
    if (!target.isValid() || target.diff(now) <= 0) {
      return 'countdown-danger'
    }
    return 'countdown-success'
  }
  function reactiveForm() {
    Object.assign(addForm, {
      channel: '',
      quality: '',
      country: '',
      email: '',
      tel: '',
      contacts: '',
      whatsapp: '',
      content: '',
      recipient: ''
    })
    editorHtml.value = ''
  }
  const addfn = () => {
    dialogType.value = 'add'
    reactiveForm()
    getMagnitude()
    getarea()
    AddDialogVisible.value = true
  }
  const onFollow = async (row: any) => {
    ElMessageBox.confirm('确定要发布此询单吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        const res = await manageService.inquiryrelease({ id: row.id, status: 1 })
        ElMessage.success(res?.message || '请求成功！')
        gettableList()
        // 你可以在这里调用接口或做后续处理
      })
      .catch(() => {
        // 用户点击了取消
      })
  }

  function onDetail(row: any) {
    row.content = processImages(row.content) // 处理图片
    detailRow.value = row
    detailDialogVisible.value = true
  }
  //编辑
  function processImages(html: string) {
    const parser = new DOMParser()
    const doc = parser.parseFromString(html, 'text/html')
    doc.querySelectorAll('img').forEach((img) => {
      img.style.maxWidth = '100%'
      img.style.height = 'auto'
    })
    return doc.body.innerHTML
  }
  const carrid = ref('')
  const onEdit = async (row: any) => {
    dialogType.value = 'edit'
    getMagnitude()
    getarea()
    AddDialogVisible.value = true
    carrid.value = row.id
    addForm = reactive({
      channel: row.channelInfo ? row.channelInfo.id : '',
      quality: row.quality,
      country: row.countryInfo ? row.countryInfo.id : '',
      email: row.email,
      tel: row.tel,
      contacts: row.contacts,
      whatsapp: row.whatsapp,
      content: row.content,
      recipient: row.recipientInfo ? row.recipientInfo.id : ''
    })
    editorHtml.value = row.content
    // 这里可以添加编辑逻辑
    // 例如打开编辑对话框或跳转到编辑页面
  }
  const delCodeTrim = (content: string): string => {
    return content.replace(/(\s*)<\/code>/g, '</code>')
  }
  const handleAddSubmit = async () => {
    // 提交表单逻辑
    // 这里可以调用 API 提交 addForm 数据
    if (dialogType.value === 'add') {
      editorHtml.value = delCodeTrim(editorHtml.value)
      addForm.content = editorHtml.value
      const res = await manageService.inquiryAdd(addForm)
      ElMessage.success(res?.message || '录单成功！')
    } else {
      editorHtml.value = delCodeTrim(editorHtml.value)
      addForm.content = editorHtml.value
      const forms = { ...addForm, id: carrid.value }
      const res = await manageService.inquiryedit(forms)
      ElMessage.success(res?.message || '录单成功！')
    }
    AddDialogVisible.value = false
    gettableList()
  }
  //删除
  const onDelete = (row: any) => {
    ElMessageBox.confirm('确定要删除此条询单吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        const res = await manageService.inquirydelete({ id: row.id })
        ElMessage.success(res?.message || '提交成功！')
        gettableList()
        // 你可以在这里调用接口或做后续处理
      })
      .catch(() => {
        // 用户点击了取消
      })
  }

  const fenpeiForm = reactive({
    id: '',
    recipient: ''
  })
  //分配
  const onFenpei = (row: any, edits: any) => {
    dialogTypefp.value = edits
    fenpeiForm.id = row.id
    fenpeiDialogVisible.value = true
  }
  const handleFenpeiSubmit = async () => {
    if (!fenpeiForm.recipient) {
      ElMessage.warning('请选择跟单人')
      return
    }
    if (dialogTypefp.value === 'add') {
      const res = await manageService.inquiryallocation({
        id: fenpeiForm.id,
        recipient: fenpeiForm.recipient,
        status: 2
      })
      ElMessage.success(res?.message || '分配成功！')
    } else {
      const res = await manageService.inquiryreallocation({
        id: fenpeiForm.id,
        recipient: fenpeiForm.recipient,
        status: 2
      })
      ElMessage.success(res?.message || '分配成功！')
    }
    fenpeiDialogVisible.value = false
    gettableList()
  }

  const imageList = ref<string[]>([])
  const currentImageIndex = ref(0)
  const showImageViewer = ref(false)

  const handleImageClick = (event: MouseEvent) => {
    const target = event.target as HTMLElement
    if (target.tagName === 'IMG') {
      const imgElement = target as HTMLImageElement
      
      // 获取所有图片并设置预览列表
      const contentDiv = event.currentTarget as HTMLElement
      const allImages = contentDiv.querySelectorAll('img')
      const imageUrls = Array.from(allImages).map(img => img.src)
      
      imageList.value = imageUrls
      currentImageIndex.value = imageUrls.indexOf(imgElement.src)
      showImageViewer.value = true
    }
  }
</script>

<style lang="scss" scoped>
  .search-bar {
    padding: 20px 20px 0;
    background-color: var(--art-main-bg-color);
    border-radius: calc(var(--custom-radius) / 2 + 2px);

    :deep(.el-form-item__label) {
      display: flex;
      align-items: center;
      line-height: 20px;
    }

    .search-form-row {
      display: flex;
      flex-wrap: wrap;
    }

    .action-column {
      flex: 1;
      max-width: 100%;

      .action-buttons-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        // justify-content: flex-end;
        margin-bottom: 12px;
      }

      .filter-toggle {
        display: flex;
        align-items: center;
        margin-left: 10px;
        line-height: 32px;
        color: var(--main-color);
        cursor: pointer;

        span {
          font-size: 14px;
          user-select: none;
        }

        .icon-wrapper {
          display: flex;
          align-items: center;
          margin-left: 4px;
          font-size: 14px;
        }
      }

      .form-btn-right {
        flex: 1;
        text-align: right;
      }
    }
  }

  .dark {
    .card-list {
      .art-custom-card {
        .iconfont-sys {
          background-color: #232323 !important;
        }
      }
    }
  }

  .table {
    margin-top: 10px;
    :deep(.el-table__empty-block) {
      height: 300px !important;
    }

    :deep(.el-table__header th) {
      font-weight: bold;
      color: #333;
      background: #f7f9fa !important;
    }

    :deep(.el-table__body tr.custom-table-row td) {
      border-right: 1px solid #f7f9fa !important;
      border-bottom: 1px solid #f7f9fa !important;
    }

    :deep(.el-table__body tr td:last-child) {
      border-right: none !important;
    }

    :deep(.el-table__body tr:last-child td) {
      border-bottom: none !important;
    }

    :deep(.el-table__header-wrapper th) {
      border-right: 1px solid #f7f9fa !important;
      border-bottom: 1px solid #f7f9fa !important;
    }

    :deep(.el-table__header-wrapper th:last-child) {
      border-right: none !important;
    }

    :deep(.el-table) {
      border: 1px solid #f7f9fa !important;
      border-radius: 6px;
    }

    :deep(.el-table th),
    :deep(.el-table td) {
      text-align: center !important;
    }
  }

  .countdown-danger {
    color: #f00 !important;
  }

  .countdown-success {
    color: #00a43f !important;
  }

  .fenpei {
    color: #3471ff !important;
  }

  .detil {
    color: #00a43f !important;
  }

  .edit {
    color: #008477 !important;
  }

  .delete {
    color: #f00 !important;
  }

  .follow-action {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    color: #409eff;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;

    &:hover {
      background: #f5f7fa;
    }
  }

  .detail-info-table {
    padding-left: 25px;
    .row {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 6px;

      > div {
        flex: 1;
        min-width: 0;
        margin-right: 16px;
        overflow: hidden;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .form-submit-row {
    text-align: center;
  }
  .steer {
    margin-left: 5px;
    // display: inline-block;
    // border: 1px solid #00a43f;
    // padding: 0px 4px;
    // color: #00a43f;
  }
  .dtitle {
    line-height: 40px;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    padding-left: 25px;
  }
  .detils-content {
    padding-left: 25px;
    img {
      max-width: 100% !important;
      cursor: pointer;
      transition: opacity 0.2s;
      
      &:hover {
        opacity: 0.8;
      }
    }
  }
</style>