<template>
  <div class="flex-column" style="background:#fff;">
      <el-row style="width:100%;height:100%;background:#fff;">
        <el-col 
          :span="leftContainer"
          style="height:100%"
          >
            <sticky :className="'sub-navbar'">
              <div class="filter-container" style="width:100%;height:50px;">
                <div style="display:inline;margin-right:10px;padding-top:12px;">
                    <el-cascader class="filter-cascader"
                        style="width: 180px;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: 120px;" class="filter-item"
                          :placeholder="'请输入关键字'" v-model="listQuery.key">
                    </el-input>
                </div>
              <!-- 搜索按钮 -->
                <el-button class="filter-item" size="mini" icon="el-icon-search" @click="getCaseList ">搜索</el-button>
                <el-button class="filter-item"  size="mini" type="success" icon="el-icon-download" @click="exportExcelList" >导出</el-button>
              </div>
            </sticky>
            <div class="flex-item" style="width: 100%;height:100vh;overflow:scroll;background:#fff;">
                <el-table ref="multipleTable"
                    :data="dataList"
                    tooltip-effect="dark"
                    style="width: 100%;height: calc(100% - 170px);overflow:scroll;"
                    size="mini"
                    >
                  <el-table-column
                      type="selection"
                      width="30">
                  </el-table-column>
                  <el-table-column label="案件编号" prop="case_no" width="" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="case_description" label="案件详情" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="deal_username"  label="办理人" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="deal_time"  label="办理时间" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="is_drawback" label="新增退回" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{{scope.row.is_drawback == 1 ? '退回案件' : '新增案件'}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="is_illegal" label="是否违法"  show-overflow-tooltip></el-table-column>
                  <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                      <el-button size="mini" type="success"
                                @click="handleEdit(scope.row, false)">审核
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div style="display: flex;justify-content: space-between;align-items: center">
                  <div style="margin-top: 10px;text-align: left;margin-left: 30px">
                    <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="changePage"
                        :current-page="listQuery.page"
                        :page-sizes="[10,20,50,100, 200, 300, 400,countPage]"
                        :page-size="listQuery.limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        size="mini"
                        :total="countPage">
                    </el-pagination>
                  </div>
                </div>
            </div>
                
        </el-col>
        <el-col :span="8" style="padding:14px;height:100%;" v-if="dialogFormVisible">
          <div style="width:100%;height:100%;position:relative;">
            <div style="width:100%;height:36px;z-index:10000;border-bottom:1px solid #f5f5f5;">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span>
                <el-link @click="dealShow = false" v-if="dealShow == true">案件信息</el-link>
                <el-link type="primary" @click="dealShow = false" v-if="dealShow == false" :underline="false">案件信息</el-link>
              </span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             
              <span style="margin-left:18px;">
                <el-link  @click="dealShow = true" v-if="dealShow == false">处理信息</el-link>
                <el-link type="primary" v-if="dealShow == true" :underline="false">处理信息</el-link>
              </span>
              <span style="float:right;">
                <i class="el-icon-close" style="font-size:20px" @click="dialogFormVisible=false;leftContainer=16;"></i>
              </span>
            </div>
            <div style="width:100%;height:100%;position:absolute;top:50px;left:0px;background:#fff;" v-show="dealShow">
              <HandleCase   :caseDetail="datasDetail" :id="datasDetail.id" :caseid="caseId" :handleStatus="datasDetail.handle_status_id" :isExamine="true" />
            </div>
            <div style="width:100%;height:100%;position:absolute;top:50px;left:0px;background:#fff;" v-show="!dealShow">
              <CaseDetail @caseReturn="closeCaseWindow" :caseDetail="caseDetail" />
            </div>
            <div style="position:absolute;height:80px;width:100%;text-align:right;bottom:22px;right:0px;background:#fff;padding-top:14px;padding-right:12px;border-top:1px solid #f5f5f5;">
              <el-button type="danger" size="mini" @click="handlerCheckCase(0)">退 回</el-button>
		          <el-button type="success" size="mini" @click="handlerCheckCase(1)">通 过</el-button>
            </div>
          </div>
          
        </el-col>
        <el-col :span="8" style="height:100%;">
          <div style="width:100%;height:100%;">
            	<Map :defaultPosition="lngLat" :caseId="caseId"></Map>
          </div>
        </el-col>
      </el-row>

      <!-- 案件退回 -->
      <el-dialog title="案件退回" :visible.sync="showGJ" width="60%" top="60px">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入退回原因"
          v-model="gaijin_reasson">
        </el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showGJ = false">取 消</el-button>
          <el-button type="primary" @click="submitGaiJin">确 定</el-button>
        </div>
      </el-dialog>
   
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
import {getMethodCommon, postMethodCommon } from "@/api/common";
import elDragDialog from '@/directive/el-dragDialog'
import CaseDetail from "./widget/CaseDetail";
import HandleCase from "./widget/HandleCase";
import Map from './widget/Map.vue'
const BASE_API = process.env.VUE_APP_BASE;

export default {
  name: "Forms",
  components: {
    Sticky,
    CaseDetail,
    HandleCase,
    Map
  },
  directives: {
    elDragDialog
  },
  data() {
    return {
      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]);
          }
        }]
      },
      illegalOptions:[
        {id:0,name:"合法"},
        {id:1,name:"违法"},
        {id:2,name:"伪变化"}
      ],
      drawbackOptions:[
        {id:0,name:"新增"},
        {id:1,name:"退回"},
      ],
      OrgList: [],
      addressProp: {
        value: "id",
        label: "text",
        checkStrictly: true
      },
      datasDetail: null,
      dataList:[],
      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,
      },
      activeName: "first",
      dialogFormVisible: false,
      onlyShow: false,
      countPage: 1,
      caseDetail:null,
      caseId:null,
      leftContainer:16,
      lngLat:[35.276783,117.988449],
      dealShow:false,
      showGJ:false,
      gaijin_reasson:null,

    }
  },
  created(){
    this.getUserOrg();
  },
  mounted() {
    this.getCaseList ();
  },
  methods: {
    exportExcelList(){
      let queryCondition = this.listQuery;
      queryCondition.is_intact = 1;
      getMethodCommon("/DroneCaseinfo/ExportCaseInfoList",queryCondition).then(res=>{
        console.log("excel",res);
        if(res.code == 200){
          window.location.href=BASE_API+"/"+res.result;
        }
      })
    },
    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++){
        }
      })
    },
    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();
    },
    getDate(date){
      let year = date.getFullYear();
      let month = date.getMonth()+1;
      let day = date.getDate();
      return year+"-"+month+"-"+day;
    },
    intactClick(){
      this.listQuery.page = 1
      this.getCaseList()
    },
    handlerCheckCase(code) {
			// code  0 退回  1 通过
			let _this = this;
			if (code === 0) {
				this.showGJ = true
			} else {
				let data = {
					id: this.caseDetail.id
				}
				getMethodCommon('/DroneCaseinfo/VerfiyCaseData',data).then(res => {
					if (res.code === 200) {
						this.$message({
							message: res.message,
							type: 'success'
						});
						_this.closeCaseWindow();
						// this.$emit('closeBack')
					} else {
						this.$message.error(res.message);
					}
				})
			}
		},
    submitGaiJin(){
      let _this = this
			let data = {
				id: this.caseDetail.id,
				drawbackReason: this.gaijin_reasson
			}
			getMethodCommon('DroneCaseinfo/DrawbackCase',data).then(res => {
        if (res.code === 200) {
          this.$message({
            message: res.message,
            type: 'success'
          });
          // 退回成功
          _this.gaijin_reasson
          _this.showGJ = false;
          _this.closeCaseWindow();
        }else{
          this.$message.error(res.message);
        }
      })
   
    },
    handleEdit(e, i) {
      this.leftContainer = 8;
      this.datasDetail = e;
      this.dialogFormVisible = true,
      this.lngLat = [e.lat,e.lng];
      this.caseDetail = e;
      this.caseId = e.id;
    },
    changePage(e) {
		this.listQuery.page = e;
		this.getCaseList ();
    },
    handleSizeChange(e) {
		this.listQuery.limit = e
		this.getCaseList ();
    },
    closeCaseWindow(){
      this.dialogFormVisible = false;
      this.leftContainer = 16;
      this.getCaseList ();
    },
    getCaseList (){
		this.dataList = []
		getMethodCommon('/DroneCaseinfo/LoadWaitToVerifyCaseList',this.listQuery).then(res=>{
			if(res.code == 200){
        this.dataList = res.data
        this.dataList.forEach((item,index)=>{
          switch(this.dataList[index].is_illegal){
            case 0: this.dataList[index].is_illegal =  '合法';
              break;
            case 1:this.dataList[index].is_illegal = '违法';
              break;
            case 2:this.dataList[index].is_illegal = '伪变化';
              break;
          }
        })
				this.countPage = res.count
			}
		})
    }
  }
}
</script>

<style>
.custom-theme .el-table .cell {
  text-align: center !important;
}

.filter-container {
  padding: 5px;
  overflow-x:auto;
}

.custom-theme .el-dialog__body {
  padding: 0 30px;
}

.custom-theme .el-dialog {
  height: calc(100% - 240px);
  overflow-y: hidden;
  position: relative;
  padding-bottom: 20px;
}

.van-cell {
  padding: 10px 10px;
}
.custom-theme .el-tabs__content{
	overflow-y: auto;
	height: 500px;
	position: unset;
}
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
  background: #ccc;
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
  border-radius: 10px;
  background: #ededed;
}

/deep/.el-image-viewer__wrapper{
  z-index: 3000000000!important;
}

/deep/ .el-tabs__content{
		height: calc(100vh - 110px)!important;
		overflow-y: auto;
	}
</style>