Untitled

<template>
  <div>
    <el-form-item
      :label="label"
      :label-width="labelWidth"
      :prop="propForm"
      :required="required"
      :rules="rules"
    >
      <span v-if="requiredLabelOnly" slot="label">{{ label }} <span style="color: red">*</span> </span>
      <el-select
        :id="id || propForm"
        ref="selectVehicleStatus"
        v-model="valueSync"
        :clearable="clearable"
        :default-first-option="defaultFirstOption"
        :disabled="disabled"
        :filterable="filterable"
        :loading="loading"
        :multiple="multiple"
        :placeholder="placeholder ? placeholder : label"
        :popper-class="popperClass"
        style="width: 100%"
        @blur="$emit('blur')"
        @change="onChange"
        @clear="onClear"
        @focus="onFocus"
      >
        <el-option v-if="isShowOptionAll && !isShowOptionAllCustom && !multiple" :label="labelOption" :value="''" />
        <el-option v-if="isShowOptionAllCustom " :label="labelOption" :value="'empty'" />
        <el-option v-if="isShowOptionAll && multiple" :label="labelOption" :value="'all'" />
        <el-option
          v-for="item in listData"
          :key="item.itemCode"
          :label="item.itemValue"
          :value="item.itemCode"
        >
          <img :src="getIconUrl(item.itemProp1)" style="position: absolute; margin-top: 8px" />
          <span style="padding-left: 20px">{{ item.itemValue }}</span>
        </el-option>
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
import { DM_APP_PARAM } from '@etc/core/src/utils/ECustomsUtils'
import { getCache } from '@etc/core/src/frames/CacheFactory'

export default {
  props: {
    id: String,
    value: {
      type: [String, Number, Array],
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    },
    groupCode: {
      type: String,
      default: ''
    },
    popperClass: {
      type: String,
      default: ''
    },
    isShowOptionAllCustom: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    filterable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array,
      default: () => {
      }
    },
    propForm: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: String,
      default: ''
    },
    labelOption: {
      type: String,
      default: 'Tất cả'
    },
    requiredLabelOnly: Boolean, /* trick required*/
    defaultFirstOption: Boolean,
    isShowOptionAll: { /* thêm option tất cả*/
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      listData: [],
      loading: false
    }
  },
  computed: {
    valueSync: {
      get() {
        if (!isNaN(parseFloat(this.value)) && isFinite(this.value) && !this.multiple) {
          return this.value.toString()
        }
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    valueSync: {
      handler(newVal) {
        if (!newVal && this.defaultFirstOption && this.listData?.length > 0) {
          this.valueSync = this.listData[0].itemCode
        }
        if (newVal.includes('all') && this.multiple) {
          this.valueSync = this.listData.map(e => e.itemCode)
          this.$refs.selectVehicleStatus.blur()
        }
      },
      immediate: true
    }
  },
  created() {
    if (!this.listData.length) {
      setTimeout(() => {
        this.onLoadList()
      }, 200)
    }
  },
  methods: {
    onLoadList() {
      this.loading = true
      const DM_APP_PARAM_ALL = getCache(DM_APP_PARAM, Number(process.env.VUE_APP_CACHE_TYPE))
      if (DM_APP_PARAM_ALL && this.groupCode && DM_APP_PARAM_ALL.hasOwnProperty(this.groupCode)) {
        this.loading = false
        this.listData = DM_APP_PARAM_ALL[this.groupCode]
        if (!this.value && this.defaultFirstOption && this.listData?.length > 0) {
          this.valueSync = this.listData[0].itemCode
        }
      } else {
        this.loading = false
        if (!DM_APP_PARAM_ALL) {
          console.warn('Không kết nối được với cơ sở dữ liệu')
        } else {
          console.warn('Chưa nhập tên danh mục hoặc sai tên danh mục (GROUP_CODE). Kiểm tra lại GROUP_CODE:', this.groupCode)
        }
      }
    },
    getIconUrl(vehicleStatus) {
      return process.env.VUE_APP_CONTEXT_ROOT + `/assets/map/images/car/${vehicleStatus}`
    },
    onChange(value) {
      this.$emit('onChange', value)
      this.$emit('change', value)
      this.$emit('input', value)
    },

    onClear() {
      this.$emit('update:value', '')
      this.$emit('clear', '')
    },

    onFocus() {
      this.$emit('focus', '')
    }
  }

}
</script>