<template>
  <view class="page">
    <view class="baseInfo">
      <view class="content" style="transition:height .5s ease;">
        <p class="title">{{ baseInfo.title }}</p>
        <ul>
          <li>
            <span class="label">活动发起方：</span>
            <view class="value">{{ baseInfo.areaName }}</view>
          </li>
          <li>
            <span class="label">活动时间：</span>
            <view class="value"> {{ baseInfo.beginTime|timeVal }} 至 {{ baseInfo.endTime|timeVal }}</view>
          </li>
          <template v-if="stretchWord=='收起'">
            <li>
              <span class="label">活动地点：</span>
              <view class="value">{{ baseInfo.address || '-' }}</view>
            </li>
            <li>
              <span class="label">参与名额：</span>
              <view class="value">{{ baseInfo.total ? baseInfo.total : "不限" }}</view>
            </li>
            <li>
              <span class="label">报名截止时间：</span>
              <view class="value">
                {{ baseInfo.stopSignupTime || '-' }}
                <text v-if="baseInfo.signupStatus==0">({{ "剩余" + baseInfo.timeRemaining }})</text>
              </view>
              <!-- <view class="value" v-else>-</view> -->
            </li>  
            <li>
              <span class="label">活动报名人数：</span>
              <view class="value">{{ baseInfo.signupCount || '-' }}</view>
            </li>
            <li>
              <span class="label">活动状态：</span>
              <view class="value">{{ $dict.getLabel('partyReportActionStatus', baseInfo.actionStatus) }}</view>
              <!-- <view class="value">{{ activeStatus }}</view> -->
            </li>
            <li>
              <span class="label">联系人：</span>
              <view class="value">{{ baseInfo.contactPerson || '-' }}</view>
            </li>
            <li>
              <span class="label">联系电话：</span>
              <view class="value">{{ baseInfo.contactPhone || '-' }}</view>
            </li>
          </template>
        </ul>
      </view>
      <view class="footer" @click="stretch()">
        <span>{{ stretchWord }}</span>
        <image :src="dowm" v-if="stretchWord=='展开'"></image>
        <image :src="up" v-if="stretchWord=='收起'"></image>
      </view>
    </view>
    <view class="html">
      <header>活动介绍</header>
      <!-- <AiWxparse :content="baseInfo.content"/> -->
      <u-parse :html="baseInfo.content"></u-parse>
      <AiTransSpeech v-if="showTrans" :src="baseInfo.speech"/>
    </view>
    <view class="page_footer">
      <p @click="seeSignUpList(baseInfo)">
        <image src="https://cdn.cunwuyun.cn/img/party_detail.png"></image>
        <span>查看报名情况</span>
      </p>
      <p v-if="baseInfo.nowUsersignupStatus==null&&baseInfo.actionStatus!=2&&baseInfo.signupStatus==0"
         @click="signUp(baseInfo)">
        <image src="https://cdn.cunwuyun.cn/img/party_now_reg.png"></image>
        <span>立即报名</span>
      </p>
      <p v-if="baseInfo.nowUsersignupStatus==1&&baseInfo.actionStatus!=2&&baseInfo.signupStatus==0"
         @click="open()">
        <image src="https://cdn.cunwuyun.cn/img/party_cancel_reg.png"></image>
        <span>取消报名</span>
      </p>
      <p v-if="baseInfo.nowUsersignupStatus==1&&baseInfo.signupContent==null&&['1','2'].includes(baseInfo.actionStatus)&&baseInfo.signupStatus==1"
         @click="goLog(baseInfo)">
        <image src="https://cdn.cunwuyun.cn/img/party_add_log.png"></image>
        <span>填写活动日志</span>
      </p>
      <p v-if="baseInfo.nowUsersignupStatus==1&&baseInfo.signupContent!=null&&['1','2'].includes(baseInfo.actionStatus)&&baseInfo.signupStatus==1"
         @click="goMyLog(baseInfo)">
        <image src="https://cdn.cunwuyun.cn/img/party_log.png"></image>
        <span>我的活动日志</span>
      </p>
    </view>
  </view>
</template>

<script>
import {mapState} from "vuex"
export default {
  name: 'partyDetail',
  computed: {
    ...mapState(['user'])
  },
  data() {
    return {
      baseInfo: {},
      height: 210,
      stretchWord: "展开",
      listType: '',
      footerList: [
        {name: "查看报名情况", id: 0},
        {name: "立即报名", id: 1}
      ],
      id: '',
      dowm: 'https://cdn.cunwuyun.cn/img/party_down.png',
      up: 'https://cdn.cunwuyun.cn/img/party_up.png',
      showTrans: false,
      activeStatus:""
    }
  },
  onLoad(options) {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#e60012",
    })
    this.id = options.id;
    this.searchDetail(options.id);
    this.listType = options.listType;
    this.$dict.load('partyReportActionStatus');
  },
  onShow() {
    this.showTrans = true;
    this.searchDetail(this.id);
  },
  onHide() {
    this.showTrans = false
  },
  filters: {
    timeVal(val) {
      if (val) {
        return val.substring(0, 16)
      }
    }
  },
  methods: {
    // getActiveStatus(){
    //   uni.getStorage({
    //     key: "dicts",
    //     success: (res) => {
    //       const jsonDicts = JSON.parse(res.data)
    //       this.activeStatus = jsonDicts.find((e) => e.key == "partyReportActionStatus").values[this.baseInfo.actionStatus].dictName || "-"
    //     },
    //     fail() {
    //       this.activeStatus = "-"
    //     }
    //   })
    // },
    searchDetail(id) {
      this.$instance.post(`/app/apppartyreport/queryDetailById?id=${id}&partyId=${this.user.partyId}`).then(res => {
        if (res && res.data) {
          console.log(res.data,222);
          this.baseInfo = {...res.data};
          this.baseInfo.stopSignupTime = this.baseInfo.stopSignupTime && this.baseInfo.stopSignupTime.substring(0, 16);
          // this.getActiveStatus() ;
        }
      })
    },
    stretch() {
      this.stretchWord == '展开' ? this.stretchWord = '收起' : this.stretchWord = '展开';
      this.height == 210 ? this.height = 506 : this.height = 210;
    },
    signUp(e) {
      uni.navigateTo({
        url: `./signUp?reportId=${e.id}`
      })
    },
    seeSignUpList(e) {
      uni.navigateTo({
        url: `./signUpList?reportId=${e.id}`
      })
    },
    goLog(e) {
      uni.navigateTo({
        url: `./fillLog?reportId=${e.id}&signupId=${e.signupId}`
      })
    },
    goMyLog(e) {
      uni.navigateTo({
        url: `./myLog?signupId=${e.signupId}&title=${e.title}`
      })
    },
    open() {

      uni.showModal({
        title: '提示',
        content: '取消报名后，本次活动不允许再次报名，是否确定取消？',
        success: (res) => {
          if (res.confirm) {
            this.cale();
          } else if (res.cancel) {

          }
        }
      });
    },
    cale() {
      this.$instance.post(`/app/apppartyreport/signup-cancel?id=${this.baseInfo.signupId}`,).then(res => {
        if (res.code == 0) {
          uni.navigateBack({
            delta: 1
          });
        }
      }).catch(err => {
        console.log(err);
      })
    }
  },
}
</script>

<style lang="scss" scoped>
 

.page {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .baseInfo {
    width: 100%;
    background: rgba(230, 0, 18, 1);
    overflow: hidden;

    .content {
      width: 100%;
      background: rgba(230, 0, 18, 1);
      overflow: hidden;
      padding: 0 32px;
      box-sizing: border-box;

      .title {
        font-size: 40px;
        color: #fff;
        word-break: break-all;
      }

      ul {
        width: 100%;

        li {
          width: 100%;
          display: flex;
          font-size: 30px;
          margin-bottom: 16px;

          .label {
            font-size: 28px;
            color: #fff;
          }

          .value {
            flex: 1;
            font-size: 28px;
            color: rgba(255, 232, 232, 1);
            opacity: 0.8;
          }
        }
      }
    }

    .footer {
      width: 100%;
      height: 80px;
      color: #fff;
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: center;

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

  .html {
    width: 100%;
    padding: 0 32px 180px 32px;
    box-sizing: border-box;
    background-color: #fff;

    header {
      height: 96px;
      line-height: 96px;
    }
  }

  .page_footer {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 104px;
    background: rgba(255, 228, 221, 1);
    color: #D73D3D;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;

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

    p {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      &.active {
        background-color: #D73D3D;
        color: #ffffff;
      }
    }

    p:nth-child(1) {
      border-right: 2px solid rgb(241, 178, 178);
      box-sizing: border-box;
    }

    p:nth-child(2) {
      background-color: #FE5A49;
      box-sizing: border-box;
      color: #fff;
    }

    p:only-child {
      width: 100%;
      border-right: none;
    }

  }
}
</style>
