<template>
  <div class="wrap">
    <Card>
      <template #body>
        <div class="facility-box">
          <div class="state-left">
            <el-input v-model="inp.input" class="treeinp" size="large" placeholder="请输入" :suffix-icon="Search" />
            <el-tree
              :data="treeDatas.treeData"
              show-checkbox
              :props="defaultProps"
              ref="selectTree"
              node-key="id"
              :expand-on-click-node="false"
              default-expand-all
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
              @check-change="handleCheckChange"
            />
          </div>
          <div class="state-right">
            <div class="iscollpInp">
              <el-form ref="ruleFormRef" :model="data" status-icon class="demo-ruleForm" label-width="100px">
                <el-form-item label="责任人" prop="devIp">
                  <el-input v-model="data.devIp" clearable placeholder="请输入" type="input" />
                </el-form-item>
                <el-form-item label="所属项目" prop="project">
                  <el-input v-model="data.project" clearable placeholder="请输入" type="input" />
                </el-form-item>
              </el-form>
              <div class="fromBtn">
                <el-button type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
              </div>
            </div>
            <div class="table-container">
              <div class="spocebtn">
                <el-button type="primary" plain v-blur @click="openAdd">批量添加</el-button>
                <el-button type="primary" plain v-blur @click="openImport">批量删除</el-button>
              </div>
              <Table
                :columns="tableConfig.thead"
                :tableData="table.tableData"
                :showSelection="true"
                :showIndex="false"
                :total="data.total"
                :pageSizes="[20, 30, 40, 50]"
                :tableHeight="400"
                @selection-change="selectionChange"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              >
                <template #operation="{ row }">
                  <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
                  <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
                </template>
              </Table>
            </div>
          </div>
        </div>
      </template>
    </Card>
    <AddPerson v-if="addVisible" v-model:visible="addVisible" />
    <EditPerson v-if="editVisible" v-model:visible="editVisible" />
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import AddPerson from './compontents/AddPerson.vue'
import EditPerson from './compontents/EditPerson.vue'
import { Search } from '@element-plus/icons-vue'
import { systemApi } from '@/utils/api.js'
import { listTotree } from '@/utils/tree.js'
import Table from '@/components/CustomTable.vue'
import Card from '@/components/Card.vue'

const handleCheckChange = (data, checked, indeterminate) => {
  console.log(checked)
}

const addVisible = ref(false)
const openAdd = () => {
  addVisible.value = true
}

const editVisible = ref(false)
const handleEdit = row => {
  console.log('编辑行:', row)
  editVisible.value = true
}

const selectTree = ref()

const inp = reactive({
  input: '',
})

const filterNode = (value, data) => {
  if (!value) return true
  return data[defaultProps.label].indexOf(value) !== -1
}

watch(
  () => inp.input,
  newValue => {
    selectTree.value.filter(newValue)
  },
)

const data = reactive({
  devIp: '',
  project: '',
  depCoding: '',
  coding: '',
  pageNum: 1,
  pageSize: 20,
  total: 0,
})

const tableConfig = reactive({
  thead: [
    { prop: 'name', label: '所属区域' },
    { prop: 'project', label: '所属项目' },
    { prop: 'devIp', label: '责任人' },
    { prop: 'operation', label: '操作', width: '150px' },
  ],
})

const table = reactive({
  tableData: [],
})

const getTable = () => {
  systemApi.getUserList(data).then(res => {
    table.tableData = res.rows
    data.total = res.total
  })
}

const treeDatas = reactive({
  treeData: [],
})

const getFacilityList = () => {
  systemApi.getDeptList().then(res => {
    const arr = listTotree(res.data, 'coding', 'parCoding')
    function next(arr) {
      arr.forEach(item => {
        item.value = item.coding
        item.label = item.name
        if (Array.isArray(item.children)) next(item.children)
      })
    }
    next(arr)
    treeDatas.treeData = arr
  })
}

const handleSizeChange = val => {
  data.pageSize = val
  getTable()
}

const handleCurrentChange = val => {
  data.pageNum = val
  getTable()
}

const handleNodeClick = treeData => {
  data.depCoding = treeData.coding
  getTable()
}

const defaultProps = {
  children: 'children',
  label: 'name',
}

const ruleFormRef = ref()

const submitForm = () => {
  getTable()
}

const resetForm = formEl => {
  if (!formEl) return
  formEl.resetFields()
  data.depCoding = ''
  getTable()
}

const checkScope = ref([])
const selectionChange = val => {
  checkScope.value = val
}

const handleDelete = row => {
  console.log('删除行:', row)
  // 实现删除逻辑
}

const openImport = () => {
  console.log('批量删除')
  // 实现批量删除逻辑
}

// 初始化
getTable()
getFacilityList()
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
}

.facility-box {
  display: flex;
  height: calc(100vh - 100px);
  overflow: hidden;
  flex: 1;
  .state-left {
    width: 20%;
    padding-right: 20px;
    overflow-y: auto;

    .treeinp {
      margin-bottom: 20px;
    }
  }

  .state-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #ccc;
    padding-left: 20px;
    overflow-y: auto;

    .iscollpInp {
      display: flex;
      margin-bottom: 20px;

      .demo-ruleForm {
        flex: 1;
        display: flex;
        flex-wrap: wrap;

        .el-form-item {
          width: 50%;
          margin-bottom: 0;
        }
      }

      .fromBtn {
        display: flex;
        align-items: flex-start;
      }
    }

    .table-container {
      flex: 1;
      display: flex;
      flex-direction: column;

      .spocebtn {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
