<template>
  <div class="setting-wrap">
    <div class="chosed-title" v-show="isMultipleTemp && chosedLimit > 0">
      已选中{{ chosedTip }}{{ chosedLimit }}篇
    </div>
    <div class="setting-icon" v-show="!isMultipleTemp">
      <Sort :actions="sortPopoverActions" @onChangeSort="onClickSortIcon" />
    </div>
    <div class="setting-icon">
      <Multiple v-model="isMultipleTemp" @onClick="onClickMultipleIcon" />
    </div>
  </div>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:19:49
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2021-11-01 19:23:58
 */
import Sort from "./components/Sort/index.vue";
import Multiple from "./components/Multiple/index.vue";
export default {
  name: "MtOperIcon",
  components: { Sort, Multiple },
  props: {
    isMultiple: {
      type: Boolean,
      default: false,
    },
    chosedLimit: {
      type: Number,
      default: 0,
    },
    sortPopoverActions: {
      type: Array,
      default: () => {
        return [];
      },
    },
    chosedTip: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isMultipleTemp: false,
    };
  },
  methods: {
    onClickSortIcon(item) {
      this.$emit("onClickSortIcon", item);
    },
    onClickMultipleIcon(bool) {
      this.$emit("onClickMultipleIcon", bool);
    },
  },
  watch: {
    isMultiple: {
      handler(val) {
        this.isMultipleTemp = val;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.setting-wrap {
  @extend %flex-middle;
  .setting-icon {
    cursor: pointer;
  }
  .chosed-title {
    color: #1c9fff;
  }
}
</style>
