<template>
  <div class="mainContainer">
    <Map :ruleForm="handleForm" @setArea="setArea"></Map>
    <div class="listContainer">
      <div class="screenContainer">
        <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>
        &nbsp;
        <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>

        <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>
        <br>
       <div style="margin-top:6px;">
          <el-input @keyup.enter.native="handleFilter" size="mini" style="width: 150px;" class="filter-item"
              :placeholder="'请输入关键字'" v-model="listQuery.key">
          </el-input>
          &nbsp;
          <el-input @keyup.enter.native="handleFilter" size="mini" style="width: 120px;" class="filter-item"
                :placeholder="'判读人姓名'" v-model="listQuery.identification_user">
          </el-input>
                &nbsp;
          <el-button class="filter-item" size="mini" v-waves icon="el-icon-search" @click="handleFilter"></el-button>
          <el-button class="filter-item" size="mini" icon="el-icon-download" v-waves @click="exportDronePoint"></el-button>
       </div>
      </div>
      <div class="dataContainer">
        <div class="dataInfo" v-for="(item,index) in dataList" :key="index">
          <div class="preImage">
            <img v-show="item.case_pic_list.length" :src="Image_Base_Url+'/S_'+item.case_pic_list[0]" height="100%" fit="cover" alt="" />
            <img v-show="item.case_pic_list.length == 0" src="~@/assets/photo.png" width="100%" alt="">
          </div>
          <div class="caseInfo">
            <p class="case-description" style="color:#333;">{{item.case_description}}</p>
            <p>
              <span>{{item.streetname}}&nbsp;{{item.communityname}}</span>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span style="float:right;">{{item.createtime}}</span>
              
            </p>
            <p style="text-align:right;">
              <span style="float:left;line-height:30px;" >{{item.identification_user}}</span>
              <!-- <el-button size="mini">处理信息</el-button> -->
              <el-button size="mini" type="primary" @click="setHandleForm(item)">操作</el-button>
            </p>
          </div>
        </div>
      </div>
      <div class="pageContainer" v-show="total>0">
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="handleCurrentChange" />
          <!-- <el-pagination
            background
            layout="prev, pager, next"
            :page-size="10"
            :total="total">
          </el-pagination> -->
      </div>
      <div class="caseDetailContainer" v-if="caseDetailFormShow">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>案件信息</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="caseDetailFormShow = !caseDetailFormShow;handleForm = {};"><i class="el-icon-close"></i></el-button>
          </div>  
            <el-tabs v-model="activeName"  >
              <el-tab-pane label="案件判读" name="first">
                <CaseDetailForm :ruleForm="handleForm" v-if="caseDetailFormShow"></CaseDetailForm>
              </el-tab-pane>
              <el-tab-pane label="案件处理" name="second">
                <HandleCase v-if="caseDetailFormShow" :id="handleForm.id" :isExamine="false"></HandleCase>
              </el-tab-pane>
            </el-tabs>
          
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import waves from '@/directive/waves' // 水波纹指令
import Map from './widget/Map.vue';
import Pagination from '@/components/Pagination'
import {getMethodCommon} from '@/api/common'
import CaseDetailForm from './widget/form.vue'
import HandleCase from '../examine/widget/HandleCase.vue'
const IMAGE_BASE_URL = process.env.VUE_APP_BASE_IMG_URL
export default {
  name:"Interpretation",
  data(){
    return {
      Image_Base_Url:IMAGE_BASE_URL,
      activeName:"first",
      //过滤条件
      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
      },
      dataList:[],
      total:0,
      listQuery:{
        page:1,
        limit:10,
        is_intact:0,
        handle_status_id:null,
      },
      caseDetailFormShow:false,
      handleForm:null,
      area:0,
    }
  },
  components:{
    Map,
    CaseDetailForm,
    HandleCase,
    Pagination
  },
  directives: {
    waves,
  },
  watch:{

  },
  created(){

  },
  mounted(){
    this.getOrgList();
    this.getCaseList();
  },
  methods:{
    getOrgList() {
      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++){
        }
      })
    },
    getCaseList(){
      getMethodCommon('/DroneCaseinfo/LoadCaseInfoList',this.listQuery).then(res => {
          this.dataList = res.data
          
          this.total = res.count
      })
    },
    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();
    },
    handleFilter(){
      this.getCaseList()
    },
    handleCurrentChange(){
      this.getCaseList()
    },
    exportDronePoint(){
      getMethodCommon('/ShpManager/ExportShpData',{tablename: 'drone_point_data',columns: '*'}).then(res => {
          if(res.code == 200){
            let src = BASE_API + '/' + res.result
            window.open(src)
          }
      })
    },
    setHandleForm(item){
      this.activeName="first";
      this.caseDetailFormShow = true;
      this.handleForm = item;
    },
    setArea(area){
      
      this.area = area;
      this.handleForm.area = area;
    }
  }
}
</script>
<style scoped>
.mainContainer{
  width:100%;
  height:100%;
  background:#f5f5f5;
  position:relative;
}
.listContainer{
  width:400px;
  height:100%;
  position: absolute;
  top:0px;
  left:25px;
}
.screenContainer{
  width:100%;
  padding:8px;
  height:100px;
  background:#f5f5f5;
  border-radius: 4px;
  margin-top:12px;
  box-shadow: 0px 0px 5px #666;
}
.dataContainer{
  width:100%;
  height: calc(100% - 260px);
  border-radius: 4px;
  margin-top:6px;
  box-shadow: 0px 0px 5px #666;
  background:#f5f5f5;
  overflow-y:scroll;
}
/* 滑道样式 */
.dataContainer::-webkit-scrollbar{
  width:5px;
  background:rgba(255,255,255,0.4);
  border-radius: 6px;
}
/* 定义滑块的样式 */
.dataContainer::-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);
}
/* 定义滑块鼠标移入时的样式 */
.dataContainer::-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);
}

.dataContainer .dataInfo{
  width:100%;
  height:100px;
  padding:8px;
  background:#f5f5f5;
  line-height:14px;
  border-bottom:2px solid rgba(0,0,0,0.4);
}
.case-description{
  width:100%;
  height:14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dataContainer .dataInfo .preImage{
  width:80px;
  height:80px;
  overflow: hidden;
  float:left;
  background:#f5f5f5;
}
.dataContainer .dataInfo .caseInfo{
  width:290px;
  padding-left:8px;
  float:left;
}
.pageContainer{
  width:100%;
  height:60px;
  overflow-x: scroll;
  overflow-y:hidden;
  margin-top:0px;
  background:#f5f5f5;
  border-radius: 4px;
  margin-top:4px;
  box-shadow: 0px 0px 5px #666;
}


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


.caseDetailContainer{
  position:absolute;
  top:0px;
  left:0px;
  width:500px;
  /* min-height:870px; */
  height: calc(100% - 80px);
  background:#f5f5f5;
   border-radius: 4px;
  margin-top:12px;
  box-shadow: 0px 0px 5px #666;
  display: block;
}

/deep/ .el-card{
  height: 100%;
  width:100%;
  /* background:red; */
}
/deep/ .el-card__body{
  height:100%;
  padding-top:0px !important;
  overflow:scroll;
}

/deep/ .el-card__body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
 
}
/deep/ .el-card__body::-webkit-scrollbar-track {
  border-radius: 10px;
}
/deep/ .el-card__body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(0,0,0,0.1);
}

/deep/ .el-tabs__content{
  height:100%!important;
}

</style>