<template>
    <div class="pd10">
        <el-button
            size="small"
            icon="el-icon-plus"
            type="primary"
            style="float: right; margin-bottom: 10px"
            @click="addtype"
        >
            新增类型
        </el-button>
        <el-table
            stripe
            class="xshou"
            :data="tableData"
            row-key="id"
            id="rebateSetTable"
            border
            :height="tableheight + 'px'"
            highlight-current-row
            v-loading="loading"
            element-loading-text="数据加载中"
            header-cell-class-name="table_header"
            :default-expand-all="false"
        >
            <el-table-column align="center" prop="deptName" label="部门">
                <template slot-scope="scope">
                    <span v-if="scope.row.deptName == null">/</span>
                    <span>{{ scope.row.deptName }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="mapType" label="地图类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.mapType == 0">离线地图</span>
                    <span v-if="scope.row.mapType == 1">在线地图</span>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="longitude"
                label="中心点经度"
                :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column align="center" prop="latitude" label="中心点纬度"></el-table-column>
            <el-table-column align="center" prop="minValue" label="最小缩放层级"></el-table-column>
            <el-table-column align="center" prop="maxValue" label="最大缩放层级"></el-table-column>
            <el-table-column align="center" prop="beValue" label="当前缩放层级"></el-table-column>
            <el-table-column align="center" prop="mapUrl" label="当前访问地址"></el-table-column>
            <el-table-column align="center" label="操作" min-width="180">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row)">修改</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="deletedata(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            :close-on-click-modal="false"
            title="地图类型"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
        >
            <el-row :gutter="10">
                <el-col :span="24">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                        <el-form-item label="部门配置:">
                            <el-select
                                ref="selectTree1"
                                :value="form.value"
                                v-model="form.valueTitle"
                                clearable
                                style="width: 100%"
                            >
                                <el-option :value="form.valueTitle" :label="form.valueTitle" class="options">
                                    <el-tree
                                        id="tree-option"
                                        ref="selectTree"
                                        :accordion="form.accordion"
                                        :data="form.options"
                                        :props="form.props"
                                        :node-key="form.props.value"
                                        :default-expanded-keys="form.defaultExpandedKey"
                                        @node-click="handleNodeClick"
                                    >
                                        <span slot-scope="{ node, data }">
                                            <i
                                                :class="[data.color != null ? 'ification_col' : '']"
                                                :style="{ 'background-color': data.color }"
                                            ></i>
                                            &nbsp;&nbsp;{{ data.name }}
                                        </span>
                                    </el-tree>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="地图名称:" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="地图类型:" prop="maytype">
                            <el-select v-model="ruleForm.maytype" placeholder="请选择地图类型" style="width: 100%">
                                <el-option
                                    v-for="item in typeoption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="中心点经度:" prop="centerlng">
                            <el-input v-model="ruleForm.centerlng"></el-input>
                        </el-form-item>
                        <el-form-item label="中心点纬度:" prop="centerlng">
                            <el-input v-model="ruleForm.centerlat"></el-input>
                        </el-form-item>
                        <el-form-item label="最小缩放层级:" prop="minindex">
                            <el-input v-model="ruleForm.minindex"></el-input>
                        </el-form-item>
                        <el-form-item label="最大缩放层级:" prop="minindex">
                            <el-input v-model="ruleForm.maxindex"></el-input>
                        </el-form-item>
                        <el-form-item label="当前缩放层级:" prop="minindex">
                            <el-input v-model="ruleForm.nowindex"></el-input>
                        </el-form-item>
                        <el-form-item label="瓦片访问地址:" prop="nowurl">
                            <el-input v-model="ruleForm.nowurl"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getheight } from '@/assets/commjs/common'
import { deptTree, getDeptMapConfig } from '@/api/admin/dept'
export default {
    name: 'mapmanagement',
    data() {
        return {
            form: {
                value: '',
                props: '',
                valueTitle: '',
                accordion: false,
                defaultExpandedKey: [],
                //区域
                options: [],
                default: {
                    value: 'id',
                    children: 'children',
                    label: 'name'
                }
            },
            tableheight: undefined,
            dialogVisible: false,
            loading: false,
            tableData: [],
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                maytype: [0],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                maytype: [{ required: true, message: '请选择地图类型', trigger: 'change' }],
                centerlng: [
                    {
                        type: 'date',
                        required: true,
                        message: '请输入中心点经度',
                        trigger: 'change'
                    }
                ],
                centerlat: [
                    {
                        type: 'date',
                        required: true,
                        message: '请输入中心点纬度',
                        trigger: 'change'
                    }
                ],
                minindex: [
                    {
                        type: 'array',
                        required: true,
                        message: '请填写当前最小缩放层级',
                        trigger: 'change'
                    }
                ],
                maxindex: [
                    {
                        required: true,
                        message: '请填写当前最大缩放层级',
                        trigger: 'change'
                    }
                ],
                nowurl: [{ required: true, message: '请填写瓦片访问地址', trigger: 'change' }],
                nowindex: [{ required: true, message: '请填写当前缩放层级', trigger: 'blur' }]
            },
            dataForm: {
                name: '',
                unitId: '',
                teamCode: '',
                guid: '',
                scaleName: '',
                totalCapacity: ''
            },
            unitId: [],
            typeoption: [
                {
                    id: 0,
                    name: '离线地图'
                },
                {
                    id: 1,
                    name: '在线地图'
                }
            ]
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.queryData()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.tableheight = window.sessionStorage.getItem('appheight') - 55
        },
        queryData() {
            getDeptMapConfig().then(res => {
                // console.log(res.data);
                if (res.code == 'A0000') {
                    this.tableData = res.data
                }
            })
        },
        //新增地图类型
        addtype() {
            this.ruleForm = {}
            this.dialogVisible = true
            deptTree().then(res => {
                if (res.code == 'A0000') {
                    this.form.options = res.data
                }
            })
        },
        handleClose() {
            this.dialogVisible = false
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    alert('submit!')
                } else {
                    // console.log("error submit!!");
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        // 切换选项
        handleNodeClick(node) {
            this.unitId = []
            // console.log(node);
            this.$refs.selectTree1.blur()
            this.form.valueTitle = node.areaName
            this.form.defaultExpandedKey = []
            this.unitId.push(node.id)
        },
        edit(row) {
            this.dialogVisible = true
            this.ruleForm.name = row.name
            this.ruleForm.maptype = row.maptype
            this.ruleForm.centerlng = row.centerlng
            this.ruleForm.centerlat = row.centerlat
            this.ruleForm.minindex = row.minindex
            this.ruleForm.maxindex = row.maxindex
            this.ruleForm.nowindex = row.nowindex
            this.ruleForm.nowurl = row.nowurl
        },
        deletedata(row) {
            this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
::v-deep.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    height: 36px !important;
    padding: 0 !important;
    margin-bottom: 18px !important;
}
::v-deep .form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-form-item {
        display: flex;
        width: 48%;
        .el-form-item__content {
            flex: 1 !important;
            .el-select {
                width: 100%;
            }
            .el-input__inner {
                width: 100% !important;
            }
            .el-date-editor {
                width: 100%;
            }
        }
    }
}
.obtain {
    margin-left: 1220px;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    max-height: 274px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
}

.el-select-dropdown__item.selected {
    font-weight: normal;
}

ul li > .el-tree .el-tree-node__content {
    height: auto;
    padding: 0 20px;
}

.el-tree-node__label {
    font-weight: normal;
}

.el-tree > .is-current .el-tree-node__label {
    color: #409eff;
    font-weight: 700;
}

.el-tree > .is-current .el-tree-node__children .el-tree-node__label {
    color: #606266;
    font-weight: normal;
}

.el-popper {
    z-index: 9999;
}
.ification_col {
    width: 20px;
    height: 10px;
    display: inline-block;
}
</style>
