<template>
  <el-table-column
    :type="type"
    :selectable="selectable"
    :label="label"
    :prop="prop"
    :align="align"
    :min-width="minWidth"
    :show-overflow-tooltip="showOverflow"
  >
    <template #header="{row,$index}">
      <slot name="header">
        <span style="color: red" v-if="required">*</span>
        <span>{{label}}</span>
      </slot>
    </template>
    <template #default="{ row, $index }">
      <slot :row="row" :index="$index">
        <div v-if="showRadius" :class="radiusClass?radiusClass:initClass(row[prop])"></div>
        {{ dictFormatter(row,row[prop]) || emptyText }}
      </slot>
    </template>

  </el-table-column>
</template>

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

export default {
  name: "CustomDictColumn",
  props: {
    type: {
      type: String,
      default: "",
    },
    selectable: {
      type: Function,
    },
    label: {
      type: String,
      default: "",
    },
    prop: {
      type: String,
    },
    minWidth: {
      type: Number,
      default: 0,
    },
    emptyText: {
      type: String,
    },
    dictType: {
      type: String,
      required: true,
    },
    align: {
      type: String,
      default: 'center',
    },
    showOverflow:{
      type: Boolean,
      default: false,
    },
    required:{
      type:Boolean,
      default:false
    },
    radiusClass:{
      type:Object,
      default:()=>{}
    },
    showRadius:{
      type:Boolean,
      default:false
    }
  },
  computed: {
    ...mapGetters(["dict"]),
  },
  methods: {
    dictFormatter(row, cellValue) {
      const dicts = this.dict[this.dictType] || [];
      const target = dicts.filter(
        ({ value }) => String(value) === String(cellValue)
      );
      return target && target.length > 0 ? target[0].label : "";
    },
    initClass(value){
       switch (value){
         case '2':
           return 'success';
         case '3':
           return'reject'
       }
    }
  },
};
</script>

<style scoped>

.success{
  background-color: rgba(65, 155, 7, 1);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin-top: 4px;
}

.reject{
  background-color: rgba(231, 74, 74, 1);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin-top: 4px;
}

</style>

