<template>
  <el-dialog
    title="设置加密规则"
    v-model="dialogVisible"
    width="800px"
    :before-close="handleClose"
  >
    <div class="encryption-rule-dialog">
      <!-- 上部：规则和密钥选择 -->
      <div class="selection-section">
        <!-- 左侧加密规则选择 -->
        <div class="rule-selection">
          <div class="section-title">选择加密规则</div>
          <el-radio-group v-model="selectedRule" class="rule-radio-group">
            <el-radio 
              v-for="rule in encryptionRules" 
              :key="rule.id" 
              :label="rule.id"
              class="rule-radio"
            >
              {{ rule.name }}
            </el-radio>
          </el-radio-group>
        </div>

        <!-- 分割线 -->
        <div class="divider"></div>

        <!-- 右侧加密密钥选择 -->
        <div class="key-selection">
          <div class="section-title">选择加密密钥</div>
          <el-radio-group v-model="selectedKey" class="key-radio-group">
            <el-radio 
              v-for="key in currentKeys" 
              :key="key.id" 
              :label="key.id"
              class="key-radio"
            >
              {{ key.name }}
            </el-radio>
          </el-radio-group>
        </div>
      </div>

      <!-- 下部：配置区域 -->
      <div class="config-section">
        <div class="config-row">
          <!-- 加密位置 -->
          <div class="config-item">
            <span class="required-label">*加密位置:</span>
            <el-select v-model="ruleConfig.positionType" style="width: 120px">
              <el-option label="保留前" value="prefix" />
              <el-option label="保留后" value="suffix" />
            </el-select>
            <el-input-number 
              v-model="ruleConfig.position" 
              :min="0" 
              :max="100" 
              controls-position="right"
              style="width: 100px; margin-left: 10px;"
            />
            <span class="unit">位</span>
          </div>
        </div>
        <div class="config-row">
          <!-- 源长度 -->
          <div class="config-item">
            <span class="label">源长度:</span>
            <el-input-number 
              v-model="ruleConfig.sourceLength" 
              :min="0" 
              :max="1000" 
              controls-position="right"
              style="width: 100px;"
            />
            <el-button 
              type="primary" 
              size="small" 
              style="margin-left: 10px;"
              @click="calculateLength"
            >
              计算
            </el-button>
          </div>

          <!-- 加密后长度 -->
          <div class="config-item">
            <span class="label">加密后长度:</span>
            <span class="value">{{ encryptedLength || '--' }}</span>
          </div>
        </div>
        <div class="action-row">
          <el-checkbox v-model="supportFuzzy">支持模糊</el-checkbox>
          <div class="action-buttons">
            <el-button @click="resetRules">重置规则</el-button>
            <el-button type="primary" @click="confirmRules">确定规则</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

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

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

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

// 加密规则数据
const encryptionRules = ref([
  { id: 'name', name: '姓名加密规则' },
  { id: 'gender', name: '性别加密规则' }
])

// 加密密钥数据
const encryptionKeys = ref({
  name: [
    { id: 'name_key1', name: '姓名加密密钥1' },
    { id: 'name_key2', name: '姓名加密密钥2' }
  ],
  gender: [
    { id: 'gender_key1', name: '性别加密密钥1' },
    { id: 'gender_key2', name: '性别加密密钥2' }
  ]
})

// 当前选中的规则
const selectedRule = ref('name')

// 当前选中的密钥
const selectedKey = ref('')

// 当前显示的密钥列表
const currentKeys = computed(() => {
  return encryptionKeys.value[selectedRule.value] || []
})

// 加密配置
const ruleConfig = ref({
  positionType: 'prefix',
  position: 0,
  sourceLength: 100
})

// 加密后长度
const encryptedLength = ref('')

// 是否支持模糊
const supportFuzzy = ref(false)

// 监听规则变化，自动选择第一个密钥
watch(selectedRule, (newVal) => {
  if (currentKeys.value.length > 0) {
    selectedKey.value = currentKeys.value[0].id
  }
}, { immediate: true })

// 计算加密后长度
const calculateLength = () => {
  // 这里应该是实际的加密长度计算逻辑
  encryptedLength.value = Math.floor(ruleConfig.value.sourceLength * 0.8)
}

// 重置规则
const resetRules = () => {
  selectedRule.value = 'name'
  ruleConfig.value = {
    positionType: 'prefix',
    position: 0,
    sourceLength: 100
  }
  encryptedLength.value = ''
  supportFuzzy.value = false
}

// 确认规则
const confirmRules = () => {
  emit('confirm', {
    rule: selectedRule.value,
    key: selectedKey.value,
    config: ruleConfig.value,
    supportFuzzy: supportFuzzy.value,
    encryptedLength: encryptedLength.value
  })
  dialogVisible.value = false
}

// 关闭弹窗前处理
const handleClose = (done) => {
  done()
}
</script>

<style scoped>
.encryption-rule-dialog {
  padding: 10px;
}

.selection-section {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.rule-selection, .key-selection {
  flex: 1;
  padding: 0 15px;
}

/* 新增的分割线样式 */
.divider {
  width: 1px;
  background-color: #ebeef5;
  margin: 0 10px;
}

.section-title {
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.rule-radio-group, .key-radio-group {
  display: flex;
  flex-direction: column;
}

.rule-radio, .key-radio {
  margin: 5px 0;
}

.config-section {
  padding: 0 15px;
}

.config-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.config-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.required-label {
  width: 80px;
  text-align: right;
  margin-right: 10px;
  font-size: 14px;
  color: #f56c6c;
}

.label {
  text-align: right;
  margin-right: 10px;
  font-size: 14px;
  color: #666;
}

.unit {
  margin-left: 5px;
  font-size: 14px;
  color: #666;
}

.value {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}
</style>