<template>
    <!-- 新增||修改弹框 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="title" :visible.sync="open"
        width="800px" append-to-body>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="地址:" prop="addressId">
                <el-cascader v-if="open" v-model="form.addressId" :props="props" :options="options"
                    :placeholder="addressName" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
// 导入接口 （根基实际项目，自定义）
import { lazyList, getUser, updateUser, addUser } from '@/api/manager/user'
var uploadingClick = 0
export default {
    data() {
        return {
            title: '',
            open: false,
            options: [],
            //     options:[  // 级联选择器的数据格式
            // 		{
            // 		"ancestors": "0,100", // 上级的deptId以逗号分割形成的字符串
            // 		"deptName": "测试1",
            // 		"deptId": 25438,
            // 		"parentId": 100,
            // 		"parentName": "测试",
            // 		"existSub": true  
            // 	},
            // 	{
            // 		"ancestors": "0,100",
            // 		"deptName": "测试2",
            // 		"deptId": 25441,
            // 		"parentId": 100,
            // 		"parentName": "测试",
            // 		"existSub": false
            // 	},
            //    ],
            addressName: '请选择',  //当前选中的name
            form: {
                addressId: [], //选中的上下级deptId所组成的数组：比如：  [100, 25438, 25519, 25652, 25604] ，
            },
            // 表单校验
            rules: {
                addressId: [
                    {
                        required: true,
                        message: '地址不能为空',
                        trigger: 'blur'
                    }
                ],
            },
            props: {
                //是否动态加载子节点，需与 lazyLoad 方法结合使用
                lazy: true,
                value: 'deptId',
                label: 'deptName',
                children: 'children',
                //在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
                emitPath: false,
                //是否严格的遵守父子节点不互相关联
                checkStrictly: true,
                //加载动态数据的方法，仅在 lazy 为 true 时有效
                //function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)
                lazyLoad(node, resolve) {
                    const queryParams = {}
                    queryParams.parentId = node.value
                    //根据parentId 查询下级的数据
                    lazyList(queryParams).then(res => {
                        res.data.forEach(item => { // 是否存在下级，是否禁用
                            item.leaf = !item.existSub
                            item.disabled = false
                        })
                        resolve(res.data)
                    })
                }
            },
        }
    },

    methods: {
        // 表单重置
        reset() {
            this.form = {
                addressId: [],
            }
            this.resetForm('form')
        },
        /** 新增操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = '添加'
        },
        /** 修改操作 */
        handleUpdate(row) {
            this.reset()
            const id = row.id
            // 调用详情的接口
            getUser(id).then(response => {
                this.form = response.data
                // 处理addressId ，用来获取所有上下级deptId组成的数组
                this.form.addressId = this.dataEchoHandle(response.data)
                this.open = true
                this.title = '修改'
            })
        },

        // Cascader 级联选择器 懒加载  数据回显
        dataEchoHandle(row) { // 
            // 获取到当前的addressId
            let ancestors = row.addressId // 当前的id，比如：25604
            if (row.ancestors && row.ancestors != '') { // 格式：'0,100, 25438, 25519, 25652'
                // 对数据进行回显（获取所有父级的addressId，加上当前的addressId，组成的数组。）
                ancestors = row.ancestors.split(',')
                ancestors.shift() //去掉0
                ancestors = ancestors.map(Number) // 数组的每个元素由string转为number类型
                ancestors.push(row.addressId) // 将当前的id加入
                console.log(ancestors, 'ancestors')  // 获取到所有的id组成的数组  [100, 25438, 25519, 25652, 25604] 
            }
            return ancestors
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        /** 提交按钮 */
        submitForm: function () {
            if (uploadingClick == 0) {
                uploadingClick = 1
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        console.log('this.form', this.form)
                        const params = JSON.parse(JSON.stringify(this.form))
                        // return;
                        if (this.form.id != undefined) {
                            if (params.addressId instanceof Array) {
                                // 数组类型
                                params.addressId = params.addressId[params.addressId.length - 1]
                            }
                            console.log('params修改', params)
                            // return;
                            updateUser(params).then(response => {
                                this.$modal.msgSuccess('修改成功')
                                this.open = false
                            })
                        } else {
                            addUser(params).then(response => {
                                this.$modal.msgSuccess('新增成功')
                                this.open = false
                            })
                        }
                    }
                })
                setTimeout(function () {
                    uploadingClick = 0
                }, 3000)
            } else {
                this.$modal.msgError('请勿重复点击')
            }
        },
    }
}
</script>