<template>
  <a-card :hoverable="!disabled" :bodyStyle="disabled?{'background-color': 'rgba(242, 242, 242, 1)'}:''" @click="gotoMenu()">
    <a-row>
    <a-col :span="4">
        <a-avatar :size="48" :src="imgsrc" />
    </a-col>
    <a-col :span="10">
        <a-row>
        <a-col>
            <div style="font-weight: 700;font-size: 16px;line-height: 24px;">{{ menuName }}</div>
        </a-col>
        <a-col>
            <div style="margin-top:10px;color: rgba(0, 0, 0, 0.447058823529412)">{{ menuDesc }}</div>
        </a-col>
        </a-row>
    </a-col>
    <a-col :span="10">
        <a-row>
        <a-col>
            <div style="color: #009DFF;text-align: right">{{ menuNow }}</div>
        </a-col>
        <a-col>
            <div style="margin-top:10px;color: rgba(0, 0, 0, 0.447058823529412);text-align: right">{{ menuCount }}项</div>
        </a-col>
        </a-row>
    </a-col>
    </a-row>
  </a-card>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    props:{
      imgsrc: {
        type: String,
        default: 'resource/img/default.png'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      menuUrl: {
        type: String,
        default: '/404'
      },
      menuName: String,
      menuDesc: String,
      menuNow: String,
      menuCount: Number
    },
    methods: {
      gotoMenu() {
        if(!this.disabled){
          this.$router.push(this.menuUrl)
        }
      }
    }
  });
</script>