<template>
  <div class="header_right_warp">
    <div class="header_right_main">
      <div class="tenant_warp" v-if="tenantList.length">
        <span class="title">企业</span>
        <el-select
          v-model="tenant"
          placeholder="请选择企业"
          @change="changeTenantId"
        >
          <el-option
            v-for="item in tenantList"
            :key="item.tenantId"
            :label="item.tenantName"
            :value="item.tenantId"
          ></el-option>
        </el-select>
      </div>
      <i
        class="fireflyicon msi-dict icon_warp"
        v-if="isShowRule"
        @click="openRule"
      />
      <div v-if="isShowLanguage">
        <i
          class="fireflyicon msi-cn icon_warp"
          v-if="languageNow == 'cn'"
          @click="checkLangeage('tw')"
        />
        <i
          class="fireflyicon msi-tw icon_warp"
          v-else-if="languageNow == 'tw'"
          @click="checkLangeage('cn')"
        />
      </div>
      <i
        v-if="isShowNews"
        class="fireflyicon msi-news icon_warp"
        @click="openNews"
      />
      <el-dropdown @command="handleCommand" trigger="click">
        <div class="info_warp">
          <div class="info">
            <el-image :src="avatarInfo">
              <i slot="error" class="fireflyicon msi-user icon_avatar" />
            </el-image>
          </div>
          <span>{{ name || "暂无" }}</span>
          <i class="fireflyicon msi-pull-down icon_pull" />
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item class="check_item">{{ name }}</el-dropdown-item>
            <el-dropdown-item command="toPersonal">个人中心</el-dropdown-item>
            <el-dropdown-item command="toChange">修改密码</el-dropdown-item>
            <el-dropdown-item divided command="quit">退出</el-dropdown-item>
          </el-dropdown-menu>
        </div>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "fireflyHeaderRight",
  components: {},
  props: {
    //传递过来头像信息
    avatarInfo: {
      type: String,
      default: null,
    },
    //传递过来选择的企业id
    tenantId: {
      type: String,
      default: null,
    },
    // 企业数组
    tenantList: {
      type: Array,
      default: () => [],
    },
    // 开启翻译功能
    isShowLanguage: {
      type: Boolean,
      default: false,
    },
    // 开启说明规则
    isShowRule: {
      type: Boolean,
      default: false,
    },
    // 开启信息功能
    isShowNews: {
      type: Boolean,
      default: false,
    },
    language: {
      type: String,
      default: "cn",
    },
    // 当前人名字
    name: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tenant: this.tenantId,
      languageNow: this.language,
    };
  },
  watch: {
    language: {
      handler(newVal) {
        this.languageNow = newVal;
      },
      immediate: true,
      deep: true,
    },
    tenantId: {
      handler(newVal) {
        this.tenant = newVal;
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    //打开规则
    openRule() {
      this.$emit("openRule");
    },
    //打开提醒信息
    openNews() {
      this.$emit("openNews");
    },
    //选择企业
    changeTenantId(type) {
      this.$emit("update:tenantId", type);
      this.$emit("changeTenantId", type);
    },
    //修改语言
    checkLangeage(type) {
      this.languageNow = type;
      this.$emit("checkLangeage", type);
    },
    //个人信息功能
    handleCommand(type) {
      switch (type) {
        case "toPersonal":
          this.$emit("toPersonal", type); //选择企业功能
          break;
        case "toChange":
          this.$emit("toChange", type); //选择企业功能
          break;
        case "quit":
          this.$emit("quit", type); //选择企业功能
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../css/fireflyHeaderRight.scss";
</style>
