<!--
 * @Description:
 * @Author: 王晓颖
 * @Date:
 -->
<template>
  <div class="select-area">
    <select-title>{{ title }}</select-title>
    <div class="select-body">
      <button v-for="btn of btns" :key="btn.name" :class="{'circle-btn':btnStyle=='circle','rectangle-btn':btnStyle=='rectangle','check':select===btn.name}" class="btn" @click="change(btn.value)">{{ btn.name }}</button>
    </div>
  </div>
</template>

<script>
import SelectTitle from './components/selectTitle'
export default {
  name: 'SelectArea',
  components: { SelectTitle },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    }, // 选中值
    title: {
      type: String,
      default: ''
    }, // 标题
    btnStyle: {
      type: String,
      default: 'circle' // circle, rectangle
    }, // 样式
    btns: {
      type: Array,
      default: () => {
        return [
          { name: '全部', value: '全部' }
        ]
      }
    }// 按钮组
  },
  data() {
    return {
      select: ''
    }
  },
  mounted() {
    this.select = this.value
  },
  methods: {
    change(value) {
      console.log(value)
      this.select = value
      this.$emit('change', value)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.select-area{
  width: 25rem;
  margin:1rem;
  padding:0.5rem 1rem;
  background-color: rgba(0, 0, 0, 0.2);
  .select-body{
    margin-top:1rem;
    font-size:0.8rem;
    .circle-btn{
      width: 3.5rem;
      height:3.5rem;
      color: white;
      background-color: transparent;
      border:1px solid #0e8bff;
      padding: 0.6rem;
      margin: 0.3rem;
      border-radius: 4rem;
    }
    .rectangle-btn{
      color: white;
      background-color: transparent;
      border:1px solid #0e8bff;
      padding: 0.5rem 0.6rem;
      margin: 0.3rem;
      border-radius: 7px;
    }
    .btn:hover{
      background-color:#0e8bff;
      cursor: pointer;
    }
    .btn:active{
      background-color:#0e8bff;
    }
    .btn:focus{
      outline: -webkit-focus-ring-color auto 0px;
      background-color:#0e8bff;
    }
    .check{
      background-color:#0e8bff;
    }
  }

}
</style>