<template>
<div>
    <sticky :className="'sub-navbar'">
      <div class="filter-container" style="overflow:auto;height:50px;">
        <!-- <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-date-picker
                size="mini"
                style="position:relative;top:1px;width:160px;"
                v-model="startEndTime"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="intactClick"
                :picker-options="pickerOptions">
              </el-date-picker>
        </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;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;width:100px;">
              <el-select v-model="listQuery.typeid" placeholder="案件类型" size="mini" style="width:100px" clearable @change="intactClick">
                <el-option
                    v-for="item in caseTypeOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
            </el-select>
        </div>

         <div style="display:inline;margin-right:10px;padding-top:12px;">
            <el-cascader class="filter-cascader"
                style="width: 140px;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.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;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.case_no">
            </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.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">
            <el-input @keyup.enter.native="handleFilter" size="mini" style="width: 120px;" class="filter-item"
                  :placeholder="'处理人姓名'" v-model="listQuery.deal_username">
            </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> -->
       
        <!-- 搜索按钮 -->
        <el-button class="filter-item" type="primary" size="mini" v-waves icon="el-icon-search" @click="handleFilter">查询</el-button>
        <el-button class="filter-item"  size="mini" @click="resetListQuery">重置</el-button>
        <el-button class="filter-item"  size="mini" type="success" icon="el-icon-download" @click="exportExcelList" >导出</el-button>
        <!-- <el-button class="filter-item"  size="mini" @click="isShowFieldOptions = !isShowFieldOptions">选择字段&nbsp;
          <i class="el-icon-arrow-down" v-if="!isShowFieldOptions"></i>
          <i class="el-icon-arrow-up" v-if="isShowFieldOptions"></i>
        </el-button> -->
        <!-- <el-button class="filter-item"  size="mini" type="success" @click="exportExcel" >导出</el-button> -->
      </div>
    </sticky>
    <div class="app-container flex-item">
      <div class="fieldOptions" v-if="isShowFieldOptions">
          <el-checkbox-group style="margin-left:0px" class="checkFi" v-model="checkField"
                              @change="checkedFieldChange" size="mini">
            <el-checkbox v-for="field in fieldOptions" :label="field.id" :key="field.id">{{ field.name }}
            </el-checkbox>
          </el-checkbox-group>
      </div>
      <!--内容-->
      <div class="bg-white" style="height:100%;">
        <!-- 列表 -->
         <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
              show-overflow-tooltip
              v-for="(item,index) in checkFieldToName"
              :key="index"
              :prop = "item.id"
              :label="item.name"
          >
          </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 prop="verifystatusname" label="处理进度" show-overflow-tooltip></el-table-column>
          <el-table-column prop="handle_status_name" label="处理状态" show-overflow-tooltip></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="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>
    <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 style="width:1350px;height:690px;overflow-y:hidden;">
        <el-container v-if="eventDetailVisible">
          <eventDetailnForm :caseDetailId="handleForm.id" :isShowMap="true"></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 {getMethodCommon,postMethodCommon} from "@/api/common";
const BASE_API = process.env.VUE_APP_BASE;
export default {
    name: "reportqueryindex",
    components: {
        Sticky,
        Pagination,
        eventHandleForm,
        eventDetailnForm
    },
    directives: {
        waves,
        elDragDialog
    },
    data(){
        return{
            listQuery: { // 查询条件
                is_intact:null,
                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:"伪变化"}
            ],
            drawbackOptions:[
              {id:0,name:"新增"},
              {id:1,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,
        }
    },
    mounted(){
        this.taheight=window.innerHeight-220;
        this.getNoBuildStatus() //获取违规类型
        this.getCaseTypeOptions();
        this.getCaseList();
        this.getUserOrg();
    },
    methods: {
      exportExcel(){
        getMethodCommon("/DroneCaseinfo/CaseSynthesisCensus").then(res=>{
          console.log("excel",res);
        })
      },
      exportExcelList(){
        getMethodCommon("/DroneCaseinfo/ExportCaseInfoList",this.listQuery).then(res=>{
          console.log("excel",res);
          if(res.code == 200){
            window.location.href=BASE_API+"/"+res.result;
          }
        })
      },
      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()
        },
        resetListQuery(){
          this.startEndTime = null
          this.listQuery =  { // 查询条件
              is_intact:null,
              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,
              report_start_time:null,
              report_end_time:null,
          };
          this.getCaseList();
        },
        handleCurrentChange(){
          this.getCaseList()
        },
        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;
             }
          })
        },
        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;
}
.fieldOptions{
  background:#f5f5f5;
  width:100%;
  min-height:40px;
  padding:0px 24px;
  text-align: left;
}
/deep/ .el-checkbox{
  margin:8px !important;
}


</style>
