<template>
<div>
    <sticky :className="'sub-navbar'">
      <div class="filter-container">
         <div style="display:inline;margin-right:10px;padding-top:12px;">
            <el-cascader class="filter-cascader"
                style="width: 220px;overflow:hidden;position:relative;top:10px;"
                :options="OrgList"
                :props="addressProp"
                placeholder="查询地区"
                size="mini"
                clearable
                @change="handleChange"
            >
            </el-cascader>
        </div>
        <div style="display:inline;margin-right:10px;width:100px;">
              <el-select v-model="listQuery.is_illegal" placeholder="现场状况" size="mini" style="width:100px" clearable @change="intactClick">
                <el-option
                    v-for="item in illegalOptions"
                    :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.is_drawback" placeholder="新增退回" size="mini" style="width:100px" clearable @change="intactClick">
                <el-option
                    v-for="item in drawbackOptions"
                    :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: 180px;" class="filter-item"
                  :placeholder="'案件编号'" v-model="listQuery.case_no">
            </el-input>
        </div>
        <div style="display:inline;margin-right:10px">
            <el-input @keyup.enter.native="handleFilter" size="mini" style="width: 180px;" class="filter-item"
                  :placeholder="'请输入关键字'" v-model="listQuery.key">
            </el-input>
        </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" type="success" icon="el-icon-download" @click="exportExcelList" >导出</el-button>
      </div>
    </sticky>
    <div class="app-container flex-item">
      <!--内容-->
      <div class="bg-white" style="height:100%;width:60%;float:left;position:relative;">
        <!-- 列表 -->
         <el-table
          size="mini"
          ref="multipleTable"
          :data="tableData"
          :height="taheight"
          tooltip-effect="dark"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          style="width:100%;"
          @selection-change="handleSelectionChange">

          <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 prop="createtime" label="上报时间" show-overflow-tooltip></el-table-column>
           <el-table-column prop="address" label="地点" show-overflow-tooltip>
             <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="case_description" label="案件描述" show-overflow-tooltip></el-table-column>
          <el-table-column prop="area" label="占用耕地面积" show-overflow-tooltip></el-table-column>
          <el-table-column prop="deal_time" label="处理时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="deal_username" label="案件处理人" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button size="mini" 
                          type="success"
                         @click="eventDetail(scope.$index, scope.row)">核验
              </el-button>
            </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 class="case-detail-container" style="width:100%;height:100%;background:#fff;position:absolute;top:0px;left:0px;z-index:999;padding:0px 16px;" v-if="eventDetailVisible">
          <h1 style="font-size:16px;font-weight:bold;padding:6px 0px;padding-bottom:8px;border-bottom:1px solid #f1f1f1;">
            案件详情
            <span style="float:right;font-weight:bold;" @click="eventDetailVisible = false"><i class="el-icon-close"></i></span>
          </h1>
          <div class="caseDetailDealContainer">
            <eventDetailnForm :caseDetailId="caseDetailId" @close="closeEventDetailnForm" @verificat="verificatSuccess" :isShowMap="false"></eventDetailnForm> 

          </div>
          <div style="width: calc( 100% - 24px);height:50px;margin-top:24px;border-top:1px solid #f5f5f5;position:absolute;bottom:60px;">
            <div style="margin:12px 0px;margin-top:18px;">
              <el-input v-model="backCaseInfo" class="back-case-info" type="text" style="width: calc( 100% - 140px);margin-right:12px;" placeholder="退回原因" size="small"></el-input>
              <el-button type="primary" size="small" @click="backCase">退回</el-button>
              <el-button type="success" size="small" @click="verification">核验</el-button>
            </div>
          </div>

        </div>

      </div>
      <!-- mapbox地图 -->
       <div class="bg-white" style="height: calc( 100% - 55px);width:40%;background:#fff;float:right;position:absolute;top:55px;right:0px;">
         <Map :ruleForm="handleForm"></Map>
       </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="1020px" height="600px" top="100px"
               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 style="height:600px;width:1020px;overflow-y:hidden;">
        <el-container v-if="eventDetailVisible">
          <eventDetailnForm :caseDetail="handleForm"></eventDetailnForm> 
        </el-container>
      </el-container>
    </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 Map from "./widget/Map.vue"
import {getMethodCommon,postMethodCommon} from "@/api/common";
const BASE_API = process.env.VUE_APP_BASE;
export default {
    name: "reportqueryindex",
    components: {
        Sticky,
        Pagination,
        eventHandleForm,
        eventDetailnForm,
        Map,
    },
    directives: {
        waves,
        elDragDialog
    },
    data(){
        return{
          caseDetailId:null,
            listQuery: { // 查询条件
                is_intact:1,
                page: 1,
                limit: 20,
                key: undefined,
                appId: undefined,
                reportTime: '',
                violationStatus: '',
                handle_status_id:2,
                identification_user:null,
                is_verification:0,
                countyid:null,
                streetid:null,
                communityid:null,
                case_no: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:"已办结"}
            ],
            OrgList: [],
            addressProp: {
              value: "id",
              label: "text",
              checkStrictly: true
            },
            backCaseInfo:null,
            illegalOptions:[
              {id:0,name:"合法"},
              {id:1,name:"违法"},
              {id:2,name:"伪变化"}
            ],
            drawbackOptions:[
              {id:0,name:"新增"},
              {id:1,name:"退回"},
            ],
        }
    },
    mounted(){
        this.taheight=window.innerHeight-160;
        this.getNoBuildStatus() //获取违规类型
        this.getCaseList();
        this.getUserOrg();
    },
    methods: {
    exportExcelList(){
      getMethodCommon("/DroneCaseinfo/ExportCaseInfoList",this.listQuery).then(res=>{
        console.log("excel",res);
        if(res.code == 200){
          window.location.href=BASE_API+"/"+res.result;
        }
      })
    },
    verification(){
      postMethodCommon("/DroneCaseinfo/VerificatCase",[this.handleForm.id]).then(res=>{
        if(res.code == 200){
          this.$message({
            type:"success",
            message:"核销成功"
          })
          this.eventDetailVisible = false;
          this.getCaseList();
        }
      })
    },
    backCase(){
      if(this.backCaseInfo == "" || this.backCaseInfo == null){
        this.$message({
          type:"error",
          message:"请输入退回原因",
        })
      }else{
        let data = {
          	id: this.handleForm.id,
				    drawbackReason: this.backCaseInfo
        }
        getMethodCommon('DroneCaseinfo/DrawbackCase',data).then(res => {
          if (res.code === 200) {
            this.$message({
              message: "案件退回成功",
              type: 'success'
            });
            this.eventDetailVisible = false;
            this.getCaseList();
          }else{
            this.$message.error(res.message);
          }
        })
      }
    },
      closeEventDetailnForm(){
        this.eventDetailVisible = false;
      },
      verificatSuccess(){
        this.eventDetailVisible = false;
        this.getCaseList();
      },
      intactClick(){
        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.getCaseList()
        },
        eventHandle(index,data){
            this.handleForm = data
            this.eventHandleVisible = true
        },
        eventDetail(index,data){
            this.caseDetailId = data.id;
            this.handleForm = data
            this.backCaseInfo=null;
            this.eventDetailVisible = true
        },
        handleSelectionChange(){

        },
        getNoBuildStatus(){
          getMethodCommon('/Categorys/LoadList',{typeid: "SYS_NOBUILD_TYPE"}).then(res => {
            this.violationOptions = res.result
          })
        },
        getCaseList(){
          this.tableData = []
          getMethodCommon('/DroneCaseinfo/LoadCaseInfoList',this.listQuery).then(res => {
            this.tableData = res.data
            this.total = res.count
          })
        }
    },

}
</script>

<style scoped>
::v-deep .el-dialog__headerbtn{
    top:0 !important;
}
.caseDetailDealContainer{
  width:100%;
  height: calc( 100% - 160px);
  overflow-y: auto;
}


/* 滑道样式 */
.caseDetailDealContainer::-webkit-scrollbar{
  width:5px;
  background:rgba(0,0,0,0.1);
  border-radius: 6px;
}
/* 定义滑块的样式 */
.caseDetailDealContainer::-webkit-scrollbar-thumb{
  border-radius: 10px;
  -webkit-box-shadow:inset 0 0 6px rgba(255,255,255,0.3);
  background-color:rgba(255,255,255,0.3);
}
/* 定义滑块鼠标移入时的样式 */
.caseDetailDealContainer:-webkit-scrollbar-thumb:hover{
  border-radius: 10px;
  -webkit-box-shadow:inset 0 0 6px rgba(255,255,255,0.3);
  background-color:rgba(255,255,255,0.4);
}
</style>
