<template>
    <div class="box">
        <div class="box-title">下发任务</div>
        <div class="box-container">
            <div class="inputer">
                <span>任务位置：</span>
                <el-input size="mini" style="width:420px;" v-model="location"></el-input>
                <!-- <el-button icon="el-icon-location-outline" size="mini" type="primary"
                    style="float:left;position:relative;left:4px;" @click="initDrawLayer()"></el-button> -->

            </div>
            <div class="inputer">
                <span>任务详情：</span>
                <el-input type="textarea" :rows="1" style="width:420px;" placeholder="请输入内容" v-model="content">
                </el-input>
            </div>
            <div class="inputer">
                <span style="float:left;margin-left:12px;">接收人员：</span>
                <div class="" style="float:left;width:420px;">
                    <el-table
                        ref="multipleTable"
                        :data="list"
                        tooltip-effect="dark"
                        height="160px"
                        style="width: 100%;margin-top:12px;"
                        @selection-change="handleSelectionChange">
                        <el-table-column
                        type="selection"
                        
                        width="55">
                        </el-table-column>
                       
                        <el-table-column
                        prop="name"
                        label="姓名"
                        >
                        </el-table-column>
                       
                    </el-table>
                </div>
            </div>
        </div>
        <div style="text-align:right;margin:0px 28px;">
            <el-button size="mini" @click="close">关闭</el-button>
            <el-button type="primary" size="mini" @click="onSubmit">下发任务</el-button>
        </div>
    </div>
</template>

<script>
    let BASE_URL = process.env.VUE_APP_BASE_API
    import axios from 'axios'
    export default {
        name: 'taskDelivery',
        props: ['globalmap','lng','lat'],
        data() {
            return {
                location: '',
                content: '',
                pathPointGraphicLayer: null,
                list:[],
                multipleSelection:[],
            }
        },
        watch: {

        },
        created() {
            this.getUserList();
        },
        mounted() {
            if(this.lat){
                this.location = this.lng + "," + this.lat;
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            getUserList(){
                axios({
                    method:"get",
                    url:BASE_URL+"/FireManagement/LoadFireClueUser",
                    headers:{
                        "X-Token":localStorage.getItem("X-Token")
                    }
                }).then(res=>{
                    if(res.data.code == 200){
                        this.list = res.data.data;
                    }
                })
            },
            initDrawLayer() { // 图上标绘
                this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer({
                    name: "标绘图层",
                    id: 10101,
                    isRestorePositions: true,
                    hasEdit: true,
                    isAutoEditing: true // 绘制完成后是否自动激活编辑
                })
                this.globalmap.addLayer(this.pathPointGraphicLayer)
                // 在layer上绑定监听事件
                let _this = this;
                this.pathPointGraphicLayer.on(mars3d.EventType.click, function (e) {
                    _this.showEditor(e)
                })

                this.pathPointGraphicLayer.on(mars3d.EventType.drawCreated, function (e) {

                })

                this.pathPointGraphicLayer.on(mars3d.EventType.editStop, function (e) {
                    mars3d.widget.disable("widgets/plotAttr/widget.js")
                })
                this.drawMarker()

            },
            drawMarker() { //图上标绘
                var img = '/img/homeimg/5.png';
                this.pathPointGraphicLayer.startDraw({
                    type: "billboard",
                    style: {
                        scale: 0.6,
                        clampToGround: true,
                        image: img,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    }
                })
            },

            showEditor(e) {
                var graphic = e.graphic
                const cartesian = e.cartesian
                const point = mars3d.LngLatPoint.fromCartesian(cartesian)
                point.format()
                this.location = point.lng + "," + point.lat;
                this.lng = point.lng
                this.lat = point.lat
                if (!graphic._conventStyleJson) {
                    graphic.options.style = graphic.toJSON().style //因为示例中的样式可能有复杂对象，需要转为单个json简单对象
                    graphic._conventStyleJson = true //只处理一次
                }
                var plotAttr = mars3d.widget.getClass("widgets/plotAttr/widget.js")
                if (plotAttr && plotAttr.isActivate) {
                    plotAttr.startEditing(graphic, graphic.coordinates)
                } else {
                    mars3d.widget.activate({
                        map: this.globalmap,
                        uri: "widgets/plotAttr/widget.js",
                        name: "属性编辑",
                        graphic: graphic,
                        lonlats: graphic.coordinates
                    })
                }
            },

            bindMapClick(type) { //绑定点击事件 绘制获取起始点数据
                if (this.pathPointGraphicLayer == null) {
                    this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
                    this.globalmap.addLayer(this.pathPointGraphicLayer);
                }
                let _this = this;
                this.globalmap.setCursor(true)
                this.globalmap.on(mars3d.EventType.click, function (event) {
                    _this.globalmap.setCursor(false)
                    const cartesian = event.cartesian
                    const point = mars3d.LngLatPoint.fromCartesian(cartesian)
                    point.format()
                    _this.location = point.lng + "," + point.lat;
                    _this.drawPoint(type, point.lng, point.lat, point.z);
                })
            },
            drawPoint(type, lng, lat, z) { // 绘制起点、终点
                let image = '/img/homeimg/5.png';
                this.pathPointGraphicLayer.clear();
                var graphic = new mars3d.graphic.BillboardEntity({
                    position: [lng, lat, z],
                    style: {
                        image: image,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        clampToGround: true
                    },
                    attr: { remark: '任务点' }
                })
                this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
            },
            close() {
                if (this.pathPointGraphicLayer != null) {
                    this.pathPointGraphicLayer.clear();
                    this.globalmap.off(mars3d.EventType.click)
                }
                this.$emit('closeTask')
            },
            onSubmit() {
                let users = [];
                this.multipleSelection.forEach((item,index)=>{
                    users.push(item.id)
                })
                var querys = {
                    content: this.content,
                    lng: this.lng,
                    lat: this.lat,
                    recipientUsers:users
                }
            if (this.lng == '') {
                this.$message.warning("请选择位置");
                return;
            }
            var url = process.env.VUE_APP_BASE_API + '/FireManagement/FireClueTask'
            var _this = this
            axios({
                method: "post",
                url: url,
                data: querys,
                headers: {
                    'X-Token': localStorage.getItem("X-Token")
                }
            }).then(res => {
                if (res.data.code == 200) {
                    this.$message.success(res.data.msg);
                    _this.close()
                } else {
                    this.$message.error(res.data.msg);
                }
            })

                
            },
            
        }
    }
</script>

<style scoped>
    .box {
        width: 100%;
        height: 100%;
        background-image: url(/img/goods-pingyixian.png);
        background-size: 100% 100%;
    }

    .box-container {
        width: calc(100% - 0px);
        padding: 0px 12px;
        height: calc(100% - 100px);
    }

    .box-title {
        width: 100%;
        height: 45px;
        line-height: 45px;
        color: #fff;
        text-align: center;
        font-size: 18px;
    }

    .tab-container {
        width: 210px;
        height: 60px;
        border-bottom: 1px solid #2F5D55;
        padding-top: 10px;
        margin: 0px auto;
    }

    .inputer {
        width: 100%;
        margin: 0px auto;
        line-height: 40px;
        color: #fff;
    }

    ::v-deep .el-input__inner {
        background: none;
        border-color: #00fff0;
        color: #fff;
    }

    ::v-deep .el-textarea__inner {
        background: none;
        border-color: #00fff0;
        color: #fff;
    }

    .upload-iocn-box {
        width: 240px;
        height: 210px;
        float: left;
        text-align: center;
        position: relative;
        margin-top: 25px;
        margin-left: 10px;
    }

    .upload-icon-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        background: #193632;
        z-index: 2;
    }

    .upload-iocn-box::after {
        content: "";
        width: 40px;
        height: 40px;
        background: #00fff0;
        position: absolute;
        top: -3px;
        left: -3px;
        z-index: 1;
        border-radius: 1px;
    }

    .upload-iocn-box::before {
        content: "";
        width: 40px;
        height: 40px;
        background: #00fff0;
        position: absolute;
        top: -3px;
        right: -3px;
        border-radius: 1px;
        z-index: 1;
    }

    .upload-icon-bg2::after {
        content: "";
        width: 40px;
        height: 40px;
        background: #00fff0;
        position: absolute;
        bottom: -3px;
        left: -3px;
        border-radius: 1px;
        z-index: 1;
    }

    .upload-icon-bg2::before {
        content: "";
        width: 40px;
        height: 40px;
        background: #00fff0;
        position: absolute;
        bottom: -3px;
        right: -3px;
        border-radius: 1px;
        z-index: 1;
    }

    .upload-iocn-box img {
        width: 80px;
    }

    .upload-iocn {
        margin-top: 10px;
    }

    .upload-icon-text {
        font-size: 14px;
        color: #ccc;
        margin: 16px 0px;
    }


        ::v-deep .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {}

    ::v-deep .el-table th.el-table__cell {
        background: #162258;
        color: #fff;
    }

    ::v-deep .el-table tr {
        background: #1f78cc7a;
        color: #fff;
    }


    ::v-deep .el-table .el-table__body tr:hover>td {
        background-color: rgba(255, 255, 255, .1) !important;
    }

    ::v-deep .el-table .el-table__body tr.current-row>td {
        background-color: rgba(255, 255, 255, .1) !important;
    }

    ::v-deep .el-table, .el-table__expanded-cell{
        background:none;
    }

    ::v-deep .el-table td, .el-table th.is-leaf{
        border:0px;
    }

    ::v-deep .el-table th, .el-table tr{
        background:none;
    }
</style>