<template>
  <cacp-search-layout>
    <template #search>
      <cacp-search-panel-layout :model="state.model" ref="formRef" label-position="left" :gutter="30" :colSpan="8">
        <el-form-item label="岗位名称" prop="jobCode">
          <el-input v-model="state.model.jobCode"></el-input>
        </el-form-item>
        <el-form-item label="功能权限" prop="funcPermissions">
          <el-select v-model="state.model.funcPermissions" placeholder="请选择" clearable>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <template #buttonGroup>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button type="info" @click="onReset">重置</el-button>
        </template>
      </cacp-search-panel-layout>
    </template>
    <template #sidebar>
      <el-tree style="max-width: 600px" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
    </template>
    <cacp-complex-table
      :data="tableData"
      :actions="actions"
      :pagination="tablePagination"
      :loading="loading"
      @on-command="handleCommand1"
      @on-page-change="onPageChange"
      @on-size-change="onSizeChange"
    >
      <el-table-column property="jobTitle" label="岗位名称" width="200" />
      <el-table-column property="jobCode" label="岗位代码" width="200" sortable />
      <el-table-column property="personName" label="人员名称" width="120" sortable />
      <el-table-column property="personCode" label="人员代码" width="120" />
      <el-table-column property="lastModified" label="最后更新时间" min-width="160" />
    </cacp-complex-table>
  </cacp-search-layout>
</template>
<script lang="ts" setup>
import { onMounted, reactive, shallowRef } from 'vue'
import { ElMessage } from 'element-plus'
import { SuccessResultCode, type TableAction, type TreeInfo, useComplexTable, useLoading } from '@cacp/ui'
import type { TypicalSevenTable } from '@/types/seven'
import { typicalSevenQuery, typicalSevenTree, typicalSevenDelete } from '@/apis/mock'
import config from '@/config'

interface State {
  model: {
    jobCode: string
    funcPermissions: string
  }
  city: string
}
const state = reactive<State>({
  model: {
    jobCode: '',
    funcPermissions: ''
  },
  city: '北京'
})
const { loading, setLoading } = useLoading()
const { tableData, tablePagination, setPagination, setPageSizes, setPageIndex } =
  useComplexTable<TypicalSevenTable>(config)

const options = <{ value: string; label: string }[]>[
  {
    value: 'code1',
    label: '权限1'
  },
  {
    value: 'code2',
    label: '权限2'
  },
  {
    value: 'code3',
    label: '权限3'
  },
  {
    value: 'code4',
    label: '权限4'
  }
]
const treeData = shallowRef<TreeInfo[]>([])

const defaultProps = {
  children: 'children',
  label: 'label'
}
const actions: TableAction[] = [
  {
    key: '0',
    type: 'primary',
    text: '新建',
    position: 'left',
    onclick: 'create',
    limit: 'none'
  },
  {
    key: '1',
    type: 'primary',
    text: '编辑',
    limit: 'one',
    position: 'left',
    onclick: 'edit'
  },
  {
    key: '2',
    type: 'primary',
    text: '删除',
    limit: 'more',
    position: 'left',
    confirm: '确定要删除吗',
    onclick: onDelete
  },
  {
    key: '1',
    text: '刷新',
    type: 'primary',
    plain: true,
    limit: 'none',
    position: 'right',
    onclick: onRefresh
  }
]

const onReset = () => {
  state.model = {
    jobCode: '',
    funcPermissions: ''
  }
  onPageChange(1)
}

const handleNodeClick = (data: TreeInfo) => {
  state.city = data.label
  onPageChange(1)
}

const handleCommand1 = (command: string, rows: any) => {
  ElMessage.success('点击了' + command)
  console.log(rows)
  // onQuery()
}
function onRefresh() {
  onPageChange(1)
}
async function onDelete(rows: TypicalSevenTable[]) {
  const ids = rows.map((item) => item.id)
  const res = await typicalSevenDelete({
    areaCode: state.city,
    id: ids
  })
  if (res.code === SuccessResultCode) {
    onPageChange(1)
  }
}

async function onQuery() {
  setLoading(true)
  const params = {
    areaCode: state.city,
    ...state.model,
    pageIndex: tablePagination.currentPage,
    pageSize: tablePagination.pageSize
  }
  const res = await typicalSevenQuery(params)
  if (res.code === SuccessResultCode) {
    setPagination(res.data)
    // tableData.value = res.data!
  }
  setLoading(false)
}

async function onLoadTree() {
  const res = await typicalSevenTree()
  if (res.code === SuccessResultCode) {
    treeData.value = res.data ?? []
  }
}
function onPageChange(currentPage: number) {
  setPageIndex(currentPage)
  onQuery()
}
function onSizeChange(size: number) {
  setPageSizes(size)
  onQuery()
}
onMounted(() => {
  onLoadTree()
  onQuery()
})
</script>
