<template>
	<div class="xd-check-group" v-if="uiList.length > 0">
		<div
			class="xd-check-group__item"
			v-for="(item,index) in uiList"
			:key="item.value"
		>
			<div class="xd-check-group__item-input">
				<el-checkbox :key="item.select" :disabled="disabled || item.disabled" v-model="item.select" @change="handleChange"></el-checkbox>
			</div>
			<slot :row="item">
				<div class="xd-check-group__item-label" :class="{is_check : item.select, is_disabled: disabled || item.disabled}" @click="handleClick(item)">{{item.label}}</div>
				<div class="xd-check-group__item-notice" v-html="item.notice" v-if="item.notice"></div>
			</slot>
			<div v-if="isClose && !disabled" class="xd-check-group__item-close" @click="handleClose(index,item.value)">
				<i class="el-icon-circle-close"></i>
			</div>
		</div>
	</div>
</template>

<script>
  import emitter from 'element-ui/src/mixins/emitter';
  export default {
    name: "XdCheckGroup",
		mixins: [emitter],
		props: {
      disabled: {
        type: Boolean,
				default: false
			},
			defaultValue: {
        type: Array | null,
        default: null
			},
      list: {
        type: Array|null,
				required: true,
			},
			isClose: {
        type: Boolean,
        default: true
			}
		},
		data(){
      return {
        uiList: [],
				testData: [
					{label: '显示', value: 1, notice: ''},
          {label: '隐藏', value: 2, notice: ''},
				]
			}
		},
		watch:{
      list:{
        handler(value){
          if(this.$xdHelper.checkVarType(value) ==='array' && value.length > 0) {
            this.uiList = this.list.map(item => {
              return {...item, select: this.getDefaultValue(item.value)}
            });
					}
          if(this.list === null) {
            this.uiList = this.testData.map(item => {
              return {...item, select: false}
            });
					}
          this.update(true);
				},
				immediate: true
			}
		},

		methods:{

      handleClose(index, value){
      	this.uiList.splice(index,1);
      	this.update(true, index, value);
			},

      getDefaultValue(value) {
        if(this.defaultValue === null) return false;
        return this.defaultValue.filter(item=>{
          return value === item;
				}).length > 0
      },

      handleClick(item){
        if(item.disabled || this.disabled) return;
      	item.select = !item.select;
      	this.handleChange(item.select)
			},

      handleChange(value){
      	this.update()
			},

			update(isChange = true, index = null, value = null){
        //console.log(this.$parent.$options);
        //console.log(this.$parent.$options['componentName']);
        let select = this.uiList.filter(item=>{
          return item.select;
				}).map(item=>{
          return item.value;
				});
				this.$emit('input', select);
        if (isChange) this.$emit('change', select);
        if(index !== null && this.isClose) this.$emit('close', {index, value} );
        if (this.$parent.$options['componentName'] === 'ElFormItem') {
          this.dispatch('ElFormItem', 'el.form.change', [select]);
          this.dispatch('ElFormItem', 'el.form.blur', [select])
        }

			}
		}
  }
</script>

<style scoped lang="scss">
	.xd-check-group {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-flow: wrap;

		&__item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-flow: nowrap;
			position: relative;
			line-height: 22px;
			margin-right: 20px;


			&-input {
				margin-right: 10px;
			}

			&-label {
				font-size: 14px;
				color: #333;
				cursor: pointer;
				margin-right: 10px;

				&.is_check {
					color: $blue;

				}

				&.is_disabled {
					cursor: not-allowed;
					color: $disabled;
				}
			}

			&-close {
				font-size: 12px;
				position: absolute;
				right: -10px;
				top: 0;
				cursor: pointer;
				opacity: 0;
				width: 16px;
				height: 16px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #999;
			}

			&:hover {
				.xd-check-group__item-close {
					transition: opacity .4s;
					opacity: .8;
				}
			}

			&-notice {
				font-size: 12px;
				color: #999;
			}
		}
	}
</style>
