<template>
  <view class="view">
    <view class="list-cell view" hover-class="uni-list-cell-hover" @click="bindClick">
      <view class="media-list view" v-if="options.title">
        <view
          class="view"
          :class="{ 'media-image-right': options.article_type === 2, 'media-image-left': options.article_type === 1 }"
        >
          <text class="media-title" :class="{ 'media-title2': options.article_type === 1 || options.article_type === 2 }">
            {{ options.title }}
          </text>
          <view
            v-if="options.image_list || options.image_url"
            class="image-section view"
            :class="{ 'image-section-right': options.article_type === 2, 'image-section-left': options.article_type === 1 }"
          >
            <image
              class="image-list1"
              :class="{ 'image-list2': options.article_type === 1 || options.article_type === 2 }"
              v-if="options.image_url"
              :src="options.image_url"
            />
            <image
              class="image-list3"
              v-if="options.image_list"
              :src="source.url"
              v-for="(source, i) in options.image_list"
              :key="i"
            />
          </view>
        </view>
        <view class="media-foot view">
          <view class="media-info view">
            <text class="info-text">{{ options.source }}</text>
            <text class="info-text">{{ options.comment_count }}条评论</text>
            <text class="info-text">{{ options.datetime }}</text>
          </view>
          <view class="max-close-view view" @click.stop="close">
            <view class="close-view view"><text class="close">×</text></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    options: {
      type: Object,
      default: function (e) {
        return {};
      }
    }
  },
  methods: {
    close(e) {
      this.$emit('close');
    },
    bindClick() {
      this.$emit('click');
    }
  }
};
</script>
<style>
@import './style.css';
</style>
