<template>
  <div class="info" v-if="pageShow">
    <h2>{{ info.title }}</h2>
    <div class="info-info">
      <span>{{ info.areaName }}</span>
      <span>{{ info.createDate }}</span>
    </div>
    <image class="banner" @click="preview(banner)" v-if="banner" mode="widthFix" :src="banner"/>
    <div class="rich-content">
      <u-parse :html="info.content"></u-parse>
    </div>
    <AiEmpty v-if="!info.title"></AiEmpty>
  </div>
</template>

<script>
export default {
  name: "AppVillagerInfo",
  appName: "本村简介",
  data() {
    return {
      pageShow: false,
      info: {},
      banner: ''
    }
  },

  onLoad(query) {
    if (query.type !== '0') {
      uni.setNavigationBarTitle({
        title: '村规民约'
      })
    }

    this.$loading()
    this.getInfo(query.type)
  },

  methods: {
    getInfo(type) {
      this.$instance.post(`/app/appcountrysidetourism/queryDetailByAreaIdForWX?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
        if (res.code === 0 && res.data) {
          this.info = res.data
          this.banner = res.data.thumbUrl ? JSON.parse(res.data.thumbUrl)[0].url : ''
        }

        this.$nextTick(() => {
          this.pageShow = true
        })
      })
    },

    preview(url) {
      uni.previewImage({
        urls: [url],
        current: url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.info {
  min-height: 100vh;
  padding: 0 32px 40px;
  box-sizing: border-box;
  background-color: #fff;

  .banner {
    width: 100%;
    margin-bottom: 20px;
  }

  h2 {
    line-height: 1.3;
    padding: 32px 0 16px;
    font-size: 48px;
    font-weight: 600;
    color: #333;
  }

  .info-info {
    display: flex;
    align-items: center;
    margin-bottom: 30px;

    span {
      color: #999999;
      font-size: 30px;

      &:last-child {
        margin-left: 32px;
      }
    }
  }
}
</style>
