<template>
    <!-- 查看平面图页面 -->
    <div id='repetitionGraphy'>
        <div class='buttons'>
            <el-button icon='el-icon-back' size='mini' @click='backRouter'></el-button>
            <template v-if="!hasGraph">
                <el-button size='mini' @click='changeGraphy'>{{hasModel?'关联模型文件':'上传平面图图片'}}</el-button>
            </template>
            <template v-else>
                <el-button v-if='!isEdit' size='mini' @click='changeGraphy'>替换平面图</el-button>
                <el-button v-if='(sign||otherSign)&&!isEdit' size='mini' @click='editGraphy'>编辑平面图</el-button>
                <el-button v-if='isEdit' size='mini' @click='cancel'>取消</el-button>
                <el-button v-if='isEdit' size='mini' @click='confirm' type='primary'>确认</el-button>
            </template>
            <span style='float:right;' v-if='file.FolderName'>当前对应的模型文件：{{file.FolderName}} - {{file.FloorName}}</span>
        </div>
        <!-- 展示图片 -->
        <div class='drawImg'>
            <div style="width: 100%;height: 100%" v-if="hasGraph">
                <drawFloor ref='drawFloor' :isEdit='isEdit' :showTools='true' :id='1' @changeSign='changeSign'></drawFloor>
            </div>
            <div style="width: 100%;height: 100%" v-else>
                <div class="center" style="padding-top: 300px">
                    <i class="icon-wushuju iconfont"></i>暂无平面图
                </div>
            </div>
        </div>
        <!-- 查看图片弹窗 -->
        <checkGraphy ref='checkGraphy' @refresh='refresh' :alreadyRelatedModel='alreadyRelatedModel' @hasModel="getCount"></checkGraphy>
    </div>
</template>
<script>
import drawFloor from './drawGraphy/drawFloor'
import checkGraphy from './drawGraphy/checkGraphy' //查看图片
import { floorUpdateOutline, floorQueryAndSign } from '@/api/scan/request'
import { getFileNameById } from '@/api/model/file'
export default {
    components: {
        drawFloor,
        checkGraphy,
    },
    data() {
        return {
            modelId: '', //
            isEdit: false, // 是否编辑模式
            file: {},
            alreadyRelatedModel: [],
            sign: false,
            otherSign: false,
            hasGraph: false, // 当前楼层是否有平面图
            hasModel: false, // 项目中时候有模型文件
        }
    },
    created() {
        this.modelId = this.$route.query.modelId
        this.FloorID = this.$route.query.FloorID
        this.BuildID = this.$route.query.BuildID
        this.BuildName = this.$route.query.BuildName
        if (this.modelId != '') {
            this.hasGraph = true;
            const temp = this.modelId.split('.');
            if (temp.length > 1 && (temp[1] == 'png' || temp[1] == 'jpg')) {
                return
            } else {
                this.init()
            }
        } else {
            this.hasGraph = false;
        }
    },
    mounted() {},
    methods: {
        init() {
            this.getFileName(this.modelId)
            this.getFloorData()
        },
        // 返回路由
        backRouter() {
            this.$router.push({ name: 'buildFloor' })
        },
        // 替换模型文件
        changeGraphy() {
            this.$refs.checkGraphy.showDialog({ FloorID: this.FloorID, BuildID: this.BuildID })
        },
        // 确认保存
        confirm() {
            let sceneMark = this.$refs.drawFloor.drawMainScene.sceneMark,
                Outline = null
            if (sceneMark) {
                if (sceneMark.outLine.length < 3) {
                    this.$message.warning('请添加轮廓线')
                    return
                }
                if (!sceneMark.closeFlag) {
                    this.$message.warning('请按回车闭合轮廓线')
                    this.$refs.drawFloor.focus()
                    return
                }
                Outline = this.$refs.drawFloor.drawMainScene.sceneMark.outLine
                Outline = Outline.map((t) => {
                    return {
                        x: t.x.toFixed(2),
                        y: -t.y.toFixed(2),
                    }
                })
            }
            let pa = {
                Content: [{ FloorID: this.FloorID, Outline: Outline }],
                Projection: ['Outline'],
            }
            floorUpdateOutline(pa, (res) => {
                this.isEdit = false
                this.$message.success('更新成功')
            })
        },
        // 取消
        cancel() {
            this.isEdit = false
            this.$refs.drawFloor.init()
        },
        // 编辑平面图
        editGraphy() {
            this.isEdit = true
        },
        // 替换模型文件成功
        refresh(modelId) {
            this.modelId = modelId
            this.hasGraph = true;
            const temp = this.modelId.split('.');
            if (temp[1] && temp[1] != 'png' && temp[1] != 'jpg') {
                this.getFileName(this.modelId)
            }
        },
        // 获取文件夹名称
        getFileName(modelId) {
            if (!modelId) return
            let pa = {
                Id: modelId,
            }
            getFileNameById(pa, (res) => {
                this.file = res
            })
        },
        // 获取楼层
        getFloorData() {
            let floorParam = {
                PageSize: 1000,
                Filters: `BuildID='${this.BuildID}'`,
            }
            floorQueryAndSign(floorParam, (res) => {
                this.alreadyRelatedModel = res.Content.map((t) => {
                    if (t.FloorID != this.FloorID) return t.ModelId
                    this.sign = t.Sign > 0
                    this.FloorName = t.FloorLocalName || t.FloorName
                    this.$refs.drawFloor.buildFloorName = `${this.BuildName}-${this.FloorName}`
                }).filter((t) => t)
            })
        },
        changeSign(flag) {
            this.otherSign = flag
        },
        // 当前项目中是否有模型文件
        getCount(flag) {
            this.hasModel = flag;
        }
    },
    watch: {
        modelId(n, o) {
            if (n != o) {
                if (n) {
                    if (n.split('.')[1].toString() == 'png' || n.split('.')[1].toString() == 'jpg') {
                        this.$refs.drawFloor.initGraphy(n, 3)
                    } else {
                        this.$refs.drawFloor.initGraphy(n, 1)
                    }
                }
            }
        },
    },
}
</script>
<style lang="less">
#repetitionGraphy {
    width: 100%;
    height: 100%;
    background: #fff;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    .drawImg {
        width: 100%;
        margin-top: 10px;
        height: calc(100% - 40px);
    }
}
</style>
