<!--
 * @Description: 数据筛选菜单
 * @Author: 王晓颖
 * @Date: 2022-05-18
 -->
<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="listQuery" label-position="top" size="small">
            <el-form-item label="所属组织机构">
              <dept-select style="width:100%" :need-top="false" placeholder="请选择组织机构" clearable />
            </el-form-item>
            <el-form-item v-if="wellTypeList.length>1" label="井类型">
              <el-select v-model="listQuery.wellType" placeholder="选择井类型" style="width:100%" clearable>
                <el-option
                  v-for="item in wellTypeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <div class="btn-line">
              <el-button class="filter-item" type="primary" size="small" @click="filter">
                数据筛选
              </el-button>
              <el-button class="filter-item" type="default" size="small" @click="clearSelected">
                清除筛选
              </el-button>
            </div>
          </el-form>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import DeptSelect from '@/components/DeptSelect'
export default {
  name: 'PopupDataFilter',
  components: { DeptSelect },
  props: {
    show: {
      type: Boolean,
      default: true
    }, // 是否显示
    wellTypeList: {
      type: Array,
      required: true
    } // 井类型列表
  },
  data() {
    return {
      listQuery: {
        keywords: '', // 关键字
        wellType: '', // 井类型
        deptid: '' // 组织机构
      } // 筛选条件
    }
  },
  methods: {
    // 关闭窗口
    close() {
      this.$emit('close')
    },
    // 执行过滤
    filter(force = false) {
      if (this.listQuery.keywords === '' && this.listQuery.deptid === '' && this.listQuery.wellType === '' && !force) {
        this.$message.warning('条件不能为空')
      } else {
        this.$emit('filter', this.listQuery, true)
      }
    },
    // 清除过滤
    clearSelected() {
      this.listQuery = {
        keywords: '', // 关键字
        wellType: '', // 井类型
        deptid: '' // 组织机构
      }
      this.$emit('filter', this.listQuery, false)
    }
  }
}
</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>
