<template>
  <div class="tag-page">
    <div class="tag-page-search">
      <el-input v-model="keyword" placeholder="请输入关键词" style="width: 25%" @input="searchPageData" :prefix-icon="Search" />
      <div class="tag-page-content-action">
        <el-space>
          <el-dropdown>
            <el-button>
              批量操作
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :disabled="ids.length === 0" @click="handleBatchDel"
                  >
                  <el-icon>
                    <Delete />
                  </el-icon>
                  批量删除
                </el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button :icon="Plus" type="primary" @click="handleOpenForm">新建 </el-button>
        </el-space>
      </div>
    </div>
    <div class="tag-page-table">
      <!--loading-->
      <div
        v-if="loading"
        v-loading="loading"
        class="loading-page"
        element-loading-text="正在加载..."
        style="width: 100%; height: calc(100vh - 250px)"
      ></div>
      <!--搜索结果-->
      <lz-page-empty v-else-if="!tagData.length && !loading" type="5">
        <lz-svg-icon icon-class="empty2" style="font-size: 312px" />
      </lz-page-empty>
      <!-- table列表和分页-->
      <app-table
        v-else
        :data="tagData"
        :pagination-config="paginationConfig"
        :tableDefaultHeight="210"
        class="mt-16"
        style="width: 100%"
        @changePage="getPageData"
        @sizeChange="handleSizeChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="维度名称" min-width="220" prop="name">
          <template #default="{ row }">
            <span @click="handlePreview(row)">
              <AutoTooltip style="color: #3067ef; cursor: pointer">
                {{ row.name }}
              </AutoTooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="标签个数" min-width="100" prop="create_id">
          <template #default="{ row }">
            <AutoTooltip>
              {{ row.labelSum }}
            </AutoTooltip>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" min-width="120" prop="modify_time">
          <template #default="{ row }">
            <AutoTooltip>
              {{ row.updatedTime }}
            </AutoTooltip>
          </template>
        </el-table-column>
        <el-table-column label="创建人" min-width="120" prop="modify_time">
          <template #default="{ row }">
            <AutoTooltip>
              {{ row.crateName }}
            </AutoTooltip>
          </template>
        </el-table-column>
        <el-table-column align="left" fixed="right" label="操作" width="220">
          <template #default="{ row }">
            <div>
              <!-- 创建人是当前登录人 才显示编辑按钮 -->
              <span class="mr-10 primary-text" style="cursor: pointer" @click="handlePreview(row)">
                预览
              </span>
              <span class="mr-10 primary-text" style="cursor: pointer" @click="handleDelete(row)">
                删除
              </span>
            </div>
          </template>
        </el-table-column>
      </app-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import AppTable from '@/components/app-table/index.vue'
import AutoTooltip from '@/components/auto-tooltip/index.vue'
import router from '@/router'
import api from '@/servers/finyx/api'
import { MsgConfirm, MsgWarning } from '@/utils/message'
import { ElMessage, ElMessageBox } from 'element-plus'
import { debounce } from 'lodash-es'
import { onMounted, reactive, ref } from 'vue'
import { Plus, Search } from '@element-plus/icons-vue'

const go = (name: string, query?: any) => {
  router.push({ name, query })
}

const keyword = ref<string>('')

const loading = ref<boolean>(false)
const tagData = ref<any>([])
const ids = ref<Array<string>>([])
const paginationConfig = reactive({
  current_page: 1,
  page_size: 10,
  total: 0
})

// 搜索按钮
const searchPageData = debounce(() => {
  handleSizeChange()
}, 300)
// 获取列表 params
const getListParams = () => {
  const { current_page, page_size } = paginationConfig
  const model: any = {
    model: {
      name: keyword.value
    },
    size: page_size,
    current: current_page
  }
  return model
}
// 获取列表
const getPageData = async () => {
  try {
    loading.value = true
    const { records, total } = await api.weidu.page10(getListParams())
    tagData.value = records
    paginationConfig.total = +total
  } catch (e) {
    ElMessage.error('获取文档列表失败！')
  } finally {
    loading.value = false
  }
}

onMounted(getPageData)

// 分页改变
const handleSizeChange = () => {
  paginationConfig.current_page = 1
  getPageData()
}

// 选中数据改变
const handleSelectionChange = (val: any) => {
  ids.value = val.map((v: any) => v.id)
}

// 批量删除
async function handleBatchDel() {
  if (ids.value.length === 0) {
    return MsgWarning('请先选择一条或多条数据!')
  }

  const confirm = await ElMessageBox.confirm(
    '维度删除后，该维度下所有标签、文件已打标签将同步删除且不可恢复！',
    {
      title: '确认删除维度及标签',
      type: 'warning'
    }
  )
  if (confirm) {
    try {
      loading.value = true
      await api.weidu.delete9(ids.value)
      ElMessage.success('维度删除成功！')
    } catch (e) {
      ElMessage.error('维度删除失败！')
    } finally {
      loading.value = false
      await getPageData()
    }
  }
}
// 打开创建维度及标签
const handleOpenForm = () => {
  go('knowledgeTagCreate', { type: 'add' })
}
// 查看
const handlePreview = (row: any) => {
  go('knowledgeViewTag', { id: row.id, name: row.name })
}
// 单个删除
const handleDelete = async (row: any) => {
  const confirm = await ElMessageBox.confirm(
    '维度删除后，该维度下所有标签、文件已打标签将同步删除且不可恢复！',
    {
      title: '确认删除维度及标签',
      type: 'warning'
    }
  )
  if (confirm) {
    try {
      loading.value = true
      await api.weidu.delete9([row.id])
      ElMessage.success('维度删除成功！')
    } catch (e) {
      ElMessage.error('维度删除失败！')
    } finally {
      loading.value = false
      await getPageData()
    }
  }
}
</script>

<style lang="scss" scoped>
.tag-page {
  display: flex;
  height: 100%;
  flex-direction: column;

  &-search {
    width: 100%;
    display: flex;
    justify-content: space-between;

    &-action {
      width: 200px;
      margin-left: 10px;
    }
  }

  &-table {
    height: calc(100% - 32px);
    position: relative;
  }
}
</style>
