<template>
    <div>
        <el-card class="tjm_card_style_custom">
    <!--      <div class="tjm_card_title">查询表格</div>-->
    <!--      <div class="tjm_card_select">-->
    <!--        <div class="tjm_card_select_left">-->
    <!--          <el-form-->
    <!--            :inline="true"-->
    <!--            :model="formInline"-->
    <!--            label-width="80px"-->
    <!--            :label-position="'left'"-->
    <!--          >-->
    <!--            <el-form-item label="部门名称">-->
    <!--              <el-input-->
    <!--                v-model="formInline.name"-->
    <!--                placeholder="请输入"-->
    <!--                clearable-->
    <!--              />-->
    <!--            </el-form-item>-->

    <!--            <el-form-item label="创建时间">-->
    <!--              <el-date-picker-->
    <!--                v-model="formInline.date"-->
    <!--                type="daterange"-->
    <!--                placeholder="Pick a date"-->
    <!--                clearable-->
    <!--              />-->
    <!--            </el-form-item>-->
    <!--            <el-form-item label="部门状态">-->
    <!--              <el-select-->
    <!--                v-model="formInline.status"-->
    <!--                clearable-->
    <!--                placeholder="请选择"-->
    <!--              >-->
    <!--                <el-option label="启用" value="1" />-->
    <!--                <el-option label="禁用" value="2" />-->
    <!--              </el-select>-->
    <!--            </el-form-item>-->
    <!--          </el-form>-->
    <!--        </div>-->
    <!--        <div class="tjm_card_select_right">-->
    <!--          <div>-->
    <!--            <el-button type="primary">-->
    <!--              <el-icon class="tjm_btn_icon_right"><tjm-icon-ep-Plus /></el-icon>-->
    <!--              搜索-->
    <!--            </el-button>-->
    <!--          </div>-->

    <!--          <div>-->
    <!--            <el-button>-->
    <!--              <el-icon class="tjm_btn_icon_right"><tjm-icon-ep-RefreshRight /></el-icon>-->
    <!--              重置-->
    <!--            </el-button>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <el-divider />-->
    <!--      <div class="tjm_card_tools">-->
    <!--        <div class="tjm_card_tools_left">-->
    <!--          <el-button type="primary">-->
    <!--            <el-icon class="tjm_btn_icon_right"><tjm-icon-ep-Plus /></el-icon>-->
    <!--            新增-->
    <!--          </el-button>-->
    <!--        </div>-->
    <!--        <div class="tjm_card_tools_right">-->
    <!--          <el-button>-->
    <!--            <el-icon class="tjm_btn_icon_right"><tjm-icon-ep-UploadFilled /></el-icon>-->
    <!--            上传-->
    <!--          </el-button>-->
    <!--        </div>-->
    <!--      </div>-->
            <div class="tjm_cart_table">
                <el-table
                    ref="deptTable"
                    header-cell-class-name="tjm_cart_table_header"
                    height="400"
                    :data="tableData"
                    v-loading="loading"
                    border
                    row-key="id"
                >
                    <!-- <el-table-column type="selection" width="55" /> -->
                    <el-table-column prop="name" label="部门名称" />
                    <el-table-column label="类型">
                        <template #default="scope">
                            {{ scope.row.deptType == 1 && "单位" || "部门" }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="sort" label="排序" />
                    <el-table-column prop="ope" label="操作">
                        <template #default="scope">
                            <el-button link type="primary" icon="Edit" @click="editItem(scope.row)">修改</el-button>
                            <el-button link type="primary" icon="Plus" @click="addItem(scope.row)">新增</el-button>
                            <el-button link type="primary" icon="Delete" @click="deleteDepartClick(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- <div class="tjm_cart_pagination">
                <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChange" />
            </div> -->
        </el-card>

        <!-- 新增/编辑 -->
        <el-dialog :title="dialogTitle" v-model="addShow" append-to-body @close="resetForm">
            <el-form ref="userRef" :model="form" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="父级节点" prop="parentId">
                            <el-input
                                v-model="form.parentId"
                                placeholder="--"
                                disabled
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="部门名称" prop="name">
                            <el-input
                                v-model="form.name"
                                placeholder="请输入部门名称"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="部门代码" prop="code">
                            <el-input
                                v-model="form.code"
                                placeholder="请输入部门代码"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="部门描述" prop="description">
                            <el-input
                                v-model="form.description"
                                placeholder="请输入部门描述"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="类型" prop="deptType">
                            <el-radio-group v-model="form.deptType">
                                <el-radio label="部门" :value="0"></el-radio>
                                <el-radio label="单位" :value="1"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="部门排序" prop="sort">
                            <el-input-number v-model="form.sort" :min="0" :max="1000" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="部门状态" prop="state">
                            <el-switch v-model="form.state" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="addCancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { getMainList, setDepart, addDepart, deleteDepart } from "@/api/system/depart"
const loading = ref(false) //加载
const total = ref(0)
//查询
const params = ref({
    page: 1,
    size: 20
})
const isExpandAll = ref(true) //展  开
const tableData = ref([])  //展示数据

const dialogTitle = ref('新增')
const addShow = ref(false)
const deptTable = ref()

const form = ref({
    name: null,
    code: null,
    state: true,
    description: null,
    deptType: 0,
    sort: 0,
})
const rules = ref({
    name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
    code: [{ required: true, message: '部门代码不能为空', trigger: 'blur' }],
})

const { proxy } = getCurrentInstance()

function getList() {
    loading.value = true
    getMainList().then(res => {
        loading.value = false
        if (res.code === 200) {
            tableData.value = res.data
        }
    }).catch(() => {
        loading.value = false
    })
}
function currentChange(e) {
    params.value.page = e
    getList()
}

function addItem(row) {
    console.log(row)
    form.value.parentId = row.id
    dialogTitle.value = '新增'
    addShow.value = true
}

function editItem(row) {
    console.log(row)
    form.value.parentId = row.parentId
    form.value.id = row.id
    form.value.name = row.name
    form.value.code = row.code
    form.value.description = row.description
    form.value.sort = row.sort
    form.value.deptType = row.deptType
    form.value.state = row.state === 0
    dialogTitle.value = '编辑'
    addShow.value = true
}
function addCancel() {
    addShow.value = false
    resetForm()
}
function resetForm() {
    form.value = {
        name: null,
        code: null,
        state: true,
        description: null,
        deptType: 1,
        sort: 0
    }
    if (proxy.$refs['userRef']) {
        proxy.$refs['userRef'].resetFields()
    }
    console.log('重置表单')
}

function submitForm() {
    proxy.$refs['userRef'].validate(valid => {
        if (valid) {
            if (form.value.id) {
                console.log('修改表单')
                const params = {
                    ...form.value
                }
                params.state = params.state ? 0 : 1
                setDepart(params).then(res => {
                    if (res.code === 200) {
                        ElMessage({
                            message: '修改成功',
                            type: 'success'
                        })
                        addShow.value = false
                        resetForm()
                        getList()
                    }
                })
            } else {
                console.log('新增表单')
                const params = {
                    ...form.value
                }
                params.state = params.state ? 0 : 1
                addDepart(params).then(res => {
                    if (res.code === 200) {
                        ElMessage({
                            message: '新增成功',
                            type: 'success'
                        })
                        addShow.value = false
                        resetForm()
                        getList()
                    }
                })
            }
        }
    })
}

function deleteDepartClick(row) {
    ElMessageBox.confirm('是否确认删除"' + row.name + '"?', '删除警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        deleteDepart(row.id).then(res => {
            if (res.code === 200) {
                ElMessage({
                    message: '删除成功',
                    type: 'success'
                })
                getList()
            } else {
                ElMessage({
                    message: res.msg,
                    type: 'error'
                })
            }
        })
    })
}
getList()
</script>

<style lang="scss" scoped></style>