<template>
  <div class="function-item" @click="functionDo">
    <img :src="functionIcon">
    <div>\{{ functionName }}</div>
  </div>
</template>

<script>
export default {
  name: 'FunctionItem',
  props: {
    functionIcon: {
      type: String,
      default: '',
    },
    functionName: {
      type: String,
      default: '',
    },
    data: {
      type: Object,
      default: null,
    },
  },
  methods: {
    functionDo () {
      let vm = this
      this.$emit('clickFunction', vm.data)
    },
  },
}
</script>

<style lang="less"  scoped type="text/less">
  .function-item{
    text-align: center;
    img{
      width: 50%;
      margin-bottom: 5px;
    }
    div{
      font-size: 12px;
      margin-bottom:10px;
    }
  }
</style>