<template>
  <div class="div_screen">
    <span class="span_screen">{{screenValue.title}}</span>
    <div class="div_popup_level">
      <span :class="totalClasses" style="margin-top: 0" @click="onClickTotal">全部</span>
      <!--<span class="span_button_select" style="margin-left: 10px">全部</span>-->
    </div>
    <div class="div_popup_level_item">
      <span :class="classes(index)" v-for="(data,index) in screenValue.value" :key="index" @click="onClickItem(index)">{{data.name}}</span>
    </div>

  </div>
</template>

<script>
  export default {
    name: "providerInfoScreen",
    props:{
      screenValue:{
        type:Object
      }
    },
    data(){
      return{
        span_button_select:'span_button_select',
        span_button_unselect:'span_button_unselect',
      }
    },
    computed:{
      classes:function () {
        return function (index) {
          let classes = {};
          if (this.screenValue.value[index].isSelected) {
            classes[this.span_button_select] = true;
          } else {
            classes[this.span_button_unselect] = true;
          }
          return classes;
        }
      },
      totalClasses(){
        let classes = {};
        if (this.screenValue.isTotalSelected) {
          classes[this.span_button_select] = true;
        } else {
          classes[this.span_button_unselect] = true;
        }
        return classes;
      }
    },
    methods:{
      onClickTotal(){
        this.screenValue.isTotalSelected = !this.screenValue.isTotalSelected;
        for (let i = 0; i < this.screenValue.value.length; i++) {
          this.screenValue.value[i].isSelected = this.screenValue.isTotalSelected;
        }
      },
      onClickItem(index){
        this.screenValue.value[index].isSelected = !this.screenValue.value[index].isSelected;
        let totalSelected = true;
        for (let i = 0; i < this.screenValue.value.length; i++) {
          if (!this.screenValue.value[i].isSelected) {
            totalSelected = false;
          }
        }
        this.screenValue.isTotalSelected = totalSelected;
        console.log(this.screenValue)
      }
    }
  }
</script>

<style scoped>
  .div_screen{
    display: flex;
    flex-direction: column;
  }
  .span_screen{
    font-size: 16px;
    color: #333333;
    height: 40px;
    display: flex;
    align-items: center;
    margin: 0 10px;
  }
  .div_popup_level{
    display: flex;
    /*padding: 0 10px 10px 10px;*/
  }
  .div_popup_level_item{
    display: flex;
    flex-flow: wrap;
    /*padding: 0 10px 10px 10px;*/
  }

  .span_button_select{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: calc(40vw - 15px);
    border-radius: 5px;
    background-color: #78AEF9;
    color: white;
    margin: 10px 0 0 10px;
  }
  .span_button_unselect{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: calc(40vw - 15px);
    border-radius: 5px;
    background-color: #dbdbdb;
    color: black;
    margin: 10px 0 0 10px;
  }
</style>
