<!--
 * @Description: 第三方施工，水保隐患，塌陷专题左侧筛选按钮
 * @Author: 王晓颖
 * @Date:2021-04-07 15:14:32
 -->
<template>
  <div class="select-all-left">
    <select-area :btns="areaBtns" v-model="currentSelect.area" title="按区域" btn-style="circle"/>
    <select-area :btns="timeBtns" v-model="currentSelect.time" title="按时间" btn-style="circle"/>
    <select-area :btns="levelBtns" v-model="currentSelect.level" title="按级别" btn-style="rectangle"/>
    <select-area :btns="stateBtns" v-model="currentSelect.state" title="按状态" btn-style="rectangle"/>
  </div>
</template>

<script>
import SelectArea from '@/components/SelectTool/selectArea'
export default {
  name: 'SelectAllConstruction',
  components: { SelectArea },
  data() {
    return {
      currentSelect: {
        area: '全部',
        time: '全部',
        state: '全部',
        level: '全部'
      },
      areaBtns: [
        { name: '全部', value: '全部' },
        { name: '临汾', value: '临汾' },
        { name: '忻州', value: '忻州' },
        { name: '阳泉', value: '阳泉' },
        { name: '长晋', value: '长晋' },
        { name: '吕梁', value: '吕梁' },
        { name: '晋中', value: '晋中' },
        { name: '运城', value: '运城' }
      ], // 区域按钮
      timeBtns: [
        { name: '全部', value: '全部' },
        { name: '本日', value: '本日' },
        { name: '本周', value: '本周' },
        { name: '本月', value: '本月' },
        { name: '本年', value: '本年' }
      ], // 区域按钮
      stateBtns: [
        { name: '全部', value: '全部' },
        { name: '暂未施工', value: '暂未施工' },
        { name: '施工中', value: '施工中' },
        { name: '施工暂停', value: '施工暂停' }
      ], // 人数按钮
      levelBtns: [
        { name: '全部', value: '' },
        { name: 'A级', value: '1' },
        { name: 'B级', value: '2' },
        { name: 'C级', value: '3' },
        { name: '问题', value: '4' }
      ] // 人数按钮
    }
  },
  watch: {
    currentSelect: { // 深度监听选区变化并传递给上级
      handler(newval, oldval) {
        this.$emit('change', this.currentSelect)
      },
      deep: true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .select-all-left{
    position: absolute;
    z-index:100;
    left:2rem;
    top: 5rem;
  }

</style>