<template>
<div>
    <sticky :className="'sub-navbar'">
      <div class="filter-container">
        <span style="font-weight:bold;float:left;font-size:16px;margin-left:12px;color:#666;word-spacing:12px;">案件综合统计报表</span>

        <el-button class="filter-item"  v-show="showListContainer == false" size="mini" type="success" @click="exportExcel" icon="el-icon-download">导出</el-button>
        <el-button class="filter-item"  v-show="showListContainer  == false" size="mini" type="primary" @click="printSummary" icon="el-icon-printer">打印</el-button>

        <el-button class="filter-item"  v-show="showListContainer == true" size="mini" type="success" @click="exportDataList" icon="el-icon-download">导出当前选中列表</el-button>
      </div>
    </sticky>
    <div class="app-container flex-item">
      <!--内容-->
      <div class="bg-white" style="height:100%;">
        <!-- 列表 -->
        <el-table
          size="mini"
          ref="multipleTable"
          :data="tableData"
          height=" calc( 100vh - 108px)"
          width="100vw"
          tooltip-effect="dark"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          @selection-change="handleSelectionChange">
          <el-table-column prop="streetname" label="乡镇（街道）"></el-table-column>
          <!-- api/DroneCaseinfo/LoadCaseInfoList?is_intact=1 -->
          <el-table-column prop="allCount"   label="无人机发现数量" >
             <template slot-scope="scope">
               <el-link type="primary">
                <span class="btnText" @click="loadList({is_intact:1,streetid:scope.row.streetid},scope.row.streetname,'无人机发现数量')">{{scope.row.allCount}}</span>
               </el-link>
            </template>
          </el-table-column>
          <el-table-column label="外业图斑核查情况">
            <!-- api/DroneCaseinfo/LoadCaseInfoList?is_intact=1&is_deal=1 -->
             <el-table-column prop="handleStatus"  label="完成外业核查数量" >
                <template slot-scope="scope">
                  <el-link type="primary">
                    <span class="btnText" @click="loadList({is_intact:1,is_deal:1,streetid:scope.row.streetid},scope.row.streetname,'完成外业核查数量')">{{scope.row.handleStatus}}</span>
                  </el-link>
                </template>
             </el-table-column>
             <!-- api/DroneCaseinfo/LoadCaseInfoList?is_intact=1&is_not_deal_hour24=1 -->
            <el-table-column prop="notDealHour24"  label="24h内未核查" >
               <template slot-scope="scope">
                  <el-link type="primary">
                   <span class="btnText" @click="loadList({is_intact:1,is_not_deal_hour24:1,is_drawback:0,streetid:scope.row.streetid},scope.row.streetname,'24h内未核查')">{{scope.row.notDealHour24}}</span>
                  </el-link>
                </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="下发疑似图斑类型">
            <!-- api/DroneCaseinfo/LoadCaseInfoList?typeid=ebef4981-3452-44a0-a07d-74f5acf8663a&is_intact=1 -->
            <el-table-column prop="typeFanxinCount"  label="房屋翻新" >
                <template slot-scope="scope">
                  <el-link type="primary">
                    <span class="btnText" @click="loadList({is_intact:1,typeid:'ebef4981-3452-44a0-a07d-74f5acf8663a',streetid:scope.row.streetid},scope.row.streetname,'房屋翻新')">{{scope.row.typeFanxinCount}}</span>
                  </el-link>
                </template>
            </el-table-column>
            <!-- api/DroneCaseinfo/LoadCaseInfoList?typeid=7f1a9520-124c-4fde-bf25-e0c30741ef4c&is_intact=1 -->
            <el-table-column prop="typeJiagaiCount"  label="房屋加盖" >
                <template slot-scope="scope">
                  <el-link type="primary">
                    <span class="btnText" @click="loadList({is_intact:1,typeid:'7f1a9520-124c-4fde-bf25-e0c30741ef4c',streetid:scope.row.streetid},scope.row.streetname,'房屋加盖')">{{scope.row.typeJiagaiCount}}</span>
                  </el-link>
                </template>
            </el-table-column>
            <!-- api/DroneCaseinfo/LoadCaseInfoList?typeid=424870c6-a849-433b-b829-196ea9249ee7&is_intact=1 -->
             <el-table-column prop="typeFanjianCount"  label="房屋翻建" >
                <template slot-scope="scope">
                  <el-link type="primary">
                   <span class="btnText" @click="loadList({is_intact:1,typeid:'424870c6-a849-433b-b829-196ea9249ee7',streetid:scope.row.streetid},scope.row.streetname,'房屋翻建')">{{scope.row.typeFanjianCount}}</span>
                  </el-link>
                </template>
             </el-table-column>
             <!-- api/DroneCaseinfo/LoadCaseInfoList?typeid=70076f93-ab79-472b-a1f9-db4c03e7378b&is_intact=1 -->
            <el-table-column prop="typeCunliangCount" label="存量建设" >
                <template slot-scope="scope">
                  <el-link type="primary">
                    <span class="btnText" @click="loadList({is_intact:1,typeid:'70076f93-ab79-472b-a1f9-db4c03e7378b',streetid:scope.row.streetid},scope.row.streetname,'存量建设')">{{scope.row.typeCunliangCount}}</span>
                  </el-link>
                </template>
            </el-table-column>
            <!-- api/DroneCaseinfo/LoadCaseInfoList?typeid=414f283c-d8bd-4453-b31f-4c849d47c0fb&is_intact=1 -->
             <el-table-column prop="typeTuituCount"  label="推土" >
                <template slot-scope="scope">
                  <el-link type="primary">
                    <span class="btnText" @click="loadList({is_intact:1,typeid:'414f283c-d8bd-4453-b31f-4c849d47c0fb',streetid:scope.row.streetid},scope.row.streetname,'推土')">{{scope.row.typeTuituCount}}</span>
                  </el-link>
                </template>
             </el-table-column>

            <el-table-column prop="typeOtherCount" label="其他" ></el-table-column>
          </el-table-column>

          <el-table-column label="图斑判定">
            <!-- api/DroneCaseinfo/LoadCaseInfoList?is_intact=1&is_illegal=0&is_deal=1 -->
            <el-table-column prop="illegal0Count"  label="合法" >
                <template slot-scope="scope">
                  <el-link type="primary">
                    <span class="btnText" @click="loadList({is_intact:1,is_illegal:0,is_deal:1,streetid:scope.row.streetid},scope.row.streetname,'合法')">{{scope.row.illegal0Count}}</span>
                  </el-link>
                </template>
            </el-table-column>
            <!-- api/DroneCaseinfo/LoadCaseInfoList?is_intact=1&is_illegal=1&is_deal=1 -->
            <el-table-column prop="illegal1Count"  label="违法" >
               <template slot-scope="scope">
                 <el-link type="primary">
                    <span class="btnText" @click="loadList({is_intact:1,is_illegal:1,is_deal:1,streetid:scope.row.streetid},scope.row.streetname,'违法')">{{scope.row.illegal1Count}}</span>
                 </el-link>
                </template>
            </el-table-column>
            <!-- api/DroneCaseinfo/LoadCaseInfoList?is_intact=1&is_illegal=2&is_deal=1 -->
             <el-table-column prop="illegal2Count"  label="伪变化" >
                <template slot-scope="scope">
                  <el-link type="primary">
                   <span class="btnText" @click="loadList({is_intact:1,is_illegal:2,is_deal:1,streetid:scope.row.streetid},scope.row.streetname,'伪变化')">{{scope.row.illegal2Count}}</span>
                  </el-link>
                </template>
             </el-table-column>
          </el-table-column>

           <el-table-column label="新增违法图斑整改情况">
             <!-- api/DroneCaseinfo/LoadCaseInfoList?is_intact=1&is_illegal=1&is_deal=1 -->
            <el-table-column prop="illegal1Count" label="外业核实后确定违法数" >
                <template slot-scope="scope">
                  <el-link type="primary">
                    <span class="btnText" @click="loadList({is_intact:1,is_illegal:1,is_deal:1,streetid:scope.row.streetid},scope.row.streetname,'外业核实后确定违法数')">{{scope.row.illegal1Count}}</span>
                  </el-link>
                </template>
            </el-table-column>
            <el-table-column prop="illegalHandleAreaList"  label="违法面积" ></el-table-column>
             <el-table-column prop="illegalHandle2Status"  label="整改销号数" >
               <template slot-scope="scope">
                 <el-link type="primary">
                    <span class="btnText" @click="loadList({is_intact:1,is_illegal:1,handle_status_id:2,streetid:scope.row.streetid},scope.row.streetname,'整改销号数')">{{scope.row.illegalHandle2Status}}</span>
                 </el-link>
                </template>
             </el-table-column>
            <el-table-column prop="illegalHandle2AreaList"  label="销号面积" ></el-table-column>
            <!-- api/DroneCaseinfo/LoadCaseInfoList?is_intact=1&handle_status_id=1&is_illegal=1 -->
             <el-table-column prop="illegalHandle01Status"  label="尚未整改宗数" >
                <template slot-scope="scope">
                  <el-link type="primary">
                    <span class="btnText" @click="loadList({is_intact:1,is_illegal:1,handle_status_id:1,streetid:scope.row.streetid},scope.row.streetname,'尚未整改宗数')">{{scope.row.illegalHandle01Status}}</span>
                  </el-link>
                </template>
             </el-table-column>
            <el-table-column prop="illegalHandle01AreaList"  label="未整改面积" ></el-table-column>
          </el-table-column>

          <el-table-column label="违法图斑整改进度情况">
            <!-- api/DroneCaseinfo/LoadCaseInfoList?is_intact=1&out_time_flag=1&is_complete=0 -->
            <el-table-column prop="notComplete3"  label="3日内未整改完成" >
                <template slot-scope="scope">
                  <el-link type="primary">
                   <span class="btnText" @click="loadList({is_intact:1,is_illegal:1,out_time_flag:1,is_complete:0,streetid:scope.row.streetid},scope.row.streetname,'3日内未整改完成')">{{scope.row.notComplete3}}</span>
                  </el-link>
                </template>
            </el-table-column>
            <!-- api/DroneCaseinfo/LoadCaseInfoList?is_intact=1&out_time_flag=2&is_complete=0 -->
            <el-table-column prop="notComplete7"  label="7日内未整改完成" >
               <template slot-scope="scope">
                 <el-link type="primary">
                  <span class="btnText" @click="loadList({is_intact:1,is_illegal:1,out_time_flag:2,is_complete:0,streetid:scope.row.streetid},scope.row.streetname,'7日内未整改完成')">{{scope.row.notComplete7}}</span>
                 </el-link>
                </template>
            </el-table-column>
            <!-- api/DroneCaseinfo/LoadCaseInfoList?is_intact=1&out_time_flag=4&is_complete=0 -->
             <el-table-column prop="notComplete30"  label="30日内未整改完成" >
                <template slot-scope="scope">
                  <el-link type="primary">
                    <span class="btnText" @click="loadList({is_intact:1,is_illegal:1,out_time_flag:4,is_complete:0,streetid:scope.row.streetid},scope.row.streetname,'30日内未整改完成')">{{scope.row.notComplete30}}</span>
                  </el-link>
                </template>
             </el-table-column>
             <!-- api/DroneCaseinfo/LoadCaseInfoList?is_intact=1&out_time_flag=5&is_complete=0 -->
            <el-table-column prop="notComplete30More"  label="30日以上未整改完成" >
               <template slot-scope="scope">
                 <el-link type="primary">
                    <span class="btnText" @click="loadList({is_intact:1,is_illegal:1,out_time_flag:5,is_complete:0,streetid:scope.row.streetid},scope.row.streetname,'30日以上未整改完成')">{{scope.row.notComplete30More}}</span>
                 </el-link>
                </template>
            </el-table-column>
          </el-table-column>

           <el-table-column label="百分制考核计分">
            <el-table-column prop=""  label="24h外业核查计分" ></el-table-column>
            <el-table-column prop=""  label="整改进度计分" ></el-table-column>
          </el-table-column>

          <el-table-column prop=""  label="备注" ></el-table-column>

         


           <!-- <el-table-column prop="address" label="地点" >
             <template slot-scope="scope">
               <span>{{scope.row.streetname}}</span><span>{{scope.row.streetname}}</span><span>{{scope.row.communityname}}</span>
             </template>
           </el-table-column> -->
         
          <!-- <el-table-column prop="deal_time" label="处理时间" ></el-table-column>
          <el-table-column prop="deal_username" label="案件处理人" ></el-table-column>
          <el-table-column prop="verifystatusname" label="处理进度" ></el-table-column>
          <el-table-column prop="handle_status_name" label="处理状态" ></el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button size="mini"
                         @click="eventDetail(scope.$index, scope.row)">详情
              </el-button>
              
            </template>
          </el-table-column> -->
        </el-table> 
        <!-- 分页 -->
        <div class="lsit-container" v-if="showListContainer">
            <!-- 列表容器控制 -->
            <div  style="position:absolute;top:0px;right:0px;border-bottom:1px solid #e4e7ed;width:100px;padding:9px 0px;">
              <el-tooltip class="item" effect="dark" content="最小化" placement="bottom-start">
                <div style="width:30px;height:30px;float:left;background:#f5f5f5;text-align:center;line-height:30px;cursor:pointer;z-index:9999999999;margin:0px 10px;" @click="minListContainer"><i class="el-icon-minus"></i></div>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="关闭全部" placement="bottom-start">
                <div style="width:30px;height:30px;float:left;background:#f5f5f5;text-align:center;line-height:30px;cursor:pointer;z-index:9999999999;" @click="closeListContainer"><i class="el-icon-close"></i></div>
              </el-tooltip>
            </div>
            <!-- tab栏按钮 -->
            <el-tabs v-model="editableTabsValue" style="width: calc( 100% - 100px)" type="card" closable @tab-remove="removeTab" @tab-click="changeTab" >
              <el-tab-pane
                v-for="(item,index) in editableTabs"
                :key="index"
                :label="item.title"
                :name="item.title"
              >
              </el-tab-pane>
            </el-tabs>
            <!-- 列表 -->
            <el-table
              size="mini"
              v-loading="loading"
              :data="listData"
              tooltip-effect="dark"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              height=" calc( 100vh - 207px )"
              style="width:100%;">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column prop="case_no"   show-overflow-tooltip label="案件编号" ></el-table-column>
                <el-table-column prop="communityname" show-overflow-tooltip  label="村/社区" ></el-table-column>
                <el-table-column prop="case_description" show-overflow-tooltip  label="案件描述" ></el-table-column>
                <el-table-column prop="typename" show-overflow-tooltip  label="所属类型" ></el-table-column>
                <el-table-column prop="deal_username" show-overflow-tooltip  label="处理人" ></el-table-column>
                <el-table-column prop="deal_time" show-overflow-tooltip  label="处理时间" ></el-table-column>
                <el-table-column prop="verifyuser" show-overflow-tooltip  label="审核人" ></el-table-column>
                <el-table-column prop="verifytime" show-overflow-tooltip  label="审核时间" ></el-table-column>
                <el-table-column prop="handle_status_name" show-overflow-tooltip  label="案件状态" ></el-table-column>
                <el-table-column  show-overflow-tooltip  label="详情" >
                    <template slot-scope="scope">
                      <el-button size="mini" @click="showDetail(scope.row.id)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
              <pagination :total="total" :page.sync="queryCondition.page" :limit.sync="queryCondition.limit" @pagination="handleCurrentChange" />
            </div>
        </div>

        <el-button style="position:absolute;right:12px;bottom:90px;" v-if="editableTabs.length>0 && showListContainer == false" @click="showListContainer = true" type="primary" icon="el-icon-tickets" circle></el-button>
      </div>
    </div>
    <el-dialog width="600px" height="550px" 
               class="dialog-mini body-small addWindow"
               v-el-drag-dialog
               :title="'事件处理'"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="eventHandleVisible"
               >
      <el-container style="height: 550px;overflow-y:hidden;">
        <el-container v-if="eventHandleVisible">
          <eventHandleForm :formData="handleForm" @close="eventHandleVisible = false"></eventHandleForm> 
        </el-container>
      </el-container>
    </el-dialog>

    <!-- 案件详情 -->
    <el-dialog width="1366px" height="690px" top="60px"
               class="dialog-mini body-small addWindow"
               v-el-drag-dialog
               :title="'案件详情'"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="eventDetailVisible"
               >
      <el-container v-if="eventDetailVisible" style="width:1350px;height:690px;overflow-y:hidden;">
        <eventDetailnForm :caseDetailId="caseDetailId" :isShowMap="true"></eventDetailnForm> 
      </el-container>
    </el-dialog>
    <!-- 案件打印 -->
    <el-dialog width="1050px"
               class="dialog-mini body-small addWindow"
               v-el-drag-dialog
               :title="'打印'"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               height="2000px"
               top="0px"
               :visible.sync="printDialog">
    
            <!-- 列表 -->
            <el-button class="filter-item"  size="mini" type="primary" v-print="'#printMe'" icon="el-icon-printer">打印</el-button>
          <el-table
            id="printMe"
            size="mini"
            ref="multipleTable"
            :data="tableData"
            
            tooltip-effect="dark"
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}"
            @selection-change="handleSelectionChange">
            <el-table-column prop="streetname" width="60" label="乡镇（街道）"></el-table-column>
            <el-table-column prop="allCount"  width="45" label="无人机发现数量" ></el-table-column>
            <el-table-column label="外业图斑核查情况">
              <el-table-column prop="handleStatus" width="35" label="完成外业核查数量" ></el-table-column>
              <el-table-column prop="notDealHour24" width="35" label="24h内未核查" ></el-table-column>
            </el-table-column>

            <el-table-column label="下发疑似图斑类型">
              <el-table-column prop="typeFanxinCount" width="35" label="房屋翻新" ></el-table-column>
              <el-table-column prop="typeJiagaiCount" width="35" label="房屋加盖" ></el-table-column>
              <el-table-column prop="typeFanjianCount" width="35" label="房屋翻建" ></el-table-column>
              <el-table-column prop="typeCunliangCount" width="35" label="存量建设" ></el-table-column>
              <el-table-column prop="typeTuituCount" width="35" label="推土" ></el-table-column>
              <el-table-column prop="typeOtherCount" width="35" label="其他" ></el-table-column>
            </el-table-column>

            <el-table-column label="图斑判定">
              <el-table-column prop="illegal0Count" width="35" label="合法" ></el-table-column>
              <el-table-column prop="illegal1Count" width="35" label="违法" ></el-table-column>
              <el-table-column prop="illegal2Count" width="35" label="伪变化" ></el-table-column>
            </el-table-column>

            <el-table-column label="新增违法图斑整改情况">
              <el-table-column prop="illegal1Count" width="35" label="外业核实后确定违法数" ></el-table-column>
              <el-table-column prop="illegalHandleAreaList" width="55" label="违法面积" ></el-table-column>
              <el-table-column prop="illegalHandle2Status" width="40" label="整改销号数" ></el-table-column>
              <el-table-column prop="illegalHandle2AreaList" width="51" label="销号面积" ></el-table-column>
              <el-table-column prop="illegalHandle01Status" width="40" label="尚未整改宗数" ></el-table-column>
              <el-table-column prop="illegalHandle01AreaList" width="55" label="未整改面积" ></el-table-column>
            </el-table-column>

            <el-table-column label="违法图斑整改进度情况">
              <el-table-column prop="notComplete3" width="40" label="3日内未整改完成" ></el-table-column>
              <el-table-column prop="notComplete7" width="40" label="7日内未整改完成" ></el-table-column>
              <el-table-column prop="notComplete30" width="40" label="30日内未整改完成" ></el-table-column>
              <el-table-column prop="notComplete30More" width="40" label="30日以上未整改完成" ></el-table-column>
            </el-table-column>

            <el-table-column label="百分制考核计分">
              <el-table-column prop="" width="35" label="24h外业核查计分" ></el-table-column>
              <el-table-column prop="" width="35" label="整改进度计分" ></el-table-column>
            </el-table-column>
            <el-table-column prop="" width="35" label="备注" ></el-table-column>
          </el-table> 
    </el-dialog>

    
</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 eventHandleForm from "./widget/handle"
import eventDetailnForm from "../map/widget/detail"
import {getMethodCommon,postMethodCommon} from "@/api/common";
const BASE_URL = process.env.VUE_APP_BASE
export default {
    name: "reportqueryindex",
    components: {
        Sticky,
        Pagination,
        eventHandleForm,
        eventDetailnForm
    },
    directives: {
        waves,
        elDragDialog
    },
    data(){
        return{
          loading:false,
          caseDetailId:null,
          printDialog:false,
            listQuery: { // 查询条件
                is_intact:1,
                // page: 1,
                // limit: 20,
                // key: undefined,
                // appId: undefined,
                // reportTime: '',
                // violationStatus: '',
                // handle_status_id:null,
                // identification_user:null,
                // countyid:null,
                // streetid:null,
                // communityid:null,
                // case_no:null,
                // is_illegal:null,
            },
            total: 0,
            eventHandleVisible: false,
            eventDetailVisible: false,
            eventXiebanVisible: false,
            handleForm:{},
            //设置表格高度
            taheight:null,
            tableData: [
                {
                    caseName: '房屋违建',      
                    caseNumber: '3213212131',                          
                    caseDescription:"商铺违规建筑",                              
                    caseStatus:"处理中",  
                    caseLocation:"南京路与大青山路交汇东100米",                                   
                    reportPerson:"王境泽",              
                    reportTime:"2021-10-1",   
                    caseHandler: '黄影',
                    handleTime: '2022-1-10',
                    endTime: '2022-1-30',
                    remark: '距离截止日期剩余时间不足10天，请尽快处理'                         
                }
            ],
            violationOptions:[{
                value: '1',
                label: '民房改建'
            }, {
                value: '2',
                label: '占用耕地'
            }, {
                value: '3',
                label: '厂房新建'
            }, {
                value: '4',
                label: '民房加盖'
            }],
            intactDatas:[
              { id: 0 , name: '未判读'},
              { id: 1 , name: '已提交'},
              { id: 99 , name: '已关闭'},
              { id: null , name: '全部'},
            ],
            handleDealOptions:[
              {id:0,name:"未办理"},
              {id:1,name:"待审核"},
              {id:2,name:"已办结"}
            ],
            caseTypeOptions:[
              
            ],
            illegalOptions:[
              {id:0,name:"合法"},
              {id:1,name:"违法"},
              {id:2,name:"伪变化"}
            ],
            startEndTime:null,
            pickerOptions: {
              shortcuts: [{
                text: '今天',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
                  picker.$emit('pick', [start, end]);
                }
              },{
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近6个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                  picker.$emit('pick', [start, end]);
                }
              },{
                text: '最近一年',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
            OrgList: [],
            addressProp: {
              value: "id",
              label: "text",
              checkStrictly: true
            },
            fieldOptions: [{
                "id": "case_no",
                "name": "案件编号",
              },
              {
                "id": "countyname",
                "name": "县区",
              },
              {
                "id": "streetname",
                "name": "乡镇",
              },{
                "id":"communityname",
                "name":"村/社区"
              },{
                "id":"address",
                "name":"详细地址"
              },{
                "id":"lng",
                "name":"经度"
              },{
                "id":"lat",
                "name":"纬度"
              },{
                "id":"area",
                "name":"占地面积"
              },{
                "id":"case_description",
                "name":"案件描述"
              },{
                "id":"typename",
                "name":"案件类型"
              },{
                "id":"handle_status_name",
                "name":"案件状态"
              },{
                "id":"deal_username",
                "name":"处理人"
              },{
                "id":"deal_time",
                "name":"处理时间"
              },{
                "id":"identification_user",
                "name":"判读人"
              },{
                "id":"verifystatusname",
                "name":"审核流程"
              },{
                "id":"createusername",
                "name":"上报人"
              },{
                "id":"createtime",
                "name":"上报时间"
              },{
                "id":"verifytime",
                "name":"审核时间"
              },{
                "id":"verifyuser",
                "name":"审核人"
              }
            ],
            checkField: ['case_no', 'streetname','communityname','case_description','typename','handle_status_name','streetname'],
            checkFieldToName: [
              {name: '案件编号', id: 'case_no'}, 
              {name: '乡镇', id: 'streetname'},
              {name: '村/社区', id: 'communityname'},
              {name: '案件描述', id: 'case_description'},
              {name: '案件类型', id: 'typename'},
              {name: '案件状态', id: 'handle_status_name'},
              {name: '乡镇', id: 'streetname'},
            ],
            isShowFieldOptions:true,
            queryCondition:{
              page:1,
              limit:20,
            },
            showListContainer:false,
            listData:[],
            currentStreetName:null,
            currentTitle:null,
            editableTabsValue:null,
            editableTabs: [
             ],
            tabIndex: 2

        }
    },
    watch:{
      editableTabs:function(e){
        if(e.length==0){
          this.showListContainer = false;
        }
      }
    },
    mounted(){
        this.taheight=window.innerHeight-140;
        this.getNoBuildStatus() //获取违规类型
        this.getCaseTypeOptions();
        this.getCaseList();
        this.getUserOrg();
    },
    methods: {
      minListContainer(){
        this.showListContainer = false;
      },
      closeListContainer(){
        this.editableTabs = [];
        this.showListContainer = false;
      },
      removeTab(args){
        let obj = this.editableTabs.filter((item,index)=>{
            return item.title == args;
          })


        let idx = this.editableTabs.indexOf(obj[0]);

        if(idx==0 &&  this.editableTabs.length == 1){
          this.editableTabs = [];
          this.showListContainer = false;
          return;
        }
       
        if(args != this.editableTabsValue){
          this.editableTabs = this.editableTabs.filter((item,index)=>{
            return item.title != args;
          })
        }else{
          if(idx != 0){
            this.editableTabsValue = this.editableTabs[idx-1].title;
            this.getDataList(this.editableTabs[idx-1].queryCondition)
            this.editableTabs = this.editableTabs.filter((item,index)=>{
              return item.title != args;
            })
          }else{
            this.editableTabs = this.editableTabs.filter((item,index)=>{
              return item.title != args;
            })
            this.editableTabsValue = this.editableTabs[0].title;
            this.getDataList(this.editableTabs[0].queryCondition)
           
          }
         
        }
       
      },
      changeTab(tab,event){
        let arr = this.editableTabs.filter((item,index)=>{
          return item.title == tab.name;
        })
        if(arr.length>0){
          // console.log(arr[0])
          this.queryCondition = arr[0].queryCondition;
          getMethodCommon("/DroneCaseinfo/LoadCaseInfoList",this.queryCondition).then(res=>{
            if(res.code == 200){
              this.listData = res.data;
              this.total = res.count;
              this.loading = false;
            }
          })
        }
      },
      loadList(queryCondition,streetname,title){
        let obj = {
          title: streetname+'-'+title,
          queryCondition:queryCondition,
          streetname:streetname,
          cate:title,
        }
        let arr = this.editableTabs.filter((item,index)=>{
          return item.title == obj.title;
        })
        if(arr.length>0){
          if(this.editableTabsValue == obj.title){
            this.editableTabsValue = obj.title;
          }else{
            this.editableTabsValue = obj.title;
            this.getDataList(arr[0].queryCondition);
          }
        }else{
          this.editableTabsValue = obj.title;
          this.editableTabs.push(obj);
          this.getDataList(obj.queryCondition);
        } 
        this.showListContainer = true;
      },
      getDataList(queryCondition){
        this.listData = [];
        this.loading = true;
        this.queryCondition = queryCondition;
        if(!this.queryCondition.page){
          this.queryCondition.page=1;
          this.queryCondition.limit=20;
        }
        // queryCondition.page=1,
        // queryCondition.limit=10,
        getMethodCommon("/DroneCaseinfo/LoadCaseInfoList",this.queryCondition).then(res=>{
          if(res.code == 200){
            this.listData = res.data;
            this.total = res.count;
            this.loading = false;
          }
        })
       
      },
      exportDataList(){
        getMethodCommon("/DroneCaseinfo/ExportCaseInfoList",this.queryCondition).then(res=>{
          if(res.code == 200){
            window.location.href = BASE_URL+"/"+res.result;
          }
        })
      },
      showDetail(id){
        this.caseDetailId = id;
        this.eventDetailVisible = true;
      },
      exportExcel(){
        getMethodCommon("/DroneCaseinfo/ExportCaseSynthesisCensus",{is_intact:1}).then(res=>{
          if(res.code == 200){
            window.location.href = BASE_URL+"/"+res.result;
           
          }
        })
      },
      printSummary(){
        this.printDialog = true;
      },
      checkedFieldChange(val){
        this.checkFieldToName = []
        this.checkField.forEach(v => {
          this.fieldOptions.forEach(k => {
            if (v === k.id) {
              this.checkFieldToName.push(k)
            }
          })
        })
      },
      getDate(date){
        let year = date.getFullYear();
        let month = date.getMonth()+1;
        let day = date.getDate();
        return year+"-"+month+"-"+day;
      },
      intactClick(){

        if(this.startEndTime !=null){
          this.listQuery.report_start_time = this.getDate(this.startEndTime[0]);
          this.listQuery.report_end_time = this.getDate(this.startEndTime[1]);
        }

        this.listQuery.page = 1
        this.getCaseList()
      },
      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++){
            }
          })
        },
        handleFilter(){
          this.getCaseList()
        },
        handleCurrentChange(){
          this.getDataList(this.queryCondition);
        },
        eventHandle(index,data){
            this.handleForm = data
            this.eventHandleVisible = true
        },
        eventDetail(index,data){
            this.handleForm = data
            this.eventDetailVisible = true
        },
        handleSelectionChange(){

        },
        getNoBuildStatus(){
          getMethodCommon('/Categorys/LoadList',{typeid: "SYS_NOBUILD_TYPE"}).then(res => {
            this.violationOptions = res.result
          })
        },
        getCaseTypeOptions(){
           getMethodCommon('/categorys/load',{page:1,limit:99,typeid: "DRONE_CASE_TYPE"}).then(res => {
             if(res.code == 200){
               this.caseTypeOptions = res.data;
               console.log("caseType",this.caseTypeOptions);
             }
          })
        },
        getCaseList(){
          this.tableData = []
          getMethodCommon('/DroneCaseinfo/CaseSynthesisCensus').then(res => {
            this.tableData = res.result;
            console.log("tableData",res.result);
          })
        }
    }
}
</script>

<style scoped>
::v-deep .el-dialog__headerbtn{
    top:0 !important;
}
::v-deep .el-tabs__content{
  display:none !important;
}
.fieldOptions{
  background:#f5f5f5;
  width:100%;
  min-height:40px;
  padding:0px 24px;
  text-align: left;
}
/deep/ .el-checkbox{
  margin:8px !important;
}
/deep/ .el-table__row{
  height:48px!important;
}

/deep/ .el-table__row:last-child{
  background:#f5f7fa;
}


#printMe {
		 /deep/ .el-table {
			margin-top: 10px;
			table{
				width: 100%!important;
			}
			.el-table__body,
			.el-table__header {
				width: 100% !important;
			}
 
			.el-table__body {
				width: 100% !important;
			}
		}
	}
/deep/ .el-table{
 transform:scale();
  font-size:12px;
  padding:0px;
}
/deep/ .el-table__cell{
  padding:0px;
  font-size:12px;
}
/deep/ .el-table__cell .cell{
  padding:0px;
}
/deep/ .el-table__row{
  /* width:20px!important; */
  padding:0px;
  font-size:12px!important;
}
/deep/ .el-table__body-wrapper{

}


.btnText{
  cursor: pointer;
}
.btnText:hover{
  /* color:#333;
  font-weight:bold; */
}
.bg-white{
  position: relative;
}
.lsit-container{
  width:100%;
  height:100%;
  position:absolute;
  top:-8px;
  padding-top:8px;
  left:0px;
  background:#ffffff;
  
}
</style>
