<template>
  <div class="dsk-table-header-setting">
    <div class="event-target-container" @click="showHeaderSetting">
      <svg-icons :icon-class="'table-header-setting-icon'" :class-name="'table-header-setting-icon'"></svg-icons>
      <div class="table-header-setting-text">表头设置</div>
    </div>
    <transition appear name="head" mode="out-in">
      <setting-bar v-if="showHeaderSettingStatus" :settingList="settingList" @settingChange="settingChange"
        @settingClose="showHeaderSettingStatus = false"></setting-bar>
    </transition>
  </div>
</template>
<script>
import svgIcons from "@/components/SvgIcon";
import SettingBar from "./components/SettingBar";
export default {
  components: {
    svgIcons,
    SettingBar
  },
  name: "dskTableHeaderSetting",
  props: {
    settingList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showHeaderSettingStatus: false
    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    showHeaderSetting() {
      if (this.showHeaderSettingStatus) {
        this.showHeaderSettingStatus = false;
        return;
      };
      this.showHeaderSettingStatus = true;
    },
    settingChange(use) {
      this.$emit("settingChange", use);
    }
  },
}
</script>
<style lang="scss" scoped>
.dsk-table-header-setting {
  display: flex;
  align-items: center;
  position: relative;

  &:hover {
    .table-header-setting-text {
      color: #0081ff;
    }
    .table-header-setting-icon {
      fill: #0081ff;
    }
  }

  .event-target-container {
    display: flex;
    align-items: center;
  }

  .table-header-setting-icon {
    cursor: pointer;
  }

  .table-header-setting-text {
    color: rgba(35, 35, 35, 0.8);
    font-size: 14px;
    margin-left: 6px;
    cursor: pointer;
  }
}
</style>
