// var choiceListComponentTemplate = `
// <div class="selector-content choice-list-content">
//     <div class="select-group-container">
//         <el-checkbox
//             v-for="(item, index) in selectList"
//             :key="index"
//             :name="item.value"
//             v-model="item.selected"
//             @change="changeState(item)"
//         >{{ item.label }}</el-checkbox>
//     </div>
// </div>
// `

var choiceListComponentTemplate = "\n<div class=\"selector-content choice-list-content\">\n    <div class=\"select-group-container\">\n        <el-checkbox\n            v-for=\"(item, index) in selectList\"\n            :key=\"index\"\n            :name=\"item.value\"\n            v-model=\"item.selected\"\n            @change=\"changeState(item)\"\n        >{{ item.label }}</el-checkbox>\n    </div>\n</div>\n";

var choiceListComponent = {
    name: 'choice-list-pc',
    template: choiceListComponentTemplate,
    props: {
        multi: {
            type: Boolean,
            default: true
        },
        list: {
            type: Array,
            default: function () {
                return [
                    // {
                    //     label: '',
                    //     value: ''
                    // }
                ]
            }
        }
    },
    data: function () {
        return {
            selectList: [],
            selectedList: []
        }
    },
    created: function () {
        this.initData()
    },
    methods: {
        initData: function () {
            var arr = []
            this.list.forEach(function (item, index) {
                var i = JSON.parse(JSON.stringify(item))
                i.selected = false
                arr.push(i)
            })
            this.selectList = arr
        },
        setState: function (arr) {
            this.selectList.forEach(function (item) {
                if (arr.indexOf(item.label) !== -1 || arr.indexOf(item.value) !== -1) {
                    item.selected = true
                } else {
                    item.selected = false
                }
            })
            this.selectedList = this.getState()
        },
        getState: function () {
            var arr = []
            this.selectList.forEach(function (item) {
                if (item.selected) {
                    arr.push(item.value)
                }
            })
            return arr
        },
        onChange: function () {
            this.selectedList = this.getState()
            this.$emit('change', this.selectedList)
        },
        changeState: function (item) {
            if (!this.multi) {
                this.selectList.forEach(function (c) {
                    c.selected = false
                })
                item.selected = !item.selected
            }
            this.onChange()
        }
    }
}