<template>
  <view class="page">
    <ul class="nav_bar">
      <li
        v-for="(e, index) in navList"
        :key="index"
        :class="{ active: navId == e.id }"
        @click="getList(e.id)"
      >
        {{ e.name }}
      </li>
    </ul>
    <view class="list_content" v-if="list.length > 0">
      <ul class="list_div">
        <li v-for="(e, index) in list" :key="index">
          <view class="up" @click="goToDetail(e)">
            <h3>{{ e.title }}</h3>
            <view class="info">
              <span>活动时间：</span>
              <p>
                {{ e.beginTime | timeVal }}至<br />{{ e.endTime | timeVal }}
              </p>
            </view>
            <view class="info">
              <span>活动地点：</span>
              <span class="address">{{ e.address }}</span>
            </view>
          </view>
          <view class="btn">
            <view
              class="button"
              :class="{
                color4: e.nowUsersignupStatus == null,
                color5: e.nowUsersignupStatus == 1,
              }"
              v-if="
                e.nowUsersignupStatus == null &&
                e.actionStatus != 2 &&
                e.signupStatus == 0
              "
            >
              <span @click="signUp(e)">去报名</span>
            </view>
            <view
              class="button callBtn"
              :class="{
                color4: e.actionStatus == 0,
                color5:
                  (e.actionStatus == 1 && e.signupStatus == 1) ||
                  (e.actionStatus == 2 && e.signupStatus == 1),
              }"
              v-if="navId == 1"
              @click="handlerCall(e)"
            >
              <span>呼叫联系人</span>
            </view>
            <view
              class="button color4"
              v-if="
                navId == 1 &&
                e.nowUsersignupStatus &&
                e.signupContent == null &&
                e.signupStatus == 1 &&
                ['1', '2'].includes(e.actionStatus)
              "
            >
              <span @click="goToLog(e)">填写日志</span>
            </view>
            <view
              class="button color4"
              v-if="
                navId == 1 &&
                e.nowUsersignupStatus &&
                e.signupContent &&
                e.signupStatus == 1 &&
                ['1', '2'].includes(e.actionStatus)
              "
            >
              <span @click="goToLog(e)">编辑日志</span>
            </view>
          </view>
          <p
            class="tip"
            :class="{
              color1: e.actionStatus == 0,
              color2: e.actionStatus == 1,
              color3: e.actionStatus == 2,
            }"
          >
            <span v-if="e.actionStatus == 0">未开始</span>
            <span v-if="e.actionStatus == 1">进行中</span>
            <span v-if="e.actionStatus == 2">已结束</span>
          </p>
        </li>
      </ul>
    </view>
    <AiEmpty v-if="list.length == 0" />
    <view class="footer">
      <p
        v-for="(e, index) in footerList"
        :key="index"
        :class="{ active: navId == e.id }"
        @click="goToList(e.id)"
      >
        <image
          src="https://cdn.cunwuyun.cn/img/party_detail.png"
          v-if="e.id == 2"
        ></image>
        <image
          src="https://cdn.cunwuyun.cn/img/party_now_reg.png"
          v-if="e.id == 3"
        ></image>
        <span>{{ e.name }}</span>
      </p>
    </view>
  </view>
</template>

<script>
import mixins from "./mixins/mixin";
import { mapState } from "vuex";

export default {
  name: "AppPartyReport",
  appName: "报到服务",
  mixins: [mixins],
  computed: {
    ...mapState(["user"]),
  },
  data() {
    return {
      navList: [
        { name: "可报名的活动", id: 0 },
        { name: "我的活动日程", id: 1 },
      ],
      footerList: [
        { name: "社区活动列表", id: 2 },
        { name: "我的活动记录", id: 3 },
      ],
      navId: 0,
      list: [],
    };
  },
  filters: {
    timeVal(val) {
      if (val) {
        return val.substring(0, 16);
      }
    },
  },
  onLoad() {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#e60012",
    })
    this.getList(0);
  },
  onShow() {
    this.getList(this.navId);
  },
  methods: {
    getList(id) {
      this.navId = id;
      this.list = [];
      this.$instance
        .post(
          `/app/apppartyreport/list-xcx?listType=${id}&partyId=${
            this.user.partyId
          }&partyOrgId=${this.user.partyOrgId}&size=${10000}`
        )
        .then((res) => {
          if (res?.data) {
            if (res.data?.records) {
              this.list = res.data.records;
            }
          }
        });
    },
    goToList(id) {
      if (id == 2) {
        uni.navigateTo({
          url: `./communityList?id=${id}`,
        });
      } else if (id == 3) {
        uni.navigateTo({
          url: `./myList?id=${id}`,
        });
      }
    },
    goToDetail(e) {
      uni.navigateTo({
        url: `./partyDetail?id=${e.id}&listType=${this.navId}`,
      });
    },
    signUp(e) {
      console.log(e);
      uni.navigateTo({url: `./signUp?reportId=${e.id}`})
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .nav_bar {
    width: 100%;
    height: 112px;
    background: #e60012;

    li {
      width: 50%;
      float: left;
      height: 90px;
      line-height: 90px;
      text-align: center;
      color: #fff;
      font-size: 28px;
      opacity: 0.8;
      position: relative;

      &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        height: 4px;
        width: 40px;
        background-color: transparent;
      }
    }

    li.active {
      opacity: 1;

      &:after {
        background-color: #fff;
      }
    }
  }

  .list_content {
    width: calc(100% - 64px);
    height: calc(100% - 284px);
    padding: 32px;
    overflow: auto;

    .list_div {
      width: 100%;
      height: 100%;
      padding-bottom: 400px;

      li {
        width: 100%;
        height: 446px;
        background-color: #fff;
        border-radius: 4px;
        margin-bottom: 32px;
        position: relative;
        overflow: hidden;

        .up {
          height: 330px;
          width: 100%;
          padding: 32px;
          word-break: break-all;
          box-sizing: border-box;
          border-bottom: 2px solid #eeeeee;

          h3 {
            color: #333333;
            font-size: 32px;
            font-weight: bold;
            width: 90%;
            display: -webkit-box;
            word-break: break-all;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
          }

          .info {
            width: 100%;
            display: flex;
            font-size: 30px;
            margin-top: 32px;

            span {
              width: 150px;
              color: rgba(153, 153, 153, 1);
            }

            p {
              flex: 1;
              color: #343d65;
              word-break: break-all;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-box-orient: vertical;
            }

            .address {
              width: 320px;
            }
          }

          .endTime {
            box-sizing: border-box;
            padding-left: 150px;
            font-size: 30px;
            color: #343d65;
          }
        }

        .btn {
          height: 118px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding: 0 32px;
          box-sizing: border-box;

          .button {
            width: 152px;
            height: 56px;
            border-radius: 28px;
            color: #1365dd;
            text-align: center;
            line-height: 56px;
            margin-left: 16px;
            font-size: 28px;
            border: 2px solid rgba(19, 101, 221, 1);
          }

          .callBtn {
            width: 196px !important;
            margin-left: 0 !important;
          }

          .color4 {
            color: #1365dd;
            border: 2px solid rgba(19, 101, 221, 1);
          }

          .color5 {
            color: #606060;
            border: 2px solid #e1e1e1;
          }
        }

        .tip {
          position: absolute;
          width: 200px;
          height: 56px;
          text-align: center;
          line-height: 56px;
          right: -50px;
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);

          top: 20px;

          &.color1 {
            color: #ff8822;
            background-color: #fff3e9;
          }

          &.color2 {
            color: #5a98f2;
            background-color: #eef5ff;
          }

          &.color3 {
            color: #999999;
            background-color: #f2f2f2;
          }
        }
      }
    }
  }

  .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;
    }
  }
}
</style>
