<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, 27)">{{
                  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="250"
              >
                <template #default="{ row }">
                  <el-button type="primary" link @click="editEvent(row)">{{
                    t('edit')
                  }}</el-button>
                  <el-button
                    type="primary"
                    link
                    @click="deleteEvent(row.id, 27)"
                    >{{ t('delete') }}</el-button
                  >
                  <el-button
                    type="primary"
                    link
                    @click="addBindingPersonnel(row)"
                    >{{ t('addBindingPersonnel') }}</el-button
                  >
                  <el-button
                      type="primary"
                      link
                      @click="addBindingTestPaper(row)"
                  >{{ t('addBindingTestPaper') }}</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, 28)">{{
                  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="250"
              >
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    link
                    @click="editJumpLessonLibrary(row)"
                    >{{ t('edit') }}</el-button
                  >
                  <el-button
                    type="primary"
                    link
                    @click="deleteEvent(row.id, 28)"
                    >{{ t('delete') }}</el-button
                  >
                  <el-button
                    type="primary"
                    link
                    @click="addBindingPersonnel(row)"
                    >{{ t('addBindingPersonnel') }}</el-button
                  >
                  <el-button
                      type="primary"
                      link
                      @click="addBindingTestPaper(row)"
                  >{{ t('addBindingTestPaper') }}</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, 29)">{{
                  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="250"
              >
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    link
                    @click="editEnTeachingLibrary(row)"
                    >{{ t('edit') }}</el-button
                  >
                  <el-button
                    type="primary"
                    link
                    @click="deleteEvent(row.id, 29)"
                    >{{ t('delete') }}</el-button
                  >
                  <el-button
                    type="primary"
                    link
                    @click="addBindingPersonnel(row)"
                    >{{ t('addBindingPersonnel') }}</el-button
                  >
                  <el-button
                      type="primary"
                      link
                      @click="addBindingTestPaper(row)"
                  >{{ t('addBindingTestPaper') }}</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-tabs>
    </el-card>
    <binding-personnel
      ref="BindingPersonnelDialog"
      @complete="loadLessonCourseTeachingList"
    />
    <binding-test-paper
        ref="BindingTestPaperDialog"
        @complete="loadLessonCourseTeachingList"
    />
  </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/children_like/components/lesson-course-teaching-edit.vue'
import EditJump from '@/app/views/children_like/components/Jump-lesson-library-edit.vue'
import EditEn from '@/app/views/children_like/components/en-course-teaching-edit.vue'
import { useRoute } from 'vue-router'
import bindingPersonnel from '@/app/views/binding_personnel/binding_personnel.vue'
import bindingTestPaper from '@/app/views/binding_test_paper/binding_test_paper.vue'
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: 27,
  },
})
let JumpLessonLibraryTable = reactive({
  page: 1,
  limit: 10,
  total: 0,
  loading: true,
  data: [],
  searchParam: {
    title: '',
    status: '',
    create_time: [],
    update_time: [],
    table_type: 28,
  },
})
let EnTeachingLibraryTable = reactive({
  page: 1,
  limit: 10,
  total: 0,
  loading: true,
  data: [],
  searchParam: {
    title: '',
    status: '',
    create_time: [],
    update_time: [],
    table_type: 29,
  },
})

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 BindingPersonnelDialog: Record<string, any> | null = ref(null)
const BindingTestPaperDialog: Record<string, any> | null = ref(null)
const addBindingPersonnel = (row) => {
  BindingPersonnelDialog.value.setFormData(row)
  BindingPersonnelDialog.value.showDialog = true
}

const addBindingTestPaper = (row) => {
  BindingTestPaperDialog.value.setFormData(row)
  BindingTestPaperDialog.value.showDialog = true
}
/**
 * 获取课程教学大纲列表
 */
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 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 === 27) {
          loadLessonCourseTeachingList()
        } else if (type === 28) {
          loadJumpLessonLibraryList()
        } else if (type === 29) {
          loadEnTeachingLibraryList()
        }
      })
      .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 === 27) {
    lessonCourseTeachingTable.searchParam.title = ''
    lessonCourseTeachingTable.searchParam.status = ''
    lessonCourseTeachingTable.searchParam.create_time = ''
    lessonCourseTeachingTable.searchParam.update_time = ''
    lessonCourseTeachingTable.page = 1
    lessonCourseTeachingTable.limit = 10
    lessonCourseTeachingTable.data = []
    lessonCourseTeachingTable.table_type = 27
    loadLessonCourseTeachingList()
  } else if (type === 28) {
    JumpLessonLibraryTable.searchParam.title = ''
    JumpLessonLibraryTable.searchParam.status = ''
    JumpLessonLibraryTable.searchParam.create_time = ''
    JumpLessonLibraryTable.searchParam.update_time = ''
    JumpLessonLibraryTable.page = 1
    JumpLessonLibraryTable.limit = 10
    JumpLessonLibraryTable.data = []
    JumpLessonLibraryTable.table_type = 28
    loadJumpLessonLibraryList()
  } else if (type === 29) {
    EnTeachingLibraryTable.searchParam.title = ''
    EnTeachingLibraryTable.searchParam.status = ''
    EnTeachingLibraryTable.searchParam.create_time = ''
    EnTeachingLibraryTable.searchParam.update_time = ''
    EnTeachingLibraryTable.page = 1
    EnTeachingLibraryTable.limit = 10
    EnTeachingLibraryTable.data = []
    EnTeachingLibraryTable.table_type = 29
    loadEnTeachingLibraryList()
  }
}
</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>
