<template>
  <van-cell :span="24">
    <div>
      <div v-if="type==='cell'" class="cell">
        <van-cell-group>
          <template v-for="(item,key) in gridCellList">
            <van-cell v-if="item.show" :key="key" is-link :style="{lineHeight:cellImgSize+'px!important' }">
              <template #icon>
                <img
                  :src="item.img"
                  :alt="item.title"
                  :width="cellImgSize"
                  :height="cellImgSize"
                  :style="{borderRadius:imgRadius+'px',marginRight:imgTextGutter+'px'}"
                >
              </template>
              <template #title>
                <span class="custom-title" :style="{fontSize:fontSize+'px'}">{{ item.title }}</span>
              </template>
              <template #right-icon>
                <div style="color: #999;font-size: 16px"><i class="el-icon-arrow-right" /></div>
              </template>
            </van-cell>
          </template>
        </van-cell-group>
      </div>
      <div v-else class="grid">
        <van-grid :square="square" :direction="direction" :gutter="gutter" :clickable="clickable" :border="border" :column-num="columnNum">
          <template v-for="(item,key) in gridCellList">
            <van-grid-item v-if="item.show" :key="key" icon="photo-o">
              <template #icon>
                <img
                  :src="item.img"
                  :width="gridImgSize"
                  :height="gridImgSize"
                  :alt="item.title"
                  :style="{borderRadius:imgRadius+'px'}"
                >
              </template>
              <template #text>
                <span :style="{fontSize:fontSize+'px'}">{{ item.title }}</span>
              </template>
            </van-grid-item>
          </template>

        </van-grid>
      </div>
    </div>
  </van-cell>
</template>

<script>
// import { Cell as vanCell, CellGroup as vanCellGroup, Grid as vanGrid, GridItem as vanGridItem } from 'vant'

export default {
  name: 'DkGridCellList',
  components: {
    // vanCell, vanCellGroup, vanGrid, vanGridItem
  },
  props: {
    value: {
      default: '',
      type: String
    },
    imgRadius: {
      default: 0,
      type: Number
    },
    gridCellList: {
      default: () => {},
      type: [Array]
    },
    fontSize: {
      default: 14,
      type: Number
    },
    type: {
      default: 'cell',
      type: String
    },
    cellImgSize: {
      // 列表图片大小
      default: 20,
      type: Number
    },
    imgTextGutter: {
      // 图文间距
      default: 0,
      type: Number
    },
    /** ***************************************************** 下面是宫格配置*****************************/
    columnNum: {
      // 宫格列数
      default: 4,
      type: Number
    },
    square: {
      // 是否为正方形
      default: false,
      type: Boolean
    },
    gutter: {
      // 间距
      default: 0,
      type: Number
    },
    direction: {
      // 横向布局
      default: 'vertical',
      type: String
    },
    clickable: {
      // 点击效果
      default: true,
      type: Boolean
    },
    border: {
      // 显示边框
      default: true,
      type: Boolean
    },
    gridImgSize: {
      // 宫格图片大小
      default: 40,
      type: Number
    }
  },
  data() {
    return {
    }
  },
  computed: {},
  mounted() {
    // console.log(this.imgTextGutter)
  },
  methods: {}
}
</script>

<style scoped lang="scss">

</style>
