<template>
  <div style="display: flex">
    <el-select v-model="data" placeholder="请选择要触发事件" style="width: 100%">
      <el-option
        v-for="item in eventData"
        :key="item.value"
        :label="item.label+'（'+item.value+'）'"
        :value="item.value"
      >
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
      </el-option>
    </el-select>
    <el-button type="default" :loading="loading" @click="updateEvent">刷新</el-button>
  </div>
</template>

<script>
import { clearEventData, getEventData } from '../../utils/event_data'
import VueBus from '../../../../utils/vue-bus'

export default {
  name: 'DkEventSelectInput',
  props: {
    value: {
      default: '',
      type: String
    },
    placeholder: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      data: '',
      loading: false,
      eventData: []
    }
  },
  computed: {},
  watch: {
    data() {
      this.$emit('input', this.data)
    }
  },
  created() {
    VueBus.$on('updateDiyEvent', this.updateEventData)
  },
  mounted() {
    this.data = this.value || ''
    this.updateEvent()
  },
  methods: {
    updateEvent() {
      this.loading = true
      clearEventData()
      VueBus.$emit('updateDiyEvent')
      setTimeout(() => {
        this.loading = false
      }, 100)
    },
    updateEventData() {
      this.eventData = getEventData()
    },
    onClick() {
      this.data = this.randomString(10)
    },
    randomString(e) {
      e = e || 32
      var t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      var a = t.length
      var n = ''
      for (var i = 0; i < e; i++) {
        n += t.charAt(Math.floor(Math.random() * a))
      }
      return n
    }
  }
}
</script>

<style scoped lang="scss">
.dk-select-append{
  background-color: #f5f7fa;
  color: #46b8da;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 20px;
  width: 1px;
  white-space: nowrap;
}
</style>
