<!-- @desc:过滤的按钮  @auth:周兴  @time:2023/3/22 16:41 -->
<template>
  <div style="display: flex" class="btn btn-draggable">
    <div style="width: 100%">
      <SelectPop style="width: 100%" v-model="model" :multiple="multiple" ref="pop"
                 :labelKey="labelKey"
                 :valueKey="valueKey"
                 :options="options"
                 :show-all-flag="false"
                 :show-clear-flag="false"
                 @on-select="handleSelect">
      </SelectPop>
    </div>
    <DkButton ref="button" class="btn-class" size="small">{{
        title
      }}
      <Icon type="md-arrow-dropup" v-if="openFlag && filter && !disabled" @click.stop="handleSelectPop()"/>
      <Icon type="md-arrow-dropdown" v-if="!openFlag && filter && !disabled" @click.stop="handleSelectPop()"/>
    </DkButton>
  </div>
</template>

<script>
export default {
  name: "dk-filter-button",
  props: {
    // 组件的值
    value: {
      type: [String, Number, Array],
      default: null
    },
    //组件选项
    options: {
      type: Array,
      default: () => []
    },
    //是否多选
    multiple: {
      type: Boolean,
      default: true
    },
    //显示列的列名
    labelKey: {
      type: String,
      default: 'label'
    },
    //value列的列名
    valueKey: {
      type: String,
      default: 'value'
    },
    // 是否进行过滤
    filter: {
      type: Boolean,
      default: true
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      openFlag: false,
      model: null,
      width: '100%',
      showPop: false
    }
  },
  watch: {
    model(n, o) {
      this.$emit('input', n)
    },
    value(n, o) {
      this.model = n;
    }
  },
  methods: {
    /**
     * @desc   : 选择数据
     * @author : 周兴
     * @date   : 2023/3/23 11:07
     */
    handleSelect(e) {
      this.$emit('on-select', e)
    },
    /**
     * @desc   : 打开关闭弹窗
     * @author : 周兴
     * @date   : 2023/3/23 11:07
     */
    handleSelectPop() {
      this.openFlag = !this.openFlag;
      // 打开selectPop
      if (this.openFlag) {
        this.$refs['pop']?.$refs['select']?.openNow()
      } else {
        // 关闭selectPop
        this.$refs['pop']?.$refs['select']?.close()
      }
    }
  },
  mounted() {
  },
  created() {
    this.model = this.value;
  }
}
</script>

<style scoped>
/deep/ .ivu-btn .ivu-icon-md-arrow-dropdown {
  display: inline-block;
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  right: 10px;
  top: 50%;
  margin-top: -3px;
  cursor: pointer;
  border: 6px dashed transparent;
  border-top-color: #C2C2C2;
  border-top-style: solid;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

/deep/ .ivu-btn .ivu-icon-md-arrow-dropup {
  display: inline-block;
  overflow: hidden;
  position: absolute;
  transform: rotate(180deg);
  width: 0;
  height: 0;
  right: 10px;
  top: 50%;
  margin-top: -9px;
  cursor: pointer;
  border: 6px dashed transparent;
  border-top-color: #C2C2C2;
  border-top-style: solid;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.btn-draggable {
  cursor: move !important;
  z-index: 4999;
  padding: 0;
  width: 80px;
  height: 28px;
  border: none;
}

.btn-class{
  height: 28px;
  position: absolute;
  width: calc(100% - 10px);
}
</style>
