<template>
<div ref="estableBody">
	<el-row style="margin-bottom:10px;">
		<el-col :span="3">
			<label>所属单位</label>
			<el-select  v-model="selectDwMc"  size="mini" class="ajlbselect" ref="checkDw" :clearable="true" :multiple="true" placeholder="请选择"  @clear="clearSelectDw" @remove-tag="clearSelectDw">
              <el-input
			    size="mini" 
                class="searchCaseLbbmInput"
                type="small"
                placeholder="输入关键字进行过滤"
                v-model="searchText"
                clearable>
              </el-input>
            <el-option   :value="unitData.nlist"  style="height: auto">
              <el-tree v-if="unitData.length"  	style="max-height:325px;overflow: auto" default-expand-all :data="unitData" node-key="NodeId" :default-checked-keys="unitData.nlist"  ref="unittree" show-checkbox class="caseTypesTree" :expand-on-click-node="true" highlight-current  :props="defaultProps" :check-strictly="true" @check="handleCheckDwChange" :filter-node-method="filterNode"></el-tree>
            </el-option>
        </el-select>
	  </el-col >
		<el-col :span="3">
			<label>部门受案号</label>
			<el-input style="width:calc(100% - 10px);" v-model="searchForm.caseNumber" filterable placeholder="输入部门受案号" size="mini"  clearable></el-input>
		</el-col>
		<el-col :span="3">
			<label>案件名称</label>
			<el-input style="width:calc(100% - 10px);" v-model="searchForm.caseName" filterable placeholder="输入案件名称" size="mini"  clearable></el-input>
		</el-col>
		<el-col :span="3"  style="min-height:20px;" v-if="ajlb&&ajlb.length">
			<label>案件类别</label>
			<el-select size="mini"  style="width:calc(100% - 10px);" v-model="searchForm.ajlb" filterable placeholder="输入案件类别"  clearable>
				<el-option
					v-for="item in ajlb"
					:key="item"
					:label="item"
					:value="item">
				</el-option>
			</el-select>
		</el-col>
		<el-col :span="3">
			<label>受理日期</label>
			<el-date-picker style="width:calc(100% - 10px);" size="mini" class="" 
				v-model="searchForm.timeRange"
				type="daterange"
				:picker-options="pickerOptions2"
				range-separator="-"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				align="right">
			</el-date-picker>
		</el-col>
		<el-col :span="3" style="min-height:20px;" v-if="wslb&&wslb.length">
			<label>文书类别</label>
			<el-select size="mini"  style="width:calc(100% - 10px);" v-model="searchForm.wslb" filterable placeholder="请选择" clearable>
				<el-option
					v-for="item in wslb"
					:key="item"
					:label="item"
					:value="item">
				</el-option>
			</el-select>
		</el-col>
		<el-col :span="3" style="min-height:20px;">
			<label >罪名</label>
			<el-select v-model="searchForm.ay" v-if="!ayList.length" class="aySelect" size="mini" ref="checkCaseType" placeholder="罪名" style="width:100%;" clearable @clear="ayClear">
              <el-input
                size="mini"
                style="width:calc(100% - 20px);margin-left:10px;margin-bottom:10px;"
                class="searchCaseTypeInput"
                type="small"
                placeholder="输入关键字进行过滤"
                v-model="searchText1"
                clearable>
              </el-input>
              <el-option  :value="searchForm.aykey" style="height: auto">
                <el-tree v-if="ayTree.length"  :data="ayTree" node-key="bm" ref="tree" class="caseTypesTree" :expand-on-click-node="true" highlight-current :current-node-key="searchForm.aykey" :props="{children:'children',label:'mc'}" @node-click="handleNode" :filter-node-method="filterNode1"></el-tree>
              </el-option>
          	</el-select>
			<el-select size="mini"  v-if="ayList.length" style="width:calc(100% - 10px);" v-model="searchForm.ay" filterable placeholder="输入罪名查找"  clearable>
				<el-option
					v-for="item in ayList"
					:key="item"
					:label="item"
					:value="item">
				</el-option>
			</el-select>
		</el-col>
		<el-col :span="3" style="float:right;text-align:right;line-height:40px;">
			<el-button size="mini" type="primary" @click="confirm">查询</el-button>
			<el-button size="mini" type="default" @click="clear">重置</el-button>
		</el-col>	
	</el-row>
</div>

</template>
<script>
import aysjys from '@/assets/json/ays.json'
import dwsjys from "@/assets/json/dws.json"
import {queryDwlist} from "@/api/tyyw";
import logoUrl from "@/assets/shortLogo.png";
	export default {
	    name: 'es-query',
		props:{
			ayList:{
				type:Array,
				default:()=>{
					return []
				}
			},
			ajlb:{
				type:Array,
				default:()=>{
					return ['一审公诉案件','一审公诉案件(未检)','审查逮捕案件','审查逮捕案件(未检)','未成年人特别程序案件','二审上诉案件','二审上诉案件（未检)','二审抗诉案件','二审抗诉案件（未检)','法院决定再（提）审案件','附条件不起诉案件','发回一审重审案件','法院决定再审案件']
				}
			},
			wslb:{
				type:Array,
				default:()=>{
					return []
				}
			},
		},
	    data () {
	      return {
			    tableWidth:500,
          		tableHeight:500,
			    logoUrl:logoUrl,
				searchForm:{
					// orgNo:"(\"320503\" OR \"320505\")",
					// orgNo:320505,
					orgNo:null,
					ay:null,
					timeRange:[],
					Keywords:[],
					wslb:[],
					caseNumber:null,
					caseName:null,
					ajlb:null,
					aykey:null
				},
				showUnitPopver:false,
				selectDwMc:[],
				searchText:null,
				searchText1:null,
				ayTree:[],
				unitData:[],
				unitMcs:{},
				defaultProps:{
					"children":"children",
					"label":"NodeText"
				},
				popoverVisible:false,
				popoverUnder:false,
				pickerOptions2: {
				shortcuts: [{
					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]);
					}
				}]
				},
	      }
	    },
	    components:{
	    },
	    mounted(){
			console.log(this.ayList,6667,this.ajlb, this.resDataAll)

	      let vm = this;
		  let res = aysjys;
		  let ays = res.data.objects;
		  this.ayTree = this.treeDataTranslate(ays, 'dm', 'fdm')
		  console.log(this.ayTree);
	      this.init();
	    },
	    activated(){
	      let vm = this;
	    },
		watch: {
			searchText(val) {
				this.$refs.unittree.filter(val);
			},
			searchText1(val){
				this.$refs.tree.filter(val);
			}
		},
	    methods: {
	    	init(){
				this.getUnitData();
	    	},
			getUnitData(){
				let vm = this;
				queryDwlist(null,{hideloading:true,notip:true,timeout:500}).then(res=>{
					let list = res.data.data;
                    let unitMcs = {};
                    list.map((v)=>{
                    unitMcs[v.NodeId] = v.NodeText;
                    })
                    vm.unitMcs = unitMcs;
                    vm.unitData = vm.treeDataTranslate(list,"NodeId","PNodeId");
				},error=>{
					let res = dwsjys;
					let list = res.data;
					let nlist = [];
					let unitMcs = {};
					list.map((v)=>{
						if(!unitMcs[v.NodeId]&&(v.NodeId==window.SITE_CONFIG["dwbm"]||v.PNodeId==window.SITE_CONFIG["dwbm"])){
							unitMcs[v.NodeId] = v.NodeText;
							delete v.children;
							nlist.push(v);
						}
					})
					vm.unitData = [];
					vm.unitMcs = unitMcs;
					vm.unitData = vm.treeDataTranslate(nlist,"NodeId","PNodeId");
				})
			},
			filterNode(value, data) {
				if (!value) return true;
				return data.NodeText.indexOf(value) !== -1;
			},
			handleCheckDwChange(data,checked){
				let vm = this;
				 vm.unitData.nlist= checked.checkedKeys;
				  vm.selectDwMc = checked.checkedKeys.length?(checked.checkedKeys.length>1?[vm.unitMcs[checked.checkedKeys[0]],(checked.checkedKeys.length-1)]:[vm.unitMcs[checked.checkedKeys[0]]]):[];
				 console.log(data,checked,vm.selectDwMc,vm.unitMcs,6969,vm.searchForm.orgNo);
				 let value =[]
				 vm.unitData.nlist.map((v,index)=>{
					 let one =`\"${v}\"`;
					 let OR ='OR';
					 if(index!==vm.unitData.nlist.length-1){
						  one +=OR;
					 }
					 value.push(one);
				 })
				 let org =value.join("");
				  let orgn='';
				 if(org.indexOf('OR')!=-1){
					 orgn=`(${org})`
				 }else{
					  orgn=org.split()
					  orgn.map((v,index)=>{
					 orgn=v.split("\"")[1]
					  })
				 }
				vm.searchForm.orgNo=orgn   
				vm.showUnitPopver = false;
			},
			filterNode1(value, data) {
				if (!value) return true;
				return data.mc.indexOf(value) !== -1;
			},
			handleNode(data,node){
				console.log(data);
				this.searchForm.aykey = data.bm;
				this.searchForm.ay = data.mc;
				this.$refs["checkCaseType"].blur();
			},
			ayClear(){
				this.searchForm.aykey = null;
				this.searchForm.ay = null;
			},
	    	confirm(){
				this.$emit("esQueryFormComplete",this.searchForm);
			},
			  clearSelectDw(){
				  let vm=this;
				this.$refs.unittree.setCheckedKeys([]);
				vm.searchForm.orgNo=null;
				this.selectDwMc = [];
            },
			clear(){
				this.searchForm = {
					orgNo:null,
					ay:null,
					timeRange:[],
					Keywords:null,
					wslb:[],
					caseNumber:null,
					caseName:null,
					ajlb:null,
				}
				this.$refs.unittree.setCheckedKeys([]);
				this.selectDwMc =[];
				this.$emit("esQueryFormComplete",{});
			}
	    }
	}
</script>
<style rel="stylesheet/scss" lang="scss">
  .el-popper.el-autocomplete-suggestion{
		.popper__arrow::after{
			border-width:6px!important;
		}
  }
  .search {
    margin-left: 40px;
  }
  .search .sear-box{
    display: inline-block;
    width: 558px;
    height: 36px;
    border: 2px solid #c4c7ce;
    border-radius: 10px 0 0 10px;
    border-right: 0;
    overflow: visible;
    vertical-align: middle;
  }
  .search .sear-box input{
    outline: 0;
    font: 16px/18px arial;
    padding: 10px 0 10px 14px;
    margin: 0;
    width: 484px;
    background: transparent;
    border: 0;
  }
  .search .btn{
    display:inline-block;
    vertical-align: middle;
    width: 112px;
    cursor: pointer;
    height: 40px;
    line-height: 41px;
    line-height: 40px\9;
    background-color: #4e6ef2;
    border-radius: 0 10px 10px 0;
    font-size: 17px;
    box-shadow: none;
    font-weight: 400;
    color: #fff;
    text-align: center;
  }
  .info {
    padding-left: 60px;
    line-height: 30px;
    font-size: 14px;
  }
  .info ul li {
    list-style: none;
    cursor: pointer;
    
  }
  .info ul li.cur{
    color: #4e71f2;
  }
</style>