<template>
  <div :class="className">
    <!--header-->
    <div :class="headerClassName">
      <Checkbox
        :value="allChecked"
        :indeterminate="indeterminate"
        :disabled="disabled"
        @click="onSelectAll(index)"
      >
        {{ selectKeys.length ? `${selectKeys.length}/` : '' }}
        {{ `${data.length}${unit}` }}
      </Checkbox>
      <span :class="prefixClassName+'-header-title'">{{ title }}</span>
    </div>
    <!--/header-->
    <div :class="mainClassName">
      <SelectSearch
        v-if="searchFlag"
        :prefixClass.sync="prefixClass"
        :searchValue.sync="searchValue"
        :disabled.sync="disabled"
        :index.sync="index"
        :onSearch="onSearch"
      />
      <div :class="prefixClassName+'-main-content'">
        <ul :class="prefixClassName+'-main-content-list'" v-if="!notFoundNode">
          <li
            :class="[selectItemclassName,{'hive-transfer__select-box-main-content-item--disabled':item.disabled}]"
            v-for="(item,selectItemIndex) in list"
            :key="selectItemIndex"
            @click="onSelect(index,item)"
          >
            <Checkbox
              :disabled="disabled||item.disabled"
              :value="selectKeys.some((key) => key === item.key)"
              @click="onSelect(index,item)"
            />
            <span>{{ item.title }}</span>
          </li>
        </ul>
        <div :class="prefixClassName+'-main-notfound'" v-else>
          <span>暂无数据</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import FormSize from '../scripts/mixins/form-size';
  import WatchCurValue from '../scripts/mixins/wacth-cur-value';
  // import Icon from '../icon';
  import Checkbox from '../checkbox';
  import SelectSearch from './selectSearch';

  const name = 'hive-transfer-selectbox';

  export default {
    name,
    components: {
      // Icon,
      Checkbox,
      SelectSearch,
    },
    mixins: [FormSize, WatchCurValue],
    props: {
      prefixClass: {
        type: String,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      searchFlag: {
        type: Boolean,
        default: false,
      },
      data: {
        type: Array,
        default: function() {
          return [];
        },
      },
      title: {
        type: String,
      },
      searchValue: {
        type: String,
      },
      index: {
        type: Number,
      },
      unit: {
        type: String,
      },
      selectKeys: {
        type: Array,
        default: function() {
          return [];
        },
      },

      onSelect: {
        type: Function,
      },
      onSelectAll: {
        type: Function,
      },
      onSearch: {
        type: Function,
      },
    },
    data() {
      return {
        prefixClassName: `${this.prefixClass}__select-box`,
      };
    },
    computed: {
      className() {
        return [
          `${this.prefixClassName}`,
          {
            [`${this.prefixClassName}--disabled`]: this.joinDisabled,
          },
        ];
      },
      headerClassName() {
        return [
          `${this.prefixClassName}-header`,
          {
            [`${this.prefixClassName}-header--disabled`]: this.joinDisabled,
          },
        ];
      },
      mainClassName() {
        return [
          `${this.prefixClassName}-main`,
          {
            [`${this.prefixClassName}-main--search`]: this.searchFlag,
          },
        ];
      },
      selectItemclassName() {
        return [
          `${this.prefixClassName}-main-content-item`,
          {
            [`${this.prefixClassName}-main-content-item--disabled`]: this.disabled,
          },
        ];
      },
      allChecked() {
        let keys = this.data.filter(item => !item.disabled).map(item => item.key);
        return (
          this.selectKeys &&
          this.selectKeys.length > 0 &&
          this.selectKeys.every(key => keys.some(k => k === key)) &&
          this.selectKeys.length === keys.length
        );
      },
      indeterminate() {
        return this.selectKeys.length > 0;
      },
      list() {
        var that = this;

        // return this.data.map(item => {
        //   if (that.searchValue && item.title.indexOf(that.searchValue) === -1) {
        //     return null;
        //   }
        //   return item;
        // });
        return this.data.filter(item => {
          if (that.searchValue && item.title.indexOf(that.searchValue) === -1) {
            return false;
          }
          return true;
        });
      },
      notFoundNode() {
        return this.list.length === 0;
      },
    },
    watch: {},

    methods: {},
  };
</script>
