<template>
  <div class="detail" v-if="pageShow">
    <div class="detail-header">
      <h2>{{ info.content || info.title }}</h2>
      <div class="detail-info">
        <h2>{{ info.createUserName }}</h2>
        <span>{{ info.createTime }}</span>
      </div>
      <div class="images">
        <image v-for="(img, i) in info.images" :key="i" :src="img.url" @click="preview(img.url)"/>
      </div>
    </div>
    <div class="detail-list">
      <div class="detail-list__title">
        <h2>{{ info.type === '0' ? '全部评论' : (info.voteType === '1' ? '投票清单（可多选）' : '投票清单') }}</h2>
        <span v-if="!isTimeout && time">剩余 {{ time }}</span>
        <span v-if="info.status !== '0'">已截止</span>
      </div>
      <div class="user-list" :style="{paddingBottom: !list.length ? '20px' : '0px'}" v-if="info.type === '0'">
        <div class="user-item" v-for="(item, index) in list" :key="index">
          <div class="user-item__top">
            <image :src="item.avatar"/>
            <div class="user-item__top--right">
              <div class="top">
                <div class="left">
                  <h2>{{ item.createUserName }}</h2>
                  <span v-if="info.createUserId === item.createUserId">话事人</span>
                </div>
                <div class="right" @click="like(item.id)">
                  <image :src="item.isSuport ? '/static/img/like-active.png' : '/static/img/like.png'"/>
                  <span>{{ item.suport }}</span>
                </div>
              </div>
              <p>{{ item.createTime }}</p>
            </div>
          </div>
          <p>{{ item.content }}</p>
        </div>
        <AiEmpty v-if="!list.length"></AiEmpty>
      </div>
      <div class="vote-list" v-if="info.type === '1'">
        <div class="vote-item__wrapper">
          <div
              class="vote-item"
              @click="choose(index)"
              v-for="(item, index) in info.voteItems"
              :key="index"
              :class="[choosed.indexOf(index) > -1 ? 'active' : '']">
            <span>{{ item.item }}：</span>
            <p>{{ item.content }}</p>
          </div>
        </div>
        <div class="vote-total">
          <div class="left">
            <span>共</span>
            <i>{{ info.votes.length }}</i>
            <span>人投票</span>
          </div>
          <i @click="$linkTo('./VoteList?id=' + id + '&anonymous=' + info.anonymous)">查看投票详情</i>
        </div>
      </div>
    </div>
    <div class="footer" v-if="info.type === '0' && info.status === '0' && !info.isTimeout">
      <div class="input" @click="show = true">我来说两句...</div>
    </div>
    <div class="btn-wrapper" v-if="info.type === '1' && !info.isTimeout && info.status === '0'">
      <div class="btn" :class="[info.myVote ? 'disabled' : '']" @click="signUp" hover-class="text-hover">{{
          buttonText
        }}
      </div>
    </div>
    <!-- 弹框 -->
    <u-popup v-model="show" mode="bottom">
      <div class="inputBox" :style="{paddingBottom: height + px}">
        <div class="text">
          <textarea
              @blur="height = 0"
              placeholder-style="color: #999"
              v-model="content"
              :cursor-spacing="40"
              fixed
              placeholder="写下你的想法..."
              @keyboardheightchange="keyboard">
          </textarea>
        </div>
        <div class="option">
          <div @click="clearBtn" class="clear">清空内容</div>
          <div @click="confirm" class="publish">发表</div>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  appName: "详情",
  data() {
    return {
      content: '',
      currIndex: 0,
      pageShow: false,
      info: {},
      isTimeout: false,
      time: '',
      timer: null,
      list: [],
      current: 1,
      choosed: [],
      total: 0,
      id: '',
      isMore: false,
      keys: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
      show: false,
      height: 0
    }
  },

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

    buttonText() {
      if (this.info.myVote) {
        return '已投票'
      }

      if (this.info.anonymous === '1') {
        return '匿名投票'
      }

      return '实名投票'
    }
  },

  onLoad(query) {
    this.id = query.id
    this.getInfo(query.id)
    this.$nextTick(() => {
      this.getList()
    })
  },

  methods: {
    choose(index) {
      if (this.info.status !== '0') {
        return false
      }

      if (this.info.myVote) {
        return false
      }

      if (this.info.voteType === '1') {
        const i = this.choosed.indexOf(index)
        if (i > -1) {
          this.choosed.splice(i, 1)
        } else {
          this.choosed.push(index)
        }
      } else {
        this.choosed = [index]
      }
    },

    like(id) {
      this.$loading()
      this.$instance.post(`/app/appvillagediscussmessage/suport?id=${id}&userId=${this.user.id}`).then(res => {
        if (res.code === 0) {
          this.$toast('点赞成功')
          this.current = 1
          this.isMore = false

          this.$nextTick(() => {
            this.getList()
          })
        }

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

    getInfo(id) {
      this.$loading()
      this.$instance.post(`/app/appvillagediscuss/queryDetailById?id=${id}&userId=${this.user.id}`).then(res => {
        if (res.code === 0) {
          this.info = res.data
          this.info.images = res.data.images ? JSON.parse(res.data.images) : []

          if (res.data.myVote && this.info.status === '0') {
            const myVote = res.data.myVote.split(',')
            myVote.forEach(v => {
              this.choosed.push(this.keys.indexOf(v))
            })
          }

          if (res.data.discussDeadline) {
            this.countdown(res.data.discussDeadline)
          }

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

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

    signUp() {
      if (this.info.myVote) {
        return
      }

      if (!this.choosed.length) {
        return this.$toast('请选择投票项')
      }

      this.$loading()
      let item = []
      this.choosed.forEach(v => {
        item.push(this.info.voteItems[v].item)
      })
      this.$instance.post(`/app/appvillagediscussvote/addOrUpdate`, {
        item: item.join(','),
        discussId: this.id,
        createUserId: this.user.realName || this.user.name,
        createUserName: this.user.id,
        avatar: this.user.avatarUrl
      }).then(res => {

        this.$hideLoading()
        if (res.code === 0) {
          this.$toast('投票成功')
          this.getInfo(this.id)
        }
      }).catch(() => {
        this.$hideLoading()
      })
    },

    getList() {
      if (this.isMore) return

      this.$instance.post(`/app/appvillagediscussmessage/list`, null, {
        params: {
          current: this.current,
          size: 15,
          discussId: this.id,
          status: this.currIndex,
          areaId: uni.getStorageSync('areaId')
        }
      }).then(res => {
        if (res.code == 0) {
          this.total = res.data.total
          if (this.current > 1) {
            this.list = [...this.list, ...res.data.records].map(v => {
              return {
                ...v,
                typeName: this.$dict.getLabel('discussType', v.type),
                images: v.images ? JSON.parse(v.images) : [],
                isSuport: v.suportUser ? v.suportUser.indexOf(this.user.id) > -1 : false
              }
            })
          } else {
            this.list = res.data.records.map(v => {
              return {
                ...v,
                typeName: this.$dict.getLabel('discussType', v.type),
                images: v.images ? JSON.parse(v.images) : [],
                isSuport: v.suportUser ? v.suportUser.indexOf(this.user.id) > -1 : false
              }
            })
          }
          uni.hideLoading()
          this.pageShow = true
          if (res.data.records.length < 10) {
            this.isMore = true

            return false
          }

          this.current = this.current + 1
        } else {
          uni.hideLoading()
        }
      }).catch(() => {
        uni.hideLoading()
      })
    },

    clearBtn() {
      this.content = ''
    },

    confirm() {
      if (!this.content) {
        return this.$toast('留言不能为空')
      }

      this.$loading()
      this.$instance.post(`/app/appvillagediscussmessage/addOrUpdate`, {
        content: this.content,
        discussId: this.id,
        createUserId: this.user.realName || this.user.name,
        createUserName: this.user.id,
        avatar: this.user.avatarUrl
      }).then(res => {
        if (res.code === 0) {
          this.content = ''
          this.$toast('发布成功')
          this.isMore = false
          this.current = 1
          this.show = false
          this.getList()
        }

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

    keyboard(e) {
      this.height = e.detail.height
    },

    countdown(time) {
      this.timer = setInterval(() => {
        if (new Date(time.replace(/-/g, '/')).getTime() < new Date().getTime()) {
          this.isTimeout = true
          clearInterval(this.timer)
        } else {
          var durationObj = this.$dayjs.duration(new Date(time.replace(/-/g, '/')).getTime() - new Date().getTime())
          var hours = durationObj.hours() > 9 ? durationObj.hours() : '0' + durationObj.hours()
          var min = durationObj.minutes() > 9 ? durationObj.minutes() : '0' + durationObj.minutes()
          var seconds = durationObj.seconds() > 9 ? durationObj.seconds() : '0' + durationObj.seconds()
          this.time = `${hours}小时${min}分钟${seconds}秒`
          this.isTimeout = false
        }
      }, 1000)
    },

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

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

<style lang="scss" scoped>
.detail {
  padding-bottom: 140px;

  .vote-list {
    .vote-item {
      display: flex;
      line-height: 1.3;
      margin-top: 24px;
      padding: 34px 32px;
      color: #333333;
      font-size: 32px;
      background: #FFFFFF;
      border-radius: 16px;
      border: 1px solid #CCCCCC;
      box-sizing: border-box;

      p {
        text-align: justify;
      }

      &.active {
        border-color: #4181FF;
        color: #fff;
        background: #4181FF;
      }
    }

    .vote-total {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100px;

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

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

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

  .footer {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    bottom: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 120px;
    padding: 0 30px;
    box-sizing: border-box;
    background-color: #fff;
    border-top: 1px solid #DDDDDD;

    .input {
      flex: 1;
      height: 88px;
      line-height: 88px;
      padding: 0 32px;
      font-size: 32px;
      border-radius: 44px;
      box-sizing: border-box;
      background-color: #F0F0F0;
      color: #666666;
    }
  }

  .inputBox {
    width: 100%;
    padding: 32px 30px 32px 24px;
    box-sizing: border-box;
    background-color: #FFFFFF;

    .option {
      display: flex;
      justify-content: space-between;

      .clear {
        color: #666666;
      }

      .publish {
        width: 144px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        border-radius: 32px;
        background-color: #1365DD;
        color: #FFFFFF;
      }
    }

    .text {
      padding: 16px;
      box-sizing: border-box;
      background-color: #f7f7f7;
      margin-bottom: 24px;

      textarea {
        width: 100%;
      }
    }
  }

  .detail-header {
    margin-bottom: 40px;
    padding: 32px;
    background-color: #fff;

    .images {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 30px;

      image {
        width: 226px;
        height: 226px;
        margin-bottom: 6px;
        margin-right: 6px;

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

    & > h2 {
      margin-bottom: 16px;
      color: #333333;
      font-size: 48px;
      font-weight: 600;
    }

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

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

      h2 {
        margin-right: 32px;
        font-size: 26px;
        color: #333333;
        font-weight: normal;
      }
    }
  }

  .detail-list {
    padding: 0 32px;
    background-color: #fff;

    .detail-list__title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 116px;

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

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

    .user-item {
      padding: 32px 0;
      border-bottom: 1px solid #DDDDDD;

      &:last-child {
        border-bottom: none;
      }

      & > p {
        line-height: 1.3;
        margin-top: 12px;
        padding-left: 114px;
        color: #333333;
        font-size: 28px;
      }

      .user-item__top {
        display: flex;
        align-items: center;

        .user-item__top--right {
          flex: 1;

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

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

            .right {
              image {
                width: 32px;
                height: 32px;
                margin-right: 8px;
              }

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

            .left {
              h2 {
                margin-right: 24px;
                color: #333333;
                font-size: 34px;
                font-weight: normal;
              }

              span {
                width: 96px;
                height: 44px;
                line-height: 44px;
                text-align: center;
                color: #fff;
                font-size: 26px;
                background: #1AAAFF;
                border-radius: 8px;
              }
            }
          }

          & > p {
            margin-top: 8px;
            color: #999999;
            font-size: 26px;
          }
        }

        & > image {
          width: 96px;
          height: 96px;
          margin-right: 18px;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
