<template>
  <div class="btnGroup">
    <template v-if="groupSet.isUtc">
      <el-switch v-model="flag" size="default" style="--el-switch-on-color: #ac014d; --el-switch-off-color: #b1b1b1" @change="
        val => {
          emit('update:flag', val)
        }
      " />
    </template>
    <span class="switch-label" v-if="groupSet.isUtc">开启UTC</span>
    <el-button type="danger" v-if="groupSet.isRefresh" :icon="Refresh" size="default" @click="emit('refresh',true)" />
    <el-button type="danger" v-if="groupSet.isDownLoad" :icon="Share" size="default" @click="emit('downLoad',true)" />
    <el-button type="danger" v-if="groupSet.isColumnSet" :icon="Tools" size="default" @click="emit('columnSet',true);" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Refresh, Share, Tools } from "@element-plus/icons-vue";
const props = defineProps({
  groupSet: {
    type: Object,
    default: {
      isUtc: true,
      isRefresh: true,
      isDownLoad: true,
      isColumnSet: true,
    },
  },
  flag: {
    type: Boolean,
    required: true,
  },
});
const { groupSet } = props;
const emit = defineEmits(["update:flag", "refresh", "downLoad", "columnSet"]);
</script>

<style lang="scss" scoped>
.btnGroup {
  margin-right: 45px;
  .switch-label {
    padding-left: 4px;
  }
  :deep .el-button {
    height: 30px;
    padding: 7px 6px;
    font-size: 16px;
    margin-left: 24px;
  }
}
</style>
