<template>
  <span>
    <el-tag v-if="showTag" :type="tagType">{{ dictText }}</el-tag>
    <span v-else>{{ dictText }}</span>
  </span>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "DictText",
  props: {
    // 字典名称，必填
    name: {
      type: String,
      default: "",
      require: true,
    },
    // 字典值，必填
    dictValue: {
      type: String,
      default: "",
      require: true,
    },
    // 是否要展示为tag
    showTag: {
      type: Boolean,
      default: false,
    },
    // 标签类别，非必填
    tagType: {
      type: String,
      default: "primary",
    },
  },
  computed: {
    ...mapGetters(["dicts"]),
  },
  data() {
    return {
      dictText: "", //最终翻译显示的文本
    };
  },
  async created() {
    const { name, dictValue } = this;
    await this.getDictList([name]);
    this.dictText = this.dicts[name][dictValue];
  },
  methods: {
    ...mapActions("dict", ["getDictList"]),
  },
};
</script>
<style scoped lang="scss"></style>
