<template>
  <el-dialog
    v-model="dialogVisible"
    title="设置数据域与字段发现规则"
    width="700px"
    :before-close="handleClose"
  >
    <div class="domain-rule-dialog">
      <!-- 搜索区域 -->
      <div class="search-section">
        <el-input
          v-model="domainSearch"
          placeholder="请输入数据域名称"
          size="small"
          prefix-icon="Search"
          clearable
        />
      </div>

      <div class="content-section">
        <!-- 左侧数据域列表 -->
        <div class="domain-list">
          <div class="section-title">选择数据域</div>
          <div class="list-container">
            <el-radio-group v-model="selectedDomain" @change="handleDomainChange">
              <div
                v-for="domain in filteredDomains"
                :key="domain.value"
                class="domain-item"
              >
                <el-radio :label="domain.value">
                  {{ domain.label }}
                </el-radio>
              </div>
            </el-radio-group>
          </div>
        </div>

        <!-- 右侧字段发现规则 -->
        <div class="rule-list">
          <div class="section-title">选择字段发现规则</div>
          <div class="list-container">
            <el-radio-group v-model="selectedRule">
              <div
                v-for="rule in currentRules"
                :key="rule.value"
                class="rule-item"
              >
                <el-radio :label="rule.value">
                  {{ rule.label }}
                </el-radio>
              </div>
            </el-radio-group>
          </div>
        </div>
      </div>

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

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

const props = defineProps({

  // 已选择的规则数据 { domain: '', rule: '' }
  selectedData: {
    type: Object,
    default: () => ({})
  }
})

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

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const domainSearch = ref('')
const selectedDomain = ref('')
const selectedRule = ref('')

// 数据域选项（根据图片内容）
const domains = ref([
  { value: 'general', label: '通用规则' },
  { value: 'decrypt', label: '解密数据' },
  { value: 'mixed_id', label: '混合证件号' },
  { value: 'email', label: '电子邮件' },
  { value: 'social_security', label: '社保卡号' },
  { value: 'business_license', label: '营业执照' },
  { value: 'postal_code', label: '邮政编码' },
  { value: 'chinese_address', label: '中文地址' },
  { value: 'mixed_phone', label: '混合电话号码' },
  { value: 'name', label: '姓名' },
  { value: 'bank_card', label: '银行卡号' },
  { value: 'ip_address', label: 'IP地址' }
])

// 字段发现规则映射
const rulesMapping = {
  general: [
    { value: 'general_rule_1', label: '通用规则查询' },
    { value: 'general_rule_2', label: '通用数据发现' }
  ],
  decrypt: [
    { value: 'decrypt_rule_1', label: '解密数据查询' },
    { value: 'decrypt_rule_2', label: '数据解密规则' }
  ],
  mixed_id: [
    { value: 'mixed_id_rule_1', label: '按混合证件号字段查询' }
  ],
  email: [
    { value: 'email_rule_1', label: '邮箱字段查询' },
    { value: 'email_rule_2', label: '电子邮件规则' }
  ],
  social_security: [
    { value: 'ss_rule_1', label: '社保卡号查询' }
  ],
  business_license: [
    { value: 'bl_rule_1', label: '营业执照查询' }
  ],
  postal_code: [
    { value: 'pc_rule_1', label: '邮政编码查询' }
  ],
  chinese_address: [
    { value: 'address_rule_1', label: '中文地址查询' }
  ],
  mixed_phone: [
    { value: 'phone_rule_1', label: '混合电话查询' }
  ],
  name: [
    { value: 'name_rule_1', label: '姓名字段查询' }
  ],
  bank_card: [
    { value: 'bank_rule_1', label: '银行卡号查询' }
  ],
  ip_address: [
    { value: 'ip_rule_1', label: 'IP地址查询' }
  ]
}

// 过滤后的数据域列表
const filteredDomains = computed(() => {
  if (!domainSearch.value) return domains.value
  return domains.value.filter(domain =>
    domain.label.toLowerCase().includes(domainSearch.value.toLowerCase())
  )
})

// 当前选中的数据域对应的规则
const currentRules = computed(() => {
  return rulesMapping[selectedDomain.value] || []
})

// 打开弹窗时初始化
const initDialog = () => {
  if (props.selectedData.domain) {
    selectedDomain.value = props.selectedData.domain
    selectedRule.value = props.selectedData.rule || ''
  } else {
    // 默认选择第一个数据域和第一个规则
    selectedDomain.value = domains.value[0]?.value || ''
    if (selectedDomain.value && currentRules.value.length > 0) {
      selectedRule.value = currentRules.value[0].value
    }
  }
}

// 处理数据域变化
const handleDomainChange = (domainValue) => {
  if (rulesMapping[domainValue] && rulesMapping[domainValue].length > 0) {
    selectedRule.value = rulesMapping[domainValue][0].value
  } else {
    selectedRule.value = ''
  }
}

// 重置规则
const handleReset = () => {
  selectedDomain.value = domains.value[0]?.value || ''
  if (selectedDomain.value && currentRules.value.length > 0) {
    selectedRule.value = currentRules.value[0].value
  }
  domainSearch.value = ''
}

// 确定规则
const handleConfirm = () => {
  if (!selectedDomain.value) {
    ElMessage.warning('请选择数据域')
    return
  }
  
  if (!selectedRule.value) {
    ElMessage.warning('请选择字段发现规则')
    return
  }

  const selectedDomainObj = domains.value.find(d => d.value === selectedDomain.value)
  const selectedRuleObj = currentRules.value.find(r => r.value === selectedRule.value)

  emit('confirm', {
    domain: selectedDomain.value,
    domainLabel: selectedDomainObj?.label || '',
    rule: selectedRule.value,
    ruleLabel: selectedRuleObj?.label || ''
  })
  
  dialogVisible.value = false
}

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

// 监听弹窗显示状态
watch(dialogVisible, (newVal) => {
  if (newVal) {
    initDialog()
  }
})

const openDialog = () => {
   initDialog()
  dialogVisible.value = true
}
// 暴露方法
defineExpose({
  openDialog
})
</script>

<style scoped lang="scss">
.domain-rule-dialog {
  .search-section {
    margin-bottom: 16px;
    
    :deep(.el-input__inner) {
      height: 32px;
    }
  }

  .content-section {
    display: flex;
    gap: 20px;
    height: 400px;
  }

  .domain-list,
  .rule-list {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .section-title {
    font-size: 14px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 12px;
    padding-left: 4px;
  }

  .list-container {
    flex: 1;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 12px;
    overflow-y: auto;
  }

  .domain-item,
  .rule-item {
    padding: 8px 0;
    
    :deep(.el-radio) {
      width: 100%;
      
      .el-radio__label {
        font-size: 13px;
      }
    }
  }

  .domain-item {
    &:hover {
      background-color: #f5f7fa;
      border-radius: 4px;
    }
  }

  .rule-item {
    &:hover {
      background-color: #f5f7fa;
      border-radius: 4px;
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
  }
}
:deep(.el-radio-group) {
 display: block;
}
</style>