<template>
  <el-table :data="groupedItems" height="500px" row-key="itemName" :expand-row-keys="defaultExpandedRows">
    <!-- 展开行内容 -->
    <el-table-column type="expand">
      <template slot-scope="scope">
        <el-table :data="scope.row.languages" border size="mini" style="width: 100%; margin-top: 10px;">
          <el-table-column label="语言编码" align="center" prop="langCode" width="120" />
          <el-table-column label="正文" align="center" prop="content" show-overflow-tooltip />
          <el-table-column label="是否启用" align="center" prop="isEnabled" width="100" />
          <el-table-column label="操作" align="center" width="140">
            <template slot-scope="langScope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(langScope.row)">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete"
                @click="handleDelete(langScope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>

    <!-- <el-table-column type="selection" width="55" align="center" /> -->
    <el-table-column label="多语言键" align="center" prop="itemName" />
    <el-table-column label="描述" align="center" prop="description" />
    <el-table-column label="排序" align="center" prop="sortOrder" width="80" />
    <el-table-column label="备注" align="center" prop="remark" />
    <el-table-column label="语言数量" align="center" width="100">
      <template slot-scope="scope">{{ scope.row.languages.length }}</template>
    </el-table-column>
    <!-- <el-table-column label="操作" align="center" width="160">
      <template slot-scope="scope">
        <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAddLanguage(scope.row)">添加语言</el-button>
        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditMain(scope.row)">编辑主信息</el-button>
      </template>
    </el-table-column> -->
  </el-table>
</template>

<script>
export default {
  name: "GroupedItemTable",
  props: {
    itemList: {
      type: Array,
      default: () => [],
    },
    // 可设置默认展开的行
    defaultExpanded: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    // 按多语言键分组数据
    groupedItems () {
      const groups = {};

      // 遍历原始数据进行分组
      this.itemList.forEach(item => {
        if (!groups[item.itemName]) {
          // 初始化分组，提取共同属性
          groups[item.itemName] = {
            itemName: item.itemName,
            description: item.description,
            sortOrder: item.sortOrder,
            remark: item.remark,
            languages: []
          };
        }

        // 将当前语言项添加到对应分组
        groups[item.itemName].languages.push({
          ...item
        });
      });

      return Object.values(groups);
    },
    // 默认展开的行
    defaultExpandedRows () {
      return this.defaultExpanded;
    }
  },
  methods: {
    // 修改语言项
    handleUpdate (row) {
      this.$emit("update", row);
    },
    // 删除语言项
    handleDelete (row) {
      this.$emit("delete", row);
    },
  }
}
</script>