<template>
  <div class="app-container">
    <el-row :gutter="5">
      <el-col :span="16">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <template #header>
            <div class="card-header">我的部门</div>
          </template>
          <Custom-table
            :tableConfigData="tableConfigData"
            @handle-show="handleShow"
          >
            <template v-slot:drawer>
              <el-form-item
                v-for="(item, index) in editData"
                :key="index"
                :label="item.label"
                :prop="item.prop"
              >
                <custom-form-item
                  v-model:modValue="tableConfigData.drawerformData[item.prop]"
                  :type="item.type"
                  :inputType="item.inputValue"
                  :options="tableData"
                  :selectProp="item.selectProp"
                >
                </custom-form-item>
              </el-form-item>
            </template>
          </Custom-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <el-tabs>
            <el-tab-pane label="基本信息"></el-tab-pane>
            <el-tab-pane label="部门权限"></el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { departmentData } from './tableConfigData/departmentManage'
import { Scope } from '@/table/type'
import { ref, Ref, reactive } from 'vue'
export default {
  name: 'departmentManage',
  setup() {
    const tableConfigData = reactive(departmentData)
    const tableData: Ref<any[]> = ref([])
    const editData: Ref<any[]> = ref([])
    tableConfigData.tableTitle.forEach(item => {
      if (item.type) {
        editData.value.push(item)
      }
    })
    const handleShow = ref((params: { key: string, tableData: object[], scope?: Scope }) => {
      console.log(params.tableData)
      tableData.value = params.tableData
      const key = params.key
      switch (key) {
        case '新增':
          tableConfigData.drawerformData = {
            id: '',
            type: 0,
            cname: '',
            ename: '',
            code: ''
          }
          break
        case '编辑': {
          if (!params.scope) return false
          const row = params.scope.row
          tableConfigData.drawerformData = {
            id: row.id,
            type: row.type,
            cname: row.cname,
            ename: row.ename,
            code: row.code
          }
          break
        }
      }
    })
    return {
      tableConfigData,
      handleShow,
      tableData,
      editData
    }
  }
}
</script>

<style>

</style>
