<template>
<div class="flite-container">
    <div class="nav-container" ref="barparent">
      <el-dialog width="816px"  class="dialog-mini body-small" v-el-drag-dialog :title="'案件处理信息'" 
          top="120px"
          :visible.sync="dealDialogFormVisible"
          v-if="dealDialogFormVisible"
          :modal-append-to-body="false"
          :modal="false"
          z-index="1001"
      >
        <HandleCase :caseid="caseid"></HandleCase>
      </el-dialog>
        <div class="maxWidth navdiabody">
          <sticky :className="'sub-navbar'">
            <div class="filter-container">
              <div style="display:inline;margin-right:10px;width:100px;">
                    <el-select v-model="listQuery.is_intact" placeholder="请选择" size="mini" style="width:100px" clearable @change="intactClick">
                      <el-option
                          v-for="item in intactDatas"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                      </el-option>
                  </el-select>
              </div>
              <div style="display:inline;margin-right:10px;width:100px;">
                    <el-select v-model="listQuery.handle_status_id" placeholder="办理状态" size="mini" style="width:100px" clearable @change="intactClick">
                      <el-option
                          v-for="item in handleDealOptions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                      </el-option>
                  </el-select>
              </div>
              <div style="display:inline;margin-right:10px">
                  <el-input @keyup.enter.native="handleFilter" size="mini" style="width: 120px;" class="filter-item"
                        :placeholder="'请输入关键字'" v-model="listQuery.key">
                  </el-input>
              </div>
              <div style="display:inline;margin-right:10px">
                  <el-input @keyup.enter.native="handleFilter" size="mini" style="width: 120px;" class="filter-item"
                        :placeholder="'判读人姓名'" v-model="listQuery.identification_user">
                  </el-input>
              </div>
              <div style="display:inline;margin-right:10px;padding-top:12px;">
                  <el-cascader class="filter-cascader"
                       style="width: 180px;overflow:hidden;position:relative;top:12px;"
                    
                       :options="OrgList"
                       :props="addressProp"
                       placeholder="查询地区"
                       size="mini"
                       clearable
                       @change="handleChange"
                  >
                  </el-cascader>
              </div>
              <!-- 搜索按钮 -->
              <el-button class="filter-item" size="mini" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>

              <el-button class="filter-item" size="mini" v-waves @click="exportDronePoint">导出飞机位置</el-button>
            </div>
          </sticky>
          <div class="app-container flex-item">
            <!--内容-->
            <div class="bg-white" style="height:100%;">
              <!-- 列表 -->
              <el-table
                ref="multipleTable"
                :data="tableData"
                :height="taheight"
                tooltip-effect="dark"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                style="width:100%;"
                @row-click="tableColumnClick">

                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <!-- <el-table-column prop="case_no" label="案件编号" show-overflow-tooltip></el-table-column> -->
                <el-table-column label="上报时间" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span v-if="scope.row.createtime">{{scope.row.createtime.substring(5,16)}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="case_description" label="案件详情" show-overflow-tooltip></el-table-column>
                <el-table-column prop="identification_time" label="判读时间" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span v-if="scope.row.identification_time">{{scope.row.identification_time.substring(5,16)}}</span>
                  </template>
                </el-table-column>

                <el-table-column label="操作" width="220">
                  <template slot-scope="scope">
                    <el-button size="mini" 
                              @click="lookDeal(scope.row)">处理信息
                    </el-button>
                    <el-button size="mini" 
                              @click="eventHandle(scope.$index, scope.row)">操作
                    </el-button>

                    <span v-if="scope.row.is_intact==0" style="font-size:12px;padding-left:15px">未判读</span>
                    <span v-if="scope.row.is_intact==1" style="font-size:12px;padding-left:15px">已提交</span>
                    <span v-if="scope.row.is_intact==99" style="font-size:12px;padding-left:15px">已关闭</span>

                  </template>
                </el-table-column>
              </el-table> 

              <!-- 分页 -->
              <div class="block" style="margin-left:8px;margin-top:12px;">
                <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="handleCurrentChange" />
              </div>
            </div>
          </div>
          
          <div class="diacontainer" v-if="eventHandleVisible" ></div>
          <div class="diabox" v-if="eventHandleVisible">
              <div class="diatitle">
                <div class="flex">
                  <span>案件判读</span>
                  <i class="el-icon-close"  @click="eventHandleVisible = false"></i>
                </div>
              </div>
              <div class="diacontent">
                  <eventEditForm :ruleForm="handleForm"  @close="eventHandleVisible = false"></eventEditForm>
              </div>
          </div>
      </div>
    </div>
    <div class="map-container">
        <MapGl @polygonArea="getpolygonArea" :areaData="mapAreasData" :layersData="layersBs" :toggleLayer="toggleLayer" :togglevillage="togglevillage" :togglehistory="togglehistory" :getTownship="getTownship"></MapGl>
        <!-- 底部图层切换按钮菜单栏 -->
        <div id="Dock">
            <ul id="Icons">
                <li class="iconBox">
                    <div v-if="togglevillage == false">
                    <img class="icon-menu" src="@/assets/drone_img/village.png" @click="showLayer();togglevillageFun()"/>
                    <p class="pp" style="color:#fff;">镇界</p>
                  </div>
                  <div v-if="togglevillage == true">
                    <img class="icon-menu" src="@/assets/drone_img/village_active.png" @click="showLayer();togglevillageFun()"/>
                    <p class="pp" style="color:#fff;">镇界</p>
                  </div>
                </li>
                <li class="iconBox">
                    <div v-if="togglehistory == true">
                    <img class="icon-menu" src="@/assets/drone_img/history.png" @click="showLayer();togglehistoryFun()"/>
                    <p class="pp" style="color:#fff;">历史案件</p>
                  </div>
                  <div v-if="togglehistory == false">
                    <img class="icon-menu" src="@/assets/drone_img/history_active.png" @click="showLayer();togglehistoryFun()"/>
                    <p class="pp" style="color:#fff;">历史案件</p>
                  </div>
                </li>
                <li class="iconBox">
                  <div v-if="toggleLayer == true">
                    <img class="icon-menu" src="@/assets/drone_img/drone.png" @click="showLayer();toggleLayerFun()"/>
                    <p class="pp" style="color:#fff;">无人机</p>
                  </div>
                  <div v-if="toggleLayer == false">
                    <img class="icon-menu" src="@/assets/drone_img/drone_active.png" @click="showLayer();toggleLayerFun()"/>
                    <p class="pp" style="color:#fff;">无人机</p>
                  </div>
                </li>
            </ul>
        </div>
    </div>

    
</div>


</template>

<script>
import waves from '@/directive/waves' // 水波纹指令
import Sticky from '@/components/Sticky'
import elDragDialog from '@/directive/el-dragDialog'
import Pagination from '@/components/Pagination'
import eventEditForm from "./widget/form"
import MapGl from "./widget/MapGl";
import HandleCase from './widget/HandleCase.vue';
import {getMethodCommon,postMethodCommon} from "@/api/common";
let BASE_API = process.env.VUE_APP_BASE
export default {
    name: "reportqueryindex",
    components: {
        Sticky,
        Pagination,
        eventEditForm,
        MapGl,
        HandleCase
    },
    directives: {
        waves,
        elDragDialog
    },
    data(){
        return{
            toggleLayer:true,
            togglevillage: true,
            togglehistory: true,
            listQuery: { // 查询条件
                is_intact: 0,
                page: 1,
                limit: 20,
                key: undefined,
                appId: undefined,
                reportTime: '',
                violationStatus: '',
                handle_status_id:null,
                identification_user:null,
                countyid:null,
                streetid:null,
                communityid:null,
            },
            total: 10,
            eventHandleVisible: false,
            handleForm:{},
            //设置表格高度
            taheight:null,
            intactNum: 0,
            tableData: [],
            mapAreasData: '',
            intactDatas:[
              { id: 0 , name: '未判读'},
              { id: 1 , name: '已提交'},
              { id: 99 , name: '已关闭'},
              { id: null , name: '全部'},
            ],
            handleDealOptions:[
              {id:0,name:"未办理"},
              {id:1,name:"待审核"},
              {id:2,name:"已办结"}
            ],
            layersBs: 0,
            polygonAreaData: '',
            dealDialogFormVisible:false,
            caseid:null,
            cityDatas:[],
            streetDatas:[],
            communtDatas:[],
            OrgList: [],
            addressProp: {
              value: "id",
              label: "text",
              checkStrictly: true
            },
        }
    },
    mounted(){
        this.taheight=window.innerHeight-160;
        this.getCaseList();

        // this.getAreasData() //获取地区
        // this.ruleForm.countyid = 'e49b02f6-70b0-4f47-bdda-41a69002be11'
        // this.ruleForm.countyname = '费县'

        this.getUserOrg();
    },
    methods: {
        handleChange(itemIdArr){
          if(itemIdArr.length==0){
            this.listQuery.countyid = null;
            this.listQuery.streetid = null;
            this.listQuery.communityid = null;
          }
          if(itemIdArr.length==1){
            this.listQuery.countyid = itemIdArr[0];
            this.listQuery.streetid = null;
            this.listQuery.communityid = null;
          }else if(itemIdArr.length == 2){
            this.listQuery.countyid = null;
            this.listQuery.streetid = itemIdArr[1];
            this.listQuery.communityid = null;
          }else if(itemIdArr.length == 3){
            this.listQuery.countyid = null;
            this.listQuery.streetid = null;
            this.listQuery.communityid = itemIdArr[2];
          }

          this.intactClick();
        },
        getUserOrg() {
          let _this = this;
          getMethodCommon('/Orgs/OrgList', {name: '费县'}).then(res => {
            let data = res.result
            // console.log("gov",res.result);
            function mapTree(tree) {
              tree.forEach(r => {
                if (r.children.length < 1) {
                  r.children = null
                } else {
                  mapTree(r.children)
                }
              })
            }

            mapTree(data)
            _this.OrgList = data;
            for(let i=0;i<_this.OrgList[0].children.length;i++){
            }
          })
        },

        getAreasData(){
            getMethodCommon('/Orgs/LoadOrgList',{name:'费县'}).then(res => {
                this.areasDatas = res.result
                res.result.forEach(item =>{
                    if(item.parentName == '临沂市'){
                        this.cityDatas.push(item)
                    }
                    if(item.parentId == this.ruleForm.countyid){
                        this.streetDatas.push(item)
                    }
                    if(item.parentId == this.ruleForm.streetid){
                        this.communtDatas.push(item)
                    }
                })
                console.log("cityDatas",this.cityDatas);
            })
        },
        handleFilter(){
          this.getCaseList()
        },
        getTownship(args){
          alert(args);
        },
        getpolygonArea(data){
          this.polygonAreaData = data
          this.handleForm.area = data.polygonArea
        },
        exportDronePoint(){
          getMethodCommon('/ShpManager/ExportShpData',{tablename: 'drone_point_data',columns: '*'}).then(res => {
              if(res.code == 200){
                let src = BASE_API + '/' + res.result
                window.open(src)
              }
          })
        },
        handleCurrentChange(){
          this.getCaseList()
        },
        showLayer(data){
          // this.layersBs = data
        },
        toggleLayerFun(){
          this.toggleLayer = !this.toggleLayer
        },
        togglevillageFun(){
          this.togglevillage = !this.togglevillage
        },
        togglehistoryFun(){
          this.togglehistory = !this.togglehistory
        },
        eventHandle(index,data){
            this.handleForm = data
            if(this.polygonAreaData.id == data.id){
              this.handleForm.area = this.polygonAreaData.polygonArea
            }else{
              this.handleForm.area = data.area
            }
            this.eventHandleVisible = true
            
            let width1 = this.$refs.barparent.clientWidth
            let width2 = document.body.clientWidth
            if(width1 < width2/2){
              this.$store.dispatch('ToggleSideBar')
            }
        },
        lookDeal(row){
          this.dealDialogFormVisible=true;
          this.caseid = row.id;
        },
        intactClick(){
          this.listQuery.page = 1
          this.getCaseList()
        },
        tableColumnClick(data){
          this.toggleLayer = false
          this.mapAreasData = data
        },
        editClose(){
            this.eventHandleVisible = false
            this.getCaseList()
        },
        getCaseList(){
          getMethodCommon('/DroneCaseinfo/LoadCaseInfoList',this.listQuery).then(res => {
            this.tableData = res.data
            // res.data.forEach(item => {
            //   if(item.createtime){
            //     item.createtime = item.createtime.substring(5,16)
            //   }
            //   if(item.identification_time){
            //     item.identification_time = item.identification_time.substring(5,16)
            //   }
            //   this.tableData.push(item)
            // });
            this.total = res.count
          })
        },
        
        
    }
}
</script>

<style scoped>
::v-deep .el-dialog__headerbtn{
    top:0 !important;
}
.maxWidth{
  width: 100%;
}
.flite-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    background: #d9d9d9;
}
.filter-container{
  text-align: left;
  margin-left: 20px;
}
.nav-container{
    width: 55%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: baseline;
}
.navdiabody ::v-deep .v-modal{
  width: 56% !important;
}
.navdiabody ::v-deep .el-dialog__wrapper{
  width: 56% !important;
}
.map-container{
    width: 45%;
    height: 100%;
    position: relative;
}
#Dock .iconBox {
    display: inline-block;
}

#Dock a {
    text-decoration: none;
    color: #fff;
}

#Dock ul,li {
    list-style: none;
}

#Dock .pp {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 15px;
}
#Dock .iconBox>ul {
    width: 140px;
    background-color: #ccc;
    position: absolute;
    bottom: 110px;
    display: none;
    background-color:rgba(255,255,255,.1);
    margin-left: -15px;
    border-radius: 5px;
    border: 1px solid #29486D;
    padding: 0;
    z-index: 9999;
}

#Dock .iconBox>ul>li {
    width: 100%;
    height: auto;
    font-size: 18px;
    line-height:35px;
    background-color: rgba(61,73,74,0.5);
}


#Dock .iconBox>ul>li>a {
    width: 100%;
    height: 100%;
    display: block;
}

#Dock .iconBox>ul>li>a:hover{
    background-color: #25456B;
}

#Dock .iconBox>ul>li>a>img {
    width: 12px;
    height: 12px;
    display: inline;
    opacity: 0.5;
}

#Dock .icon-menu {
    width: 40px;
    height: 40px;
    margin-left: 15px;
    display: inline-block;
}

#Dock {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 25px;
    margin-bottom: 15px;
    cursor: pointer;
    z-index: 9999;
}

#Dock #Icons {
    font-size: 0;
    width: 100%;
    height: auto;
    bottom: 1px;
    position: absolute;
    z-index: 15;
    text-align: center;
    margin: auto;
}

#Dock #box {
    font-size: 0;
    width: 100%;
    height: 300px;
    bottom: 145px;
    position: absolute;
    text-align: center;
    background-color: #ccc;
}
.navdiabody{
  position: relative;
  height: 100%;
}
.diacontainer{
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  position: absolute;
  top:0;
  left: 0;
  z-index: 9;
  overflow-y:scroll;
}
.diabox{
  width: 600px;
  height: 820px;
  position: absolute;
  left: 50%;top:40px;
  margin-left: -300px;
  background: #fff;
  border-radius: 5px;
  z-index: 9;
  overflow: hidden;
}
.diabox .diatitle{
  height: 35px;
  line-height: 35px;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
  background: #f8f8f8;
}
.diabox .diatitle .flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.diabox .diatitle span{
  font-size: 14px;
  color: #333;
}
.diabox .diatitle i{
  font-size: 14px;
  color: #0a76a4;
  cursor: pointer;
}
.diabox .diacontent{
  height: 785px;
  padding: 10px;
  font-size: 14px;
  overflow: hidden;
}



</style>
