<template>
  <div class="Detail" v-if="pageShow">
    <div class="top">
      <div :class="name == '婚礼' ? 'top-pad marry-css' : 'top-pad'">
        <div class="item-top">
          <image :src="info.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'"/>
          <div class="right">
            <h3>{{ info.createUserName }}</h3>
            <span v-if="info.publishDepartName">{{ info.publishDepartName }}</span>
          </div>
          <div class="top-btn" v-if="info.integralTaskId && info.integralTaskInfo.status != 2 && info.showSignBtn"
              @click="toTask">去参与
          </div>
        </div>
        <image src="https://cdn.cunwuyun.cn/fengdu/marry-top.png" class="marry-top" v-if="name == '婚礼'" />
        <div class="item-content">
          <span v-if="name" @click="toTopic('./TopicDetail?themeId=' + themeId + '&name=' + name)">#【{{ name }}】</span>
          <text v-if="info.integralTaskId">{{ info.integralTaskInfo.detail }}</text>
          <text v-else>{{ info.content }}</text>
        </div>
        <div v-if="info.integralTaskId">
          <div class="info-flex">
            <div class="label"><img src="https://cdn.cunwuyun.cn/fengdu/address-icon.png" alt="">活动地点：</div>
            <div class="value">{{ info.integralTaskInfo.address }}</div>
          </div>
          <div class="info-flex">
            <div class="label"><img src="https://cdn.cunwuyun.cn/fengdu/come-icon.png" alt="">任务类型：</div>
            <div class="value">{{ info.integralTaskInfo.type == 1 ? '报名得积分' : '打卡得积分' }}</div>
          </div>
          <div class="info-flex">
            <div class="label"><img src="https://cdn.cunwuyun.cn/fengdu/time-icon.png"
                                    alt="">{{ info.integralTaskInfo.type == 1 ? '报名时间：' : '进场时间：' }}
            </div>
            <div class="value">{{ info.integralTaskInfo.intoBegintime }}至{{ info.integralTaskInfo.intoEndtime }}</div>
          </div>
          <div class="info-flex" v-if="info.integralTaskInfo.type != 1">
            <div class="label"><img src="https://cdn.cunwuyun.cn/fengdu/leave-icon.png" alt="">离场时间：</div>
            <div class="value">{{ info.integralTaskInfo.exitBegintime }}至{{ info.integralTaskInfo.exitEndtime }}</div>
          </div>

        </div>
        <div class="item-imgs" v-if="info.files && info.files.length">
          <image mode="aspectFill" @click="previewImage(item.url, info.files)" v-for="(item, index) in info.files"
                :key="index" :src="item.url"/>
        </div>
        <div class="time-flex">
          <p>{{ info.createTime }}</p>
          <image src="https://cdn.cunwuyun.cn/fengdu/marry-bottom.png" class="marry-bottom" v-if="name == '婚礼'" />
        </div>
      </div>
      <div class="item-bottom">
        <button open-type="share">
          <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-zhuanfa.png"/>
          <i>{{ info.sharedCount }}</i>
        </button>
        <div>
          <image
              :src="info.appreciateStatus ? 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png' : 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png'"
              @click="reciate"/>
          <i>{{ info.appreciateCount }}</i>
        </div>
        <div>
          <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pinglun.png"/>
          <i>{{ info.commentCount }}</i>
        </div>
      </div>
    </div>
    <div class="comment">
      <h2>评论</h2>
      <div class="comment-wrapper">
        <div class="comment-item" v-for="(item, index) in list" :key="index">
          <image :src="item.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'"/>
          <div class="right">
            <h3>{{ item.createUserName }}</h3>
            <p>{{ item.content }}</p>
            <div class="bottom">
              <span>{{ item.createTime }}</span>
              <div hover-class="text-hover" @click="replay(item)">回复</div>
            </div>
            <div class="replay-list" v-if="item.replyList.length">
              <div class="replay-item" v-for="replay in item.replyList" :key="replay.id">
                <image :src="replay.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'"/>
                <div class="replay-item__right">
                  <div class="top">
                    <div class="replay-left">
                      <h3>{{ replay.createUserName }}</h3>
                      <span>回复</span>
                      <h3>{{ item.createUserName }}</h3>
                    </div>
                    <p>{{ replay.createTime }}</p>
                  </div>
                  <p>{{ replay.content }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <AiEmpty v-if="!list.length"></AiEmpty>
      </div>
    </div>
    <div class="footer" @click="showComment">
      <span>请输入评论内容</span>
      <!-- <div hover-class="hover-class">发送</div> -->
    </div>
    <u-popup v-model="isShow" mode="bottom" hidden height="350rpx" border-radius="30">
      <div class="popup">
        <div class="popup-title">
          <h2>请选择</h2>
          <image @click="isShow = false" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-guanbi.png"/>
        </div>
        <div class="popup-list">
          <button open-type="share">
            <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-wechat.png"/>
            <span>微信</span>
          </button>
          <!-- <button open-type="share">
            <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pyq.png" />
            <span>朋友圈</span>
          </button>
          <button>
            <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-link.png" />
            <span>复制链接</span>
          </button> -->
        </div>
      </div>
    </u-popup>
    <u-popup v-model="isShowComment" mode="bottom" hidden height="400rpx" border-radius="30" @close="focus = false">
      <div class="popup">
        <div class="popup-title">
          <h2>评论</h2>
          <image @click="isShowComment = false, focus = false" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-guanbi.png"/>
        </div>
        <div class="form">
          <textarea :maxlength="100" :cursor-spacing="10"
                    :placeholder="commentId ? '回复' + replyName : '请输入评论内容'" :focus="focus"
                    v-model="content"></textarea>
          <div>
            <div class="send-btn" hover-class="hover-class" @click="send">发送</div>
          </div>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'

export default {
  name: 'Detail',
  appName: '详情',

  data() {
    return {
      id: '',
      isShow: false,
      info: {},
      name: '',
      themeId: '',
      isFrom: '',
      list: [],
      isMore: false,
      isShowComment: false,
      current: 1,
      content: '',
      focus: false,
      pageShow: false,
      commentId: '',
      replyName: ''
    }
  },

  computed: {
    ...mapState(['user', 'token'])
  },

  onLoad(query) {
    this.isFrom = query.isFrom
    this.id = query.id
    this.themeId = query.themeId
    this.name = query.name || ''
    this.$loading()
    Promise.resolve(this.token || this.autoLogin()).then(() =>
        Promise.all([
          this.getInfo(query.id),
          this.getCommontList(query.id)
        ])
    ).finally(() => this.$hideLoading())
  },
  methods: {
    ...mapActions(['autoLogin']),

    toTask() {
      if (!this.user.areaId) {
        this.$dialog.confirm({
          content: '您只有完成信息认证后，才可进行相关操作。',
          confirmText: '去认证'
        }).then(() => {
          this.$linkTo('/pages/AppMine/userInfo')
        })
        return false
      }
      this.$linkTo(`/mods/AppNewFarmerBank/taskDetail?id=${this.info.integralTaskId}`)
    },

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

    showComment() {
      if (!this.user.areaId) {
        this.$dialog.confirm({
          content: '您只有完成信息认证后，才可进行相关操作。',
          confirmText: '去认证'
        }).then(() => {
          this.$linkTo('/pages/AppMine/userInfo')
        }).catch(() => {
        })

        return false
      }

      this.commentId = ''
      this.replyName = ''
      this.isShowComment = true

      this.$nextTick(() => {
        setTimeout(() => {
          this.focus = true
        }, 500)
      })
    },

    replay(item) {
      if (!this.user.areaId) {
        this.$dialog.confirm({
          content: '您只有完成信息认证后，才可进行相关操作。',
          confirmText: '去认证'
        }).then(() => {
          this.$linkTo('/pages/AppMine/userInfo')
        }).catch(() => {
        })

        return false
      }

      this.commentId = item.id
      this.replyName = item.createUserName

      this.isShowComment = true

      this.$nextTick(() => {
        setTimeout(() => {
          this.focus = true
        }, 500)
      })
    },

    getInfo(id) {
      this.$instance.post(`/app/appneighborhoodassistance/queryDetailById?id=${id}`, null, {
        withoutToken: !this.token,
      }).then(res => {
        if (res.code === 0) {
          this.info = res.data
          this.pageShow = true
        }

        uni.hideLoading()
      })
    },

    reciate() {
      this.$loading()
      this.$instance.post(`/app/appneighborhoodassistance/appreciate?id=${this.id}`).then(res => {
        if (res.code === 0) {
          this.$toast(this.info.appreciateStatus ? '取消点赞' : '点赞成功')
          uni.$emit('updateList')
          this.getInfo(this.id)
        }
        uni.hideLoading()
      })
    },

    send() {
      if (!this.content) {
        return this.$toast('内容不能为空')
      }

      this.$loading()
      this.$instance.post(!this.commentId ? `/app/appneighborhoodassistance/addComment` : `/app/appneighborhoodassistance/addReply`, {
        content: this.content,
        naId: this.id,
        type: this.commentId ? 1 : 0,
        commentId: this.commentId || ''
      }).then(res => {
        uni.hideLoading()
        if (res.code === 0) {
          this.isShowComment = false
          this.$toast('提交成功')
          this.content = ''
          this.replyName = ''
          this.commentId = ''
          this.focus = false

          this.isMore = false
          this.current = 1

          this.$nextTick(() => {
            this.getCommontList(this.id)
          })
        }
      })
    },

    toTopic(url) {
      if (this.isFrom === 'topic') {
        uni.navigateBack({
          delta: 1
        })
      } else {
        this.$linkTo(url)
      }
    },

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

      this.$loading()
      this.$instance.post(`/app/appneighborhoodassistance/commontList`, null, {
        withoutToken: !this.token,
        params: {
          id,
          current: this.current,
          size: 10
        }
      }).then(res => {
        if (res.code === 0) {
          this.$hideLoading()
          if (this.current > 1) {
            this.list = [...this.list, ...res.data.records]
          } else {
            this.list = res.data.records
          }
          if (res.data.records.length < 10) {
            this.isMore = true

            return false
          }
          this.current++
        } else {
          this.isMore = true
        }
      }).catch(() => {
        this.$hideLoading()
      })
    }
  },

  onReachBottom() {
    this.getCommontList()
  },

  // onShareTimeline() {
  //   return {
  //     title: this.info.content,
  //     // path: `/mods/AppCircle/Detail?id=${this.id}&themeId=${this.themeId}&name=${this.name}`
  //   }
  // },
  onShareAppMessage() {
    this.$instance.post(`/app/appneighborhoodassistance/share?id=${this.id}`).then(res => {
      if (res.code === 0) {
        uni.$emit('updateList')
        this.getInfo(this.id)
      }
    })
    return {
      title: this.info.content,
      path: `/mods/AppCircle/Detail?id=${this.id}&themeId=${this.themeId}&name=${this.name}`
    }
  },

}
</script>

<style scoped lang="scss">
.Detail {
  padding-top: 24px;
  padding-bottom: 130px;

  div {
    box-sizing: border-box;
  }

  .popup {
    height: 400px;
    border-radius: 20px 20px 0 0;

    .popup-title {
      position: relative;
      height: 98px;
      line-height: 98px;
      text-align: center;

      image {
        position: absolute;
        right: 40px;
        top: 50%;
        z-index: 1;
        width: 32px;
        height: 32px;
        transform: translateY(-50%);
      }

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

    .popup-list {
      display: flex;
      align-items: center;
      margin-top: 30px;

      button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        flex-direction: column;

        image {
          width: 94px;
          height: 94px;
          margin-bottom: 8px;
        }

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

    .form {
      padding: 0 32px;

      textarea {
        width: 100%;
        margin-bottom: 20px;
        height: 200px;
        line-height: 1.3;
        padding: 20px;
        font-size: 28px;
        color: #333;
        box-sizing: border-box;
        background: #eeeeee;
      }

      & > div {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }

      .send-btn {
        display: inline-block;
        width: 100px;
        height: 60px;
        line-height: 60px;
        text-align: right;
        text-align: center;
        font-size: 26px;
        color: #fff;
        border-radius: 30px;
        background: #2d7dffff;
      }
    }
  }

  .footer {
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 111;
    width: 100%;
    padding: 18px 32px;
    background: #fff;

    span {
      flex: 1;
      height: 70px;
      line-height: 70px;
      // margin-right: 16px;
      padding: 0 24px;
      border-radius: 36px;
      font-size: 26px;
      box-sizing: border-box;
      background: #eeeeee;
      color: #999;
    }

    div {
      width: 100px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 26px;
      color: #fff;
      border-radius: 30px;
      background: #2d7dffff;
    }
  }

  .comment {
    margin-top: 24px;
    padding: 32px 32px 26px;
    background: #fff;

    .comment-wrapper {
      .comment-item {
        display: flex;
        padding: 26px 0;

        &:first-child {
          padding-top: 0;
        }

        &:last-child {
          padding-bottom: 0;
        }

        & > image {
          width: 72px;
          height: 72px;
          margin-right: 16px;
          border-radius: 50%;
        }

        .replay-list {
          margin-top: 32px;

          .replay-item {
            display: flex;
            margin-bottom: 32px;

            &:last-child {
              margin-bottom: 0;
            }

            image {
              width: 48px;
              height: 48px;
              margin-right: 16px;
              border-radius: 50%;
            }

            .replay-item__right {
              flex: 1;

              .top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 6px;

                .replay-left {
                  display: flex;
                  align-items: center;
                }

                h3 {
                  color: #666666;
                  font-size: 24px;
                }

                span {
                  margin: 0 8px;
                  font-size: 24px;
                  color: #687DA6;
                }

                p {
                  color: #999999;
                  font-size: 24px;
                }
              }

              & > p {
                line-height: 1.3;
                color: #333333;
                font-size: 24px;
              }
            }
          }
        }

        & > .right {
          flex: 1;
          padding-bottom: 32px;
          border-bottom: 1px solid #EEEEEE;

          & > h3 {
            line-height: 40px;
            margin-bottom: 8px;
            color: #666666;
            font-size: 28px;
          }

          & > p {
            line-height: 42px;
            margin-bottom: 24px;
            color: #333;
            font-size: 28px;
          }

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

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

            div {
              color: #687DA6;
              font-size: 24px;
            }
          }
        }

        &:last-child {
          padding-bottom: 0;

          .right {
            padding-bottom: 0;
            border-bottom: none;
          }
        }
      }
    }

    & > h2 {
      margin-bottom: 32px;
      color: #3d3d3d;
      font-size: 38px;
      font-weight: 600;
    }
  }

  & > .top {
    // padding: 32px 32px 0;
    background: #ffffff;
    position: relative;

    .item-top {
      display: flex;
      align-items: center;

      image {
        width: 96px;
        height: 96px;
        margin-right: 16px;
        border-radius: 50%;
      }

      h3 {
        color: #333333;
        text-align: left;
        font-size: 34px;
        font-weight: 500;
      }

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


    .item-imgs {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      image {
        height: 208px;
        width: 33.33%;
        padding-right: 12px;
        margin-bottom: 12px;
        box-sizing: border-box;

        &:nth-of-type(3n) {
          padding-right: 0;
        }
      }
    }

    & > p {
      margin: 12px 0;
      font-size: 28px;
      color: #333333;
    }

    .item-bottom {
      display: flex;
      align-items: center;
      height: 88px;
      border-top: 1px solid #eeeeee;

      div, button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;

        image {
          width: 40px;
          height: 40px;
          margin: 16px;
        }

        i {
          color: #687DA6;
          font-size: 28px;
        }
      }
    }

    .item-content {
      margin: 16px 0;
      line-height: 1.3;
      text-align: justify;

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

      text {
        font-size: 28px;
        color: #333333;
      }
    }

    .info-flex {
      display: flex;
      color: #666;
      font-size: 24px;
      font-family: "PingFang SC";
      line-height: 30px;
      margin-bottom: 16px;

      .label {
        width: 160px;

        img {
          width: 30px;
          height: 30px;
          margin-right: 8px;
          vertical-align: bottom;
        }
      }

      .value {
        width: calc(100% - 160px);
        color: #333;
        vertical-align: text-top;
      }
    }

    .top-btn {
      width: 154px;
      height: 56px;
      line-height: 56px;
      text-align: center;
      background-color: #2E7DFF;
      border-radius: 28px;
      color: #fff;
      font-size: 30px;
      font-family: "PingFang SC";
      position: absolute;
      top: 52px;
      right: 32px;
    }

    .top-pad {
      padding: 32px;
    }
    .marry-css {
      background-image: linear-gradient(191deg, #FFE0E4 0%, #FFFFFF 89%);
      position: relative;
      .marry-top {
        width: 216px;
        height: 100px;
        position: absolute;
        top: 18px;
        right: 12px;
      }
      .time-flex {
        display: flex;
        justify-content: space-between;
        .marry-bottom {
          width: 300px;
          height: 40px;
          margin-top: -4px;
        }
      }
    }
  }
}
</style>
