<template>
    <div class="pd10">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="类型:">
                <el-switch v-model="value" active-text="企业部门" inactive-text="行政区域"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button
                    v-if="value ? true : false"
                    @click="AddClick1"
                    type="primary"
                    size="mini"
                    icon="el-icon-plus"
                >
                    新增部门
                </el-button>
            </el-form-item>
        </el-form>

        <el-table
            stripe
            :data="tableData"
            :height="tableheight + 'px'"
            v-loading="loading"
            highlight-current-row
            header-cell-class-name="table_header"
            row-key="id"
            border
            lazy
            :load="load"
            :default-expand-all="false"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
            <el-table-column prop="name" :label="value ? '企业部门' : '行政区域'"></el-table-column>
            <el-table-column align="center" prop="shortName" label="简称"></el-table-column>
            <el-table-column align="center" prop="lng" label="经度"></el-table-column>
            <el-table-column align="center" prop="lat" label="纬度"></el-table-column>
            <el-table-column align="center" prop="areaCode" label="行政编码" sortable></el-table-column>
            <el-table-column v-if="value" align="center" label="操作" min-width="100">
                <template slot-scope="scope">
                    <el-button @click="AddClick(scope.row)" type="primary" size="mini" icon="el-icon-plus">
                        新增
                    </el-button>
                    <el-button @click="EditClick(scope.row)" type="primary" size="mini" icon="el-icon-edit">
                        修改
                    </el-button>
                    <el-button @click="DeleteClick(scope.row)" type="danger" size="mini" icon="el-icon-delete">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--修改-->
        <el-dialog
            :close-on-click-modal="false"
            :title="RowName + '部门'"
            :visible.sync="dialogFormVisible"
            width="30%"
            :before-close="closeDialog"
        >
            <el-form :model="formData" ref="form" label-width="110px" :rules="rules">
                <el-form-item v-if="flag" label="父级节点:">
                    <el-input v-model="parentName" placeholder="请输入父级节点"></el-input>
                </el-form-item>
                <el-form-item label="企业部门:" prop="name" class="top">
                    <el-input v-model="formData.name" placeholder="请输入企业部门"></el-input>
                </el-form-item>
                <el-form-item label="简称:" prop="shortName" class="top">
                    <el-input v-model="formData.shortName" placeholder="请输入简称"></el-input>
                </el-form-item>
                <el-form-item label="排序:" prop="areaCode" class="top">
                    <el-input v-model="formData.areaCode" placeholder="请输入排序"></el-input>
                </el-form-item>
                <el-form-item label="经度:" prop="lng" class="top">
                    <el-input v-model="formData.lng" placeholder="请输入经度"></el-input>
                </el-form-item>
                <el-form-item label="纬度:" prop="lat" class="top">
                    <el-input v-model="formData.lat" placeholder="请输入纬度"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submitEvent">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { addtest } from '../../../../api/user'
import { areaTree, areaAdd, areaDelete, update, selectPid } from '../../../../api/admin/area'
import { getTreeData } from '@/components/ELTreeSelect/utils/utils'
export default {
    name: 'areaanagement',
    data() {
        return {
            rules: {
                name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
                shortName: [{ required: true, message: '简称不能为空', trigger: 'blur' }],
                areaCode: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
                lng: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
                lat: [{ required: true, message: '纬度不能为空', trigger: 'blur' }]
            },
            loading: false,
            value: false,
            flag: true,
            length: undefined,
            formInline: {},
            type: 0,
            RowName: '',
            dialogFormVisible: false,
            tableData: [],
            // childrenData:[],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            formData: {
                type: 0,
                id: '',
                pid: '',
                name: '',
                shortName: '',
                areaCode: '',
                lng: 0,
                lat: 0
            },
            formLabelWidth: '100px',
            parentName: '',
            length: 0,
            flag1: undefined,
            row: undefined
        }
    },
    components: {},
    watch: {
        value(val, newval) {
            if (val) {
                this.type = 1
                this.tableData = []
                this.getAreaTree()
            } else {
                this.type = 0
                this.getAreaTree()
            }
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.getAreaTree()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.tableheight = window.sessionStorage.getItem('appheight') - 55
        },
        //外部新增
        AddClick1() {
            this.flag = true
            this.formData = {}
            this.RowName = '新增'
            this.parentName = '企业'
            this.dialogFormVisible = true
            this.formData.type = 1
            this.formData.pid = '0'
            this.flag1 = 'add'
        },
        //行类新增
        AddClick(row) {
            this.flag = true
            this.formData = {}
            this.RowName = row.name + '下新增'
            this.parentName = row.name
            this.dialogFormVisible = true
            this.formData.type = 1
            this.formData.pid = row.id
            this.formData.id = row.id
            this.flag1 = 'add'
        },
        //行类修改
        EditClick(row) {
            this.flag = false
            this.RowName = row.name + '下修改'
            this.dialogFormVisible = true
            var data = {
                type: 1,
                id: row.id,
                pid: row.pid,
                name: row.name,
                shortName: row.shortName,
                areaCode: row.areaCode,
                lng: row.lng,
                lat: row.lat
            }
            this.formData = data
            this.flag1 = 'edit'
            this.row = row
        },
        //删除
        DeleteClick(row) {
            var p = row.id
            var arr = []
            arr.push(p)
            arr = JSON.stringify(arr)
            selectPid(arr).then(response => {
                // const {data} =response
                //debugger
                this.$confirm('确认删除该节点吗?', '提示', {
                    confirmButtonText: '确认删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        areaDelete(arr).then(response => {
                            if (response.code === 'A0000') {
                                this.$message.success('删除成功')
                                this.getAreaTree()
                            }
                        })
                        this.handleQuery()
                    })
                    .catch(() => {
                        // this.$message({
                        //   type: "info",
                        //   message: "已取消删除",
                        // });
                    })
            })
        },
        //下拉触发
        treeTable(row, expandedRows) {
            if (expandedRows) {
                // alert(22222)
                //    var data={id:row.id,type:this.type}
                //     areaTree(data).then(response=> {
                //            var childrenData=[]
                //            childrenData = response.data
                //            this.tableData.forEach(m=>{
                //                if(m.id ===row.id){
                //                  m.children = childrenData
                //                }
                //              m.children.forEach(n=>{
                //                 if(n.id ===row.id){
                //                   n.children = childrenData
                //                }
                //              })
                //            })
                //  })
            } else {
                //alert('触发关闭事件')
            }
        },
        //提交操作
        submitEvent() {
            this.dialogFormVisible = false
            //新增提交
            if (this.flag1 == 'add') {
                //列表为空时
                areaAdd(this.formData).then(response => {
                    if (response.code == 'A0000') {
                        this.$message.success('新增成功')
                        this.getAreaTree()
                    }
                })
            }
            //修改提交
            if (this.flag1 == 'edit') {
                update(this.formData).then(response => {
                    if (response.code == 'A0000') {
                        this.$message.success('修改成功')
                        this.tableData = []
                        this.getAreaTree()
                    }
                })
            }
        },
        //查询一层树表
        getAreaTree() {
            var data = { id: '', type: this.type }
            JSON.stringify(data)
            if (this.type == 0) {
                areaTree(data).then(response => {
                    if (response.code == 'A0000') {
                        response.data.forEach(m => {
                            delete m.children
                            m.hasChildren = true
                        })
                        // console.log("------------------------");
                        // console.log(response.data);
                        // console.log("------------------------");
                        this.tableData = response.data
                    }
                })
            } else {
                areaTree(data).then(response => {
                    if (response.code == 'A0001') {
                        this.tableData = []
                    }
                    if (response.code == 'A0000') {
                        this.tableData = response.data
                    }
                })
            }
        },
        load(tree, treeNode, resolve) {
            // console.log(tree);
            var id = tree.id
            // console.log(treeNode);
            var data = { id: id, type: this.type }
            areaTree(data).then(response => {
                var childrenData = []
                childrenData = response.data
                childrenData.forEach(n => {
                    delete n.children
                    n.hasChildren = true
                })
                setTimeout(() => {
                    resolve(childrenData)
                }, 30)
            })
        },
        resetForm() {
            if (this.$refs['form']) {
                this.$refs['form'].resetFields()
            }
        },
        closeDialog() {
            this.resetForm()
            this.dialogFormVisible = false
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
    // height: 32px;
}
</style>
