<template>
  <div class="flex">
    <el-card shadow="always" :body-style="{ padding: '10px' }">
      <div class="flex justify-between items-center" style="width: 400px">
        <div class="text-16px font-bold">知识库名称</div>
        <el-button type="primary" style="padding: 0px" text @click="openForm('create', null)"
          >新增</el-button
        >
      </div>
      <div class="border-top-1px mt-10px pt-10px">
        <div
          class="flex justify-between items-center pl-10px pr-10px cursor-pointer pt-5px pb-5px"
          v-for="(item, index) in libraryList"
          :key="index"
          :class="{ actived: libraryIndex == index }"
          @click="handleClickLib(index)"
        >
          <div class="flex-1 text-14px">{{ item.libName }}</div>
          <div class="ml-10px">
            <el-button type="primary" style="padding: 0px" text @click="openForm('update', item)">
              修改
            </el-button>
            <el-button
              type="primary"
              class="ml-10px"
              style="padding: 0px"
              text
              @click="handleRemove(item.libId)"
            >
              删除
            </el-button>
          </div>
        </div>
        <Pagination
          small
          layout="total, prev, pager, next, jumper"
          v-model:limit="pageSize"
          v-model:page="currentPage"
          :total="total"
          @pagination="getList"
        />
      </div>
    </el-card>
    <el-card
      v-if="libraryList.length"
      class="ml-20px"
      style="flex: 1"
      shadow="always"
      :body-style="{ padding: '10px' }"
    >
      <div class="flex justify-between items-center border-bottom-1px pb-10px mb-20px">
        <div>【{{ libraryList[libraryIndex].libName }}】资源详情</div>
        <el-button type="primary" @click="openResource('create', null)">新增资源</el-button>
      </div>
      <div v-if="libraryList[libraryIndex].libType == 1">
        <el-table :data="tableList" border v-loading="loading">
          <el-table-column type="index" width="50" />
          <el-table-column prop="title" label="标题" width="200" />
          <el-table-column label="标签" width="200px">
            <template #default="{ row }">
              <el-tag v-for="(item, index) in row.tags" :key="index" class="mr-5px">
                {{ getDictLabel('knowledge_tags', item) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="files" label="附件">
            <template #default="{ row }">
              <el-link type="primary" underline target="_blank" @click="handleDownload(row.files)">
                {{ row.files }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px">
            <template #default="{ row, $index }">
              <el-button
                type="primary"
                style="padding: 0"
                text
                @click="openResource('update', row.id)"
              >
                修改
              </el-button>
              <el-button type="danger" style="padding: 0" text @click="removeResource($index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else-if="libraryList[libraryIndex].libType == 2" class="flex">
        <div v-for="(item, index) in tableList" :key="index" class="mr-10px">
          <el-image :src="item.files" @click="imagePreview(index)" class="w-150px h-150px" />
          <div class="mt-5px text-center">{{ item.title }}</div>
        </div>
      </div>
      <div v-else>
        <el-table :data="tableList" border>
          <el-table-column type="index" width="50" />
          <el-table-column prop="title" label="标题" />
          <el-table-column label="标签">
            <template #default="{ row }">
              <el-tag v-for="(item, index) in row.tags" :key="index" class="mr-5px">
                {{ getDictLabel('knowledge_tags', item) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px">
            <template #default="{ row, $index }">
              <el-button
                type="primary"
                style="padding: 0"
                text
                @click="openResource('update', row.infoId)"
              >
                修改
              </el-button>
              <el-button type="danger" style="padding: 0" text @click="removeResource($index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <Pagination
        v-model:limit="resourcePageSize"
        v-model:page="resourcePageNum"
        :total="resourceTotal"
        @pagination="getResourceList"
      />
    </el-card>
  </div>
  <DialogLibrary ref="library" @success="getList" />
  <DialogResource ref="resourceDialog" @success="getResourceList" />
  <ImagePreview ref="imgPreview" />
</template>

<script setup name="Library">
import * as LibraryApi from '@/api/system/library/index'
import * as ResourceApi from '@/api/system/library/resource'
import DialogLibrary from './Comp/DialogLibrary.vue'
import DialogResource from './Comp/DialogResource.vue'
import ImagePreview from './Comp/ImagePreview.vue'
import { getDictLabel } from '@/utils/dict'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const libraryIndex = ref(0)
const libraryList = ref([])

const pageSize = ref(20)
const currentPage = ref(1)
const total = ref(0)

const loading = ref(false)

const library = ref()
const resourceDialog = ref()
const imgPreview = ref()

const resourcePageSize = ref(20)
const resourcePageNum = ref(1)
const resourceTotal = ref(0)

const tableList = ref([])

function openForm(type, item) {
  library.value.open(type, item)
}

async function handleRemove(id) {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await LibraryApi.deleteLibrary(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

async function getList() {
  const data = await LibraryApi.getLibraryPage({
    pageNo: currentPage.value,
    pageSize: pageSize.value
  })
  libraryList.value = data.list
  total.value = data.total
  handleClickLib(0)
}

function handleClickLib(index) {
  libraryIndex.value = index
  getResourceList()
}

function handleDownload(href) {
  if (href) {
    let a = document.createElement('a')
    a.download = href //指定下载的文件名
    a.href = href //  URL对象
    a.click() // 模拟点击
    URL.revokeObjectURL(a.href) // 释放URL 对象
  }
}

function openResource(type, id) {
  resourceDialog.value.open(type, libraryList.value[libraryIndex.value], id)
}

function removeResource(index) {
  tableList.value.splice(index, 1)
}

async function getResourceList() {
  loading.value = true
  try {
    const data = await ResourceApi.getResourcePage({
      libId: libraryList.value[libraryIndex.value].libId,
      pageNo: resourcePageNum.value,
      pageSize: resourcePageSize.value
    })
    tableList.value = data.list
    resourceTotal.value = data.total
  } finally {
    loading.value = false
  }
}

/** 商品图预览 */
function imagePreview(index) {
  imgPreview.value.open(index, tableList.value)
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.actived {
  background-color: #f0f7ff;
  font-weight: bold;
}
</style>
