<template>
  <div class="layout-data-page">
    <div class="data-header">
      <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" /> <span>{{nowSelectKeys.length}} 项</span>
    </div>
    <div class="data-list-body">
      <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">
          <span>
            <span style="font-size:14px;">{{item.title}}<span style="margin-left:4px;font-style: italic;font-size: 12px;color: #8e99a5;">({{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: {
    onChange (e) {
      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">
.layout-data-page {
  position: relative;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  border-radius: 4px;
  .data-header {
    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;
  }
  .data-list-body {
    width: 100%;
    height: calc(100% - 40px);
    overflow-x: hidden;
    overflow-y: auto;
    .data-list-content {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: auto;
      list-style: none;
    }
    .data-list-content-item {
      position: relative;
      height: 24px;
      padding: 3px 2px 2px 5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: all 0.3s;
      overflow: hidden;
      cursor: pointer;
      .list-checkbox-input {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }
    .data-list-content-item:hover {
      background-color: rgb(230 247 255);
    }
    .data-list-content-item > span {
      position: absolute;
      top: 0;
      margin-left: 4px;
    }
  }
}
</style>