<template>
  <div class="detail">
    <div class="header-content">
      <div class="header-top">
        <img :src="imgUrl" alt="" @click.stop="previewImage()" />
      </div>
      <div class="header-middle">
        <div class="img-title">{{ detail.title }}</div>
        <div class="cards">
          <div class="cards-left">发布时间</div>
          <div class="cards-right">{{ detail.createTime && detail.createTime.substring(0, detail.createTime.length - 9) }}</div>
        </div>
      </div>

      <div class="header-bottom">
        <div class="content-details">
          <div v-html="detail.content"></div>
        </div>

      </div>
    </div>
    
    <div class="pad-t100"></div>
    <div class="add-btn" v-if="!detail.mySignUP" @click="signUp">
      <div>参与活动</div>
    </div>


    <u-modal v-model="show" :show-cancel-button="true" @confirm="bindPhoneConfirm" @cancel="cancel">
      <div class="item">
        <span class="label"><span class="tips">*</span>手机号</span>
        <div class="value">
          <u-input type="tel" placeholder="请填写手机号" v-model="phone" input-align="right" placeholder-style="color:#999;font-size:15px;" height="42"  :maxlength="11" :clearable="false" />
        </div>
      </div>
      <!-- <div class="item">
        <span class="label"><span class="tips">*</span>验证码</span>
        <div class="value">
          <u-input type="tel" placeholder="请填写验证码" v-model="form.code" input-align="right" placeholder-style="color:#999;font-size:15px;" height="42"  :maxlength="6" :clearable="false" />
        </div>
      </div> -->
    </u-modal>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Detail',
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      id: '',
      createUserId: '',
      detail: {},
      activeList: [],
      imgList: [],
      list: [
        {
          name: '活动详情',
        },
        {
          name: '活动动态',
        },
      ],
      current: 0,
      timeEndTime: '',
      timeEnd: '',
      timeNow: '',
      show: false,
      phone: '',
      imgUrl: 'https://cdn.cunwuyun.cn/public/16749723482248.png'
    }
  },
  onLoad(option) {
    this.id = option.id
    this.createUserId = option.createUserId
    this.$dict.load(['villageActivityStatus']).then(() => {
      this.getDetail()
    })
  },
  onShow() {
    document.title = '活动详情'
    // uni.$on('refresh', () => {
    //   this.getListInit()
    // })

    uni.$on('updateGetDetail', () => {
      this.getDetail()
    })
  },
  methods: {
    getDetail() {
      this.$http.post(`/app/appactivityinfo/queryDetailById?id=${this.id}`).then((res) => {
        if (res?.data) {
          this.detail = res.data
          this.timeEnd = new Date(this.detail.endTime).getTime()
          this.timeNow = new Date().getTime()

          if (this.detail) {
            if (this.detail.url) {
              this.detail.url = JSON.parse(res.data.url || '[]')
            }
          }
        }
      })
    },

    previewImage() {
      var images = [{url: this.imgUrl}]
      uni.previewImage({
        urls: images.map((v) => v.url),
        current: this.imgUrl,
      })
    },
    signUp() {
      if(!this.user.phone) {
        this.show = true
      }else {
        this.$http.post(`/app/appactivityinfo/signup?activityId=${this.id}`).then((res) => {
          if (res.code == 0) {
            this.$u.toast('报名成功')
            this.getDetail()
          }
        })
      }
    },
    bindPhoneConfirm() {
      if(!this.phone) {
        return this.$u.toast('请输入手机号')
      }
      let regTel = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (!regTel.test(this.phone)) {
        return this.$u.toast('请输入正确的手机号')
      }

      this.$http.post(`/appactivityinfo/bindPhone?phone=${this.phone}`).then((res) => {
        if (res.code == 0) {
          this.getUserInfo()
          this.$u.toast('绑定成功')
        }
      })
    },
    cancel() {
      this.phone = ''
      this.show = false 
    },
    getUserInfo () {
      this.$http.post('/api/user/info').then(res => {
        if (res.code === 0) {
          this.$store.commit('setUser', res.data)
        }
      })
    },
    toCalendar() {
      uni.navigateTo({url: './ActiveCalendar'})
    }
  },
}
</script>
<style scoped lang="scss">
.detail {
  width: 100%;
  height: 100%;
  // background-color: #fff;

  .info-title {
    padding-left: 32px;
    line-height: 108px;
    font-size: 32px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
  }
  .tab-title {
    line-height: 108px;
    font-size: 32px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
    span {
      display: inline-block;
      width: 192px;
      text-align: center;
    }
    .active {
      color: #3671ee;
      border-bottom: 4px solid #3671ee;
    }
  }
  .status0 {
    background: #000;
  }
  .status1 {
    background: #42d784;
  }
  .status2 {
    background: #e4e4e4;
  }
  .status3 {
    background: #1aaaff;
  }

  .status4,
  .status5 {
    background: #e4e4e4;
  }
  .header-content {
    // padding-bottom: 80px;
    .header-top {
      width: 100%;
      height: 440px;
      img {
        width: 100%;
        height: 100%;
      }
    }

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

      .img-title {
        font-size: 36px;
        font-weight: 600;
      }

      .header-middle-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 32px;
        .left {
          .left-btn {
            padding: 4px 8px;
            border-radius: 8px;

            font-size: 26px;
            color: #ffffff;
            text-align: center;
          }
        }
        .right {
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            vertical-align: text-top;
            margin-right: 8px;
          }
        }
      }

      .cards {
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid #eee;
        padding: 36px 0;
        line-height: 40px;
        font-size: 28px;

        .cards-left {
          color: #999;
        }

        .cards-right {
          color: #333;
        }
      }
    }

    .header-bottom {
      // background: #fff;

      .content-details {
        padding: 32px 32px 130px 32px;
        .font {
          margin-top: 32px;
          font-size: 30px;
          line-height: 1.5;
        }
        .font-img {
          margin-top: 26px;
          width: 100%;
          height: 480px;
        }
      }

      .content-trends {
        // padding-bottom: 40px;
        background: #f3f6f9;
        .details {
          .card {
            background: #fff;
            padding: 26px 32px 28px 32px;
            margin-bottom: 20px;
            .card-nav {
              display: flex;
              .avatar {
                width: 64px;
                height: 64px;
                line-height: 60px;
                background: #4e8eee;
                border-radius: 50%;
                text-align: center;

                font-size: 24px;
                font-weight: 500;
                color: #ffffff;
                margin-right: 16px;
              }
              .right {
                // display: inline;
                display: flex;
                flex-direction: column;

                .name {
                  font-size: 26px;
                  font-weight: 500;
                }
                .time {
                  font-size: 22px;
                  color: #999999;
                }
              }
            }

            .card-font {
              margin-top: 36px;
              line-height: 1.6;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
            }

            .card-img {
              margin-top: 16px;
              img {
                width: 224px;
                height: 224px;
                margin-right: 8px;
              }
              img:nth-child(3n + 0) {
                margin-right: 0;
              }
            }

            .card-icon {
              display: flex;
              justify-content: space-between;
              margin-top: 28px;
              div {
                display: flex;
                align-items: center;
                span {
                  font-size: 24px;
                }
              }
            }
          }
        }

        ::v-deep .emptyWrap {
          // background-color: pink;
          padding-bottom: 50px;
        }

        .noDeatil {
          background-color: #f3f6f9;
          img {
            width: 400px;
            height: 240px;
            transform: translate(50%, 25%);
            padding-bottom: 156px;
          }
        }

        .card-bottom {
          height: 20px;
          background-color: #f3f6f9;
        }
      }
    }

    .fixedBtns {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 112px;
      line-height: 112px;
      background: #1365dd;
      text-align: center;
      font-size: 32px;
      font-weight: 500;
      color: #ffffff;
    }
  }

  .add-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    div {
      width: 100%;
      height: 100px;
      background: #3975C6;
      text-align: center;
      line-height: 100px;
      color: #fff;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 34px;
    }
  }

  .item{
    width: calc(100% - 32px);
    padding: 20px 32px 32px 16px;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    font-size: 30px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666;
    line-height: 48px;
    box-sizing: border-box;
    margin: 0 0 0 16px;
    .color-999{
      color: #999;
    }
    .value{
      color: #333;
      .u-icon{
        margin-left: 16px;
      }
    }
    .tips{
      display: inline-block;
      width: 16px;
      font-size: 32px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #FF4466;
      line-height: 44px;
      margin-right: 4px;
    }
  }
}
</style>
