<template>
  <div class="wrapper">
    <div class="bg-fff mar-b24">
      <div class="select">
        <div class="label">
          <span class="tips">*</span>积分类型
        </div>
        <div class="value" @click="showTypeSelect=true">{{typeName}}<u-icon name="arrow-right" color="#ddd" size="24" style="margin-left: 4px" ></u-icon></div>
      </div>
      <div class="text-area">
        <div class="title"><span class="tips">*</span>申请描述</div>
        <u-input v-model="value" type="textarea" :height="200" placeholder="请输入描述信息" placeholder-style="font-size:20px;color:#999;" maxlength="500" />
      </div>
    </div>
    <div class="upload">
      <div class="bg-fff" style="padding-bottom:24px;">
        <div class="title"><span class="tips"></span>图片上传<span class="mini-text">(最多9张)</span></div>
        <AiUploader v-model="fileList" multiple placeholder="上传图片" :limit="9"></AiUploader>
      </div>
    </div>
    <div class="footer" @click="confirmAdd">
      <div class="btn">提交</div>
    </div>
    <u-select v-model="showTypeSelect" :list="typeList"  @confirm="confirmType" value-name="id" label-name="name"></u-select>
  </div>
</template>
<script>
import {mapState} from 'vuex';

export default {
  name: "add",
  appName: "积分申请",
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      value: '',
      fileList: [],
      typeId: '',
      typeName: '',
      typeList: [{id: '1', name: '111'}, {id: '2', name: '222'}],
      showTypeSelect: false
    };
  },
  onLoad(options) {
    if(options.id) {
      this.typeId = options.id
      this.typeName = options.name
    }
  },
  methods: {
    confirmAdd() {
      if(!this.value) {
        this.$u.toast('请输入申请描述')
      }
      this.$instance.post(`/app/partyOrganization/queryPartyOrganizationListByName`).then((res) => {
        if(res?.data) {
          this.$u.toast('申请成功')
          setTimeout(() => {
            uni.navigateBack()
          }, 500)
        }
      })
    },
    confirmType(e) {
      this.typeId = e[0].value
      this.typeName = e[0].label
    }
  }
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";
.bg-fff{
  padding-left: 32px;
  background-color: #fff;
  .select{
    display: flex;
    justify-content: space-between;
    padding: 40px 32px 40px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    .label{
      font-size: 34px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #666;
      line-height: 48px;
    }
    .value{
      font-size: 34px;
      font-family: PingFangSC-Regular, PingFang SC;
      line-height: 48px;
    }
  }
  .title{
    padding: 32px 0;
    font-size: 34px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666;
    line-height: 48px;
    .mini-text{
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999;
      line-height: 40px;
    }
  }
  .tips{
    display: inline-block;
    width: 16px;
    font-size: 34px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #F46!important;
    margin-right: 8px;
  }
}
.footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 32px;
  .btn{
    width: 686px;
    height: 88px;
    line-height: 88px;
    text-align: center;
    background: #E76056;
    border-radius: 16px;
    font-size: 34px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFF;
  }
}
.upload{
  padding-bottom: 150px;
}
.mar-b24{
  margin-bottom: 24px;
}
</style>
