<template>
  <div class="main-container">
    <el-card class="box-card !border-none" shadow="never">
      <el-tabs v-model="active">
        <el-tab-pane label="优秀一堂课" name="CourseSyllabus">
          <div class="flex justify-between items-center">
            <el-button type="primary" @click="addEvent">
              {{ t('addLessonCourseTeaching') }}
            </el-button>
          </div>
          <el-card
            class="box-card !border-none my-[10px] table-search-wrap"
            shadow="never"
          >
            <el-form
              :inline="true"
              :model="lessonCourseTeachingTable.searchParam"
              ref="searchFormRef"
            >
              <el-form-item :label="t('title')" prop="title">
                <el-input
                  v-model="lessonCourseTeachingTable.searchParam.title"
                  :placeholder="t('titlePlaceholder')"
                />
              </el-form-item>

              <el-form-item :label="t('status')" prop="status">
                <el-select
                  class="w-[280px]"
                  v-model="lessonCourseTeachingTable.searchParam.status"
                  clearable
                  :placeholder="t('statusPlaceholder')"
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option
                    v-for="(item, index) in statusList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item :label="t('createTime')" prop="create_time">
                <el-date-picker
                  v-model="lessonCourseTeachingTable.searchParam.create_time"
                  type="datetimerange"
                  format="YYYY-MM-DD hh:mm:ss"
                  :start-placeholder="t('startDate')"
                  :end-placeholder="t('endDate')"
                />
              </el-form-item>

              <el-form-item :label="t('updateTime')" prop="update_time">
                <el-date-picker
                  v-model="lessonCourseTeachingTable.searchParam.update_time"
                  type="datetimerange"
                  format="YYYY-MM-DD hh:mm:ss"
                  :start-placeholder="t('startDate')"
                  :end-placeholder="t('endDate')"
                />
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  @click="loadLessonCourseTeachingList()"
                  >{{ t('search') }}</el-button
                >
                <el-button @click="resetForm(searchFormRef, 16)">{{
                  t('reset')
                }}</el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <div class="mt-[10px]">
            <el-table
              :data="lessonCourseTeachingTable.data"
              size="large"
              v-loading="lessonCourseTeachingTable.loading"
            >
              <template #empty>
                <span>{{
                  !lessonCourseTeachingTable.loading ? t('emptyData') : ''
                }}</span>
              </template>
              <el-table-column
                prop="title"
                :label="t('title')"
                min-width="120"
                :show-overflow-tooltip="true"
              />

              <el-table-column :label="t('image')" width="100" align="left">
                <template #default="{ row }">
                  <el-avatar v-if="row.image" :src="img(row.image)" />
                  <el-avatar v-else icon="UserFilled" />
                </template>
              </el-table-column>
              <el-table-column
                :label="t('type')"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <div v-for="(item, index) in typeList">
                    <div v-if="item.value == row.type">{{ item.name }}</div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="t('status')"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <div v-for="(item, index) in statusList">
                    <div v-if="item.value == row.status">{{ item.name }}</div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="t('operation')"
                fixed="right"
                min-width="120"
              >
                <template #default="{ row }">
                  <el-button type="primary" link @click="editEvent(row)">{{
                    t('edit')
                  }}</el-button>
                  <el-button
                    type="primary"
                    link
                    @click="deleteEvent(row.id, 16)"
                    >{{ t('delete') }}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="mt-[16px] flex justify-end">
              <el-pagination
                v-model:current-page="lessonCourseTeachingTable.page"
                v-model:page-size="lessonCourseTeachingTable.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="lessonCourseTeachingTable.total"
                @size-change="loadLessonCourseTeachingList()"
                @current-change="loadLessonCourseTeachingList"
              />
            </div>
          </div>

          <edit
            ref="editLessonCourseTeachingDialog"
            @complete="loadLessonCourseTeachingList"
          />
        </el-tab-pane>
        <el-tab-pane label="空中忍者" name="JumpLessonLibrary">
          <div class="flex justify-between items-center">
            <el-button type="primary" @click="addJumpLessonLibrary">
              {{ t('addJumpLessonLibrary') }}
            </el-button>
          </div>
          <el-card
            class="box-card !border-none my-[10px] table-search-wrap"
            shadow="never"
          >
            <el-form
              :inline="true"
              :model="JumpLessonLibraryTable.searchParam"
              ref="searchFormRef"
            >
              <el-form-item :label="t('title')" prop="title">
                <el-input
                  v-model="JumpLessonLibraryTable.searchParam.title"
                  :placeholder="t('titlePlaceholder')"
                />
              </el-form-item>

              <el-form-item :label="t('status')" prop="status">
                <el-select
                  class="w-[280px]"
                  v-model="JumpLessonLibraryTable.searchParam.status"
                  clearable
                  :placeholder="t('statusPlaceholder')"
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option
                    v-for="(item, index) in statusList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item :label="t('createTime')" prop="create_time">
                <el-date-picker
                  v-model="JumpLessonLibraryTable.searchParam.create_time"
                  type="datetimerange"
                  format="YYYY-MM-DD hh:mm:ss"
                  :start-placeholder="t('startDate')"
                  :end-placeholder="t('endDate')"
                />
              </el-form-item>

              <el-form-item :label="t('updateTime')" prop="update_time">
                <el-date-picker
                  v-model="JumpLessonLibraryTable.searchParam.update_time"
                  type="datetimerange"
                  format="YYYY-MM-DD hh:mm:ss"
                  :start-placeholder="t('startDate')"
                  :end-placeholder="t('endDate')"
                />
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  @click="loadJumpLessonLibraryList()"
                  >{{ t('search') }}</el-button
                >
                <el-button @click="resetForm(searchFormRef, 17)">{{
                  t('reset')
                }}</el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <div class="mt-[10px]">
            <el-table
              :data="JumpLessonLibraryTable.data"
              size="large"
              v-loading="JumpLessonLibraryTable.loading"
            >
              <template #empty>
                <span>{{
                  !JumpLessonLibraryTable.loading ? t('emptyData') : ''
                }}</span>
              </template>
              <el-table-column
                prop="title"
                :label="t('title')"
                min-width="120"
                :show-overflow-tooltip="true"
              />

              <el-table-column :label="t('image')" width="100" align="left">
                <template #default="{ row }">
                  <el-avatar v-if="row.image" :src="img(row.image)" />
                  <el-avatar v-else icon="UserFilled" />
                </template>
              </el-table-column>
              <el-table-column
                :label="t('type')"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <div v-for="(item, index) in typeList">
                    <div v-if="item.value == row.type">{{ item.name }}</div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="t('status')"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <div v-for="(item, index) in statusList">
                    <div v-if="item.value == row.status">{{ item.name }}</div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="t('operation')"
                fixed="right"
                min-width="120"
              >
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    link
                    @click="editJumpLessonLibrary(row)"
                    >{{ t('edit') }}</el-button
                  >
                  <el-button
                    type="primary"
                    link
                    @click="deleteEvent(row.id, 17)"
                    >{{ t('delete') }}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="mt-[16px] flex justify-end">
              <el-pagination
                v-model:current-page="JumpLessonLibraryTable.page"
                v-model:page-size="JumpLessonLibraryTable.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="JumpLessonLibraryTable.total"
                @size-change="loadJumpLessonLibraryList()"
                @current-change="loadJumpLessonLibraryList"
              />
            </div>
          </div>

          <edit-jump
            ref="editJumpLessonLibraryDialog"
            @complete="loadJumpLessonLibraryList"
          />
        </el-tab-pane>
        <el-tab-pane label="篮球动作" name="EnTeachingLibrary">
          <div class="flex justify-between items-center">
            <el-button type="primary" @click="addEnTeachingLibrary">
              {{ t('addEnTeachingLibrary') }}
            </el-button>
          </div>
          <el-card
            class="box-card !border-none my-[10px] table-search-wrap"
            shadow="never"
          >
            <el-form
              :inline="true"
              :model="EnTeachingLibraryTable.searchParam"
              ref="searchFormRef"
            >
              <el-form-item :label="t('title')" prop="title">
                <el-input
                  v-model="EnTeachingLibraryTable.searchParam.title"
                  :placeholder="t('titlePlaceholder')"
                />
              </el-form-item>

              <el-form-item :label="t('status')" prop="status">
                <el-select
                  class="w-[280px]"
                  v-model="EnTeachingLibraryTable.searchParam.status"
                  clearable
                  :placeholder="t('statusPlaceholder')"
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option
                    v-for="(item, index) in statusList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item :label="t('createTime')" prop="create_time">
                <el-date-picker
                  v-model="EnTeachingLibraryTable.searchParam.create_time"
                  type="datetimerange"
                  format="YYYY-MM-DD hh:mm:ss"
                  :start-placeholder="t('startDate')"
                  :end-placeholder="t('endDate')"
                />
              </el-form-item>

              <el-form-item :label="t('updateTime')" prop="update_time">
                <el-date-picker
                  v-model="EnTeachingLibraryTable.searchParam.update_time"
                  type="datetimerange"
                  format="YYYY-MM-DD hh:mm:ss"
                  :start-placeholder="t('startDate')"
                  :end-placeholder="t('endDate')"
                />
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  @click="loadEnTeachingLibraryList()"
                  >{{ t('search') }}</el-button
                >
                <el-button @click="resetForm(searchFormRef, 18)">{{
                  t('reset')
                }}</el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <div class="mt-[10px]">
            <el-table
              :data="EnTeachingLibraryTable.data"
              size="large"
              v-loading="EnTeachingLibraryTable.loading"
            >
              <template #empty>
                <span>{{
                  !EnTeachingLibraryTable.loading ? t('emptyData') : ''
                }}</span>
              </template>
              <el-table-column
                prop="title"
                :label="t('title')"
                min-width="120"
                :show-overflow-tooltip="true"
              />

              <el-table-column :label="t('image')" width="100" align="left">
                <template #default="{ row }">
                  <el-avatar v-if="row.image" :src="img(row.image)" />
                  <el-avatar v-else icon="UserFilled" />
                </template>
              </el-table-column>
              <el-table-column
                :label="t('type')"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <div v-for="(item, index) in typeList">
                    <div v-if="item.value == row.type">{{ item.name }}</div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="t('status')"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <div v-for="(item, index) in statusList">
                    <div v-if="item.value == row.status">{{ item.name }}</div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="t('operation')"
                fixed="right"
                min-width="120"
              >
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    link
                    @click="editEnTeachingLibrary(row)"
                    >{{ t('edit') }}</el-button
                  >
                  <el-button
                    type="primary"
                    link
                    @click="deleteEvent(row.id, 18)"
                    >{{ t('delete') }}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="mt-[16px] flex justify-end">
              <el-pagination
                v-model:current-page="EnTeachingLibraryTable.page"
                v-model:page-size="EnTeachingLibraryTable.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="EnTeachingLibraryTable.total"
                @size-change="loadEnTeachingLibraryList()"
                @current-change="loadEnTeachingLibraryList"
              />
            </div>
          </div>

          <edit-en
            ref="editEnTeachingLibraryDialog"
            @complete="loadEnTeachingLibraryList"
          />
        </el-tab-pane>
        <el-tab-pane label="跳绳动作" name="BasketballTeachingLibrary">
          <div class="flex justify-between items-center">
            <el-button type="primary" @click="addBasketballTeachingLibrary">
              {{ t('addBasketballTeachingLibrary') }}
            </el-button>
          </div>
          <el-card
            class="box-card !border-none my-[10px] table-search-wrap"
            shadow="never"
          >
            <el-form
              :inline="true"
              :model="BasketballTeachingLibraryTable.searchParam"
              ref="searchFormRef"
            >
              <el-form-item :label="t('title')" prop="title">
                <el-input
                  v-model="BasketballTeachingLibraryTable.searchParam.title"
                  :placeholder="t('titlePlaceholder')"
                />
              </el-form-item>

              <el-form-item :label="t('status')" prop="status">
                <el-select
                  class="w-[280px]"
                  v-model="BasketballTeachingLibraryTable.searchParam.status"
                  clearable
                  :placeholder="t('statusPlaceholder')"
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option
                    v-for="(item, index) in statusList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item :label="t('createTime')" prop="create_time">
                <el-date-picker
                  v-model="
                    BasketballTeachingLibraryTable.searchParam.create_time
                  "
                  type="datetimerange"
                  format="YYYY-MM-DD hh:mm:ss"
                  :start-placeholder="t('startDate')"
                  :end-placeholder="t('endDate')"
                />
              </el-form-item>

              <el-form-item :label="t('updateTime')" prop="update_time">
                <el-date-picker
                  v-model="
                    BasketballTeachingLibraryTable.searchParam.update_time
                  "
                  type="datetimerange"
                  format="YYYY-MM-DD hh:mm:ss"
                  :start-placeholder="t('startDate')"
                  :end-placeholder="t('endDate')"
                />
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  @click="loadBasketballTeachingLibraryList()"
                  >{{ t('search') }}</el-button
                >
                <el-button @click="resetForm(searchFormRef, 19)">{{
                  t('reset')
                }}</el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <div class="mt-[10px]">
            <el-table
              :data="BasketballTeachingLibraryTable.data"
              size="large"
              v-loading="BasketballTeachingLibraryTable.loading"
            >
              <template #empty>
                <span>{{
                  !BasketballTeachingLibraryTable.loading ? t('emptyData') : ''
                }}</span>
              </template>
              <el-table-column
                prop="title"
                :label="t('title')"
                min-width="120"
                :show-overflow-tooltip="true"
              />

              <el-table-column :label="t('image')" width="100" align="left">
                <template #default="{ row }">
                  <el-avatar v-if="row.image" :src="img(row.image)" />
                  <el-avatar v-else icon="UserFilled" />
                </template>
              </el-table-column>
              <el-table-column
                :label="t('type')"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <div v-for="(item, index) in typeList">
                    <div v-if="item.value == row.type">{{ item.name }}</div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="t('status')"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <div v-for="(item, index) in statusList">
                    <div v-if="item.value == row.status">{{ item.name }}</div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="t('operation')"
                fixed="right"
                min-width="120"
              >
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    link
                    @click="editBasketballTeachingLibrary(row)"
                    >{{ t('edit') }}</el-button
                  >
                  <el-button
                    type="primary"
                    link
                    @click="deleteEvent(row.id, 19)"
                    >{{ t('delete') }}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="mt-[16px] flex justify-end">
              <el-pagination
                v-model:current-page="BasketballTeachingLibraryTable.page"
                v-model:page-size="BasketballTeachingLibraryTable.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="BasketballTeachingLibraryTable.total"
                @size-change="loadBasketballTeachingLibraryList()"
                @current-change="loadBasketballTeachingLibraryList"
              />
            </div>
          </div>

          <edit-basketball
            ref="editBasketballTeachingLibraryDialog"
            @complete="loadBasketballTeachingLibraryList"
          />
        </el-tab-pane>
        <el-tab-pane label="跑酷动作" name="StrengthenTeachingLibrary">
          <div class="flex justify-between items-center">
            <el-button type="primary" @click="addStrengthenTeachingLibrary">
              {{ t('addStrengthenTeachingLibrary') }}
            </el-button>
          </div>
          <el-card
            class="box-card !border-none my-[10px] table-search-wrap"
            shadow="never"
          >
            <el-form
              :inline="true"
              :model="StrengTeachingLibraryTable.searchParam"
              ref="searchFormRef"
            >
              <el-form-item :label="t('title')" prop="title">
                <el-input
                  v-model="StrengTeachingLibraryTable.searchParam.title"
                  :placeholder="t('titlePlaceholder')"
                />
              </el-form-item>

              <el-form-item :label="t('status')" prop="status">
                <el-select
                  class="w-[280px]"
                  v-model="StrengTeachingLibraryTable.searchParam.status"
                  clearable
                  :placeholder="t('statusPlaceholder')"
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option
                    v-for="(item, index) in statusList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item :label="t('createTime')" prop="create_time">
                <el-date-picker
                  v-model="StrengTeachingLibraryTable.searchParam.create_time"
                  type="datetimerange"
                  format="YYYY-MM-DD hh:mm:ss"
                  :start-placeholder="t('startDate')"
                  :end-placeholder="t('endDate')"
                />
              </el-form-item>

              <el-form-item :label="t('updateTime')" prop="update_time">
                <el-date-picker
                  v-model="StrengTeachingLibraryTable.searchParam.update_time"
                  type="datetimerange"
                  format="YYYY-MM-DD hh:mm:ss"
                  :start-placeholder="t('startDate')"
                  :end-placeholder="t('endDate')"
                />
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  @click="loadStrengthenTeachingLibraryList()"
                  >{{ t('search') }}</el-button
                >
                <el-button @click="resetForm(searchFormRef, 20)">{{
                  t('reset')
                }}</el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <div class="mt-[10px]">
            <el-table
              :data="StrengTeachingLibraryTable.data"
              size="large"
              v-loading="StrengTeachingLibraryTable.loading"
            >
              <template #empty>
                <span>{{
                  !StrengTeachingLibraryTable.loading ? t('emptyData') : ''
                }}</span>
              </template>
              <el-table-column
                prop="title"
                :label="t('title')"
                min-width="120"
                :show-overflow-tooltip="true"
              />

              <el-table-column :label="t('image')" width="100" align="left">
                <template #default="{ row }">
                  <el-avatar v-if="row.image" :src="img(row.image)" />
                  <el-avatar v-else icon="UserFilled" />
                </template>
              </el-table-column>
              <el-table-column
                :label="t('type')"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <div v-for="(item, index) in typeList">
                    <div v-if="item.value == row.type">{{ item.name }}</div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="t('status')"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <div v-for="(item, index) in statusList">
                    <div v-if="item.value == row.status">{{ item.name }}</div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="t('operation')"
                fixed="right"
                min-width="120"
              >
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    link
                    @click="editStrengthenTeachingLibrary(row)"
                    >{{ t('edit') }}</el-button
                  >
                  <el-button
                    type="primary"
                    link
                    @click="deleteEvent(row.id, 20)"
                    >{{ t('delete') }}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="mt-[16px] flex justify-end">
              <el-pagination
                v-model:current-page="StrengTeachingLibraryTable.page"
                v-model:page-size="StrengTeachingLibraryTable.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="StrengTeachingLibraryTable.total"
                @size-change="loadStrengthenTeachingLibraryList()"
                @current-change="loadStrengthenTeachingLibraryList"
              />
            </div>
          </div>

          <edit-strengthen
            ref="editStrengthenTeachingLibraryDialog"
            @complete="loadStrengthenTeachingLibraryList"
          />
        </el-tab-pane>
        <el-tab-pane label="安防动作" name="NinjaTeachingLibrary">
          <div class="flex justify-between items-center">
            <el-button type="primary" @click="addNinjaTeachingLibrary">
              {{ t('addNinjaTeachingLibrary') }}
            </el-button>
          </div>
          <el-card
            class="box-card !border-none my-[10px] table-search-wrap"
            shadow="never"
          >
            <el-form
              :inline="true"
              :model="NinjaTeachingLibraryTable.searchParam"
              ref="searchFormRef"
            >
              <el-form-item :label="t('title')" prop="title">
                <el-input
                  v-model="NinjaTeachingLibraryTable.searchParam.title"
                  :placeholder="t('titlePlaceholder')"
                />
              </el-form-item>

              <el-form-item :label="t('status')" prop="status">
                <el-select
                  class="w-[280px]"
                  v-model="NinjaTeachingLibraryTable.searchParam.status"
                  clearable
                  :placeholder="t('statusPlaceholder')"
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option
                    v-for="(item, index) in statusList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item :label="t('createTime')" prop="create_time">
                <el-date-picker
                  v-model="NinjaTeachingLibraryTable.searchParam.create_time"
                  type="datetimerange"
                  format="YYYY-MM-DD hh:mm:ss"
                  :start-placeholder="t('startDate')"
                  :end-placeholder="t('endDate')"
                />
              </el-form-item>

              <el-form-item :label="t('updateTime')" prop="update_time">
                <el-date-picker
                  v-model="NinjaTeachingLibraryTable.searchParam.update_time"
                  type="datetimerange"
                  format="YYYY-MM-DD hh:mm:ss"
                  :start-placeholder="t('startDate')"
                  :end-placeholder="t('endDate')"
                />
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  @click="loadNinjaTeachingLibraryList()"
                  >{{ t('search') }}</el-button
                >
                <el-button @click="resetForm(searchFormRef, 21)">{{
                  t('reset')
                }}</el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <div class="mt-[10px]">
            <el-table
              :data="NinjaTeachingLibraryTable.data"
              size="large"
              v-loading="NinjaTeachingLibraryTable.loading"
            >
              <template #empty>
                <span>{{
                  !NinjaTeachingLibraryTable.loading ? t('emptyData') : ''
                }}</span>
              </template>
              <el-table-column
                prop="title"
                :label="t('title')"
                min-width="120"
                :show-overflow-tooltip="true"
              />

              <el-table-column :label="t('image')" width="100" align="left">
                <template #default="{ row }">
                  <el-avatar v-if="row.image" :src="img(row.image)" />
                  <el-avatar v-else icon="UserFilled" />
                </template>
              </el-table-column>
              <el-table-column
                :label="t('type')"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <div v-for="(item, index) in typeList">
                    <div v-if="item.value == row.type">{{ item.name }}</div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="t('status')"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <div v-for="(item, index) in statusList">
                    <div v-if="item.value == row.status">{{ item.name }}</div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="t('operation')"
                fixed="right"
                min-width="120"
              >
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    link
                    @click="editNinjaTeachingLibrary(row)"
                    >{{ t('edit') }}</el-button
                  >
                  <el-button
                    type="primary"
                    link
                    @click="deleteEvent(row.id, 21)"
                    >{{ t('delete') }}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="mt-[16px] flex justify-end">
              <el-pagination
                v-model:current-page="NinjaTeachingLibraryTable.page"
                v-model:page-size="NinjaTeachingLibraryTable.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="NinjaTeachingLibraryTable.total"
                @size-change="loadNinjaTeachingLibraryList()"
                @current-change="loadNinjaTeachingLibraryList"
              />
            </div>
          </div>

          <edit-ninja
            ref="editNinjaTeachingLibraryDialog"
            @complete="loadNinjaTeachingLibraryList"
          />
        </el-tab-pane>
        <el-tab-pane label="标准化动作" name="SecurityTeachingLibrary">
          <div class="flex justify-between items-center">
            <el-button type="primary" @click="addSecurityTeachingLibrary">
              {{ t('addSecurityTeachingLibrary') }}
            </el-button>
          </div>
          <el-card
            class="box-card !border-none my-[10px] table-search-wrap"
            shadow="never"
          >
            <el-form
              :inline="true"
              :model="SecurityTeachingLibraryTable.searchParam"
              ref="searchFormRef"
            >
              <el-form-item :label="t('title')" prop="title">
                <el-input
                  v-model="SecurityTeachingLibraryTable.searchParam.title"
                  :placeholder="t('titlePlaceholder')"
                />
              </el-form-item>

              <el-form-item :label="t('status')" prop="status">
                <el-select
                  class="w-[280px]"
                  v-model="SecurityTeachingLibraryTable.searchParam.status"
                  clearable
                  :placeholder="t('statusPlaceholder')"
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option
                    v-for="(item, index) in statusList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item :label="t('createTime')" prop="create_time">
                <el-date-picker
                  v-model="SecurityTeachingLibraryTable.searchParam.create_time"
                  type="datetimerange"
                  format="YYYY-MM-DD hh:mm:ss"
                  :start-placeholder="t('startDate')"
                  :end-placeholder="t('endDate')"
                />
              </el-form-item>

              <el-form-item :label="t('updateTime')" prop="update_time">
                <el-date-picker
                  v-model="SecurityTeachingLibraryTable.searchParam.update_time"
                  type="datetimerange"
                  format="YYYY-MM-DD hh:mm:ss"
                  :start-placeholder="t('startDate')"
                  :end-placeholder="t('endDate')"
                />
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  @click="loadSecurityTeachingLibraryList()"
                  >{{ t('search') }}</el-button
                >
                <el-button @click="resetForm(searchFormRef, 22)">{{
                  t('reset')
                }}</el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <div class="mt-[10px]">
            <el-table
              :data="SecurityTeachingLibraryTable.data"
              size="large"
              v-loading="SecurityTeachingLibraryTable.loading"
            >
              <template #empty>
                <span>{{
                  !SecurityTeachingLibraryTable.loading ? t('emptyData') : ''
                }}</span>
              </template>
              <el-table-column
                prop="title"
                :label="t('title')"
                min-width="120"
                :show-overflow-tooltip="true"
              />

              <el-table-column :label="t('image')" width="100" align="left">
                <template #default="{ row }">
                  <el-avatar v-if="row.image" :src="img(row.image)" />
                  <el-avatar v-else icon="UserFilled" />
                </template>
              </el-table-column>
              <el-table-column
                :label="t('type')"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <div v-for="(item, index) in typeList">
                    <div v-if="item.value == row.type">{{ item.name }}</div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="t('status')"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <div v-for="(item, index) in statusList">
                    <div v-if="item.value == row.status">{{ item.name }}</div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                :label="t('operation')"
                fixed="right"
                min-width="120"
              >
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    link
                    @click="editSecurityTeachingLibrary(row)"
                    >{{ t('edit') }}</el-button
                  >
                  <el-button
                    type="primary"
                    link
                    @click="deleteEvent(row.id, 22)"
                    >{{ t('delete') }}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="mt-[16px] flex justify-end">
              <el-pagination
                v-model:current-page="SecurityTeachingLibraryTable.page"
                v-model:page-size="SecurityTeachingLibraryTable.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="SecurityTeachingLibraryTable.total"
                @size-change="loadSecurityTeachingLibraryList()"
                @current-change="loadSecurityTeachingLibraryList"
              />
            </div>
          </div>

          <edit-security
            ref="editSecurityTeachingLibraryDialog"
            @complete="loadSecurityTeachingLibraryList"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import { t } from '@/lang'
import { useDictionary } from '@/app/api/dict'
import {
  getLessonCourseTeachingList,
  deleteLessonCourseTeaching,
  getWithPersonnelDataList,
  getJumpLessonLibraryList,
  getEnTeachingLibraryList,
  getBasketballTeachingLibraryList,
  getStrengTeachingLibraryList,
  getNinjaTeachingLibraryList,
  getSecurityTeachingLibraryList,
  getPhysicalTeachingLibraryList,
} from '@/app/api/lesson_course_teaching'
import { img } from '@/utils/common'
import { ElMessageBox, FormInstance } from 'element-plus'
import Edit from '@/app/views/professional_skills/components/lesson-course-teaching-edit.vue'
import EditJump from '@/app/views/professional_skills/components/Jump-lesson-library-edit.vue'
import EditEn from '@/app/views/professional_skills/components/en-course-teaching-edit.vue'
import EditBasketball from '@/app/views/professional_skills/components/basketball-course-teaching-edit.vue'
import EditStrengthen from '@/app/views/professional_skills/components/strengthen-course-teaching-edit.vue'
import EditNinja from '@/app/views/professional_skills/components/ninja-teaching-edit.vue'
import EditSecurity from '@/app/views/professional_skills/components/security-teaching-edit.vue'
import EditPhysical from '@/app/views/professional_skills/components/physical-teaching-edit.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const pageName = route.meta.title
const active = 'CourseSyllabus'

let lessonCourseTeachingTable = reactive({
  page: 1,
  limit: 10,
  total: 0,
  loading: true,
  data: [],
  searchParam: {
    title: '',
    status: '',
    create_time: [],
    update_time: [],
    table_type: 16,
  },
})
let JumpLessonLibraryTable = reactive({
  page: 1,
  limit: 10,
  total: 0,
  loading: true,
  data: [],
  searchParam: {
    title: '',
    status: '',
    create_time: [],
    update_time: [],
    table_type: 17,
  },
})
let EnTeachingLibraryTable = reactive({
  page: 1,
  limit: 10,
  total: 0,
  loading: true,
  data: [],
  searchParam: {
    title: '',
    status: '',
    create_time: [],
    update_time: [],
    table_type: 18,
  },
})
let BasketballTeachingLibraryTable = reactive({
  page: 1,
  limit: 10,
  total: 0,
  loading: true,
  data: [],
  searchParam: {
    title: '',
    status: '',
    create_time: [],
    update_time: [],
    table_type: 19,
  },
})
let StrengTeachingLibraryTable = reactive({
  page: 1,
  limit: 10,
  total: 0,
  loading: true,
  data: [],
  searchParam: {
    title: '',
    status: '',
    create_time: [],
    update_time: [],
    table_type: 20,
  },
})
let NinjaTeachingLibraryTable = reactive({
  page: 1,
  limit: 10,
  total: 0,
  loading: true,
  data: [],
  searchParam: {
    title: '',
    status: '',
    create_time: [],
    update_time: [],
    table_type: 21,
  },
})
let SecurityTeachingLibraryTable = reactive({
  page: 1,
  limit: 10,
  total: 0,
  loading: true,
  data: [],
  searchParam: {
    title: '',
    status: '',
    create_time: [],
    update_time: [],
    table_type: 22,
  },
})

const searchFormRef = ref<FormInstance>()

// 选中数据
const selectData = ref<any[]>([])

// 字典数据
const typeList = ref([] as any[])
const typeDictList = async () => {
  typeList.value = await (await useDictionary('material_type')).data.dictionary
}
typeDictList()
const statusList = ref([] as any[])
const statusDictList = async () => {
  statusList.value = await (
    await useDictionary('course_status')
  ).data.dictionary
}
statusDictList()

const editLessonCourseTeachingDialog: Record<string, any> | null = ref(null)
const editJumpLessonLibraryDialog: Record<string, any> | null = ref(null)
const editEnTeachingLibraryDialog: Record<string, any> | null = ref(null)
const editBasketballTeachingLibraryDialog: Record<string, any> | null =
  ref(null)
const editStrengthenTeachingLibraryDialog: Record<string, any> | null =
  ref(null)
const editNinjaTeachingLibraryDialog: Record<string, any> | null = ref(null)
const editSecurityTeachingLibraryDialog: Record<string, any> | null = ref(null)

/**
 * 获取课程教学大纲列表
 */
const loadLessonCourseTeachingList = (page: number = 1) => {
  lessonCourseTeachingTable.loading = true
  lessonCourseTeachingTable.page = page

  getLessonCourseTeachingList({
    page: lessonCourseTeachingTable.page,
    limit: lessonCourseTeachingTable.limit,
    ...lessonCourseTeachingTable.searchParam,
  })
    .then((res) => {
      lessonCourseTeachingTable.loading = false
      lessonCourseTeachingTable.data = res.data.data
      lessonCourseTeachingTable.total = res.data.total
    })
    .catch(() => {
      lessonCourseTeachingTable.loading = false
    })
}
loadLessonCourseTeachingList()

/**
 * 添加课程教学大纲
 */
const addEvent = () => {
  editLessonCourseTeachingDialog.value.setFormData()
  editLessonCourseTeachingDialog.value.showDialog = true
}

/**
 * 编辑课程教学大纲
 * @param data
 */
const editEvent = (data: any) => {
  editLessonCourseTeachingDialog.value.setFormData(data)
  editLessonCourseTeachingDialog.value.showDialog = true
}

/**
 * 获取跳绳教案库列表
 */
const loadJumpLessonLibraryList = (page: number = 1) => {
  JumpLessonLibraryTable.loading = true
  JumpLessonLibraryTable.page = page

  getJumpLessonLibraryList({
    page: JumpLessonLibraryTable.page,
    limit: JumpLessonLibraryTable.limit,
    ...JumpLessonLibraryTable.searchParam,
  })
    .then((res) => {
      JumpLessonLibraryTable.loading = false
      JumpLessonLibraryTable.data = res.data.data
      JumpLessonLibraryTable.total = res.data.total
    })
    .catch(() => {
      JumpLessonLibraryTable.loading = false
    })
}
loadJumpLessonLibraryList()

/**
 * 添加跳绳教案库
 */
const addJumpLessonLibrary = () => {
  editJumpLessonLibraryDialog.value.setFormData()
  editJumpLessonLibraryDialog.value.showDialog = true
}

/**
 * 编辑跳绳教案库
 * @param data
 */
const editJumpLessonLibrary = (data: any) => {
  editJumpLessonLibraryDialog.value.setFormData(data)
  editJumpLessonLibraryDialog.value.showDialog = true
}

/**
 * 获取增高教案库列表
 */
const loadEnTeachingLibraryList = (page: number = 1) => {
  EnTeachingLibraryTable.loading = true
  EnTeachingLibraryTable.page = page

  getEnTeachingLibraryList({
    page: EnTeachingLibraryTable.page,
    limit: EnTeachingLibraryTable.limit,
    ...EnTeachingLibraryTable.searchParam,
  })
    .then((res) => {
      EnTeachingLibraryTable.loading = false
      EnTeachingLibraryTable.data = res.data.data
      EnTeachingLibraryTable.total = res.data.total
    })
    .catch(() => {
      EnTeachingLibraryTable.loading = false
    })
}
loadEnTeachingLibraryList()

/**
 * 添加增高教案库
 */
const addEnTeachingLibrary = () => {
  editEnTeachingLibraryDialog.value.setFormData()
  editEnTeachingLibraryDialog.value.showDialog = true
}

/**
 * 编辑增高教案库
 * @param data
 */
const editEnTeachingLibrary = (data: any) => {
  editEnTeachingLibraryDialog.value.setFormData(data)
  editEnTeachingLibraryDialog.value.showDialog = true
}

/**
 * 获取篮球教案库列表
 */
const loadBasketballTeachingLibraryList = (page: number = 1) => {
  BasketballTeachingLibraryTable.loading = true
  BasketballTeachingLibraryTable.page = page

  getBasketballTeachingLibraryList({
    page: BasketballTeachingLibraryTable.page,
    limit: BasketballTeachingLibraryTable.limit,
    ...BasketballTeachingLibraryTable.searchParam,
  })
    .then((res) => {
      BasketballTeachingLibraryTable.loading = false
      BasketballTeachingLibraryTable.data = res.data.data
      BasketballTeachingLibraryTable.total = res.data.total
    })
    .catch(() => {
      BasketballTeachingLibraryTable.loading = false
    })
}
loadBasketballTeachingLibraryList()

/**
 * 添加篮球教案库
 */
const addBasketballTeachingLibrary = () => {
  editBasketballTeachingLibraryDialog.value.setFormData()
  editBasketballTeachingLibraryDialog.value.showDialog = true
}

/**
 * 编辑篮球教案库
 * @param data
 */
const editBasketballTeachingLibrary = (data: any) => {
  editBasketballTeachingLibraryDialog.value.setFormData(data)
  editBasketballTeachingLibraryDialog.value.showDialog = true
}

/**
 * 获取强化教案库列表
 */
const loadStrengthenTeachingLibraryList = (page: number = 1) => {
  StrengTeachingLibraryTable.loading = true
  StrengTeachingLibraryTable.page = page

  getStrengTeachingLibraryList({
    page: StrengTeachingLibraryTable.page,
    limit: StrengTeachingLibraryTable.limit,
    ...StrengTeachingLibraryTable.searchParam,
  })
    .then((res) => {
      StrengTeachingLibraryTable.loading = false
      StrengTeachingLibraryTable.data = res.data.data
      StrengTeachingLibraryTable.total = res.data.total
    })
    .catch(() => {
      StrengTeachingLibraryTable.loading = false
    })
}
loadStrengthenTeachingLibraryList()

/**
 * 添加强化教案库
 */
const addStrengthenTeachingLibrary = () => {
  editStrengthenTeachingLibraryDialog.value.setFormData()
  editStrengthenTeachingLibraryDialog.value.showDialog = true
}

/**
 * 编辑强化教案库
 * @param data
 */
const editStrengthenTeachingLibrary = (data: any) => {
  editStrengthenTeachingLibraryDialog.value.setFormData(data)
  editStrengthenTeachingLibraryDialog.value.showDialog = true
}

/**
 * 获取空中忍者教案库列表
 */
const loadNinjaTeachingLibraryList = (page: number = 1) => {
  NinjaTeachingLibraryTable.loading = true
  NinjaTeachingLibraryTable.page = page

  getNinjaTeachingLibraryList({
    page: NinjaTeachingLibraryTable.page,
    limit: NinjaTeachingLibraryTable.limit,
    ...NinjaTeachingLibraryTable.searchParam,
  })
    .then((res) => {
      NinjaTeachingLibraryTable.loading = false
      NinjaTeachingLibraryTable.data = res.data.data
      NinjaTeachingLibraryTable.total = res.data.total
    })
    .catch(() => {
      NinjaTeachingLibraryTable.loading = false
    })
}
loadNinjaTeachingLibraryList()

/**
 * 添加空中忍者教案库
 */
const addNinjaTeachingLibrary = () => {
  editNinjaTeachingLibraryDialog.value.setFormData()
  editNinjaTeachingLibraryDialog.value.showDialog = true
}

/**
 * 编辑空中忍者教案库
 * @param data
 */
const editNinjaTeachingLibrary = (data: any) => {
  editNinjaTeachingLibraryDialog.value.setFormData(data)
  editNinjaTeachingLibraryDialog.value.showDialog = true
}

/**
 * 获取少儿安防教案库列表
 */
const loadSecurityTeachingLibraryList = (page: number = 1) => {
  SecurityTeachingLibraryTable.loading = true
  SecurityTeachingLibraryTable.page = page

  getSecurityTeachingLibraryList({
    page: SecurityTeachingLibraryTable.page,
    limit: SecurityTeachingLibraryTable.limit,
    ...SecurityTeachingLibraryTable.searchParam,
  })
    .then((res) => {
      SecurityTeachingLibraryTable.loading = false
      SecurityTeachingLibraryTable.data = res.data.data
      SecurityTeachingLibraryTable.total = res.data.total
    })
    .catch(() => {
      SecurityTeachingLibraryTable.loading = false
    })
}
loadSecurityTeachingLibraryList()

/**
 * 添加少儿安防教案库
 */
const addSecurityTeachingLibrary = () => {
  editSecurityTeachingLibraryDialog.value.setFormData()
  editSecurityTeachingLibraryDialog.value.showDialog = true
}

/**
 * 编辑少儿安防教案库
 * @param data
 */
const editSecurityTeachingLibrary = (data: any) => {
  editSecurityTeachingLibraryDialog.value.setFormData(data)
  editSecurityTeachingLibraryDialog.value.showDialog = true
}

/**
 * 删除教研管理
 */
const deleteEvent = (id: number, type: number) => {
  ElMessageBox.confirm(t('lessonCourseTeachingDeleteTips'), t('warning'), {
    confirmButtonText: t('confirm'),
    cancelButtonText: t('cancel'),
    type: 'warning',
  }).then(() => {
    deleteLessonCourseTeaching(id)
      .then(() => {
        if (type === 16) {
          loadLessonCourseTeachingList()
        } else if (type === 17) {
          loadJumpLessonLibraryList()
        } else if (type === 18) {
          loadEnTeachingLibraryList()
        } else if (type === 19) {
          loadBasketballTeachingLibraryList()
        } else if (type === 20) {
          loadStrengthenTeachingLibraryList()
        } else if (type === 21) {
          loadNinjaTeachingLibraryList()
        } else if (type === 22) {
          loadSecurityTeachingLibraryList()
        }
      })
      .catch(() => {})
  })
}

const userPermissionList = ref([])
const setUserPermissionList = async () => {
  userPermissionList.value = await (await getWithPersonnelDataList({})).data
}
setUserPermissionList()

const resetForm = (formEl: FormInstance | undefined, type: number) => {
  if (!formEl) return
  formEl.resetFields()
  if (type === 16) {
    lessonCourseTeachingTable = reactive({
      page: 1,
      limit: 10,
      total: 0,
      loading: true,
      data: [],
      searchParam: {
        title: '',
        status: '',
        create_time: [],
        update_time: [],
        table_type: 16,
      },
    })
    loadLessonCourseTeachingList()
  } else if (type === 17) {
    JumpLessonLibraryTable = reactive({
      page: 1,
      limit: 10,
      total: 0,
      loading: true,
      data: [],
      searchParam: {
        title: '',
        status: '',
        create_time: [],
        update_time: [],
        table_type: 17,
      },
    })
    loadJumpLessonLibraryList()
  } else if (type === 18) {
    EnTeachingLibraryTable = reactive({
      page: 1,
      limit: 10,
      total: 0,
      loading: true,
      data: [],
      searchParam: {
        title: '',
        status: '',
        create_time: [],
        update_time: [],
        table_type: 18,
      },
    })
    loadEnTeachingLibraryList()
  } else if (type === 19) {
    BasketballTeachingLibraryTable = reactive({
      page: 1,
      limit: 10,
      total: 0,
      loading: true,
      data: [],
      searchParam: {
        title: '',
        status: '',
        create_time: [],
        update_time: [],
        table_type: 19,
      },
    })
    loadBasketballTeachingLibraryList()
  } else if (type === 20) {
    StrengTeachingLibraryTable = reactive({
      page: 1,
      limit: 10,
      total: 0,
      loading: true,
      data: [],
      searchParam: {
        title: '',
        status: '',
        create_time: [],
        update_time: [],
        table_type: 20,
      },
    })
    loadStrengthenTeachingLibraryList()
  } else if (type === 21) {
    NinjaTeachingLibraryTable = reactive({
      page: 1,
      limit: 10,
      total: 0,
      loading: true,
      data: [],
      searchParam: {
        title: '',
        status: '',
        create_time: [],
        update_time: [],
        table_type: 21,
      },
    })
    loadStrengthenTeachingLibraryList()
  } else if (type === 22) {
    SecurityTeachingLibraryTable = reactive({
      page: 1,
      limit: 10,
      total: 0,
      loading: true,
      data: [],
      searchParam: {
        title: '',
        status: '',
        create_time: [],
        update_time: [],
        table_type: 22,
      },
    })
    loadStrengthenTeachingLibraryList()
  }
}
</script>

<style lang="scss" scoped>
/* 多行超出隐藏 */
.multi-hidden {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
