<template>
  <div class="detail" v-if="pageShow" :style="{ paddingBottom: info.status === '0' ? '130px' : '40px' }">
    <div class="detail-wrapper">
      <image class="banner" mode="aspectFill" :src="info.url" />
      <h2>{{ info.title }}</h2>
      <div class="detail-status">
        <span :class="'status' + info.status">{{ $dict.getLabel('villageActivityStatus', info.status) }}</span>
        <div class="detail-status__right">
          <span>已有</span>
          <i>{{ info.realNum }}</i>
          <span>人报名</span>
        </div>
      </div>
      <div class="detail-info">
        <div class="detail-info__item">
          <label>联系人</label>
          <div class="right">
            <span>{{ info.contactPerson }}</span>
          </div>
        </div>
        <div class="detail-info__item">
          <label>联系方式</label>
          <div class="right detail-info__item--phone" hover-class="text-hover" @click="call(info.contactPhone)">
            <span>{{ info.contactPhone }}</span>
          </div>
        </div>
        <div class="detail-info__item">
          <label>开始时间</label>
          <div class="right">
            <span>{{ info.beginTime }}</span>
          </div>
        </div>
        <div class="detail-info__item">
          <label>结束时间</label>
          <div class="right">
            <span>{{ info.endTime }}</span>
          </div>
        </div>
        <div class="detail-info__item">
          <label>活动地点</label>
          <div class="right">
            <span>{{ info.areaName }}{{ info.address }}</span>
          </div>
        </div>
      </div>
      <div class="detail-tips">
        <u-tabs :list="tabs" font-size="32" bg-color="transparent" inactive-color="#999999" :active-item-style="tabActive" :is-scroll="true" :current="currIndex" @change="(i) => (currIndex = i)"> </u-tabs>
        <div class="tab-content">
          <div class="rich-content" v-show="currIndex === 0">
            <u-parse :html="info.content"></u-parse>
          </div>
          <div class="dynamic-list" v-show="currIndex === 1">
            <div class="dynamic-item" v-for="(item, index) in list" :key="index">
              <div class="dynamic-item__top">
                <h2>{{ item.name }}</h2>
                <span>{{ item.createTime }}</span>
              </div>
              <p>{{ item.content }}</p>
              <div class="images" v-if="item.images.length">
                <image v-for="(img, i) in item.images" @click="preview(img.url, item.images)" :key="i" class="banner" :src="img.url" v-if="i < 3" />
              </div>
            </div>
            <AiEmpty v-if="!list.length"></AiEmpty>
          </div>
        </div>
      </div>
    </div>
    <div class="add" v-if="isShowAdd" hover-class="text-hover" @click="toAdd(`./AddDynamic?activityId=${id}`)">
      <image src="/static/img/add-big.png" />
    </div>
    <div class="btn-wrapper" v-if="info.status === '0'">
      <div class="btn" :class="[info.hasReport === '1' ? 'disabled' : '']" @click="signUp" hover-class="text-hover">{{ info.hasReport === '1' ? '已报名' : '立即报名' }}</div>
    </div>
    <AiLogin ref="login" />
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  appName: '活动详情',
  data() {
    return {
      currIndex: 0,
      tabActive: {
        color: '#333333',
        fontSize: '16px',
      },
      pageShow: false,
      id: '',
      current: 1,
      list: [],
      isMore: false,
      info: '',
    }
  },

  computed: {
    tabs() {
      return [
        {
          name: '活动须知',
        },
        {
          name: '活动动态',
        },
      ]
    },
    ...mapState(['user', 'token']),

    isShowAdd() {
      const time = (new Date().getTime() - new Date(this.info.endTime).getTime()) / 60 / 60 / 1000
      if (!this.info.endTime) {
        return false
      }

      if (this.info.status === '0') {
        return false
      }

      return !(this.info.status === '2' && time > 24)
    },
  },

  onLoad(query) {
    this.$loading()
    this.id = query.id
    this.getList(query.id)
    this.$dict.load(['villageActivityStatus']).then(() => {
      this.getInfo(query.id)
    })
    uni.$on('update', () => {
      this.isMore = false
      this.current = 1
      this.getList(query.id)
    })
  },

  methods: {
    getInfo(id) {
      this.$instance
        .post(`/app/appvillageactivityinfo/queryDetailById?id=${id}`)
        .then((res) => {
          if (res.code === 0) {
            this.info = res.data
            this.info.url = res.data.url ? JSON.parse(res.data.url)[0].url : ''

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

          this.$hideLoading()
        })
        .catch(() => {
          this.$hideLoading()
        })
    },

    toAdd(url) {
      if (!this.token) {
        this.$refs.login.show()

        return false
      }

      if (!this.user.residentId) {
        this.$linkTo('/mods/AppAuth/AppAuth')

        return false
      }

      if (this.info.hasReport === '0') {
        return this.$toast('您还未报名，无法发布活动动态！')
      }

      this.$linkTo(url)
    },

    signUp() {
      if (this.info.status === '1') {
        return this.$toast('报名已截止')
      }

      if (this.info.status === '2') {
        return this.$toast('活动已结束')
      }

      if (!this.token) {
        this.$refs.login.show()

        return false
      }

      if (!this.user.residentId) {
        this.$linkTo('/mods/AppAuth/AppAuth')

        return false
      }

      this.$loading()
      this.$instance
        .post('/app/appvillageactivityuser/report', {
          activityId: this.id,
          userId: this.$store.state.user.id,
          name: this.$store.state.user.nickName,
          phone: this.$store.state.user.phone,
        })
        .then((res) => {
          if (res.code === 0) {
            this.$toast('报名成功')
            this.getInfo(this.id)
          }

          this.$hideLoading()
        })
    },

    preview(url, imgs) {
      uni.previewImage({
        urls: imgs.map((v) => v.url),
        current: url,
      })
    },

    getList(id) {
      if (this.isMore) return

      this.$instance
        .post(`/app/appvillageactivitypost/list?activityId=${id}`, null, {
          params: {
            current: this.current,
            size: 10,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            if (this.current > 1) {
              this.list = [...this.list, ...res.data.records].map((v) => {
                return {
                  ...v,
                  images: v.images ? JSON.parse(v.images) : [],
                }
              })
            } else {
              this.list = res.data.records.map((v) => {
                return {
                  ...v,
                  images: v.images ? JSON.parse(v.images) : [],
                }
              })
            }
            this.pageShow = true
            if (res.data.records.length < 10) {
              this.isMore = true

              return false
            }

            this.current = this.current + 1
          }
        })
    },

    call(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
      })
    },
  },

  onReachBottom() {
    this.getList()
  },
}
</script>

<style lang="scss" scoped>
.detail {
  min-height: 100vh;
  padding: 0 0 250px 0;
  background: #fff;

  .add {
    position: fixed;
    bottom: 140px;
    right: 20px;
    z-index: 111;
    width: 128px;
    height: 128px;

    image {
      width: 128px;
      height: 128px;
    }
  }

  ::v-deep .u-tab-item {
    font-size: 32px !important;

    &:first-child {
      padding: 0 !important;
    }
  }

  .detail-wrapper {
    padding-bottom: 48px;
    background: #fff;

    & > image {
      width: 100%;
      height: 480px;
    }

    & > h2 {
      line-height: 1.4;
      padding: 32px;
      font-size: 40px;
      font-weight: 600;
      color: #333;
      text-align: justify;
    }

    & > div {
      padding: 0 32px;
    }
  }

  .detail-info {
    .detail-info__item {
      display: flex;
      justify-content: space-between;
      padding: 34px 0;
      border-bottom: 1px solid #dddddd;

      label {
        color: #999999;
        font-size: 32px;
      }

      .right {
        display: flex;
        align-items: center;
        max-width: 480px;
        text-align: right;

        span {
          color: #333333;
          font-size: 32px;
        }

        &.detail-info__item--phone {
          span {
            color: #4181ff;
          }
        }
      }
    }
  }

  .detail-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;

    & > span {
      width: 96px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      color: #fff;
      background: #42d784;
      border-radius: 8px;
      font-size: 26px;

      &.status1 {
        background: #1aaaff;
      }

      &.status2 {
        background: #e4e4e4;
      }
    }

    .detail-status__right {
      display: flex;
      align-items: center;

      span {
        color: #999999;
        font-size: 28px;
      }

      i {
        font-style: normal;
        color: #4181ff;
        font-size: 28px;
      }
    }
  }

  .tab-active {
    color: #333333;
    font-size: 32px;
  }

  .detail-tips {
    padding: 10px 32px 0 !important;

    & > h2 {
      height: 116px;
      line-height: 116px;
      color: #333333;
      font-size: 32px;
    }

    p {
      line-height: 1.4;
      margin-top: 24px;
      color: #333333;
      font-size: 32px;
      text-align: justify;
    }
  }

  .dynamic-list {
    .dynamic-item {
      padding: 24px 0;

      .images {
        display: flex;
        flex-wrap: wrap;
        margin-top: 16px;

        image {
          width: 226px;
          height: 226px;
          margin: 0 4px 4px 0;
          border-radius: 16px;
        }
        image:nth-child(3n + 0) {
          margin: 0;
        }
      }

      .dynamic-item__top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
          color: #999999;
          font-size: 26px;
        }

        h2 {
          color: #333333;
          font-size: 34px;
          font-weight: 600;
        }
      }

      p {
        line-height: 1.4;
        text-align: justify;
        color: #333333;
        font-size: 28px;
      }
    }
  }
}
</style>
