<template>
    <div class="box">
        <div class="box-title">下发任务</div>
        <div class="box-container" style="padding-top: 20px;">
            <div class="inputer">
                <span>任务位置：</span>
                <el-input size="mini" style="width:420px;" v-model="location"></el-input>
            </div>
            <div class="inputer">
                <span>任务详情：</span>
                <el-input type="textarea" :rows="2" 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-select v-model="listQuery.unitname" clearable style="width:120px;" placeholder="请选择单位" size="mini" @change="selectChange">
                        <el-option
                        v-for="item in unitOptions"
                        :key="item.id"
                        :label="item.unitName"
                        :value="item.unitName">
                        </el-option>
                    </el-select>

                    <el-input size="mini" v-model="listQuery.username" placeholder="人员姓名" style="width:195px;margin-left:15px;"></el-input>

                    <el-button icon="el-icon-search" type="primary" size="mini" style="margin-left:15px;" @click="getOnlineUserList">查询</el-button>
                    
                    <el-table
                        ref="multipleTable"
                        size="mini"
                        height="160px"
                        :data="list"
                        tooltip-effect="dark"
                        :reserve-selection="true"
                        style="width: 100%;margin-top:12px;border-radius: 5px;background:none;border:1px solid #00fff0"
                        @selection-change="handleSelectionChange">
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="姓名"
                    >
                        <template slot-scope="scope">
                            <span style="color:#ffffff;">{{scope.row.name}}</span> &nbsp;
                            <el-tag size="mini" v-show="scope.row.unitName">{{ scope.row.unitName }}</el-tag>

                            <el-tag size="mini" type="success" v-show="scope.row.online == 1"  style="margin-left:12px;">在线</el-tag>
                        </template>
                    </el-table-column>
                    </el-table>

                    <!-- <el-table
                        
                        
                        row-key="id"
                        @selection-change="handleSelectionChange">
                        <el-table-column
                        type="selection"
                        width="55">
                        </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" :disabled="loading">下发任务</el-button>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { getMethodCommon, postMethodCommon } from '../../../api/common';
let BASE_URL = process.env.VUE_APP_BASE_API;
export default {
    name: 'taskDelivery',
    props: ['globalmap', 'lng', 'lat'],
    data() {
        return {
            location: '',
            content: '',
            pathPointGraphicLayer: null,
            list: [],
            multipleSelection:[],
            listQuery:{
                unitname:null,
                username:null,
            },
            unitOptions:[],
            checkedUsers:[],
            loading:false,
            onlineUserList:[],
        }
    },
    watch: {

    },
    created() {


        this.handleGetUnitList();
        // this.getUserList();
        this.getOnlineUserList();

    },
    mounted() {
        if (this.lat) {
            this.location = this.lng + "," + this.lat;
        } 
    },
    methods: {
        // 获取在线人员列表
        getOnlineUserList(){
            getMethodCommon("/FireManagement/GetPointByAPP",{pageIndex:1,pageSize:999}).then(res=>{
                if(res.code == 200){
                   this.onlineUserList = res.data;
                    this.getUserList();
                }
            })
        },
        // 处理在线人员
        handlerOnlineUserBefore(){
            this.onlineUserList.forEach((item,index)=>{
                this.list.forEach((user,idx)=>{
                    if(item.createId == user.id){
                        this.list[idx].online = 1;
                    }
                })
            })

            this.list.sort((a,b)=>{
                return b.online - a.online;
            })
        },
        selectChange(e){
            this.listQuery.unitname = e;
            this.getUserList();
        },
        handleGetUnitList(){
            getMethodCommon("/FireCodePC/GetUserUnit?pageIndex=1&pageSize=999").then(res=>{
                if(res.code == 200){
                    this.unitOptions = res.data;
                }
            })
        },
        buttonLoading(){
            this.loading = true;
            let _this = this;
            setTimeout(function(){
                _this.loading = false;
            },10000)
        },  
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.checkedUsers = [];
            this.multipleSelection.forEach((item,index)=>{
                this.checkedUsers.push(item.name);
            })
        },
        getUserList() {
            getMethodCommon("/FireManagement/LoadFireClueUser",this.listQuery).then(res=>{
                if(res.code == 200){
                    this.list = res.data;
                    this.list.forEach((item,index)=>{
                        this.list[index].online = 0;
                    })
                    // 获取在线人员
                    // this.getOnlineUserList();
                    this.handlerOnlineUserBefore();
                }
            })
        },
        close() {
            // if (this.pathPointGraphicLayer != null) {
            //     this.pathPointGraphicLayer.clear();
            //     window.globalmap.off(mars3d.EventType.click)
            // }
            this.$emit('closeTask')
        },
        onSubmit() {
            var querys = {
                content: this.content,
                lng: this.lng,
                lat: this.lat,
                recipientUsers: this.multipleSelection.map(e => e.id)
            }
            if (this.lng == '') {
                this.$message.warning("请选择位置");
                return;
            }
            var url = process.env.VUE_APP_BASE_API + '/FireManagement/FireClueTask'
            // 按钮禁用
            this.buttonLoading();
            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);
                    // TODO 添加任务点后，在地图显示相应的图标
                    _this.close()
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        }
    }
}
</script>

<style scoped>
.box {
    width: 100%;
    height: calc( 100% - 40px);
    /* height: 100%; */
    background-image: url(/img/huoqing-bg.png);
    background-size: 100% 100%;
}

.box-container {
    width: calc(100% - 0px);
    padding: 10px 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--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
background-color: rgba(0, 0, 0, .1)
}

::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:active {
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .1);
background-color: rgba(0, 0, 0, .1)
}

::v-deep .el-table th{
padding:0px!important;
}
::v-deep table thead th{
text-align: left!important;
text-indent:1px;
}

::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell{
border-bottom:0px!important;
border:0px !important;
}

/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
background-color: transparent !important;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
background-color: transparent !important;
}

::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell{
border:0px!important;
}
::v-deep .el-table__body-wrapper{
width:100%;
border:0px!important;
}


/* 滑道样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar{
width:10px;
background:#304156;
border-radius: 6px;
}
/* 定义滑块的样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
background-color:rgba(0,0,0,0.3);
}
/* 定义滑块鼠标移入时的样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover{
border-radius: 10px;
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
background-color:rgba(0,0,0,0.4);
}

  
</style>