<template>
  <div class="intelligentWriting">
    <el-row style="margin-top: 17px">
      <el-col :span="8">
        <el-input
          v-model="keyword"
          style="width: 100%"
          placeholder="请输入关键词"
          :prefix-icon="Search"
          clearable
          @input="searchPageData()"
        />
      </el-col>
      <!--搜索条件/批量删除-->
      <el-col :span="8" :offset="8" style="text-align: right">
        <el-dropdown placement="bottom-start">
          <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 class="el-icon--right">
                  <delete />
                </el-icon>
                批量删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button type="primary" :icon="Plus" class="ml-12" @click="openCreateDialog(false)">
          新建审核方案
        </el-button>
      </el-col>
    </el-row>
    <div class="page-centent" style="height: calc(100vh - 240px); position: relative;">
      <!--loading-->
      <div
        v-loading="pageLoading"
        element-loading-text="正在加载..."
        style="width: 100%; height: calc(100vh - 250px)"
        class="loading-page"
        v-if="pageLoading"
      ></div>
      <!--搜索结果-->
      <lz-page-empty v-else-if="!writingData.length && !pageLoading" :type="pageError ? '3' : '2'" >
        <lz-svg-icon icon-class="empty2" style="font-size: 312px;"/>
      </lz-page-empty>
      <!-- table列表和分页-->
      <app-table
        v-else
        class="mt-16"
        :data="writingData"
        :pagination-config="paginationConfig"
        @sizeChange="handleSizeChange"
        @changePage="getPageData"
        @selection-change="handleSelectionChange"
        :tableDefaultHeight="320"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="审核方案名称" min-width="220">
          <template #default="{ row }">
            <span @click="handleView(row)">
              <AutoTooltip style="color: #3067ef; cursor: pointer">
                {{ row.name }}
              </AutoTooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="total_rules" label="规则数量" min-width="100">
          <template #default="{ row }">
            <AutoTooltip>
              {{ row.total_rules ? row.total_rules : 0 }}
            </AutoTooltip>
          </template>
        </el-table-column>
        <el-table-column prop="modify_time" label="最近修改" min-width="120">
          <template #default="{ row }">
            <AutoTooltip>
              {{ datetimeFormat(row.modify_time) }}
            </AutoTooltip>
          </template>
        </el-table-column>
        <el-table-column prop="create_id" label="创建人" min-width="100">
          <template #default="{ row }">
            <AutoTooltip>
              {{ row.create_id }}
            </AutoTooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" width="120" fixed="right">
          <template #default="{ row }">
            <div>
              <span class="mr-10 primary-text" @click="handleView(row)" style="cursor: pointer">
                <el-tooltip effect="dark" content="查看" placement="top">
                  <lz-svg-icon icon-class="cxjg" />
                </el-tooltip>
              </span>
              <span class="mr-10 primary-text" @click="openCreateDialog(row)" style="cursor: pointer">
                <el-tooltip effect="dark" content="编辑" placement="top">
                  <lz-svg-icon icon-class="edit" />
                </el-tooltip>
              </span>
              <span class="mr-10 primary-text" @click="handleDel(row)" style="cursor: pointer">
                <el-tooltip effect="dark" content="删除" placement="top">
                  <lz-svg-icon icon-class="delete" />
                </el-tooltip>
              </span>
            </div>
          </template>
        </el-table-column>
      </app-table>
    </div>
  </div>
  <!--新建审核方案-->
  <CreateDialog ref="CreateDialogRef" @refresh="handleSizeChange" />
</template>

<script lang="ts" setup>
import AppTable from '@/components/app-table/index.vue'
import AutoTooltip from '@/components/auto-tooltip/index.vue'
import { MsgConfirm, MsgSuccess, MsgWarning, MsgError } from '@/utils/message'
import { debounce } from 'lodash-es'
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Search, Delete, Plus } from '@element-plus/icons-vue'
import { reviewPlanPageList, deleteReviewPlan } from '@/api/review'
import { datetimeFormat } from '@/utils/time'
import CreateDialog from './CreateDialog.vue'

const router = useRouter()

const CreateDialogRef = ref()
const ids = ref([])
const writingData = ref<any[]>([])
const paginationConfig = reactive({
  current_page: 1,
  page_size: 10,
  total: 0
})
const keyword = ref<any>('')
const pageLoading = ref(false)
const pageError = ref(false)

function openCreateDialog(row?: any) {
  CreateDialogRef.value?.open(row)
}

/**
 * 跳转到二级页面
 * @param name  二级页面路由name名称 docsWriting
 * @param query 可选参数：router传递参数默认以对象形式
 */
function go(name: string, query?: any) {
  router.push({ name, query })
}

function handleView(row: any) {
  go('smartReviewPlan', { id: row.id, reviewName: row.name })
}


function deletItems(ids: any) {
  if (!Array.isArray(ids)) return MsgWarning('参数错误')
  const temp = ids.map((el: any) => `${el}`)
  deleteReviewPlan(temp)
    .then(() => {
      MsgSuccess('删除成功！')
      handleSizeChange()
    })
    .catch(() => {
      MsgError('删除失败！')
    })
    .finally()
}
function handleDel(row: any) {
  MsgConfirm('提示', '确定删除所审核方案？')
    .then(() => {
      deletItems([row.id])
    })
    .catch(() => {
        // 用户点击取消时的静默处理
        console.log('用户取消了删除操作')
    })
}

function handleSizeChange() {
  paginationConfig.current_page = 1
  getPageData()
}
function handleSelectionChange(val: any) {
  ids.value = val.map((v: any) => v.id)
}
function handleBatchDel() {
  if (ids.value.length === 0) {
    return MsgWarning('请先选择一条或多条数据!')
  }
  MsgConfirm('提示', '确定删除所选审核方案？')
    .then(() => {
      deletItems(ids.value)
    })
    .catch(() => {
      // 用户点击取消时的静默处理
      console.log('用户取消了删除操作')
    })
}

const searchPageData = debounce(() => {
  handleSizeChange()
}, 300)

async function getPageData() {
  pageLoading.value = true
  const { current_page, page_size } = paginationConfig
  reviewPlanPageList({
    page: current_page,
    page_size,
    keyword: keyword.value,
    include_default: false, // 是否包含默认方案
  })
    .then((res) => {
      const { data, total } = res
      writingData.value = data
      paginationConfig.total = total
    })
    .catch((err) => {
      console.log(err)
      pageError.value = true
    })
    .finally(() => (pageLoading.value = false))
}

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

<style scoped lang="scss">
.card {
  background: rgba(229, 237, 255, 0.41);
  padding-top: 16px;
  padding-bottom: 17px;
  padding-left: 20px;
  position: relative;
  cursor: pointer;
  border-radius: 8px 8px 8px 8px;
  p {
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  span {
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-top: 9px;
  }
  img {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
</style>
