<template>
  <div class="edit-table">
    <!-- 表格头部操作区 -->
    <div v-if="showHeader" class="edit-table__header">
      <h3 class="edit-table__title">{{ title }}</h3>
      <div class="edit-table__actions">
        <el-button
          v-if="!props.readonly && props.addButtonShow"
          type="primary"
          @click="handleAdd"
          :size="props.addButtonSize"
        >
          <el-icon><Plus /></el-icon>
          {{ addButtonText }}
        </el-button>
        <el-button
          v-if="config.importExport?.showImport && !props.readonly"
          type="default"
          @click="showImportDialog = true"
        >
          <el-icon><Upload /></el-icon>
          {{ config.importExport.importButtonText || '导入' }}
        </el-button>
        <el-button v-if="config.importExport?.showExport" type="default" @click="handleExport">
          <el-icon><Download /></el-icon>
          {{ config.importExport.exportButtonText || '导出' }}
        </el-button>
      </div>
    </div>

    <!-- 明细表单 -->
    <el-form ref="formRef" :model="{ dataList }" :rules="formRules" label-width="0">
      <el-table
        :data="paginatedData"
        :border="config.border"
        :stripe="config.stripe"
        :size="config.size"
        :max-height="config.maxHeight"
        style="width: 100%"
      >
        <!-- 序号列 -->
        <el-table-column
          v-if="config.showIndex"
          type="index"
          :label="config.indexLabel || '序号'"
          :width="config.indexWidth || 60"
          align="center"
        />

        <!-- 字段列 -->
        <template v-for="field in config.fields" :key="field.prop">
          <el-table-column
            :prop="field.prop"
            :label="field.label"
            :width="field.width"
            :min-width="field.minWidth"
            :align="field.align || 'left'"
          >
            <template #default="{ row, $index }">
              <el-form-item
                :prop="`dataList.${$index}.${field.prop}`"
                :rules="getFieldRules(field)"
                :show-message="false"
                class="edit-table__form-item"
              >
                <!-- 输入框 -->
                <el-input
                  v-if="field.type === FieldType.INPUT"
                  v-model="row[field.prop]"
                  :placeholder="field.placeholder || `请输入${field.label}`"
                  :disabled="props.readonly || field.disabled"
                  :readonly="props.readonly || field.readonly"
                  :clearable="!props.readonly && field.clearable !== false"
                  :size="field.size"
                  @blur="!props.readonly && validateField($index, field.prop)"
                />

                <!-- 数字输入框 -->
                <el-input-number
                  v-else-if="field.type === FieldType.NUMBER"
                  v-model="row[field.prop]"
                  :placeholder="field.placeholder || `请输入${field.label}`"
                  :disabled="props.readonly || field.disabled"
                  :precision="field.precision"
                  :step="field.step"
                  :min="field.min"
                  :max="field.max"
                  :size="field.size"
                  style="width: 100%"
                  @blur="!props.readonly && validateField($index, field.prop)"
                />

                <!-- 日期选择器 -->
                <el-date-picker
                  v-else-if="field.type === FieldType.DATE"
                  v-model="row[field.prop]"
                  :type="field.type || 'date'"
                  :placeholder="field.placeholder || `请选择${field.label}`"
                  :disabled="props.readonly || field.disabled"
                  :clearable="!props.readonly && field.clearable !== false"
                  :size="field.size"
                  :value-format="field.valueFormat || 'x'"
                  :format="field.format"
                  style="width: 100%"
                  @change="!props.readonly && validateField($index, field.prop)"
                />

                <!-- 日期范围选择器 -->
                <el-date-picker
                  v-else-if="field.type === FieldType.DATE_RANGE"
                  v-model="row[field.prop]"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :disabled="props.readonly || field.disabled"
                  :clearable="!props.readonly && field.clearable !== false"
                  :size="field.size"
                  :value-format="field.valueFormat || 'x'"
                  style="width: 100%"
                  @change="!props.readonly && validateField($index, field.prop)"
                />

                <!-- 普通选择器 -->
                <el-select
                  v-else-if="isNormalSelect(field.type)"
                  v-model="row[field.prop]"
                  :placeholder="field.placeholder || `请选择${field.label}`"
                  :disabled="props.readonly || field.disabled"
                  :clearable="!props.readonly && field.clearable !== false"
                  :size="field.size"
                  :multiple="field.multiple"
                  :filterable="field.filterable"
                  :remote="field.remote"
                  :remote-method="field.remoteMethod"
                  :loading="remoteLoading[field.prop]"
                  style="width: 100%"
                  @change="!props.readonly && validateField($index, field.prop)"
                >
                  <el-option
                    v-for="option in getSelectOptions(field)"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                    :disabled="option.disabled"
                  />
                </el-select>

                <!-- 树形选择器 -->
                <el-tree-select
                  v-else-if="isTreeSelect(field.type)"
                  v-model="row[field.prop]"
                  :placeholder="field.placeholder || `请选择${field.label}`"
                  :disabled="props.readonly || field.disabled"
                  :clearable="!props.readonly && field.clearable !== false"
                  :size="field.size"
                  :multiple="field.multiple"
                  :filterable="field.filterable"
                  :remote="field.remote"
                  :remote-method="field.remoteMethod"
                  :loading="remoteLoading[field.prop]"
                  :data="getSelectOptions(field)"
                  :props="field.props || { label: 'label', children: 'children' }"
                  :node-key="field.nodeKey"
                  :show-checkbox="field.showCheckbox"
                  :check-strictly="field.checkStrictly !== false"
                  :default-expand-all="field.defaultExpandAll"
                  :lazy="field.lazy"
                  :load="field.load"
                  style="width: 100%"
                  @change="!props.readonly && validateField($index, field.prop)"
                />

                <!-- 级联选择器 -->
                <el-cascader
                  v-else-if="field.type === FieldType.CASCADER"
                  v-model="row[field.prop]"
                  :placeholder="field.placeholder || `请选择${field.label}`"
                  :disabled="props.readonly || field.disabled"
                  :clearable="!props.readonly && field.clearable !== false"
                  :size="field.size"
                  :options="getSelectOptions(field)"
                  :props="field.cascaderProps"
                  :separator="field.separator"
                  style="width: 100%"
                  @change="!props.readonly && validateField($index, field.prop)"
                />

                <!-- 弹窗选择器 -->
                <div
                  v-else-if="field.type === FieldType.POPUP_SELECT"
                  class="popup-select-container"
                >
                  <el-input
                    :value="getDisplayValue(row, field)"
                    :placeholder="field.placeholder || `请选择${field.label}`"
                    :disabled="props.readonly || field.disabled"
                    :readonly="true"
                    :clearable="!props.readonly && field.clearable !== false"
                    :size="field.size"
                    @clear="handlePopupSelectClear($index, field)"
                    style="width: calc(100%)"
                  >
                    <template #suffix>
                      <el-icon
                        class="popup-select-icon"
                        @click="
                          !props.readonly && !field.disabled && handlePopupSelect($index, field)
                        "
                      >
                        <Search />
                      </el-icon>
                    </template>
                  </el-input>
                </div>

                <!-- 自定义渲染 -->
                <component v-else-if="field.render" :is="field.render(row, field, $index)" />

                <!-- 默认输入框 -->
                <!-- <el-input
                  v-else
                  v-model="row[field.prop]"
                  :placeholder="field.placeholder || `请输入${field.label}`"
                  :disabled="props.readonly || field.disabled"
                  :readonly="props.readonly || field.readonly"
                  :clearable="!props.readonly && field.clearable !== false"
                  :size="field.size"
                /> -->
                <!--默认文本-->
                <template v-else>
                  {{ row[field.prop] }}
                </template>
              </el-form-item>
            </template>
          </el-table-column>
        </template>

        <!-- 操作列 -->
        <el-table-column
          v-if="config.showAction && !props.readonly"
          :label="config.actionLabel || '操作'"
          :width="config.actionWidth || 120"
          :fixed="config.actionFixed || 'right'"
          align="center"
        >
          <template #default="{ $index }">
            <el-button
              v-if="config.showCopyButton !== false"
              type="primary"
              size="small"
              link
              @click="handleCopy($index)"
            >
              复制
            </el-button>
            <el-button type="danger" size="small" link @click="handleDelete($index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <!-- 分页器 -->
    <div v-if="showPagination" class="edit-table__pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizeOptions"
        :total="dataList.length"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :small="config.size === 'small'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 导入弹窗 -->
    <el-dialog
      v-model="showImportDialog"
      title="数据导入"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="import-dialog-content">
        <div class="import-section">
          <h4>1. 下载导入模板</h4>
          <el-button type="primary" link @click="handleDownloadTemplate">
            <el-icon><Download /></el-icon>
            下载模板文件
          </el-button>
          <div class="template-tip"> 请按照模板格式填写数据后再上传 </div>
        </div>

        <div class="import-section">
          <h4>2. 上传数据文件</h4>
          <el-upload
            ref="uploadRef"
            :auto-upload="false"
            :show-file-list="true"
            :limit="1"
            :accept="config.importExport?.acceptFileTypes?.join(',') || '.xlsx,.xls,.csv'"
            @change="handleFileChange"
            @exceed="handleExceed"
          >
            <el-button type="primary">选择文件</el-button>
            <template #tip>
              <div class="el-upload__tip">
                支持
                {{ config.importExport?.acceptFileTypes?.join('、') || 'xlsx、xls、csv' }} 格式文件
              </div>
            </template>
          </el-upload>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showImportDialog = false">取消</el-button>
          <el-button type="primary" :loading="importLoading" @click="handleImport">
            开始导入
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 弹窗选择器 -->
    <el-dialog
      v-model="showPopupDialog"
      :title="currentPopupField?.popupSelect?.title || '选择数据'"
      :width="currentPopupField?.popupSelect?.width || '800px'"
      :height="currentPopupField?.popupSelect?.height || '600px'"
      :close-on-click-modal="false"
      append-to-body
    >
      <TableList
        v-if="showPopupDialog && currentPopupField"
        ref="popupTableListRef"
        :config="popupTableListConfig"
        @selection-change="handlePopupSelectionChange"
      />

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showPopupDialog = false">取 消</el-button>
          <el-button type="primary" @click="confirmPopupSelection"> 确 定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import { Plus, Upload, Download, Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  FieldType,
  type EditTableConfig,
  type FieldConfig,
  type TableRow,
  type FormRules,
  type ActionEventParams,
  type SelectOption,
  type ImportParams,
  type ExportParams
} from './types'
import TableList from '../TableList/index.vue'

// Props 定义
interface Props {
  modelValue: TableRow[]
  config: EditTableConfig
  title?: string
  showHeader?: boolean
  addButtonShow?: boolean
  addButtonText?: string
  emptyRow?: () => TableRow
  validateOnAdd?: boolean
  minRows?: number
  readonly?: boolean
  onImport?: (params: ImportParams) => Promise<TableRow[]>
  onExport?: (params: ExportParams) => Promise<void>
  onDownloadTemplate?: () => Promise<void>
}

const props = withDefaults(defineProps<Props>(), {
  title: '明细列表',
  showHeader: true,
  addButtonText: '添加明细',
  addButtonShow: true,
  validateOnAdd: true,
  minRows: 1,
  readonly: false
})

// Emits 定义
const emit = defineEmits<{
  'update:modelValue': [value: TableRow[]]
  add: [params: ActionEventParams]
  delete: [params: ActionEventParams]
  copy: [params: ActionEventParams]
  validate: [valid: boolean]
}>()

// 响应式数据
const formRef = ref()
const uploadRef = ref()
const popupTableListRef = ref()
const dataList = ref<TableRow[]>([])
const remoteLoading = reactive<Record<string, boolean>>({})
const showImportDialog = ref(false)
const importLoading = ref(false)
const selectedFile = ref<File | null>(null)

// 弹窗选择器相关
const showPopupDialog = ref(false)
const currentPopupField = ref<FieldConfig | null>(null)
const currentRowIndex = ref(-1)
const popupSelectedRows = ref<any[]>([])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)

// 表单验证规则
const formRules = computed(() => {
  const rules: FormRules = {}
  props.config.fields.forEach((field) => {
    if (field.required || field.rules) {
      const fieldRules = getFieldRules(field)
      if (fieldRules.length > 0) {
        // 为每行动态生成规则
        for (let i = 0; i < dataList.value.length; i++) {
          const key = `dataList.${i}.${field.prop}`
          rules[key] = fieldRules
        }
      }
    }
  })
  return rules
})

// 获取字段验证规则
const getFieldRules = (field: FieldConfig) => {
  const rules: any[] = []

  if (field.required) {
    rules.push({
      required: true,
      message: `${field.label}不能为空`,
      trigger: field.type === FieldType.INPUT ? 'blur' : 'change'
    })
  }

  if (field.rules) {
    rules.push(...field.rules)
  }

  return rules
}

// 判断是否为普通选择器
const isNormalSelect = (type: FieldType) => {
  return [
    FieldType.SELECT,
    FieldType.MULTI_SELECT,
    FieldType.REMOTE_SELECT,
    FieldType.FILTER_SELECT
  ].includes(type)
}

// 判断是否为树形选择器
const isTreeSelect = (type: FieldType) => {
  return [
    FieldType.TREE_SELECT,
    FieldType.TREE_MULTI_SELECT,
    FieldType.TREE_REMOTE_SELECT,
    FieldType.TREE_FILTER_SELECT
  ].includes(type)
}

// 获取选择器选项
const getSelectOptions = (field: FieldConfig): SelectOption[] => {
  return field.options || []
}

// 分页相关计算属性
const showPagination = computed(() => {
  return props.config.pagination?.enabled && dataList.value.length > 0
})

const pageSizeOptions = computed(() => {
  return props.config.pagination?.pageSizeOptions || [10, 20, 50, 100]
})

const paginatedData = computed(() => {
  if (!showPagination.value) {
    return dataList.value
  }

  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return dataList.value.slice(start, end)
})

// 弹窗选择器 TableList 配置
const popupTableListConfig = computed(() => {
  if (!currentPopupField.value?.popupSelect) return null

  const popupConfig = currentPopupField.value.popupSelect
  return {
    searchForm: {
      items: popupConfig.searchForm?.items || []
    },
    table: {
      columns: popupConfig.columns || [],
      selection: popupConfig.multiple || false,
      index: true
    },
    pagination: {
      show: true,
      pageSize: popupConfig.pagination?.pageSize || 10
    },
    api: popupConfig.api,
    queryParams: popupConfig.queryParams || {}
  }
})

// 验证单个字段
const validateField = async (index: number, prop: string) => {
  try {
    await formRef.value.validateField(`dataList.${index}.${prop}`)
    return true
  } catch (error) {
    return false
  }
}

// 验证整个表单
const validate = async () => {
  try {
    await formRef.value.validate()
    emit('validate', true)
    return true
  } catch (error) {
    emit('validate', false)
    return false
  }
}

// 添加行
const handleAdd = () => {
  const newRow = props.emptyRow ? props.emptyRow() : {}
  dataList.value.push(newRow)

  // 主动更新父组件数据
  updateParentData()

  // 处理分页
  handlePaginationAfterDataChange('add')

  const params: ActionEventParams = {
    index: dataList.value.length - 1,
    row: newRow,
    type: 'add'
  }
  emit('add', params)
}

// 复制行
const handleCopy = (index: number) => {
  const sourceRow = dataList.value[index]
  // 深拷贝对象，避免引用问题
  const copiedRow = JSON.parse(JSON.stringify(sourceRow))

  // 如果有ID字段，清除ID，避免主键冲突
  if (copiedRow.id !== undefined) {
    delete copiedRow.id
  }

  // 在当前行之后插入复制的行
  dataList.value.splice(index + 1, 0, copiedRow)

  // 主动更新父组件数据
  updateParentData()

  // 处理分页
  handlePaginationAfterDataChange('add')

  const params: ActionEventParams = {
    index: index + 1,
    row: copiedRow,
    type: 'copy'
  }
  emit('copy', params)
}

// 删除行
const handleDelete = (index: number) => {
  // 检查是否达到最小行数限制
  if (dataList.value.length <= props.minRows) {
    ElMessage.warning(`至少保留${props.minRows}条明细记录`)
    return
  }

  const deletedRow = dataList.value[index]
  dataList.value.splice(index, 1)

  // 主动更新父组件数据
  updateParentData()

  // 处理分页
  handlePaginationAfterDataChange('delete')

  const params: ActionEventParams = {
    index,
    row: deletedRow,
    type: 'delete'
  }
  emit('delete', params)
}

// 监听父组件数据变化
watch(
  () => props.modelValue,
  (newVal) => {
    dataList.value = [...newVal]
  },
  { deep: true, immediate: true }
)

// 只在添加或删除操作时主动更新父组件数据
const updateParentData = () => {
  emit('update:modelValue', [...dataList.value])
}

// 分页事件处理
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize
  currentPage.value = 1
}

const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage
}

// 导入导出事件处理
const handleDownloadTemplate = async () => {
  try {
    if (props.onDownloadTemplate) {
      await props.onDownloadTemplate()
    } else {
      // 默认模拟下载模板
      const fileName = props.config.importExport?.templateFileName || '导入模板.xlsx'
      // 这里应该调用实际的下载接口，暂时模拟
      ElMessage.success('模板下载功能需要实现 onDownloadTemplate 方法')
    }
  } catch (error) {
    console.error(error)
    ElMessage.error('下载模板失败')
  }
}

const handleFileChange = (file: any) => {
  selectedFile.value = file.raw
}

const handleExceed = () => {
  ElMessage.warning('一次只能上传一个文件')
}

const handleImport = async () => {
  if (!selectedFile.value) {
    ElMessage.warning('请先选择要导入的文件')
    return
  }

  if (!props.onImport) {
    ElMessage.error('导入功能需要实现 onImport 方法')
    return
  }

  importLoading.value = true
  try {
    const importParams: ImportParams = {
      file: selectedFile.value,
      fileName: selectedFile.value.name
    }

    const importedData = await props.onImport(importParams)

    if (importedData && importedData.length > 0) {
      // 合并导入的数据到现有数据
      const mergedData = [...dataList.value, ...importedData]
      dataList.value = mergedData
      updateParentData()

      // 处理分页
      handlePaginationAfterDataChange('import')

      ElMessage.success(`成功导入 ${importedData.length} 条数据`)
      showImportDialog.value = false
      selectedFile.value = null
      uploadRef.value?.clearFiles()
    } else {
      ElMessage.warning('导入数据为空')
    }
  } catch (error) {
    ElMessage.error('导入失败，请检查文件格式')
  } finally {
    importLoading.value = false
  }
}

const handleExport = async () => {
  if (!props.onExport) {
    ElMessage.error('导出功能需要实现 onExport 方法')
    return
  }

  try {
    const exportParams: ExportParams = {
      data: dataList.value,
      fields: props.config.fields
    }

    await props.onExport(exportParams)
    ElMessage.success('导出成功')
  } catch (error) {
    ElMessage.error('导出失败')
  }
}

// 智能分页处理函数
const handlePaginationAfterDataChange = (operationType: 'add' | 'delete' | 'import') => {
  if (!showPagination.value) return

  if (operationType === 'add' || operationType === 'import') {
    // 新增和导入操作：保持在当前页
    return
  }

  if (operationType === 'delete') {
    const totalItems = dataList.value.length
    const totalPages = Math.ceil(totalItems / pageSize.value)

    // 如果当前页超出了总页数，则回到最后一页
    if (currentPage.value > totalPages && totalPages > 0) {
      currentPage.value = totalPages
    }
  }
}

// 弹窗选择器方法
const getDisplayValue = (row: TableRow, field: FieldConfig) => {
  const value = row[field.prop]
  if (!value) return ''

  if (Array.isArray(value)) {
    // 多选情况，显示逗号分隔的标签
    return value.join(', ')
  }

  // 单选情况，尝试获取标签值
  const labelKey = field.popupSelect?.selection?.labelKey || 'label'
  if (typeof value === 'object' && value[labelKey]) {
    return value[labelKey]
  }

  return String(value)
}

const handlePopupSelect = (rowIndex: number, field: FieldConfig) => {
  currentRowIndex.value = rowIndex
  currentPopupField.value = field
  popupSelectedRows.value = []
  showPopupDialog.value = true
}

const handlePopupSelectClear = (rowIndex: number, field: FieldConfig) => {
  if (props.readonly || field.disabled) return

  if (field.popupSelect?.selection?.multiple) {
    // 多选情况，清空数组
    dataList.value[rowIndex][field.prop] = []
  } else {
    // 单选情况，清空值
    dataList.value[rowIndex][field.prop] = ''
  }

  // 触发验证
  validateField(rowIndex, field.prop)
}

const handlePopupSelectionChange = (selection: any[]) => {
  popupSelectedRows.value = selection
}

const confirmPopupSelection = () => {
  if (!currentPopupField.value || currentRowIndex.value === -1) {
    showPopupDialog.value = false
    return
  }

  const field = currentPopupField.value
  const valueKey = field.popupSelect?.selection?.valueKey || 'value'
  const labelKey = field.popupSelect?.selection?.labelKey || 'label'
  const currentRow = dataList.value[currentRowIndex.value]

  if (field.popupSelect?.multiple) {
    // 多选：保存值数组
    const values = popupSelectedRows.value.map((row) => row[valueKey])
    currentRow[field.prop] = values
  } else {
    // 单选：保存单个值或对象
    const selectedRow = popupSelectedRows.value[0]
    if (selectedRow) {
      const value = selectedRow[valueKey]
      // 保存完整的对象，以便后续可能的操作
      currentRow[field.prop] = value

      // 处理字段映射 - 将选中数据的其他字段同步到当前行的对应字段
      if (field.popupSelect?.fieldMapping) {
        Object.entries(field.popupSelect.fieldMapping).forEach(([targetField, sourceField]) => {
          currentRow[targetField] = selectedRow[sourceField]
        })
      }
    } else {
      // 没有选中任何行时，清空值
      currentRow[field.prop] = ''
    }
  }

  // 触发验证
  validateField(currentRowIndex.value, field.prop)

  // 更新父组件数据
  updateParentData()

  // 关闭弹窗
  showPopupDialog.value = false
  currentPopupField.value = null
  currentRowIndex.value = -1
  popupSelectedRows.value = []
}

// 暴露方法给父组件
defineExpose({
  validate,
  validateField,
  addRow: handleAdd,
  deleteRow: handleDelete,
  copyRow: handleCopy,
  formRef,
  importData: handleImport,
  exportData: handleExport
})
</script>

<style scoped>
.edit-table {
  width: 100%;
}

.edit-table__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.edit-table__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #000;
}

.edit-table__form-item :deep(.el-form-item) {
  margin-bottom: 0;
}

.edit-table__form-item :deep(.el-form-item__content) {
  margin-bottom: 0;
}

.edit-table__actions {
  display: flex;
}

.edit-table__pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.import-dialog-content {
  padding: 0;
}

.import-section {
  margin-bottom: 24px;
}
.import-section:last-child {
  margin-bottom: 0;
}
.import-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.template-tip {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
}

.popup-select-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.popup-select-icon {
  cursor: pointer;
  margin-right: 8px;
}

.popup-select-icon:hover {
  color: #66b1ff;
}
</style>
