<template>
    <su-filtrate-diy-item :term="label">
        <su-items-layout :data="list" :itemHeight="24" :rightWidth="36">
            <template slot="tag" slot-scope="{item}">
                <el-button
                    :class="item.check?'button-check':'button-no-check'"
                    size="mini"
                    style="margin: 0 5px;padding: 4px 10px;"
                    :type="item.check?'primary':''"
                    @click="click(item)"
                >{{ item.label }}</el-button>
            </template>
            <div slot="open">
                展开
            </div>
            <div slot="hide">
                收起
            </div>
        </su-items-layout>
    </su-filtrate-diy-item>
</template>

<script>
import seFiltrateDiy from "../../data/su-filtrate-diy";
import seItemsLayout from "../../layout/su-items-layout";

export default {
    name: "selectItem",
    components: {
        seFiltrateDiyItem: seFiltrateDiy.item,
        seItemsLayout,
    },
    data(){
        return {
            list:[]
        }
    },
    props: {
        label: {
            type: String,
            require: true,
            default: "label",
        },
        data: {
            type: Array,
            default() {
                return []
            },
        },
        multiple: {
            type: Boolean,
            default: false,
        },
    },
    created() {
        this.initList();
    },
    methods:{
        initList(){
          let list = [];
          this.data.forEach(function (item){
              list.push({
                  label:item.label,
                  check:!!item.check
              })
          })
            this.list=list;
        },
        click(item){
            item.check = !item.check;
        }
    }
}
</script>

<style lang="less" scoped>
    .button-no-check{
        border: 1px solid #ffffff;
    }
</style>
