<template>
  <div>
    <!-- 工具栏 -->
    <template v-for="item in toolbar" :key="item">
      <template v-if="typeof item === 'string'">
        <!-- 新增 -->
        <template v-if="item === 'add'">
          <el-button type="success" icon="plus" @click="handleToolbar(item)">新增</el-button>
        </template>
        <!-- 删除 -->
        <template v-else-if="item === 'delete'">
          <el-button type="danger" icon="delete" :disabled="removeIds.length === 0" @click="handleToolbar(item)">
            删除
          </el-button>
        </template>
        <!-- 导入 -->
        <template v-else-if="item === 'import'">
          <el-button type="default" icon="upload" @click="handleToolbar(item)">导入</el-button>
        </template>
        <!-- 导出 -->
        <template v-else-if="item === 'export'">
          <el-button type="default" icon="download" @click="handleToolbar(item)">导出</el-button>
        </template>
      </template>
      <!-- 其他 -->
      <template v-else-if="typeof item === 'object'">
        <el-button :icon="item.icon" :type="item.type ?? 'default'" @click="handleToolbar(item.name)">
          {{ item.text }}
        </el-button>
      </template>
    </template>
    <!-- 表格 -->
    <el-table ref="tableRef" border :data="pageData" style="margin-top: 20px">
      <template v-for="col in cols" :key="col">
        <el-table-column v-bind="col">
          <template #default="scope">
            <!-- 显示图片 -->
            <template v-if="col.templet === 'image'">
              <template v-if="col.prop">
                <template v-if="Array.isArray(scope.row[col.prop])">
                  <template v-for="(item, index) in scope.row[col.prop]" :key="item">
                    <el-image :src="item" :preview-src-list="scope.row[col.prop]" :initial-index="index"
                      :preview-teleported="true"
                      :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`" />
                  </template>
                </template>
                <template v-else>
                  <el-image :src="scope.row[col.prop]" :preview-src-list="[scope.row[col.prop]]"
                    :preview-teleported="true"
                    :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`" />
                </template>
              </template>
            </template>
            <!-- 根据行的selectList属性返回对应列表值 -->
            <template v-else-if="col.templet === 'list'">
              <template v-if="col.prop">
                {{ (col.selectList ?? {})[scope.row[col.prop]] }}
              </template>
            </template>
            <!-- 格式化显示链接 -->
            <template v-else-if="col.templet === 'url'">
              <template v-if="col.prop">
                <el-link type="primary" :href="scope.row[col.prop]" target="_blank">
                  {{ scope.row[col.prop] }}
                </el-link>
              </template>
            </template>
            <!-- 生成开关组件 -->
            <template v-else-if="col.templet === 'switch'">
              <template v-if="col.prop">
                <!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 -->
                <el-switch v-model="scope.row[col.prop]" :active-value="col.activeValue ?? 1"
                  :inactive-value="col.inactiveValue ?? 0" :inline-prompt="true" :active-text="col.activeText ?? ''"
                  :inactive-text="col.inactiveText ?? ''" :validate-event="false" @change="
                    pageData.length > 0 && handleModify(col.prop, scope.row[col.prop], scope.row)
                    " />
              </template>
            </template>
            <!-- 生成输入框组件 -->
            <!-- <template v-else-if="col.templet === 'input'">
              <template v-if="col.prop">
                <el-input v-model="scope.row[col.prop]" :type="col.inputType ?? 'text'"
                  :disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
                  @blur="handleModify(col.prop, scope.row[col.prop], scope.row)" />
              </template>
            </template> -->
            <!-- 格式化为价格 -->
            <!-- <template v-else-if="col.templet === 'price'">
              <template v-if="col.prop">
                {{ `${col.priceFormat ?? "￥"}${scope.row[col.prop]}` }}
              </template>
            </template> -->
            <!-- 格式化为百分比 -->
            <!-- <template v-else-if="col.templet === 'percent'">
              <template v-if="col.prop">{{ scope.row[col.prop] }}%</template>
            </template> -->
            <!-- 显示图标 -->
            <!-- <template v-else-if="col.templet === 'icon'">
              <template v-if="col.prop">
                <template v-if="scope.row[col.prop].startsWith('el-icon-')">
                  <el-icon>
                    <component :is="scope.row[col.prop].replace('el-icon-', '')" />
                  </el-icon>
                </template>
                <template v-else>
                  <div class="i-svg:{{ scope.row[col.prop] }}" />
                </template>
              </template>
            </template> -->
            <!-- 格式化时间 -->
            <template v-else-if="col.templet === 'date'">
              <template v-if="col.prop">
                {{
                  scope.row[col.prop]
                    ? useDateFormat(scope.row[col.prop], col.dateFormat ?? "YYYY-MM-DD HH:mm:ss")
                      .value
                    : ""
                }}
              </template>
            </template>
            <!-- 列操作栏 -->
            <template v-else-if="col.templet === 'tool'">
              <template v-for="item in col.operat ?? ['edit', 'delete']" :key="item">
                <template v-if="typeof item === 'string'">
                  <!-- 编辑/删除 -->
                  <template v-if="item === 'edit' || item === 'delete'">
                    <el-button :type="item === 'edit' ? 'primary' : 'danger'" :icon="item" size="small" link @click="
                      handleOperat({
                        name: item,
                        row: scope.row,
                        column: scope.column,
                        $index: scope.$index,
                      })
                      ">
                      {{ item === "edit" ? "编辑" : "删除" }}
                    </el-button>
                  </template>
                </template>
                <!-- 其他 -->
                <!-- <template v-else-if="typeof item === 'object'">
                  <el-button v-if="item.render === undefined || item.render(scope.row)" v-bind="item.auth ? { 'v-hasPerm': [`${contentConfig.pageName}:${item.auth}`] } : {}
                    " :icon="item.icon" :type="item.type ?? 'primary'" size="small" link @click="
                      handleOperat({
                        name: item.name,
                        row: scope.row,
                        column: scope.column,
                        $index: scope.$index,
                      })
                      ">
                    {{ item.text }}
                  </el-button>
                </template> -->
              </template>
            </template>
            <!-- 自定义 -->
            <!-- <template v-else-if="col.templet === 'custom'">
              <slot :name="col.slotName ?? col.prop" :prop="col.prop" v-bind="scope" />
            </template> -->
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页 -->
    <div>
      <el-pagination v-bind="pagination" @size-change="handleSizeChange" />
    </div>
  </div>
</template>
<script setup lang="ts">
// 定义接收的属性
const props = defineProps<{
  list: any;
}>();
// 表格左侧工具栏
const toolbar = props.list.toolbar || ["add"];
// 删除ID集合 用于批量删除
const removeIds = ref<(number | string)[]>([]);
// 表格的数据
const pageData = props.list.pageData || [];
// 表格的列
const cols = props.list.cols;
// 开关属性修改
function handleModify(field: string, value: boolean | string | number, row: Record<string, any>) {
  // if (props.contentConfig.modifyAction) {
  //   props.contentConfig.modifyAction({
  //     [pk]: row[pk],
  //     field: field,
  //     value: value,
  //   });
  // } else {
  //   ElMessage.error("未配置modifyAction");
  // }
}

// 定义自定义事件
const emit = defineEmits(['addClick'])


// 工具操作栏
function handleToolbar(name: string) {
  switch (name) {
    // case "refresh":
    //   handleRefresh();
    //   break;
    // case "exports":
    //   handleOpenExportsModal();
    //   break;
    // case "imports":
    //   handleOpenImportModal();
    //   break;
    // case "search":
    //   emit("searchClick");
    //   break;
    case "add":
      emit("addClick");
      break;
    // case "delete":
    //   handleDelete();
    //   break;
    // case "import":
    //   handleOpenImportModal(true);
    //   break;
    // case "export":
    //   emit("exportClick");
    //   break;
    default:
      // emit("toolbarClick", name);
      break;
  }
}
// 操作列
function handleOperat(data: any) {
  switch (data.name) {
    case "edit":
      // emit("editClick", data.row);
      break;
    case "delete":
      // handleDelete(data.row[pk]);
      break;
    default:
      // emit("operatClick", data);
      break;
  }
}
// 分页
const pagination = props.list.pagination;
// 分页切换
function handleSizeChange(value: number) {
  pagination.pageSize = value;
  // handleRefresh();
}
// function handleCurrentChange(value: number) {
// pagination.currentPage = value;
// handleRefresh();
// }
</script>
