<template>
  <cacp-search-layout class="typical-six">
    <template #search>
      <cacp-search-panel-layout :model="state.model" label-position="left" :gutter="30">
        <el-form-item label="人员名称" prop="firm">
          <el-input v-model="state.model.userName" placeholder="" />
        </el-form-item>
        <el-form-item label="人员代码" prop="design">
          <el-input v-model="state.model.userCode" placeholder="" />
        </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>
    <cacp-complex-table
      :title-isinline="true"
      :data="data"
      :actions="actions"
      :secondary-col-span="24"
      :action-space="20"
      table-layout="fixed"
      :actions-width="60"
      :loading="loading"
      @on-command="onCommand"
    >
      <EditTableColumn property="userName" label="人员名称" />
      <EditTableColumn property="userCode" label="人员代码" />
      <EditTableColumn property="address" label="地址" />
      <EditTableColumn property="phone" label="手机号" />
      <el-table-column label="操作" min-width="60" fixed="right">
        <template #default="{ row, $index }">
          <template v-if="row.isEdit">
            <el-button link type="primary" @click="onSave($index)">保存</el-button>
            <el-button link type="primary" @click="onCancel($index)">取消</el-button>
          </template>
          <template v-else>
            <el-button link type="primary" @click="onDel($index)">删除</el-button>
            <el-button link type="primary" @click="onEdit($index)">编辑</el-button>
          </template>
        </template>
      </el-table-column>
    </cacp-complex-table>
  </cacp-search-layout>
</template>
<script lang="ts" setup>
import { editTableDelete, editTableQuery, editTableSave } from '@/apis/mock'
import type { EditTableUser } from '@/types/editTable'
import { SuccessResultCode, useLoading, type TableAction } from '@cacp/ui'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import { cloneDeep } from 'lodash-es'
import EditTableColumn from '@/components/editTable/EditTableColumn.vue'

const data = ref<EditTableUser[]>([])
let backupData: EditTableUser[] = []
const { loading, setLoading } = useLoading()
const actions: TableAction[] = [
  {
    key: '0',
    type: 'primary',
    text: '新建',
    position: 'left',
    onclick: 'create',
    limit: 'none'
  }
]
const state = reactive({
  model: {
    userName: '',
    userCode: ''
  }
})

async function onQuery() {
  setLoading(true)
  const res = await editTableQuery(state.model)
  if (res.code === SuccessResultCode) {
    backupData = cloneDeep(res.data)
    data.value = res.data
  }
  setLoading(false)
}

function onReset() {
  state.model = { userName: '', userCode: '' }
  onQuery()
}

onMounted(() => {
  onQuery()
})

async function onDel(index: number) {
  const row = data.value[index]
  if (!row.id) {
    data.value.splice(index, 1)
    return
  }
  setLoading(true)
  const res = await editTableDelete(row.id)
  if (res.code === SuccessResultCode) {
    ElMessage.success('删除成功')
    data.value.splice(index, 1)
    setLoading(false)
    return
  }
  ElMessage.error('删除失败')
  setLoading(false)
}

function onEdit(index: number) {
  data.value[index].isEdit = true
}

async function onSave(index: number) {
  const row = data.value[index]
  setLoading(true)
  const res = await editTableSave(row)
  if (res.code === SuccessResultCode) {
    ElMessage.success('保存成功')
    // onQuery();
    row.isEdit = false
    setLoading(false)
    return
  }
  ElMessage.error('保存失败')
  setLoading(false)
}

function onCancel(index: number) {
  const row = data.value[index]
  if (!row.id) {
    data.value.splice(index, 1)
    return
  }
  data.value[index] = cloneDeep(backupData.find((f) => f.id === row.id))
}

const commandFn = {
  create: () => {
    data.value.unshift({
      userName: '',
      userCode: '',
      address: '',
      phone: '',
      isEdit: true
    })
  }
}
function onCommand(key: keyof typeof commandFn) {
  commandFn[key]()
}
</script>
