<template>
  <div>
    <transition enter-active-class="animate__animated animate__slideInRight" leave-active-class="animate__animated animate__slideOutRight" :duration="500" mode="out-in">
      <div v-show="show" class="layer-choose-window">
        <div class="window-title">
          <div>管线筛选</div>
          <i class="el-icon-close close-icon" @click="close" />
        </div>
        <div class="window-body">
          <!-- 筛选条件-->
          <el-form ref="selectForm" :model="query" size="small">
            <el-form-item label="管龄">
              <el-select v-model="query.age" placeholder="管龄" clearable>
                <el-option
                  v-for="item in ['大于5年', '大于10年', '大于15年', '大于20年']"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="权属单位">
              <dept-select v-model="query.deptId" :need-top="deptShowTop" dept-type="03" placeholder="选择权属单位" @changeItem="changeItem" :unlogin="true"/>
            </el-form-item>
            <div class="btn-line">
              <el-button class="filter-item" type="default" size="small" @click="search">
                搜索
              </el-button>
            </div>
          </el-form>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import DeptSelect from '@/components/DeptSelect'

export default {
  name: 'LineSearch',
  components: { DeptSelect },
  props: {
    defaultPosition: {
      type: Array,
      default: () => []
    },
    show: {
      type: Boolean,
      default: true
    } // 是否显示
  },
  data() {
    return {
      deptShowTop: false, // 权属单位下拉是否显示顶级
      query: {
        age: '',
        deptId: '',
        deptName: ''
      } // 筛选条件
    }
  },
  mounted() {
  },
  methods: {
    changeItem(val) {
      this.query.deptName = val.name?val.name: ''
      console.log(this.query)
    },
    // 关闭窗口
    close() {
      this.$emit('close')
    },
    // 坐标定位
    search() {
      this.$emit('search', this.query)
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.layer-choose-window{
  position: absolute;
  right: 10px;
  top: 50px;
  width: 270px;
  background-color: rgba(255,255,255,0.9);
  .window-body{
    padding: 10px 30px;
    .btn-line{
      display: flex;
      justify-content: center;
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }
}
.window-title{
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px;
  .close-icon:hover{
    cursor: pointer;
    color: #36a3f7;
  }
}
</style>