<template>
  <div class="Detail">
    <div class="detail-top">
      <div flex class="w-100">
        <div class="avatar" v-text="data.avatar" />
        <div flex class="column start fill">
          <b class="color-333" v-text="data.createUserName" />
          <span class="color-999" v-text="data.createTime" />
        </div>
        <div class="statusTag" :class="{ over: data.status > 0 }" v-text="data.status == 0 ? (data.type == 0 ? '征集中' : '投票中') : $dict.getLabel('discussStatus', data.status)" />
      </div>

      <div class="header-middle">
        <div class="contsnts">
          <u-parse :html="data.content"></u-parse>
        </div>
      </div>

      <div class="img-list" v-if="data.images && data.images.length">
        <img :src="item.url" alt="" v-for="(item, index) in data.images" :key="index" @click="previewImage(data.images, item.url)" />
      </div>
    </div>
    <div v-if="data.type == 0" class="comments">
      <span class="totalCount">
        <span class="total" v-text="`全部评论(${commentCount})`" />
        <span class="rightCount">
          <u-icon name="clock"></u-icon>
          <u-count-down :timestamp="timestamp" separator="zh" show-days show-hours show-minutes show-seconds></u-count-down>
        </span>
      </span>
      <div v-for="op in data.messages" :key="op.id">
        <div flex class="header">
          <u-avatar :src="op.avatar" size="48" />
          <b class="fill" v-text="op.createUserName" />
          <u-icon name="thumb-up" :label="op.suport" />
        </div>
        <div class="content" v-text="op.content" />
        <div class="content color-999" v-text="op.createTime" />
      </div>
    </div>

    <div v-else-if="data.type == 1" class="comments"></div>

    <div class="bottomInput">
      <div class="leftInput" @click="showBottomInput = true">我来说两句...</div>

      <!-- <div class="righticon">
        <u-icon name="thumb-up" @click="praise"></u-icon>

        <span class="icontext">赞</span>
      </div> -->
    </div>

    <u-popup v-model="showBottomInput" height="200px" mode="bottom">
      <u-input v-model="content" placeholder="写下你的想法" type="textarea" auto-height height="180" maxlength="140"> </u-input>
      <div class="words">字数{{ content.length }}/140</div>

      <div class="bottombtn">
        <div class="emptys" @click="content = ''">清空内容</div>

        <div class="publishs" @click="publish">发表</div>
      </div>
    </u-popup>

    <div class="bottomBar">
      <div v-if="data.status < 2" @click="handleComplete">结束公示</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Detail',
  props: {},
  data() {
    return {
      data: {},
      id: '',
      timestamp: '',
      showBottomInput: false,
      content: '',
      flag: false,
    }
  },
  computed: {
    ...mapState(['user']),

    commentCount() {
      return this.data.messages?.length || 0
    },
  },
  watch: {},
  onLoad(o) {
    console.log(this.user)
    this.id = o.id
    this.getDetail()
    this.$dict.load('discussStatus')
  },
  onShow() {
    document.title = '议事详情'
  },
  methods: {
    getDetail() {
      this.$http.post(`/app/appvillagediscuss/queryDetailById?id=${this.id}`).then((res) => {
        if (res?.data) {
          this.data = {
            ...res.data,
            avatar: res.data.createUserName?.substr(0, 2) || '游客',
            messages: res.data.messages || [],
          }
          this.data.images = JSON.parse(res.data.images) || []

          var discussTime = (new Date(res.data.discussDeadline).getTime() * 1) / 1000
          var nowTime = (new Date().getTime() * 1) / 1000
          if (discussTime >= nowTime) {
            this.timestamp = discussTime - nowTime
          }
        }
      })
    },

    publish() {
      if (this.flag) return
      if (!this.content) {
        return this.$u.toast('请输入你的想法')
      }

      this.$http
        .post(`/app/appvillagediscussmessage/addOrUpdate`, {
          content: this.content,
          avatar: this.user.avatar,
          createUserId: this.user.id,
          createUserName: this.user.name,
          discussId: this.id,
        })
        .then((res) => {
          if (res?.code == 0) {
            this.$u.toast('留言成功')
            this.flag = true
            this.showBottomInput = false
            this.getDetail()
          }
        })
    },

    praise() {
      console.log('点赞')
      this.$http.post(`/app/appvillagediscussmessage/suport?id=${this.id}&userId=${this.user.id}`).then((res) => {
        if (res?.code == 0) {
          this.$u.toast('点赞成功!')
          this.getDetail()
        }
      })
    },

    a() {
      console.log(aa)
    },

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

    handleSubmitComment(content) {
      if (!!content) {
        let { id } = this
        this.$http
          .post('/app/appvillagediscussmessage/addOrUpdate', {
            id,
            content,
          })
          .then((res) => {
            if (res?.code == 0) {
              this.$u.toast('提交成功!')
              this.getDetail()
            }
          })
      } else {
        this.$u.toast('不能提交空评论!')
      }
    },
    handleComplete() {
      this.$confirm('是否要结束公示')
        .then(() => {
          let { id } = this
          this.$http.post('/app/appvillagediscuss/finishPublic', { id }).then((res) => {
            if (res?.code == 0) {
              this.$u.toast('已结束公示!')
              this.getDetail()
            }
          })
        })
        .catch(() => 0)
    },
  },
}
</script>

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

  .detail-top {
    padding: 30px;
    background: #fff;
    border-bottom: 16px solid #f6f7f9;

    .avatar {
      height: 64px;
      width: 64px;
      color: #fff;
      background: $uni-color-primary;
      border-radius: 50%;
      font-size: 24px;
      text-align: center;
      line-height: 64px;
      margin-right: 16px;
    }

    .color-999 {
      color: #999999;
    }

    .color-333 {
      color: #333;
    }

    .w-100 {
      width: 100%;
    }

    .statusTag {
      padding: 0 12px;
      line-height: 30px;
      border: 1px solid #2573ff;
      color: #2573ff;
      font-size: 22px;

      &.over {
        border-color: #666;
        color: #666;
      }
    }

    .header-middle {
      padding: 32px 0 48px 0;

      .contsnts {
        font-size: 26px;
        line-height: 1.5;
        word-break: break-all;
      }

      img {
        margin-top: 30px;
        width: 686px;
        height: 486px;
      }
    }

    .img-list {
      img {
        width: calc(33vw - 6px - 24px);
        height: calc(33vw - 6px - 24px);
        margin: 0 12px 12px 0;

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

      .title {
        width: 100%;
        line-height: 112px;
        background: #fff;
        font-size: 32px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999;
      }
    }
  }

  ::v-deep uni-video {
    width: 100%;
  }

  .comments {
    padding: 0 32px 20px;
    font-size: 28px;
    background: #fff;
    .totalCount {
      display: flex;
      justify-content: space-between;

      .total {
        display: block;
        font-size: 30px;
        height: 120px;
        box-sizing: border-box;
        padding-top: 44px;
      }
      .rightCount {
        padding-top: 44px;
      }
    }

    .u-avatar {
      margin-right: 24px;
    }

    .content {
      color: #333;
      margin-left: 72px;
      margin-top: 10px;

      &.color-999 {
        color: #999999;
        font-size: 24px;
        margin-bottom: 48px;
      }
    }
  }

  .bottomInput {
    position: fixed;
    bottom: 0;
    z-index: 11;
    width: 100%;
    background: #fff;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px;
    box-sizing: border-box;
    border-top: 1px solid #eee;
    .leftInput {
      width: 86%;
      height: 58px;
      line-height: 58px;
      text-align: center;
      background: #f0f0f0;
      border-radius: 30px;
    }
    .righticon {
      .icontext {
        margin-left: 10px;
      }
    }
  }

  ::v-deep .u-drawer {
    .u-drawer-content {
      .u-drawer__scroll-view {
        .uni-scroll-view {
          // overflow: hidden;
          overflow: inherit !important;
          .u-input {
            background: #f7f7f7;
            border-radius: 8px 8px 0 0;
            margin: 32px 30px 0 30px;
            .uni-textarea-placeholder {
              padding: 16px 0 0 16px;
            }
            .uni-textarea-textarea {
              padding: 16px 0 0 16px;
            }
          }
          .words {
            background: #f7f7f7;
            border-radius: 0 0 8px 8px;
            margin: 0 30px;
            padding-bottom: 10px;
            text-align: right;
            font-size: 26px;
            color: #999999;
          }
          .bottombtn {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 30px;
            padding: 20px 0;
            .emptys {
              padding: 20px 0;
              font-size: 26px;
              color: #666666;
            }
            .publishs {
              width: 144px;
              height: 64px;
              line-height: 64px;
              text-align: center;
              background: #1365dd;
              border-radius: 32px;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
