<template>
  <div class="container">
    <div class="header">
      <div>字典名称</div>
      <el-select v-model="currentVarName"
                 placeholder="请选择字典项"
                 @change="handleDictChange">
        <el-option v-for="item in dictList"
                   :key="item.varName"
                   :label="item.varName"
                   :value="item.varName" />
      </el-select>
    </div>

    <div>字典修改</div>

    <!-- 区域字典特殊表格 -->
    <el-table v-if="isRegionDict"
              :data="regionData"
              stripe
              style="width: 777px">
      <el-table-column prop="key" label="大区名称">
        <template #default="{ row }">
          <el-input v-model="row.key"
                    placeholder="请输入大区名称" />
        </template>
      </el-table-column>

      <el-table-column prop="value" label="包含省份（点击修改省份/地区）" width="521">
        <template #default="{ row }">
          <el-button type="primary" @click="showProvinceDialog(row)"
                     link style="width: 100%; padding: 0; height: auto; min-height: 32px; white-space: normal; word-break: break-all; line-height: 1.5; display: inline-flex; align-items: center;">
            <span style="text-align: left;">
              {{ row.value.join('，') || '点击选择省份' }}
            </span>
          </el-button>
        </template>
      </el-table-column>


      <el-table-column label="操作" width="63">
        <template #default="{ $index }">
          <el-button type="danger"
                     :icon="Delete"
                     circle
                     @click="deleteRegion($index)" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 普通字典表格 -->
    <el-table v-else
              :data="currentValues"
              stripe
              style="width: 777px">
      <el-table-column prop="value" label="字典值">
        <template #default="{ $index }">
          <el-input v-model="currentValues[$index]" placeholder="请输入" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="63">
        <template #default="{ $index }">
          <el-button type="danger"
                     :icon="Delete"
                     circle
                     @click="handleDelete($index)" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 操作按钮区域 -->
    <div class="footer">
      <template v-if="isRegionDict">
        <el-button type="primary"
                   :icon="Plus"
                   plain
                   round
                   @click="addNewRegion">
          添加大区
        </el-button>
      </template>
      <template v-else>
        <el-button type="primary"
                   :icon="Plus"
                   plain
                   round
                   @click="handleAdd">
          添加值
        </el-button>
      </template>

      <el-button type="success"
                 :icon="FolderChecked"
                 @click="handleSave">
        保存
      </el-button>
    </div>

    <!-- 省份选择对话框 -->
    <el-dialog v-model="provinceDialogVisible"
               title="选择省份/地区"
               width="50%">
      <el-checkbox-group v-model="selectedProvinces">
        <el-row :gutter="20">
          <el-col v-for="province in allProvinces"
                  :key="province"
                  :span="8"
                  style="margin-bottom: 15px;">
            <el-checkbox :label="province"
                         :value="province" />
          </el-col>
        </el-row>
      </el-checkbox-group>

      <template #footer>
        <el-button @click="provinceDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmProvinceSelection">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
  import { ref, reactive, onMounted, inject, computed } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { Plus, Delete, Edit, UploadFilled, RefreshLeft, Upload, EditPen, FolderChecked } from '@element-plus/icons-vue';

  const $http = inject('$http')
  const config = inject('config');

  // 初始字典数据
  const dictList = reactive([]);
  // 新增响应式数据
  const provinceDialogVisible = ref(false);
  const selectedProvinces = ref([]);
  const currentEditingRegion = ref(null);
  const allProvinces = computed(() => {
    const provinceDict = dictList.find(d => d.varName == '省份地区');
    return provinceDict?.varValue || [];
  });
  // 获取字典
  const getDic = async () => {
    try {
      const response = await $http.post('ConfigPY/GetConfigString');
      const serverData = response.data.response || [];

      //console.log(response);
      // 清空原有数据
      dictList.length = 0;

      // 转换数据格式
      serverData.forEach(item => {
        dictList.push({
          varName: item.varName,
          varValue: tryParseJson(item.varValue) || []
        });
      });
      //console.log(dictList);
      // 默认选中第一个（如果存在）
      if (dictList.length > 0) {
        currentVarName.value = dictList[0].varName;
      }

    } catch (error) {
      console.error('获取字典失败:', error);
      ElMessage.error('字典数据加载失败');
    }
  };

  // JSON安全解析方法
  const tryParseJson = (str) => {
    try {
      return JSON.parse(str);
    } catch {
      return null;
    }
  };

  const currentVarName = ref('');
  const currentDict = computed(() =>
    dictList.find(item => item.varName === currentVarName.value)
  );
  const currentValues = computed({
    get: () => currentDict.value?.varValue || [],
    set: (val) => {
      if (currentDict.value) {
        currentDict.value.varValue = val;
      }
    }
  });

  // 处理字典项变化
  const handleDictChange = (val) => {
    if (!val) return;
  };
  // 判断是否是区域字典
  const isRegionDict = computed(() => currentVarName.value === '区域');

  // 修改区域数据计算属性（移除setter）
  const regionData = computed(() => {
    if (!isRegionDict.value) return [];
    const regionDict = dictList.find(d => d.varName === '区域');
    return Object.entries(regionDict?.varValue || {}).map(([key, value]) => ({
      key,
      value: Array.isArray(value) ? value : [value]
    }));
  });

  // 显示省份选择对话框
  const showProvinceDialog = (row) => {
    currentEditingRegion.value = row;
    selectedProvinces.value = [...row.value];
    provinceDialogVisible.value = true;
  };

  // 修改省份选择确认方法
  const confirmProvinceSelection = async () => {
    try {
      if (!currentEditingRegion.value) return;

      // 获取当前编辑的大区信息
      const currentKey = currentEditingRegion.value.key;
      const selectedProvincesList = selectedProvinces.value;

      // 获取区域字典数据
      const regionDict = dictList.find(d => d.varName === '区域');
      if (!regionDict) return;

      // 收集所有其他大区的省份映射
      const provinceMap = new Map();
      Object.entries(regionDict.varValue).forEach(([region, provinces]) => {
        if (region !== currentKey) {
          provinces.forEach(province => {
            provinceMap.set(province, region);
          });
        }
      });

      // 检查重复省份
      const duplicates = [];
      selectedProvincesList.forEach(province => {
        if (provinceMap.has(province)) {
          duplicates.push({
            province,
            region: provinceMap.get(province)
          });
        }
      });

      // 如果有重复则提示
      if (duplicates.length > 0) {
        const confirmMessage = `
        以下省份已在其他大区存在：<br>
        ${duplicates.map(d => `${d.province} → ${d.region}`).join('<br>')}<br>
        是否确认继续保存？
      `;

        await ElMessageBox.confirm(confirmMessage, '重复省份警告', {
          confirmButtonText: '强制保存',
          cancelButtonText: '返回修改',
          type: 'warning',
          dangerouslyUseHTMLString: true
        });
      }

      // 执行保存操作
      regionDict.varValue = {
        ...regionDict.varValue,
        [currentKey]: selectedProvincesList
      };
      provinceDialogVisible.value = false;
    } catch (error) {
      if (error !== 'cancel') {
        console.error(error);
      }
      return; // 用户取消则中断流程
    }
  };
/*  const confirmProvinceSelection = () => {
    if (currentEditingRegion.value) {
      const regionDict = dictList.find(d => d.varName === '区域');
      if (regionDict) {
        regionDict.varValue = {
          ...regionDict.varValue,
          [currentEditingRegion.value.key]: selectedProvinces.value
        };
      }
    }
    provinceDialogVisible.value = false;
  };*/

  // 修改添加大区方法
  const addNewRegion = () => {
    const regionDict = dictList.find(d => d.varName === '区域');
    if (!regionDict) return;

    // 生成唯一键名
    let newKey = "新增大区";
    let counter = 1;
    while (regionDict.varValue[newKey]) {
      newKey = `新增大区${counter++}`;
    }

    // 直接修改原始数据
    regionDict.varValue = {
      ...regionDict.varValue,
      [newKey]: []
    };
  };

  // 修改删除大区方法
  const deleteRegion = (index) => {
    ElMessageBox.confirm('确定要删除该大区吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      const regionDict = dictList.find(d => d.varName === '区域');
      if (!regionDict) return;

      const keyToDelete = regionData.value[index].key;
      const newValue = { ...regionDict.varValue };
      delete newValue[keyToDelete];
      regionDict.varValue = newValue;
    });
  };

  // 添加行
  const handleAdd = () => {
    if (!currentDict.value) return;
    currentDict.value.varValue.push('');
  };

  // 删除行
  const handleDelete = (index) => {
    ElMessageBox.confirm('确定要删除该行吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      currentDict.value.varValue.splice(index, 1);
    });
  };

  // 保存字典
  const saveDic = async (name, value) => {
    try {
      let filteredValue;

      // 根据数据类型处理
      if (Array.isArray(value)) {
        // 处理普通数组格式
        filteredValue = value
          .map(item => String(item).trim())
          .filter(item => item !== "");

        if (filteredValue.length === 0) {
          throw new Error("不能保存空字典项");
        }
      } else if (typeof value === 'object' && value !== null) {
        // 处理区域字典的对象格式
        filteredValue = Object.entries(value).reduce((acc, [key, values]) => {
          const filtered = values
            .map(item => String(item).trim())
            .filter(item => item !== "");

          // 保留key即使值为空数组（如"其他"）
          if (key === '其他' || filtered.length > 0) {
            acc[key] = filtered;
          }
          return acc;
        }, {});

        // 检查是否为空对象
        if (Object.keys(filteredValue).length === 0) {
          throw new Error("至少需要保留一个有效区域");
        }
      } else {
        throw new Error("无效的字典格式");
      }

      const valueJs = JSON.stringify(filteredValue);
      const rs = await $http.post('ConfigPY/SaveOrAddConfigString', {
        VarName: name,
        VarValue: valueJs
      });

      return filteredValue;
    } catch (error) {
      console.error(error);
      throw error;
    }
  };

  // 保存处理
  const handleSave = async () => {
    if (!currentDict.value) {
      ElMessage.warning('请先选择要修改的字典项');
      return;
    }

    try {
      await ElMessageBox.confirm(
        '此操作将永久修改字典数据，是否继续？',
        '警告',
        {
          confirmButtonText: '确认保存',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
          dangerouslyUseHTMLString: true,
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              saveDic(currentDict.value.varName, currentDict.value.varValue)
                .then(() => {
                  done();
                  ElMessage.success('保存成功');
                })
                .catch(() => {
                  instance.confirmButtonLoading = false;
                  ElMessage.error('保存失败');
                });
            } else {
              done();
            }
          }
        }
      );
      // 处理区域字典的特殊结构
      let saveData = currentDict.value.varValue;

      if (isRegionDict.value) {
        // 转换回原始对象格式
        saveData = regionData.value.reduce((acc, cur) => {
          acc[cur.key] = cur.value;
          return acc;
        }, {});
      }

      // 保存并获取处理后的数据
      const filteredData = await saveDic(
        currentDict.value.varName,
        saveData
      );

      // 更新前端数据
      currentDict.value.varValue = isRegionDict.value
        ? { ...filteredData }  // 对象格式
        : [...filteredData];   // 数组格式

    } catch (error) {
      if (error === 'cancel') {
       //console.log('用户取消保存');
      } else if (error.message === '不能保存空字典项') {
        ElMessage.warning('字典项至少需要包含一个有效值');
      } else {
        ElMessage.error('保存失败: ' + error.message);
      }
    }
  };

  onMounted(() => {
    getDic()
    // 初始化选择第一个
    if (dictList.length > 0) {
      currentVarName.value = dictList[0].varName;
    }
  });
</script>

<style scoped>
  .container {
    display: block;
    padding: 20px;
    width: 100%;
  }

  .header {
    width: 333px;
    margin-bottom: 20px;
  }

  .footer {
    width: 777px;
    display: flex;
    justify-content: space-between; /* 推荐方案 */
    gap: 10px;
    margin-top: 20px;
  }
  .el-message-box {
    max-height: 70vh;
    overflow-y: auto;
  }
</style>
