<template>
  <div class="weui_panel weui_panel_access">
    <div
      v-if="header"
      class="weui_panel_hd"
      @click="onClickHeader"
    >
      {{ header }}
    </div>
    <div class="weui_panel_bd">
      <!--type==='1'-->
      <div v-if="type === '1'">
        <a
          v-for="item in list"
          :key="item.title"
          :href="getUrl(item.url)"
          class="weui_media_box weui_media_appmsg"
          @click.prevent="onItemClick(item)"
        >
          <div
            v-if="item.src"
            class="weui_media_hd"
          >
            <img
              class="weui_media_appmsg_thumb"
              :src="item.src"
              alt=""
            >
          </div>
          <div class="weui_media_bd">
            <h4 class="weui_media_title">{{ item.title }}</h4>
            <p class="weui_media_desc">{{ item.desc }}</p>
          </div>
        </a>
      </div>
      <!--type==='2'-->
      <div v-if="type === '2'">
        <div
          v-for="item in list"
          :key="item.title"
          class="weui_media_box weui_media_text"
          @click.prevent="onItemClick(item)"
        >
          <h4 class="weui_media_title">
            {{ item.title }}
          </h4>
          <p class="weui_media_desc">
            {{ item.desc }}
          </p>
        </div>
      </div>
      <!--type==='3'-->
      <div
        v-if="type === '3'"
        class="weui_media_box weui_media_small_appmsg"
      >
        <div class="weui_cells weui_cells_access">
          <a
            v-for="item in list"
            :key="item.title"
            class="weui_cell"
            :href="getUrl(item.url)"
            @click.prevent="onItemClick(item)"
          >
            <div class="weui_cell_hd">
              <img
                :src="item.src"
                alt=""
                style="width:20px;margin-right:5px;display:block"
              >
            </div>
            <div class="weui_cell_bd weui_cell_primary">
              <p>{{ item.title }}</p>
            </div>
            <span class="weui_cell_ft" />
          </a>
        </div>
      </div>
      <!--type==='4'-->
      <a
        v-for="item in list"
        v-if="type === '4'"
        :key="item.title"
        :href="getUrl(item.url)"
        class="weui_media_box weui_media_appmsg"
        @click.prevent="onItemClick(item)"
      >
        <div
          v-if="item.src"
          class="weui_media_hd"
        >
          <img
            class="weui_media_appmsg_thumb"
            :src="item.src"
            alt=""
          >
        </div>
        <div class="weui_media_bd">
          <h4 class="weui_media_title">{{ item.title }}</h4>
          <h4 class="weui_media_title"><span>title: </span>{{ item.title }}</h4>
          <h4 class="weui_media_title"><span>title: </span>{{ item.title }}</h4>
          <h4 class="weui_media_title"><span>title: </span>{{ item.title }}</h4>
          <p class="weui_media_desc">{{ item.desc }}</p>
        </div>
      </a>
    </div>
    <a
      v-if="footer && type !== '3'"
      class="weui_panel_ft"
      :href="getUrl(footer.url)"
      @click.prevent="onClickFooter"
    >
      {{ footer.title }}
    </a>
  </div>
</template>

<script>
import { go, getUrl } from '../../libs/router'

export default {
  props: {
    header: String,
    footer: Object,
    list: Array,
    type: {
      type: String,
      default: '1'
    }
  },
  methods: {
    getUrl (url) {
      return getUrl(url, this.$router)
    },
    onClickFooter () {
      this.$emit('on-click-footer')
      go(this.footer.url, this.$router)
    },
    onClickHeader () {
      this.$emit('on-click-header')
    },
    onItemClick (item) {
      this.$emit('on-click-item', item)
      go(item.url, this.$router)
    }
  }
}
</script>
