<template>
    <div class="query-box">
       <div class="ynzrzyzb thxx tbdq" :style="shrink?'margin-left:0;':'margin-left: -312px'">
            <!-- 查询tab -->
            <el-tabs type="border-card">
                <el-tab-pane>
                    <span slot="label">属性查询</span>
                    <span class="thxx">乡镇名称：</span>
                    <div class="thxx">
                        <template>
                            <el-select v-model="form.value2" placeholder="请选择" size="mini">
                                <el-option
                                v-for="item in options1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </div>
                    <br><br>
                    <span class="thxx">&nbsp;&nbsp;&nbsp;村名称：&nbsp;</span>
                    <div class="thxx">
                        <template>
                            <el-select v-model="form.value3" placeholder="请选择" size="mini">
                                <el-option
                                v-for="item in options2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </div>
                    <br><br>
                    <span class="thxx">用地主体：</span>
                    <div class="thxx" style="width:193px;">
                        <el-input size="mini" v-model="form.name" placeholder="请输入用地主体名称"></el-input>
                    </div>
                    <br><br>
                    <span class="thxx">&nbsp;&nbsp;&nbsp;图班号：&nbsp;</span>
                    <div class="thxx" style="width:193px;">
                        <el-input size="mini" v-model="form.name1" placeholder="请输入图班号"></el-input>
                    </div>
                    <br><br>
                    <span class="thxx tbdq">分析类型：</span>
                    <el-checkbox v-model="form.checked">地类分析</el-checkbox>
                    <br><br>
                    <span class="thxx tbdq">选择年份：</span>
                    <div class="thxx ynzrzyzb_nf">
                        <template>
                            <el-checkbox-group 
                            v-model="form.checkList"
                            >
                                <el-checkbox label="2019" ></el-checkbox>
                                <el-checkbox label="2018"></el-checkbox>
                                <el-checkbox label="2017"></el-checkbox>
                                <el-checkbox label="2016"></el-checkbox>
                                <el-checkbox label="2015"></el-checkbox>
                                <el-checkbox label="2014"></el-checkbox>
                                <el-checkbox label="2013"></el-checkbox>
                                <el-checkbox label="2012"></el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </div>
                    <br><br>
                    <br>
                    <div class="ynzrzyzb_btn">
                        <el-row>
                            <el-button type="primary" size="mini" style="width:256px;" @click="sxquery($event,1)">查询</el-button>
                        </el-row>
                    </div>
                    
                    
                </el-tab-pane>
                <el-tab-pane label="空间查询">
                    <span>绘制：</span>
                    <br><br>
                    <div class="kjcx_hz thxx">
                        <i class="kjcx_hz_i1" type="EXTENT" v-on:click="Draw(1,$event)"></i>
                        <i class="kjcx_hz_i2" type="Circle" v-on:click="Draw(2,$event)"></i>
                        <i class="kjcx_hz_i3" type="POLYGON" v-on:click="Draw(3,$event)"></i>
                        <i class="kjcx_hz_i4" type="FREEHAND_POLYGON" v-on:click="Draw(4,$event)"></i>
                    </div>
                    <div class="kjcx_hzlj thxx">
                        <i class="kjcx_hz_i5" type="DELETE" v-on:click="deleteDraw($event)"></i>
                    </div>
                    <br><br>
                    <span>平面坐标：</span>
                    <div class="thxx">
                        <el-input v-model="input" size="mini" placeholder='XY坐标之间用","隔开'></el-input>
                    </div>
                    <br><br>
                    <span>分析类型：</span>
                    <div class="thxx">
                        <template>
                            <el-checkbox-group 
                            v-model="checkList1"
                            >
                                <el-checkbox label="地类分析"></el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </div>
                    <br><br>
                    <span class="thxx tbdq">选择年份：</span>
                    <div class="thxx kjcx_nf">
                        <template>
                            <el-checkbox-group 
                            v-model="checkList2"
                            >
                                <el-checkbox label="2019"></el-checkbox>
                                <el-checkbox label="2018"></el-checkbox>
                                <el-checkbox label="2017"></el-checkbox>
                                <el-checkbox label="2016"></el-checkbox>
                                <el-checkbox label="2015"></el-checkbox>
                                <el-checkbox label="2014"></el-checkbox>
                                <el-checkbox label="2013"></el-checkbox>
                                <el-checkbox label="2012"></el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </div>
                    <br><br>
                    <br>
                    <div class="ynzrzyzb_kjbtn">
                        <el-row>
                            <el-button type="primary" size="mini" style="width:256px;" @click="sxquery($event,2)">查询</el-button>
                        </el-row>
                    </div>

                </el-tab-pane>
                <el-tab-pane label="导入查询">
                    <span class="tbdq">导入类型：</span>
                    <div class="thxx dr_upload">
                        <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                            <el-button size="small" type="primary">选择文件</el-button>
                            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                        </el-upload>
                    </div>
                    <br><br>
                    <span>分析类型：</span>
                    <div class="thxx">
                        <template>
                            <el-checkbox-group 
                            v-model="checkList3"
                            >
                                <el-checkbox label="地类分析"></el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </div>
                    <br><br>
                    <span class="thxx tbdq">选择年份：</span>
                    <div class="thxx kjcx_nf">
                        <template>
                            <el-checkbox-group 
                            v-model="checkList4"
                            >
                                <el-checkbox label="2019"></el-checkbox>
                                <el-checkbox label="2018"></el-checkbox>
                                <el-checkbox label="2017"></el-checkbox>
                                <el-checkbox label="2016"></el-checkbox>
                                <el-checkbox label="2015"></el-checkbox>
                                <el-checkbox label="2014"></el-checkbox>
                                <el-checkbox label="2013"></el-checkbox>
                                <el-checkbox label="2012"></el-checkbox>
                            </el-checkbox-group>
                        </template>
                    </div>
                    <br><br>
                    <br><br>
                    <div class="ynzrzyzb_drbtn">
                        <el-row>
                            <el-button type="primary" size="mini" style="width:256px;" @click="sxquery($event,3)">查询</el-button>
                        </el-row>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <!-- 收缩 -->
            <div class="shrink" @click="Shrink()" :class="shrink?'shrink1':'shrink2'"></div>
        </div>
    </div>
</template>
<script>
    export default{
        name:'jy-query',
        props:{
            // 乡镇名称
            options1:{
                 default: [{
                        value: '选项1',
                        label: '全部'
                    }, {
                        value: '选项2',
                        label: '松花江'
                    }, {
                        value: '选项3',
                        label: '象牙山'
                    }, {
                        value: '选项4',
                        label: '辽宁'
                    }, {
                        value: '选项5',
                        label: '东三省'
                }]
             
             },
            // 村名称
            options2: {
                default:  [{
                    value: '选项1',
                    label: '全部'
                    }, {
                        value: '选项2',
                        label: '松花江'
                    }, {
                        value: '选项3',
                        label: '象牙山'
                    }, {
                        value: '选项4',
                        label: '辽宁'
                    }, {
                        value: '选项5',
                        label: '东三省'
                }],
            },
 
        },

        data: function() {
                return {
                    // visible: false
                    // 默认
                    queryBoxState: false,
                    input: '',
                    value4: '全部',
                    value5: '全部',
                    checkList1: true ,
                    checkList2: ['空间查询年份'],
                    checkList3: true ,
                    checkList4: ['导入查询年份'],
                    shrink: true,
                    // 上传
                    fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
                    
                    form: {
                        name:'',
                        name1:'',
                        value2:"全部",
                        value3:"全部",
                        checked:true,
                        checkList:[]

                    },
                    queryData:{},
                    
                  
                   
                  
                   
                    
                }
            },
            methods:{
                // 绘制按钮
                Draw(a,event){
                    var path0 = event.path[0]
                    var path1 = event.path[1].children;
                    var type="";
                    for(var i = 0;i<=path1.length-1;i++){
                            path1[i].style.backgroundPositionY = "7px"
                        }
                    if(a==1){
                    path0.style.backgroundPositionY = "-27.5px";
                    type="Square";
                    }else if(a==2){
                    path0.style.backgroundPositionY = "-27.5px";
                    type="Circle";
                    }else if(a==3){
                    path0.style.backgroundPositionY = "-27.5px";
                    type="Polygon";
                    }else if(a==4){
                    path0.style.backgroundPositionY = "-27.5px"
                    type="LineString";
                    }
                    this.$emit('draw',{type:type});
                    
                },
                Shrink(){
                    this.shrink = !this.shrink
                    console.log(this.shrink)
                },
                deleteDraw(event){
                    console.log(event)
                    var path0 = event.path[0];
                    var path1 = event.path[1].children;
                    var i4 = path1[0].parentElement.previousElementSibling.children
                    for(var i = 0;i<=3;i++){
                        i4[i].style.backgroundPositionY = "7px"
                    }
                    this.$emit('deleteDraw')
                },
                sxquery(event,index){
                    this.queryBoxState = true;
                    // switch(index){
                    //     case 1:this.queryData=this.form;break;
                        
                    // }
                    
                    this.$emit('query',{queryData:this.queryData,index:index});
                    
                    
                },
               
            }
        }
    

</script>
<style>

    .query-box{
        width:307px;
    }
    .el-tabs__content{
        font-size:12px !important;
    }
    .el-checkbox{
        margin-right:30px;
    }
    .el-checkbox+.el-checkbox{
        margin-left:0px;
    }
    .el-checkbox-group{
        width:193px;
    }
    .el-tab-pane{
        font-size:12px;
    }
    /*滚动条整体样式*/
    ::-webkit-scrollbar {
        width: 5px;
        height: 8px; 
    }
    /*滚动条里面小方块*/
    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: rgba(216, 216, 216, 0.336);
    }
    .landUse{ 
        position: fixed;
        left: 5px;
        top: 75px;
        text-align: left;
    }
    /* 同行显示 */
    .thxx{
        display: inline-block;
        font-size:12px;
 
    }

    /* 头部对齐 */
    .tbdq{
        vertical-align:top;
    }
    /* 左边 */
    .ynzrzyzb{
        width: 307px;
        font-size: 12px;
        position: relative;
        transition: margin 0.5s;
    }

    .ynzrzyzb_nf{
        width: 193px;
    }

    /* tab栏背景色 */
    .ynzrzyzb /deep/ .el-tabs__header{
    background-color:rgba(199, 219, 255, 0.829);
    }

    /* 复选框选中文字 */
    .ynzrzyzb /deep/ .is-checked .el-checkbox__label{
    color: #4BC7AD;
    }

    /* 复选框对勾样式 */
    .ynzrzyzb /deep/ .is-checked .el-checkbox__inner{
    background-color: #4BC7AD;
    border-color: #4BC7AD;
    }

    /* 选择器箭头样式 */
    .ynzrzyzb /deep/ .el-input__icon{
    content: "\e78f";
    }

    .ynzrzyzb /deep/ .el-icon-arrow-up:before {
    content: "\e78f";
    }

    .ynzrzyzb /deep/ .el-tabs__item {
        padding: 0 23.6px;
    }
    .ynzrzyzb .kjcx_hz{
        border: 2px solid #cccccc91;
        padding: 0 12px;
    }
    .ynzrzyzb .kjcx_hzlj{
        border: 2px solid #cccccc91;
        margin-left: 20px;
    }
    .ynzrzyzb .kjcx_hz i,.ynzrzyzb .kjcx_hzlj i{
        display: inline-block;
        width: 40px;
        height: 40px;
        background: url(./kj-icon.png)no-repeat; 
        background-size: 500% 150%;
    }
    .ynzrzyzb .kjcx_hz .kjcx_hz_i1{
        background-position: 9px 7px;
    }
 
    .ynzrzyzb .kjcx_hz .kjcx_hz_i2{
        background-position: -38px 7px;
    }
 
    .ynzrzyzb .kjcx_hz .kjcx_hz_i3{
        background-position: -87px 7px;
    }

    .ynzrzyzb .kjcx_hz .kjcx_hz_i4{
        background-position: -130px 7px;
    }

    .ynzrzyzb .kjcx_hzlj .kjcx_hz_i5{
        background-position: -169px 7px;
    }

    .ynzrzyzb .kjcx_nf{
        width: 205px;
    }
    .ynzrzyzb .dr_upload{
        width: 210px;
    }

  
    .ynzrzyzb .shrink1,.ynzrzyzb .shrink{
        transition: all 0.5s;
        position: absolute;
        right: -18px;
        top: 50%;
        width: 16px;
        height: 35px;
        background: #fff url(./jiantou.png)no-repeat center center;
        background-size: 50% 23%;
        box-shadow:-1px 0px 2px 0px #E3EAED,0px -1px 2px 0px #E3EAED,1px 0px 2px 0px #E3EAED,0px 1px 2px 0px #E3EAED;
    }
    .ynzrzyzb .shrink2{
        background: #056EC6 url(./jiantou1.png)no-repeat center center;
        background-size: 80% 33%;
        box-shadow: none;
    }
   
    .landUse .QueryBox{
        position: fixed;
        width: 800px;
        height: 400px;
        bottom: 200px;
        left: 500px;
    }
    .landUse .QueryBox /deep/ .el-tabs{
        box-shadow: none;
        height: 100%;
    }
    .landUse .QueryBox /deep/ .el-tabs .el-tabs__header{
        background: #F0F6FB;
    }
    .landUse .QueryBox /deep/ .el-tabs__header,.landUse .QueryBox /deep/ .el-tabs__item,.landUse .QueryBox /deep/ .el-tabs{
        border: none;
    }
    .landUse .QueryBox .qb_t{
        display: block;
        font-size: 16px;
        line-height: 40px;
        padding-left: 20px;
        background: #58A0DD;
        color: #fff;
    }
    .landUse .QueryBox .qb_t_x{
        position: absolute;
        right: 20px;
        cursor:pointer;
    }
    .landUse .QueryBox /deep/ .el-tabs__content{
        height: 313px;
    }
    .landUse #bc_l{
        width: 700px;
        height: 313px;
    }
</style>

