<template>
    <Page>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item style="float: right">
                <el-upload
                    action=""
                    class="upload-demo"
                    :show-file-list="false"
                    :auto-upload="false"
                    :on-change="chooseImage"
                >
                    <el-button size="small" type="primary" icon="el-icon-plus">新增拓扑图</el-button>
                </el-upload>
            </el-form-item>
        </el-form>
        <el-table
            stripe
            :data="tableData"
            header-cell-class-name="table_header"
            :height="tabHeight"
            highlight-current-row
            border
            style="width: 100%"
        >
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
            <el-table-column align="center" prop="name" label="拓扑图模版名称"></el-table-column>
            <el-table-column align="center" prop="name" label="监测点数量">
                <template slot-scope="scope">
                    {{ scope.row.csLineTopologyTemplateVOList.length }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="220px" align="center">
                <template slot-scope="scope">
                    <!-- <div class="table-operation"> -->
                    <el-button @click="handleClick(scope.row)" type="primary" size="mini" icon="el-icon-edit">
                        编辑
                    </el-button>
                    <el-button @click="deleteTopoTemplate(scope.row)" type="danger" size="mini" icon="el-icon-delete">
                        删除
                    </el-button>
                    <!-- </div> -->
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%" class="dfhdsa">
            <!--                <el-form :label-width="formLabelWidth">-->
            <!--                    <el-form-item label="名称:">-->
            <!--                        <el-input v-model="form.name" autocomplete="off" placeholder="请输入"></el-input>-->
            <!--                    </el-form-item>-->
            <!--                </el-form>-->
            <el-form :label-width="formLabelWidth">
                <el-form-item label="拓扑图:" style='height: auto !important;'>
                    <div class="gplot-content">
                        <img :src="form.file" class="gplot-content" style="border: 1px solid #dcdfe6" />
                        <VueDragResize
                            :isActive="editorIndex == index"
                            :h="item.height"
                            :w="item.width"
                            :x="item.left"
                            :y="item.top"
                            v-on:dragging="resize(index, $event)"
                            v-for="(item, index) in pointList"
                            :key="index"
                            :isResizable="false"
                        >
                            <div
                                class="text"
                                style="line-height: 20px; white-space: nowrap"
                                :style="{ color: item.name === '监测点' ? 'red' : 'black' }"
                                @click.stop="textClick(item, index)"
                            >
                                {{ item.name }}
                            </div>
                        </VueDragResize>
                        <div>注意监测点不要移出圈</div>
                    </div>
                </el-form-item>
            </el-form>
            <el-form :label-width="formLabelWidth" v-if="editorIndex > -1">
                <el-form-item label="监测点位置:">
                    <div style="display: flex">
                        <el-select
                            v-model="pointList[editorIndex].position"
                            placeholder="请选择"
                            style="flex: 1"
                            @change="positionChange"
                        >
                            <el-option
                                v-for="item in linePosition"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                        <el-button class="ml20" type="danger" size="mini" @click="deletePoint" icon="el-icon-delete">
                            删除
                        </el-button>
                    </div>
                </el-form-item>
            </el-form>
            <el-form :label-width="formLabelWidth">
                <el-form-item label="">
                    <el-button type="primary" @click="addPoint">添加监测点</el-button>
                </el-form-item>
            </el-form>
            <el-form :label-width="formLabelWidth">
                <!--                    <el-form-item label="名称:">-->
                <!--                        <el-input v-model="form.name" autocomplete="off" placeholder="请输入"></el-input>-->
                <!--                    </el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addGplotSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </Page>
</template>
<script>
import { uploadTopo, uploadTopoPoint, getTopoTemplate, deleteTopoTemplate } from '@/api/app/device'
import VueDragResize from 'vue-drag-resize'

export default {
    name: 'GovernDispositionGplot',
    components: {
        VueDragResize
    },
    data() {
        return {
            pointList: [], // 检测带你列表
            dialogFormVisible: false,
            dialogTitle: '新增',
            formLabelWidth: '95px',
            form: {
                name: null,
                file: '',
                id: ''
            },
            mode: 'transfer', // transfer addressList
            defaultProps: {
                label: 'name',
                children: 'children'
            },
            fromData: [], // 穿梭框 - 源数据 - 树形
            toData: [], // 穿梭框 - 目标数据 - 树形
            toArray: [],
            defaultCheckedKeys: [], // 左侧默认选中数据
            dialogVisible: false,
            tableData: [],
            zbdata: [],
            bindId: [],
            rowId: '',
            renderFunc(h, option) {
                return <span>{option.label}</span>
            },
            tabHeight: 'calc(100vh - 181px)',
            editorIndex: -1,
            linePosition: []
        }
    },
    created() {
        const dictypeData = JSON.parse(localStorage.getItem('dictypeData'))
        if (dictypeData) {
            dictypeData.forEach(item => {
                let arr = [
                    {
                        code: 'Line_Position',
                        key: 'linePosition'
                    }
                ]
                arr.forEach(item2 => {
                    if (item.code == item2.code) {
                        this[item2.key] = item.children.map(item3 => {
                            return {
                                label: item3.name,
                                value: item3.id,
                                code: item3.code
                            }
                        })
                    }
                })
            })
        }
        this.queryData()
    },
    methods: {
        positionChange(e) {
            console.log(e)
            this.pointList[this.editorIndex].name = this.linePosition.find(item => {
                return item.value == e
            }).label
        },
        chooseImage(e) {
            console.warn(e)
            uploadTopo(e.raw).then(res => {
                if (res.code == 'A0000') {
                    this.form.file = localStorage.getItem('STATIC_URL') + res.data.filePath
                    this.form.id = res.data.id
                    this.dialogFormVisible = true
                    this.pointList = []
                    this.editorIndex = -1
                }
            })
        },
        addPoint() {
            this.pointList.push({
                name: '监测点',
                position: '',
                width: 'auto',
                height: 20,
                top: 100,
                left: 100
            })
            this.editorIndex = this.pointList.length - 1
        },
        textClick(item, index) {
            this.editorIndex = index
            console.log(this.editorIndex)
            this.$forceUpdate()
        },
        deletePoint() {
            this.pointList.splice(this.editorIndex, 1)
            let arr = this.pointList
            this.pointList = []
            this.editorIndex = -1
            this.$nextTick(() => {
                this.pointList = arr
            })
        },
        resize(index, newRect) {
            if (!newRect) return
            const dom = this.pointList[index]
            dom.top = newRect.top
            dom.left = newRect.left
        },
        addGplotSubmit() {
            let allSelect = this.pointList.some(item => item.position === '')
            if (allSelect) {
                this.$message.error('请完善监测点信息')
                return
            }
            let arr = this.pointList.map(item => {
                return {
                    linePostion: item.position,
                    lat: item.left,
                    lng: item.top,
                    topoId: this.form.id
                }
            })
            uploadTopoPoint(arr).then(res => {
                if (res.code == 'A0000') {
                    this.$message.success('操作成功')
                    this.dialogFormVisible = false
                    this.queryData()
                }
            })
        },

        deleteTopoTemplate(item) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteTopoTemplate(item.id).then(res => {
                    if (res.code == 'A0000') {
                        this.$message.success('操作成功')
                        this.queryData()
                    }
                })
            })
        },
        handleClick(row) {
            this.editorIndex = -1
            this.dialogFormVisible = true
            this.dialogTitle = '编辑'
            this.form.id = row.id
            this.form.file = localStorage.getItem('STATIC_URL') + row.filePath
            this.pointList = []
            this.$nextTick(() => {
                this.pointList = row.csLineTopologyTemplateVOList.map(item => {
                    return {
                        name: this.linePosition.find(item2 => {
                            return item2.value == item.linePostion
                        }).label,
                        position: item.linePostion,
                        width: 'auto',
                        height: 20,
                        top: item.lng,
                        left: item.lat
                    }
                })
                console.log(this.pointList)
            })
        },
        handleChange(value, direction, movedKeys) {
            console.log(value, direction, movedKeys)
            console.log(movedKeys)
        },
        handleClose() {
            this.dialogVisible = false
        },
        //获取列表数据
        queryData() {
            getTopoTemplate().then(res => {
                if (res.code == 'A0000') {
                    this.tableData = res.data
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.gplot-content {
    width: 375px;
    object-fit: cover;
}

.content-container {
    width: auto;
}

::v-deep .el-transfer-panel__list {
    height: 20vh;
    padding-top: 0;
    overflow: auto;
}

.title {
    padding: 40px 0;
}

.box {
    width: 600px;
    margin: 0 auto;
    //height:50vh;
    text-align: left;
}

.btn {
    padding: 5px 10px;
    background-color: #f5f7fa;
    border: 1px solid #ebeef5;
    outline: none;
}

.my-title-right {
    float: right;
    font-size: 12px;
    cursor: pointer;
}

wl-transfer .el-tree {
    // height: 50vh;
    display: inline-block !important;
    min-width: 100%;
    margin-bottom: 5px;
}

::v-deep .el-tree {
    position: relative;
    height: 22vh;
    overflow: auto;
    color: #000608;
    cursor: default;
    background: #f5f7fa;
}

::v-deep .wl-transfer .transfer-main {
    height: 50vh;
    padding: 0 10px 10px;
    overflow: auto;
    box-sizing: border-box;
}

::v-deep .wl-transfer .transfer-title {
    height: 40px;
    padding: 0 15px;
    margin-top: -2px;
    font-size: 16px;
    line-height: 40px;
    color: #333;
    background-color: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
}
</style>
<style lang="scss" scoped>
::v-deep .dfhdsa .el-dialog .el-dialog__body {
    max-height: 70vh !important;
    padding: 10px !important;
    // overflow-y: auto;
}
</style>
