<!--
 * @Author: Badguy
 * @Date: 2022-05-17 15:56:46
 * @LastEditTime: 2022-05-17 18:53:52
 * @LastEditors: your name
 * @Description: 时区下拉选择菜单
 * have a nice day!
-->
<template>
  <el-dropdown :hide-on-click="false" @command="commandHandler">
    <img class="btn-img" src="../../assets/baggage/ic_time.png" />
    <!-- <span class="time-zone-text">{{ currentDropdownItem.text }}</span> -->
    <el-dropdown-menu slot="dropdown" class="time-zone">
      <el-dropdown-item
        v-for="(item, index) in DropdownItems"
        :key="index"
        :class="{ 'time-zone-selected': timeZone === item.command }"
        :command="item.command"
        :disabled="item.disabled"
        >{{ item.text }}</el-dropdown-item
      >
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "TimeZoneSelector",
  data() {
    return {
      DropdownItems: [
        {
          text: "国内Local/国际UTC",
          disabled: true,
        },
        {
          text: "Local",
          command: 8,
        },
        {
          text: "UTC",
          command: 0,
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["timeZone"]),
    currentDropdownItem() {
      return this.DropdownItems.find((item) => item.command === this.timeZone);
    },
  },
  methods: {
    commandHandler(command) {
      this.$store.dispatch("timeZone/setTimeZone", command);
    },
  },
};
</script>

<style lang="scss" scoped>
.time-zone {
  .el-dropdown-menu__item {
    padding-left: 30px;
    font-family: Helvetica, "Microsoft YaHei";
    font-size: 12px;
    color: #101116;
    position: relative;
    &.is-disabled {
      color: #909399;
    }
    &.time-zone-selected::before {
      content: "√";
      position: absolute;
      left: 10px;
    }
  }
}
</style>
