<template>
  <Dropdown
    class="dc-chart-dimension-select-item"
    trigger="click"
    placement="bottom-start"
    @on-visible-change="handleVisibleChange"
  >
    <div :class="['select-box', isVisible ? 'select-box-active' : '']">
      <img class="select-icon" src="@/assets/ic_dimension@2x.png" alt="维度筛选" />
      <span class="select-text">
        {{ label }}
        <span v-if="checkedDimensions.length" class="selected-count">
          {{ checkedDimensions.length }}
        </span>
      </span>
    </div>
    <div class="dropdown-box" slot="list">
      <div class="search-box">
        <Input placeholder="搜索" v-model="searchContent">
          <Icon type="ios-search" slot="prefix" />
        </Input>
      </div>
      <div class="checkbox-box">
        <div v-show="!options.length || notFound" class="option-message">{{ message }}</div>
        <CheckboxGroup v-model="checkedDimensions">
          <Checkbox v-show="isShow(item)" class="checkbox-item" v-for="item in options" :key="item" :label="item">
            {{ item }}
          </Checkbox>
        </CheckboxGroup>
      </div>
      <div class="option-box">
        <Checkbox :value="isCheckAll" @on-change="handleCheckAll">全选</Checkbox>
        <span class="reset-text" @click="handleReset">重置</span>
      </div>
    </div>
  </Dropdown>
</template>

<script>
import { isEqual } from 'lodash-es';

export default {
  name: 'ChartDimensionFilter',
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    label: {
      type: String,
    },
    options: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
    },
  },
  data() {
    return {
      searchContent: '',
      isVisible: false,
      tmpData: null,
    };
  },
  computed: {
    filteredOptions() {
      if (!this.searchContent) {
        return this.options;
      }
      return this.options.filter(x => x.toLowerCase().includes(this.searchContent.toLowerCase()));
    },
    checkedDimensions: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    isCheckAll() {
      return this.filteredOptions.every(item => this.checkedDimensions.includes(item));
    },
    message() {
      if (this.loading) {
        return '加载中...';
      }
      return '暂无数据';
    },
    notFound() {
      return this.filteredOptions.length === 0;
    },
  },
  methods: {
    handleVisibleChange(visible) {
      this.isVisible = visible;
      if (!visible) {
        // dropdown消失时
        if (!isEqual(this.tmpData, this.value)) {
          this.$emit('on-dimension-change');
        }
        setTimeout(() => {
          this.searchContent = '';
        }, 200);
      } else {
        this.tmpData = [...this.value];
      }
    },

    handleReset() {
      this.checkedDimensions = [];
      this.searchContent = '';
    },

    handleCheckAll(val) {
      if (val) {
        this.checkedDimensions = [...this.filteredOptions];
      } else {
        this.checkedDimensions = [];
      }
    },

    isShow(item) {
      return item.toLowerCase().includes(this.searchContent.toLowerCase());
    },
  },
};
</script>

<style scoped lang="less">
@height: 32px;
.dc-chart-dimension-select-item {
  margin-right: 8px;

  .select-box {
    position: relative;
    height: @height;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    border: 1px solid #dcdee2;
    border-radius: 4px;
    user-select: none;
    &:hover,
    &.select-box-active {
      cursor: pointer;
      border-color: #2978ff;
    }
    .select-icon,
    .select-text {
      vertical-align: middle;
    }
    .select-icon {
      width: 16px;
      height: 16px;
      margin-right: 8px;
    }
    .select-text {
      font-size: 14px;
      font-weight: 400;
      color: #545878;
      line-height: 20px;
      .selected-count {
        display: inline-block;
        width: 30px;
        border-radius: 9px;
        border: 1px solid #dddeea;
        background-color: #eaebf7;
        text-align: center;
      }
    }
  }
  .dropdown-box {
    padding: 6px 0;
    .search-box {
      padding: 0 8px 6px;
    }
    .checkbox-box {
      max-height: 200px;
      width: 300px;
      overflow: auto;
      padding-left: 8px;
      .option-message {
        padding: 4px 8px;
      }
      .checkbox-item {
        display: block;
        padding: 6px 8px;
        word-break: break-all;
        &:hover {
          background-color: #eeeffb;
        }
      }
    }
    .option-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 16px 0;
      border-top: 1px solid #eeeffb;
      .reset-text {
        color: #2978ff;
        &:hover {
          color: tint(#2978ff, 20%);
          cursor: pointer;
        }
      }
    }
  }
}
</style>
