<template>
  <el-table-column :type="type" :selectable="selectable" :label="label" :prop="prop" :min-width="minWidth"
    :formatter="dictFormatter" :align="align" :width="width" />
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "DictColumn",
  props: {
    type: {
      type: String,
      default: "",
    },
    selectable: {
      type: Function,
    },
    label: {
      type: String,
      default: "",
    },
    prop: {
      type: String,
    },
    width: {
      type: Number,
    },
    minWidth: {
      type: Number,
      default: 120,
    },
    dictType: {
      type: String,
      required: true,
    },
    align: {
      type: String,
      default: 'left'
    },
  },
  computed: {
    ...mapGetters(["dictMap","dict"]),
  },
  methods: {
    dictFormatter(row, column, cellValue) {
      const dicts = this.dict[this.dictType] || [];
      // console.log(this.dict)
      // const dicts = this.dict["intentional_product"];
      const target = dicts.filter(
        ({ value }) => String(value) === String(cellValue)
      );
      const currentLocale = window.VueI18n.locale;
      let labelField = "label"
      if (currentLocale === 'chinese') {
        labelField = "label";
      }
      if (currentLocale === 'english') {
        labelField = "dictLabelUS";
      }
      if (currentLocale === 'russia') {
        labelField = "dictLabelRU";
      }
      if (currentLocale === 'spanish') {
        labelField = "dictLabelES";
      }
      return target && target.length > 0 ? target[0][labelField] : "";
    },

  },
};
</script>
