
<style lang="less">
@import './index.less';
</style>

<template>
  <van-grid-item

    :dot="dot"
    :text="text"
    :icon="icon"
    :info="info"
    :url="url"
    :to="to"
    :replace="replace"
    @click="click"
  >
    <slot v-if="$slots.default" />
    <slot v-if="$slots.icon" name="icon" slot="icon" />
    <!-- 重写字体样式 -->
    <slot v-if="!$slots.text && text " slot="text"> <span class="yp-grid-item__text" :style="textStyle">{{ text }}</span> </slot>
    <slot v-else-if="$slots.text" name="text" slot="text" />
  </van-grid-item>
</template>

<script>
import { ChildrenMixin } from '../mixins/relation';
import { GridItem } from 'vant';

export default {
  name: 'grid-item',
  components: {
    VanGridItem: GridItem
  },
  // 继承gridItem的属性
  mixins: [ChildrenMixin('ypGrid'), GridItem],

  props: {
    // ...routeProps,
    // /**
    //  * 是否显示图标右上角小红点
    //  */
    // dot: Boolean,
    // /**
    //  * 文字
    //  */
    // text: String,
    // /**
    //  * 图标名称或图片链接，可选值见 Icon 组件
    //  */
    // icon: String,
    // /**
    //  * 图标右上角徽标的内容
    //  */
    // info: [Number, String]
  },
  data () {
    return {
    };
  },
  computed: {
    /**
      * 文本输入框样式
      */
    textStyle () {
      // 获得父组件的参数
      // const { inactiveColor } = this.parent;
      const { inactiveColor } = this.ypGrid; // 在混入有选的GridItem时，也mixins了parent所以这里直接用名
      const style = {};
      if (inactiveColor) {
        style.color = inactiveColor;
      }
      return style;
    }
  },
  mounted () {
  },
  methods: {
    click(event) {
      this.$emit('click', event);
    }
  }
};
</script>
