<template>
  <view class="page">
    <view v-if="isShow" style="height:100%;width:100%">
      <div class="party_header" v-if="list.length > 0">
        <view class="search-box">
          <view class="search-input flex-row" @click="changeSearchBox">
            <image src="https://cdn.cunwuyun.cn/img/search-red.svg"/>
            <text>{{ title || '请输入活动名称或活动地点' }}</text>
          </view>
        </view>
      </div>
      <div class="party_header" v-if="list.length == 0" style="height: auto;">
        <view class="search-box">
          <view class="search-input flex-row" @click="changeSearchBox">
            <image src="https://cdn.cunwuyun.cn/img/search-red.svg"/>
            <text>{{ title || '请输入活动名称或活动地点' }}</text>
          </view>
        </view>
      </div>
      <view class='slect flex-row'>
        <view class="uni-list type-slect">
          <view class="uni-list-cell">
            <view class="uni-list-cell-db">
              <picker @change="bindPickerChange" :range="activeTypeArr">
                <view class="uni-input">{{ actionName }}</view>
                <image src="https://cdn.cunwuyun.cn/img/down.svg"></image>
              </picker>
            </view>
          </view>
        </view>
        <view class="uni-list type-slect">
          <view class="uni-list-cell">
            <view class="uni-list-cell-db">
              <picker @change="bindStatusChange" :range="applyStatusArr">
                <view class="uni-input">{{ signupName }}</view>
                <image src="https://cdn.cunwuyun.cn/img/down.svg"></image>
              </picker>
            </view>
          </view>
        </view>
      </view>
      <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>
                <p>{{ e.address }}</p>
              </view>
            </view>
            <view class="btn">
              <view class="button callBtn"
                    :class="{color4:e.actionStatus==0,color5:e.actionStatus==1&&e.signupStatus==1 || e.actionStatus==2&&e.signupStatus==1}"
                    @click="handlerCall(e)" v-if="e.nowUsersignupStatus">
                <span>呼叫联系人</span>
              </view>
              <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 color4"
                    v-if="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="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>
    <view v-if="!isShow" class="search-input">
      <view class="input-box flex-row">
        <input type="text" class="input" placeholder="请输入活动名称或活动地点" focus="false" v-model="title"/>
        <image class="sousuo" src="https://cdn.cunwuyun.cn/img/search-active.svg"/>
        <image v-if="title" @tap="clearInput" class="clear" src="https://cdn.cunwuyun.cn/img/empty-Input.svg"/>
        <view class="search-word" @click="getList()">搜索</view>
      </view>
    </view>
  </view>
</template>

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

export default {
  name: "partyReportList",
  mixins: [mixins],
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      navId: 0,
      list: [],
      title: '',
      isShow: true,
      applyStatusArr: [],
      activeTypeArr: [],
      actionStatus: '',
      signupStatus: '',
      actionName: '活动状态',
      signupName: '报名状态'

    }
  },
  filters: {
    timeVal(val) {
      if (val) {
        return val.substring(0, 16)
      }
    }
  },
  onLoad(options) {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#e60012",
    })
    this.navId = options.id;
    this.$dict.load('partyReportActionStatus', 'partyReportSignupStatus');
    this.$dict.getDict('partyReportActionStatus').map(i => {
      this.activeTypeArr.push(i.dictName)
    });
    this.$dict.getDict('partyReportSignupStatus').map(i => {
      this.applyStatusArr.push(i.dictName)
    })
    this.getList();
  },
  onShow() {
    this.getList();
  },
  methods: {
    getList() {
      this.$instance.post(`/app/apppartyreport/list-xcx?listType=${this.navId}&partyId=${this.user.partyId}&partyOrgId=${this.user.partyOrgId}&title=${this.title}&actionStatus=${this.actionStatus}&signupStatus=${this.signupStatus}&size=${10000}`, null, {}).then(res => {
        if (res.code == 0) {
          if (res.data.records == null) {
            this.list = [];
          } else {
            this.list = res.data.records;
          }
          this.isShow = true;
        } else {

        }
      }).catch(err => {

      })
    },
    changeSearchBox() {
      this.isShow = false
    },
    clearInput() {
      this.title = ''
    },
    bindPickerChange(e) {
      this.actionName = this.activeTypeArr[Number(e.detail.value)];
      this.actionStatus = e.detail.value;
      this.getList();
    },
    bindStatusChange(e) {
      this.signupName = this.applyStatusArr[Number(e.detail.value)];
      this.signupStatus = e.detail.value;
      this.getList();
    },
    goToDetail(e) {
      uni.navigateTo({
        url: `./partyDetail?id=${e.id}&listType=${this.navId}`
      })
    },
    signUp(e) {
      uni.navigateTo({
        url: `./signUp?reportId=${e.id}`
      })
    },
    goToLog(e) {
      uni.navigateTo({
        url: `./fillLog?signupId=${e.signupId}&reportId=${e.id}&signupContent=${e.signupContent}`
      })
    }
  }

}
</script>

<style lang="scss" scoped>
 

.page {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .slect {
    width: 100%;
    height: 96px;
    background-color: #fff;
    color: #666;

    .type-slect {
      width: 50%;
      border-right: 1px solid #F7F7F7;
      margin: 30px 0;
      box-sizing: border-box;
      text-align: center;
      font-size: 26px;

      .uni-input {
        display: inline-block;
      }

      image {
        width: 32px;
        height: 32px;
        display: inline-block;
        position: relative;
        top: 6px;
        margin-left: 8px;
      }
    }

    .type-slect:nth-child(2) {
      border: none;
    }
  }

  .party_header {
    background: #E60012;

    .search-box {
      width: 100%;
      padding: 24px 32px;
      box-sizing: border-box;
      background: #E60012;

      .search-input {
        line-height: 64px;
        width: 100%;
        height: 100%;
        border-radius: 32px;
        background: #CE0010;
        color: #fff;
        font-size: 26px;

        text {
          white-space: nowrap;
          overflow: hidden;
          color: #fff;
          text-overflow: ellipsis;
        }

        image {
          width: 40px;
          height: 40px;
          margin: 8px 8px 8px 24px;
          position: relative;
          top: 6px;
        }
      }
    }
  }

  .search-input {
    .input-box {
      width: 100%;
      height: 112px;
      background-color: #fff;
      padding: 24px 32px;
      box-sizing: border-box;
      position: relative;

      .sousuo {
        position: absolute;
        top: 35px;
        left: 60px;
        width: 40px;
        height: 40px;
      }

      .input {
        background-color: #F3F3F3;
        width: 598px;
        height: 64px;
        color: #999999;
        font-size: 26px;
        margin-left: 8px;
        border-radius: 32px;
        padding-left: 70px;
        padding-right: 60px;
        box-sizing: border-box;
      }

      .clear {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 40px;
        right: 130px;
        z-index: 10;
      }

      .search-word {
        font-size: 28px;
        color: #135AB8;
        line-height: 60px;
        margin-left: 20px;
      }
    }
  }

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

    .list_div {
      width: 100%;
      height: 100%;

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

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

          h3 {
            color: #333333;
            font-size: 32px;
            font-weight: bold;
            width: 90%;
            word-break: break-all;
            display: -webkit-box;
            -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;
            }

          }

        }

        .btn {
          height: 96px;
          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;
            font-size: 28px;
            margin-left: 16px;
            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: -50rpx;
          -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;
          }

        }


      }
    }
  }

  .no-affairs {
    width: 100%;
    height: calc(100% - 210rpx);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .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;

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

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

  }
}
</style>
