<template>
  <view class="page">
    <view class="form">
      <div class=" basic-item flex-row">
        <div class="color-333"><span class="color-red">*</span>活动报名类型</div>
        <div class="select" @click="open()">
          <text class="content-text" :class="reportName == '请选择' ? 'colo-999' : 'color-333'">{{ reportName }}</text>
          <image src="https://cdn.cunwuyun.cn/img/jiantou.png" class="image"></image>
        </div>
      </div>
      <div class=" basic-item flex-row">
        <div class="color-333"><span class="color-red">*</span>联系手机</div>
        <input type="text" placeholder="请输入手机号码" maxlength="11" v-model="baseInfo.phone" adjust-position="false">
      </div>
      <div class="textarea">
        <div class="color-333">报名备注</div>
        <textarea type="textarea" v-if="showTextarea" placeholder="填写报名备注（100字以内）" v-model="baseInfo.remark"
                  adjust-position="false" maxlength="100"></textarea>
        <p v-else style="color:#999;font-size:34rpx;width:100%;height:302rpx;">填写报名备注（100字以内）</p>
      </div>
    </view>
    <view class="notice">
      <p>报到类型说明：</p>
      <p>1、单位联系社区报到服务：党员所属单位联系的社区参与活动，到社区服务；</p>
      <p>2、居住地社区报到服务：党员所在本人居住的社区参与活动，到社区服务；</p>
      <p>3、其他村(社区)报到服务：党员所在除单位联系社区与居住社区以外的其他社区参与活动，到社区服务；</p>
    </view>
    <view class="report" @click="report()">提交</view>
    <u-popup v-model="showPopup" mode="right">
      <view class="drawer_main">
        <header>
          <p>活动报到类型</p>
          <span>（单选）</span>
        </header>
        <ul>
          <li v-for="(e,index) in list" :key="index" @click="selectType(e)" :class="{active:activeId==e.dictValue}">
            {{ e.dictName }}
          </li>
        </ul>
        <view class="footer" @click="saveType()">
          保存
        </view>
      </view>
    </u-popup>
    <!-- <AiDrawer mode="right" ref="drawer" @status="drawerStatus">
      <view class="drawer_main">
        <header>
          <p>活动报到类型</p>
          <span>（单选）</span>
        </header>
        <ul>
          <li v-for="(e,index) in list" :key="index" @click="selectType(e)" :class="{active:activeId==e.dictValue}">
            {{ e.dictName }}
          </li>
        </ul>
        <view class="footer" @click="saveType()">
          保存
        </view>
      </view>
    </AiDrawer> -->
  </view>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: "signUp",
  computed: {
    ...mapState(['user'])
  },
  data() {
    return {
      baseInfo: {
        reportId: '',
        remark: '',
        phone: '',
        reportType: '',
        partyId: '',
        partyName: '',  // 党员姓名
      },
      reportName: '请选择',
      show: false,
      list: [],
      activeId: '',
      activeObj: {},
      showTextarea: true,
      showPopup: false
    }
  },
  onLoad(options) {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#e60012",
    })
    this.$dict.load('partyReportSignupReportType');
    this.baseInfo.reportId = options.reportId;
    this.baseInfo.partyId = this.user.partyId;
    this.baseInfo.phone = this.user.phone;
    this.baseInfo.partyName = this.user.realName
  },
  methods: {
    showModel(title) {
      uni.showModal({
        title: '温馨提示',
        content: title,
        showCancel: false,
        confirmColor: "#135AB8",
        success(res) {
          if (res.confirm) {
          }
        }
      })
    },
    open() {
      this.list = this.$dict.getDict('partyReportSignupReportType');
      this.showPopup = true
    },
    selectType(e) {
      this.activeId = e.dictValue;
      this.activeObj = e;

    },
    drawerStatus(val) {
      this.showTextarea = !val;
    },
    saveType() {
      this.reportName = this.activeObj.dictName;
      this.showPopup = false
    },
    report() {
      if (this.reportName == null || this.reportName == '' || this.reportName == '请选择') {
        this.showModel('请选择活动报名类型')
        return false
      }
      if (!this.baseInfo.phone) {
        this.showModel('请填写手机号码')
        return false
      }
      this.baseInfo.reportType = this.$dict.getValue('partyReportSignupReportType', this.reportName);
      this.$instance.post(`/app/apppartyreport/signup`, this.baseInfo, null).then(res => {
        if (res.code == 0) {
          this.$u.toast('提交成功')
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            });
          }, 2000)
        }
      }).catch(err => {
        this.$u.toast('提交失败')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
 

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

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

    .basic-item {
      font-size: 32px;
      justify-content: space-between;
      width: 100%;
      height: 112px;
      padding: 32px 32px 32px 12px;
      box-sizing: border-box;
      background-color: #fff;
      border-bottom: 1px solid #eee;

      input {
        text-align: right;
      }

      .wid-110 {
        width: 214px;
      }

      .skill-text {
        max-width: 432px;
        text-align: right;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 30px;
      }

      .picker {
        justify-content: flex-end;
        align-items: center;
        color: #999999;
        font-size: 32px;
        background-color: #FFFFFF;
      }

      .picker > .AiArea {
        background-color: #fff !important;
      }

      .image {
        width: 32px;
        height: 32px;
        vertical-align: middle;
      }

      .wei-text {
        width: 40%;
      }

      .msg-value {
        width: 60%;
      }

      .msg-btn {
        width: 160px;
        text-align: right;
        background-color: #fff !important;
      }

      button {
        font-size: 28px;
        background-color: #fff;
        line-height: 48px;
        padding: 0;

      }

      button::after {
        border: 0;
      }

      .button-hover {
        background-color: #fff;
      }

      button[disabled] {
        background-color: #fff !important;
        font-size: 28px;
        border-radius: 0;
      }
    }

    .textarea {
      padding: 32px;
    }
  }

  ::v-deep .uni-drawer {
    z-index: 20000 !important;
  }

  .drawer_main {
    width: 100%;
    height: 100%;
    padding: 64px 32px 0 32px;
    box-sizing: border-box;
    position: relative;

    header {
      width: 100%;
      height: 96px;
      display: flex;
      align-items: center;

      p {
        color: #333333;
        font-size: 32px;
        width: 192px;
        font-weight: 600;
      }

      span {
        font-size: 24px;
        color: #666;
      }
    }

    ul {
      width: 100%;
      overflow: hidden;
      height: 500px;

      li {
        width: 344px;
        height: 96px;
        background: rgba(249, 249, 249, 1);
        margin-bottom: 40px;
        font-size: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
      }

      li.active {
        background: rgba(255, 228, 221, 1);
        color: #D73D3D;

      }
    }

    .footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 112px;
      line-height: 112px;
      text-align: center;
      color: #ffffff;
      font-size: 36px;
      background: rgba(230, 0, 18, 1);
    }
  }

  .notice {
    width: 100%;
    font-weight: 400;
    box-sizing: border-box;
    padding: 64px 32px 0 32px;
    color: rgba(153, 153, 153, 1);
    font-size: 24px;


  }

  .report {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 112px;
    line-height: 112px;
    font-size: 32px;
    text-align: center;
    background: rgba(230, 0, 18, 1);
    color: #fff;


  }
}
</style>
