<template>
    <div class="default-main" :style="{ height: pageHeight.height }">
        <vxe-table v-loading="tableStore.table.loading" height="auto" auto-resize ref="tableRef"
            v-bind="defaultAttribute" :data="tableStore.table.data" :column-config="{ resizable: true }"
            :tree-config="{ expandAll: true }">
            <vxe-column field="name" align="left" title="名称" tree-node></vxe-column>
            <vxe-column field="area" title="区域">
                <template #default="{ row }">
                    {{ row.area || '/' }}
                </template>
            </vxe-column>
            <vxe-column field="remark" title="备注">
                <template #default="{ row }">
                    {{ row.remark || '/' }}
                </template>
            </vxe-column>
            <vxe-column field="remark" title="操作" width="150px">
                <template #default="{ row }">
                    <el-button type="primary" link @click="edit(row)" v-if="!row.path">编辑</el-button>

                    <el-popconfirm title="确定删除吗？" confirm-button-type="danger" @confirm="deletes(row)" v-if="!row.path">
                        <template #reference>
                            <el-button type="danger" link>删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </vxe-column>
        </vxe-table>

        <el-dialog v-model="dialogVisible" title="编辑" width="500">
            <el-form :model="form" ref="ruleFormRef" label-width="80px" :rules="rules">
                <el-form-item label="名称" prop="name">
                    <el-input maxlength="32" show-word-limit v-model="form.name" clearable placeholder="请输入名称" />
                </el-form-item>
                <el-form-item label="区域" :prop="form.pid == '0' ? 'city' : 'area'">
                    <!-- <el-input maxlength="32" show-word-limit  v-model="form.city" clearable placeholder="请输入区域" /> -->
                    <el-cascader v-model="form.city" v-if="form.pid == '0'" style="width: 100%" :options="areaTree"
                        :props="props" clearable filterable placeholder="请输入区域" />
                    <el-input maxlength="32" show-word-limit v-else v-model="form.area" clearable placeholder="请输入区域" />
                </el-form-item>
                <el-form-item label="备注" prop="description">
                    <el-input maxlength="300" show-word-limit v-model="form.description" :rows="2" type="textarea"
                        clearable placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="save" :loading="loading">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import { useDictData } from '@/stores/dictData'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'
import { ElMessageBox, ElMessage } from 'element-plus'
import { auditEngineering, updateProject } from '@/api/cs-device-boot/edData'
import { activateUser, deluser, passwordConfirm } from '@/api/user-boot/user'
import tree from '@/assets/map/area.json'
defineOptions({
    name: 'govern/manage/engineering'
})
const dictData = useDictData()
const tableRef = ref()
const dialogVisible = ref(false)
const pageHeight = mainHeight(20)
const loading = ref(false)
const tableStore = new TableStore({
    url: '/cs-device-boot/csLedger/getProjectTree',
    method: 'POST',
    column: [],

    loadCallback: () => {
        setTimeout(() => {
            tableRef.value.setAllTreeExpand(true)
        }, 500)
    }
})
const ruleFormRef = ref()
const rules = ref({
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    city: [{ required: true, message: '请输入区域', trigger: 'blur' }],
    area: [{ required: true, message: '请输入区域', trigger: 'blur' }],
    description: [{ required: true, message: '请输入描述', trigger: 'blur' }]
})

const areaTree: any = tree
const props = {
    label: 'text',
    value: 'value',
    children: 'children',
    checkStrictly: true
}
const form = ref({
    id: '',
    pid: '',
    area: '',
    name: '',
    city: '',
    description: ''
})
provide('tableStore', tableStore)

onMounted(() => {
    tableStore.index()
    // setTimeout(() => {
    //     tableRef.value.setAllTreeExpand(true)
    // }, 500)
})
const deletes = (row: any) => {
    ElMessageBox.prompt('二次校验密码确认', '·', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        customClass: 'customInput',
        inputType: 'text',
        beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
                if (instance.inputValue == null) {
                    return ElMessage.warning('请输入密码')
                } else if (instance.inputValue?.length > 32) {
                    return ElMessage.warning('密码长度不能超过32位,当前密码长度为' + instance.inputValue.length)
                } else {
                    done()
                }
            } else {
                done()
            }
        }
    }).then(({ value }) => {
        passwordConfirm(value).then(res => {
            auditEngineering({
                id: row.id,
                status: 0
            }).then((res: any) => {
                ElMessage.success('删除成功')
                tableStore.index()
            })
        })
    })
}

// 编辑
const edit = (row: any) => {
    form.value = {
        id: row.id,
        pid: row.pid,
        name: row.name,
        city: row.cityId,
        area: row.area,
        description: row.remark
    }
    dialogVisible.value = true
}
const save = () => {
    ruleFormRef.value.validate((valid: any) => {
        if (valid) {
            loading.value = true
            if (form.value.pid == '0') {
                auditEngineering({ ...form.value, city: form.value.city[form.value.city.length - 1] }).then(
                    (res: any) => {
                        ElMessage.success('保存成功')
                        dialogVisible.value = false
                        tableStore.index()
                    }).finally(() => {
                        loading.value = false
                    }
                    )
            } else {
                let params = new FormData()
                params.append('id', form.value.id)
                params.append('area', form.value.area)
                params.append('description', form.value.description)
                params.append('name', form.value.name)

                updateProject(form.value).then((res: any) => {
                    ElMessage.success('保存成功')
                    dialogVisible.value = false
                    tableStore.index()
                }).finally(() => {
                    loading.value = false
                })
            }
        }
    })
}
</script>
<style lang="scss">
.customInput {
    .el-input__inner {
        -webkit-text-security: disc !important;
    }
}
</style>
