<template>
  <el-dialog
    v-model="dialogVisible"
    title="设置脱敏规则"
    width="800px"
    :before-close="handleClose"
  >
    <div class="desensitization-dialog">
      <div class="dialog-content">
        <!-- 左侧：选择数据域（按照图片样式重写） -->
        <div class="data-domain-section">
          <!-- <el-card></el-card> -->
          <div class="selector-header">
            <span class="selector-title">选择数据域</span>
          </div>
          
          <div class="options-list">
            <div 
              v-for="domain in dataDomains" 
              :key="domain.value"
              class="option-item"
              :class="{ 'option-selected': selectedDomain === domain.value }"
              @click="selectDomain(domain.value)"
            >
              <!-- 自定义单选按钮 -->
              <div class="custom-radio">
                <div class="radio-outer">
                  <div class="radio-inner" :class="{ selected: selectedDomain === domain.value }"></div>
                </div>
              </div>
              
              <!-- 选项标签 -->
              <span class="option-label">{{ domain.label }}</span>
            </div>
          </div>
        </div>

        <!-- <el-divider direction="vertical" /> -->

        <!-- 右侧：选择字段脱敏规则 -->
        <div class="algorithm-section">
          <h4>选择字段脱敏规则</h4>
          <div class="algorithm-list">
            <el-radio-group v-model="selectedAlgorithm">
              <el-radio
                v-for="algorithm in currentAlgorithms"
                :key="algorithm.value"
                :label="algorithm.value"
                class="algorithm-item"
              >
                {{ algorithm.label }}
              </el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
         <el-divider  style="height: 1px;"/>

      <!-- 底部按钮 -->
      <div class="dialog-footer">
        <el-button @click="resetRules">重置规则</el-button>
        <el-button type="primary" @click="confirmRules">确定规则</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  currentField: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue', 'confirm'])

// 弹窗显示控制
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 数据域选项（完全按照图片顺序）
const dataDomains = ref([
  { value: 'wang', label: '小王' },
  { value: 'test', label: '测试数据域' },
  { value: 'general', label: '通用规则' },
  { value: 'decrypt', label: '解密数据' },
  { value: 'mixed_id', label: '混合证件号' },
  { value: 'black_white', label: '黑白名单' },
  { value: 'english_address', label: '英文地址' },
  { value: 'name', label: '姓名' },
  { value: 'phone', label: '手机号码' },
  { value: 'age', label: '年龄' },
  { value: 'business_license', label: '营业执照' },
  { value: 'mixed_phone', label: '混合电话号码' }
])

// 脱敏算法选项
const algorithmOptions = {
  // 通用规则
  general: [
    { value: 'general_mask', label: '通用掩码' },
    { value: 'general_encrypt', label: '通用加密' },
    { value: 'general_hash', label: '通用哈希' }
  ],
  // 姓名
  name: [
    { value: 'name_mask', label: '姓名掩码' },
    { value: 'name_random', label: '姓名随机替换' },
    { value: 'name_encrypt', label: '姓名加密' }
  ],
  // 手机号码
  phone: [
    { value: 'phone_mask', label: '手机号掩码' },
    { value: 'phone_encrypt', label: '手机号加密' },
    { value: 'phone_hash', label: '手机号哈希' }
  ],
  // 其他数据域的算法...
  wang: [
    { value: 'wang_mask', label: '小王掩码' },
    { value: 'wang_encrypt', label: '小王加密' }
  ],
  test: [
    { value: 'test_mask', label: '测试掩码' },
    { value: 'test_encrypt', label: '测试加密' }
  ],
  // 默认算法
  default: [
    { value: 'mask', label: '掩码处理' },
    { value: 'encrypt', label: '加密处理' },
    { value: 'hash', label: '哈希处理' }
  ]
}

// 选中的数据域和算法
const selectedDomain = ref('general')
const selectedAlgorithm = ref('')

// 计算当前可用的脱敏算法
const currentAlgorithms = computed(() => {
  return algorithmOptions[selectedDomain.value] || algorithmOptions.default
})

// 选择数据域
const selectDomain = (value) => {
  selectedDomain.value = value
  const algorithms = currentAlgorithms.value
  if (algorithms.length > 0) {
    selectedAlgorithm.value = algorithms[0].value
  }
}

// 重置选择函数
const resetSelection = () => {
  selectedDomain.value = 'general'
  const algorithms = currentAlgorithms.value
  if (algorithms.length > 0) {
    selectedAlgorithm.value = algorithms[0].value
  }
}

// 根据算法推断数据域
const inferDomainFromAlgorithm = (algorithm) => {
  for (const [domain, algorithms] of Object.entries(algorithmOptions)) {
    if (algorithms.some(algo => algo.value === algorithm)) {
      selectedDomain.value = domain
      return
    }
  }
  selectedDomain.value = 'general'
}

// 监听当前字段变化，恢复已保存的规则
watch(() => props.currentField, (newField) => {
  if (newField && newField.algorithm) {
    selectedAlgorithm.value = newField.algorithm
    inferDomainFromAlgorithm(newField.algorithm)
  } else {
    resetSelection()
  }
}, { immediate: true })

// 组件挂载时初始化
onMounted(() => {
  resetSelection()
})

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
}

// 重置规则
const resetRules = () => {
  resetSelection()
  ElMessage.info('规则已重置')
}

// 确定规则
const confirmRules = () => {
  if (!selectedAlgorithm.value) {
    ElMessage.warning('请选择脱敏规则')
    return
  }

  emit('confirm', {
    algorithm: selectedAlgorithm.value,
    domain: selectedDomain.value,
    fieldName: props.currentField.name
  })

  ElMessage.success('脱敏规则设置成功')
  dialogVisible.value = false
}
</script>

<style scoped lang="scss">
.desensitization-dialog {
  .dialog-content {
    display: flex;
    height: 400px;
  }

  .data-domain-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
  }

  .algorithm-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
  }

  .selector-header {
    padding: 0 0 16px 0;
    margin-bottom: 8px;
    // border-bottom: 1px dashed #dcdfe6;
    
    .selector-title {
      font-size: 16px;
      font-weight: 900;
      color: #000000;
      line-height: 1.5;
      display: block;
    }
  }

  .options-list {
    border: thin solid #dcdfe6;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);

    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    overflow-y: auto;
  }

  .option-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px dashed #e0e0e0;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:hover {
      background-color: #f8f9fa;
    }
    
    &.option-selected {
      background-color: #f0f7ff;
      
      .option-label {
        color: #1890ff;
        font-weight: 500;
      }
      .radio-outer {
        background-color: #1890ff;
      }
    }
  }

  .custom-radio {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .radio-outer {
    width: 16px;
    height: 16px;
    border: 2px solid #c0c4cc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    
    .option-selected & {
      border-color: #1890ff;
      background-color: #1890ff;
    }
  }

  .radio-inner {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.2s ease;
    
    &.selected {
      background-color: #ffffff;
    }
  }

  .option-label {
    font-size: 14px;
    color: #606266;
    line-height: 1.5;
    flex: 1;
    user-select: none;
    
    .option-selected & {
      color: #1890ff;
    }
  }

  h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #606266;
  }

  .algorithm-list {
    flex: 1;
    overflow-y: auto;
  }

  .algorithm-item {
    display: block;
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s;

    &:hover {
      background-color: #f5f7fa;
    }

    :deep(.el-radio__label) {
      font-size: 13px;
    }
  }

  .el-divider {
    // height: 360px;
    // margin: 0 20px;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    gap: 12px;
  }
}
</style>