<template>
    <div>
        <!-- 右键添加火点 -->
        <el-dialog title="火情线索" class="dialog-mini" :visible.sync="firedialogFormVisible" width="500px" @close="$emit('close')">
          <el-form :model="setUpData">
            <el-form-item label="地址" size="small">
              <el-input v-model="setUpData.address" ></el-input>
            </el-form-item>
            <el-form-item label="描述" size="small">
              <el-input v-model="setUpData.describe"  type="textarea"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="firedialogFormVisible = false;$emit('close')">取 消</el-button>
            <el-button size="mini" type="primary" @click="addfireDetail">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 右键设为任务点 -->
        <el-dialog title="任务下发" class="dialog-mini" :visible.sync="taskdialogFormVisible" width="500px" @close="$emit('close')">
          <el-form :model="setUpData">
            <el-form-item label="地址" size="small">
              <el-input v-model="setUpData.address" ></el-input>
            </el-form-item>
            <el-form-item label="详情" size="small">
              <el-input v-model="setUpData.content"  type="textarea"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="taskdialogFormVisible = false;$emit('close')">取 消</el-button>
            <el-button size="mini" type="primary" @click="addTaskClick">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 标注 -->
        <el-dialog title="保存标注" class="dialog-mini" :visible.sync="markdialogFormVisible" width="500px"  @close="$emit('close')">
          <el-form :model="setUpData">
            <el-form-item label="标题" size="small">
              <el-input v-model="setUpData.title" ></el-input>
            </el-form-item>
            <el-form-item label="描述" size="small">
              <el-input v-model="setUpData.remark"  type="textarea"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="cancelMark">取 消</el-button>
            <el-button size="mini" type="primary" @click="addMarkForm">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 标注列表 -->
        <div v-if="markListDialogFormVisible" class="marklistbox">
            <div class="flex jc-sb ai-c">
                <div class="title">标注</div>
                <span class="fz-18 fc-w mr-2 cursor" @click="viewHistoryMark">查看历史标注</span>
            </div>
            <div class="mark-content">
                <div v-for="(item,index) in markList" :key="index" class="table-li">
                    <div class="flex jc-sb ai-c max-h">
                        <div>
                            <img class="mr-1 markimg" :src="item.createUser" />
                            <span>{{ item.title }}</span>
                        </div>
                        <div>
                            <el-button size="mini" type="primary" @click="viewOneMarkDetail(item,index)">查看</el-button>
                            <el-button size="mini" type="danger" @click="delOneMark(index)">删除</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="markfooter flex ai-c jc-e">
                <el-button @click="markListDialogFormVisible = false;$emit('close')">取 消</el-button>
                <el-button type="success" @click="delAllMark">清空标注</el-button>
                <el-button type="primary" @click="submitMarkData">保存标注</el-button>
            </div>
        </div>
        <!-- 历史标注 -->
        <div  class="marklistbox marklistboxhistory" v-if="historyMarkVisible">
            <div class="flex jc-sb ai-c">
                <div class="title">历史标注</div>
            </div>
            <div class="mark-content">
                <div v-for="(item,index) in allHistoryMarkList" :key="index" class="table-li-history">
                    <div class="flex jc-sb ai-c max-h max-w">
                        <div class="flex-1 flex column mr-2">
                            <div class="flex ai-c jc-sb max-w">
                                <span>{{ item.title }}</span>
                                <span>{{ item.createTime }}</span>
                            </div>
                            <div>
                                <span>{{ item.remark }}</span>
                            </div>
                        </div>
                        <div>
                            <el-button size="mini" type="danger" @click="delOneHistoryMark(item)">删除</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="markfooter flex ai-c jc-e">
                <el-button @click="historyMarkBack">返 回</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
let BASE_API = process.env.VUE_APP_BASE_API;
export default {
    name: 'setting',
    props:['globalmap','type','clickdata'],
    data(){
        return {
            imgUrl:[
                { lable: '火点' , url: 'img/markfire.png' },
                { lable: '集合点' , url: 'img/marklocahost.png' },
                { lable: '消防车' , url: 'img/markfirecar.png' },
                { lable: '箭头' , url: 'img/markarrow.png' }
            ],
            markList:[],
            allHistoryMarkList:[],
            fireGraphicLayer: null,
            markGraphicLayer: null,
            markGraphicLayerArr: [],
            historyMarkGraphicLayer: null,
            historyMarkGraphicLayerArr: [],
            isViewMark: false,
            isViewIndex: null,
            setUpData: {},
            firedialogFormVisible: false,
            taskdialogFormVisible: false,
            markdialogFormVisible: false,
            markListDialogFormVisible: false,
            historyMarkVisible: false,
            addfireDetailReqLock:false
        }
    },
    // 沂水县森林防火：1.灭火专班图标更换；
    watch:{
        type:{
          handler(newVal,oldVal) {
            if(newVal == 1){
                this.firedialogFormVisible = true
            }
            if(newVal == 2){
                this.taskdialogFormVisible = true
            }
            if(newVal == 3){
                this.markdialogFormVisible = true
            }
            if(newVal == 4){
              
                this.firedialogFormVisible = false;
                this.taskdialogFormVisible = false;
                this.markdialogFormVisible = false;
                this.markListDialogFormVisible = true;
            }
          },
          immediate:true
        },
        clickdata:{
          handler(newVal,oldVal) {
            this.setUpData = newVal
          }
        }
    },
    created(){
        if(this.type == 3){
            this.markdialogFormVisible = true
            this.setUpData = this.clickdata
        }
    },
    methods:{
        cancelMark(){
            this.markdialogFormVisible=false;
            this.$emit('close')
            this.isViewMark = false;
        },  
        // 保存标注到列表
        addMarkForm(){
            if(this.isViewMark){
                this.markList.splice(this.isViewIndex, 1, this.setUpData)
            }else{
                this.imgUrl.forEach(item =>{
                    if(item.lable == this.setUpData.iconUrl){
                        this.setUpData.createUser = item.url
                    }
                })
                this.markList.push(this.setUpData)
            }
            this.markdialogFormVisible = false
            this.markListDialogFormVisible = true
            this.isViewMark = false
            this.$emit('close')
            this.addLayerPoint()
        },
        addLayerPoint(){
            if(this.markGraphicLayer == null){
                this.markGraphicLayer = new mars3d.layer.GraphicLayer();
                this.globalmap.addLayer(this.markGraphicLayer);
            }
            this.markGraphicLayerArr.forEach(item =>{
                this.markGraphicLayer.removeGraphic(item)
            })
            this.markGraphicLayerArr = [] 
            this.markList.forEach((item,index)=>{
                let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
                let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
                if(item.iconUrl == '箭头'){
                    horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
                    verticalOrigin = Cesium.VerticalOrigin.TOP
                }
                let graphic = new mars3d.graphic.BillboardEntity({
                    position: [item.lng,item.lat],
                    style: {
                        // image: "img/jiuyuanrenyuan.png",
                        image: item.createUser,
                        scale: 0.8,
                        horizontalOrigin: horizontalOrigin,
                        verticalOrigin: verticalOrigin,
                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
                        scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
                        clampToGround: true,
                        visibleDepth: false
                    },
                    attr: { remark: "示例11" },
                    pointerEvents: true
                })
                this.markGraphicLayerArr.push(graphic)

                this.markGraphicLayer.addGraphic(graphic);

            })
        },
        //查看标注详情
        viewOneMarkDetail(item,index){
            console.log('aaa',item)
            this.isViewMark = true
            this.setUpData = item
            this.isViewIndex = index
            this.markdialogFormVisible = true
            let lngLat = [item.lng,item.lat]
            this.globalmap.flyToPoint(lngLat,{radius:1000,"pitch":-90});
        },
        delAllMark(){
            this.$confirm('确认清空所有标注?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.markList = []
                this.addLayerPoint()
            }).catch(() => {
                       
            });
        },
        delOneMark(index){
            this.$confirm('确认删除本条标注?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.markList.splice(index, 1)
                this.addLayerPoint()
            }).catch(() => {
                       
            });
        },
        delOneHistoryMark(item){
            this.$confirm('确认删除本条标注?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let param = {
                    id: item.id
                }
                postMethodCommon("/FireCodePC/DeleteMarker?id="+param.id).then(res =>{
                    if(res.code == 200){
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.getHistoryMarkList()
                    }
                })
                
            }).catch(() => {
                       
            });
        },
        viewHistoryMark(){
            this.getHistoryMarkList()
            this.historyMarkVisible = true
        },
        // 保存标注
        submitMarkData(){
            console.log('markList',this.markList)
            postMethodCommon("/FireCodePC/AddMarkers",this.markList).then(res =>{
                console.log('rrr',res)
                if(res.code == 200){
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.markList = [];
                    this.setUpData = {};
                    this.markListDialogFormVisible = false;
                }
            })
        },  
        historyMarkBack(){
            this.historyMarkVisible = false
            this.historyMarkGraphicLayerArr.forEach(item =>{
                this.historyMarkGraphicLayer.removeGraphic(item)
            })
        },
        //获取所有标注
        getHistoryMarkList(){
            let param = {
                pageIndex: 1,
                pageSize: 99999,
            }
            getMethodCommon("/FireCodePC/MarkerList",param).then(res =>{
                this.allHistoryMarkList = res.data

                if(this.historyMarkGraphicLayer == null){
                    this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
                    this.globalmap.addLayer(this.historyMarkGraphicLayer);
                }else{
                    this.historyMarkGraphicLayer.clear();
                }
                
                this.historyMarkGraphicLayerArr = [] 
                this.allHistoryMarkList.forEach((item,index)=>{
                    let horizontalOrigin = Cesium.HorizontalOrigin.CENTER
                    let verticalOrigin = Cesium.VerticalOrigin.MIDDLE
                    if(item.iconUrl == '箭头'){
                        horizontalOrigin = Cesium.HorizontalOrigin.RIGHT
                        verticalOrigin = Cesium.VerticalOrigin.TOP
                    }
                    let graphic = new mars3d.graphic.BillboardEntity({
                        position: [item.lng,item.lat],
                        style: {
                            // image: "img/jiuyuanrenyuan.png",
                            image: item.createUser,
                            scale: 0.8,
                            horizontalOrigin: horizontalOrigin,
                            verticalOrigin: verticalOrigin,
                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
                            scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
                            clampToGround: true,
                            visibleDepth: false
                        },
                        attr: { remark: "示例11" },
                        pointerEvents: true
                    })
                    this.historyMarkGraphicLayerArr.push(graphic)

                    this.historyMarkGraphicLayer.addGraphic(graphic);

                })
            })
        },  

        //设为火点保存
        addfireDetail(){


            axios({
                    method:"post",
                    url:BASE_API+"/FireManagement/AddFireClueInfo",
                    data:this.setUpData,
                    headers:{
                        "X-Token":localStorage.getItem("X-Token")
                    }
                }).then(res=>{
                    if(res.data.code == 200){
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });

                        this.$emit('close')
                        this.addfireDetailReqLock = false
                        this.firedialogFormVisible = false;

                    }else{
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                })

        },
        //设为任务点
        addTaskClick(){
            postMethodCommon("/FireManagement/FireClueTask",this.setUpData).then(res =>{
                if(res.code == 200){
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                }else{
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    });
                }
                this.taskdialogFormVisible = false
                this.$emit('close')
            })
        }
        
    }
}
</script>

<style scoped>
.marklistbox{
    width:434px;
    height:700px;
    position: fixed;
    top: 50%;
    left: 20px;
    background-image: url(/img/pingyiperson.png);
    background-size:100% 100%;
    transform: translate(0,-50%);
    z-index: 2000;
}
.marklistboxhistory{
    z-index: 2001;
}
.marklistbox .title{
    height: 47px;
    line-height: 47px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 0 40px;
}
.mark-content{
    width: 94%;
    height: calc(100% - 140px);
    overflow: auto;
    margin-left: 3%;
    border-bottom: 1px solid #003cff2f;
    margin-top: 10px;
}
.table-li{
    width:100%;
    height: 70px;
    background: #003cff2f;
    margin-bottom: 10px;
    padding: 10px 15px;
    font-size: 14px;
    color: #fff;
}
.table-li-history{
    width:100%;
    min-height: 70px;
    background: #0E2320;
    margin-bottom: 10px;
    padding: 10px 15px;
    font-size: 14px;
    color: #fff;
}
.markimg{
    width: 40px;
    height: 40px;
}
.markfooter{
    height: 80px;
    padding-right: 30px;
}
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
    border: 0
}
  
::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: transparent;
    border-radius: 5px
}

::-webkit-scrollbar-thumb {
    padding-top: 100px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
    background-color: #797979;
    min-height: 28px;
    border-radius: 4px;
    background-clip: padding-box
}

::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
    border: 0
}

::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
    background-color: rgba(0, 0, 0, .4)
}

::-webkit-scrollbar-thumb:active {
    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
    background-color: rgba(0, 0, 0, .5)
}
</style>