/**
* select多选组件
* selectVal为以下结构:[{
* value: '1',
* label: 'New York'
*}]
 */
<template>
  <div
    class="select-component"
  >
    <Input
      :value="intVal"
      :icon="!showSlect ? 'ios-arrow-down' : 'ios-arrow-up'"
      :size="size"
      :disabled="disabled"
      :placeholder="placeholder"
      :style="{'width':width + 'px'}"
      @click.prevent.native="handleClick"
      @on-click.stop="handleClick"
      @on-clear="handleClear"
    />
    <div
      v-if="showSlect"
      class="toggle-select"
    >
      <div v-if="dataList.length > 0">
        <div
          class="checkbox-main"
        >
          <Checkbox
            :indeterminate="indeterminate"
            :value="checkAll"
            @click.prevent.native="handleCheckAll"
          >
            {{$t('全选')}}
          </Checkbox>
        </div>
        <CheckboxGroup
          v-model="checkAllGroup"
          class="checkbox-group"
          @on-change="checkAllGroupChange"
        >
          <p
            v-for="item in dataList"
            :key="item.value"
          >
            <Checkbox :label="item.label">
              {{ item.label }}
            </Checkbox>
          </p>
        </CheckboxGroup>
      </div>
      <div class="nodata" v-else>{{$t('暂无数据')}}</div>
      <div class="btns">
        <Button
          type="warning"
          size="small"
          @click="save"
          v-if="dataList.length > 0"
        >
          {{$t('确定')}}
        </Button>
        <Button
          type="default"
          size="small"
          @click="close"
        >
          {{$t('取消')}}
        </Button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SelectMultiple',
  props: {
    width: {
      type: [Number, String],
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    // 要显示在文本框的值
    selectVal: {
      type: Array,
      default() {
        return [];
      }
    },
    placeholder: {
      type: String,
      default() {
        return this.$t('请选择');
      }
    },
    size: {
      type: String,
      default: 'default'
    },
    selectDataList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      indeterminate: false,
      checkAll: false,
      checkAllGroup: [],
      showSlect: false,
      dataList: this.selectDataList,
      intVal: ''
    };
  },
  computed: { },
  created() {
    this.int();
  },
  methods: {
    // 初始化操作
    int() {
      const val = [];
      this.selectVal.forEach(item => {
        val.push(item.label);
        this.checkAllGroup.push(item.label);
        this.checkAllGroupChange(this.checkAllGroup);
      });
      this.intVal = val.join(',');
    },

    // 全选操作
    handleCheckAll() {
      if (this.indeterminate) {
        this.checkAll = false;
      } else {
        this.checkAll = !this.checkAll;
      }
      this.indeterminate = false;

      if (this.checkAll) {
        const allData = [];
        this.dataList.forEach(item => {
          allData.push(item.label);
        });
        this.checkAllGroup = allData;
      } else {
        this.checkAllGroup = [];
      }
    },

    // 复选框操作
    checkAllGroupChange(data) {
      if (data.length === this.dataList.length) {
        this.indeterminate = false;
        this.checkAll = true;
      } else if (data.length > 0) {
        this.indeterminate = true;
        this.checkAll = false;
      } else {
        this.indeterminate = false;
        this.checkAll = false;
      }
    },

    // 点击input事件
    handleClick() {
      console.log('事件11')
      if (this.disabled || this.showSlect) return;
      this.showSlect = true;
    },

    // 确认操作
    save() {
      const selectData = JSON.parse(JSON.stringify(this.checkAllGroup));
      const selectTitArr = [];
      // if (selectData.length < 1) {
      //   this.$Message.warning(this.$t('请选择至少一条数据'));
      //   return;
      // }
      selectData.forEach(element => {
        selectTitArr.push(element);
      });
      this.setoutData(selectTitArr)
      this.close();
    },

    // 组装抛出数据
    setoutData(data = []) {
      const outData = [];
      this.dataList.forEach(item => {
        if (data.includes(item.label)) {
          outData.push(item);
        }
      });
      this.$emit('dataSelectChange', outData);
      this.intVal = data.join(',');
    },

    // 取消操作
    close() {
      this.showSlect = false;
      this.checkAllGroup = this.intVal ? this.intVal.split(',') : [];
      this.checkAllGroupChange(this.checkAllGroup);
    },

    // 清除数据
    handleClear() {
      console.log('事件22')
      this.checkAllGroup = [];
      this.checkAllGroupChange(this.checkAllGroup);
      this.setoutData(this.checkAllGroup);
    }
  }
};
</script>
<style lang="less" scoped>
.select-component{
  position: relative;
  .toggle-select{
    position:absolute;left:0; width:100%; padding:10px;background:#fff
  }
  .checkbox-group{
    max-height:150px; overflow:hidden; overflow-y:auto;
    p:hover{
      background: #fcfcfc;
    }
  }
  .checkbox-main{
      border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;
  }
  .btns{
    margin-top: 10px;
    button{
      margin-right:10px;
    }
  }
  .nodata{
    color: #999;
  }
}

</style>