<template>
  <div class="select-item">
    <div class="select-checked">
      <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" /> <span>{{nowSelectKeys.length}} 项</span>
    </div>
    <div class="select-content">
      <ul class="data-list-content">
        <li v-for="(item,index) in dataList" :key="item.key" @click="onChange(item,index)" class="data-list-content-item">
          <input type="checkbox" class="list-checkbox-input" :checked="item.selected" :disabled="item.disabled">
          <span style="font-size:8pt;" :title="item.description" :class="{'font-red':item.disabled}">
            <span>{{item.title}}<span style="font-style: italic;color: #8e99a5;" :class="{'font-red':item.disabled}">({{item.description}})</span></span>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'selectItem',
  components: {

  },
  data () {
    return {
      selectKeys: [],
      nowSelectKeys: [],
      indeterminate: false,
      checkAll: false,
    }
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  created () {
    this.selectKeys = this.value
    this.initData()
  },
  methods: {
    getStyle (value) {
      return {
        color: value ? 'red' : 'black'
      };
    },
    onChange (e) {
      if (!e.disabled) {
        e.selected = !e.selected
        if (e.selected) {
          this.selectKeys.push(e)
        } else {
          for (let j = 0; j < this.selectKeys.length; j++) {
            if (e.key == this.selectKeys[j].key) {
              this.selectKeys.splice(j, 1)
              break
            }
          }
        }
        this.initData()
        this.$emit("input", this.selectKeys)
      }
    },
    onCheckAllChange (e) {
      if (e.target.checked) {
        for (let i = 0; i < this.dataList.length; i++) {
          this.dataList[i].selected = e.target.checked
          let state = false;
          for (let j = 0; j < this.selectKeys.length; j++) {
            if (this.dataList[i].key == this.selectKeys[j].key) {
              state = true
              break
            }
          }
          if (!state) {
            this.selectKeys.push(this.dataList[i])
          }
        }
      }
      else {
        for (let i = 0; i < this.dataList.length; i++) {
          this.dataList[i].selected = e.target.checked
          for (let j = 0; j < this.selectKeys.length; j++) {
            if (this.dataList[i].key == this.selectKeys[j].key) {
              this.selectKeys.splice(j, 1);
            }
          }
        }
      }
      this.initData()
      this.$emit("input", this.selectKeys)
    },
    initData () {
      this.nowSelectKeys = []
      for (let i = 0; i < this.dataList.length; i++) {
        if (this.dataList[i].selected) {
          this.nowSelectKeys.push(this.dataList[i])
        }
      }
      this.indeterminate = !!this.nowSelectKeys.length && this.nowSelectKeys.length < this.dataList.length
      this.checkAll = this.nowSelectKeys.length === this.dataList.length && this.nowSelectKeys.length > 0
    }
  },
  watch: {
    dataList: {
      handler (dataList) {
        this.initData()
      },
    },
  }
}
</script>
 <style scoped lang="less">
.font-red {
  color: red !important;
}
.select-item {
  position: relative;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  border-radius: 4px;
  .select-checked {
    width: 100%;
    height: 40px;
    padding: 8px 5px 9px;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.65);
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 4px 4px 0 0;
  }
  .select-content {
    width: 100%;
    height: calc(100% - 40px);
    overflow-x: hidden;
    overflow-y: auto;
    ul {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: auto;
      list-style: none;
    }
    ul li {
      height: 24px;
      padding: 0px 4px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: all 0.3s;
      overflow: hidden;
      cursor: pointer;
    }
    ul li:hover {
      background-color: rgb(230 247 255);
    }
    ul li > span {
      padding-left: 4px;
      cursor: pointer;
      margin: 0;
      vertical-align: middle;
    }
    ul li input {
      display: inline-block;
      vertical-align: middle;
    }
    .list-checkbox-input {
      width: 14px;
      height: 14px;
      cursor: pointer;
    }
  }
}
</style>