<template>
  <view>
    <custom-nav-bar position="fixed" color="black" left-text="志愿服务发布" left-arrow />

    <view class="form-list">
      <view class="form-body">
        <view class="flex flex-v-center flex-between">
          <view class="label">
            <text>点单类型</text>
            <text class="red">*</text>
          </view>
          <view class="label-value flex flex-v-center">
            <picker @change="bindPickerChange" range-key="label" data-name="serviceType" data-list="projectTypeList"
              :value="form.serviceType" :range="projectTypeList">
              <view style="color: #000000" v-if="form.serviceType !== ''">{{form.serviceTypeName }}
              </view>
              <view style="color: #999" v-if="form.serviceType === ''">请选择点单类型</view>
            </picker>
            <image class="ic-xia" src="/static/packages/people/images/ic-xia.png"></image>
          </view>
        </view>
      </view>

      <view class="form-body form-col">
        <view class="label">
          <text>标题</text>
          <text class="red">*</text>
        </view>
        <input class="flex1 textarea-class" @input="headleInput" :value="form.title" type="text" data-name="title"
          placeholder="请输入标题" />
      </view>
    </view>

    <view class="form-body">
      <view class="label">
        <text>内容</text>
        <text class="red">*</text>
      </view>
      <textarea class="textarea-class" maxlength="500" @input="headleInput" data-name="content" placeholder="请输入内容"
        auto-height :value="form.content"></textarea>
      <view class="form-image">
        <van-uploader :after-read="afterRead" :before-delete="beforeDelete" v-model="fileList" :deletable="true"
          max-count="9">
          <image class="camera" src="/static/images/icon9.png"></image>
        </van-uploader>
      </view>
      <view class="form-msg">附件不超过9个，每个大小不超过1M</view>
    </view>

    <view class="form-body form-col">
      <view class="label">
        <text>所需人数</text>
        <text class="red">*</text>
      </view>
      <input class="flex1 textarea-class" @input="headleInput" :value="form.needNum" type="text" data-name="needNum"
        placeholder="请输入" />
    </view>

    <view class="form-body form-col">
      <view class="label">
        <text>发布者</text>
        <text class="red">*</text>
      </view>
      <input class="flex1 textarea-class" @input="headleInput" :value="form.publicUserName" type="text"
        data-name="publicUserName" placeholder="请输入" />
    </view>

    <view class="form-body form-col">
      <view class="label">
        <text>申领有效期</text>
        <text class="red">*</text>
      </view>
      <view class="label-value flex flex-v-center">
        <picker mode="date" :value="form.effectDate" data-name="effectDate" @change="bindPickerChange">
          <view class="uni-input" v-if="form.effectDate !== ''">{{form.effectDate}}</view>
          <view class="uni-input" style="color: #999;" v-if="form.effectDate === ''">请选择有效期</view>
        </picker>
        <image class="ic-xia" src="/static/packages/people/images/ic-xia.png"></image>
      </view>
    </view>

    <view class="form-body">
      <view class="flex flex-v-center flex-between">
        <view class="label">
          <text>服务状态</text>
          <text class="red">*</text>
        </view>
        <view class="label-value flex flex-v-center">
          <picker @change="bindPickerChange" range-key="label" data-name="serviceStatus" data-list="serviceStatusList"
            :value="form.serviceStatus" :range="serviceStatusList">
            <view style="color: #000000" v-if="form.serviceStatus !== ''">
              {{form.serviceStatusName }}
            </view>
            <view style="color: #999" v-if="form.serviceStatus === ''">请选择点单类型</view>
          </picker>
          <image class="ic-xia" src="/static/packages/people/images/ic-xia.png"></image>
        </view>
      </view>
    </view>

    <view class="form-button">
      <van-button v-if="checked" @click="handSubmit" block color="#FE3B53">发布信息</van-button>
      <van-button v-else disabled block color="#C1C1C1">发布信息</van-button>
    </view>

  </view>
</template>

<script>
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  import utils from '@/utils/util'
  import util from '@/utils/util.map'
  export default {
    data() {

      return {
        appealEnclosure: [],
        fileList: [],
        projectTypeList: [],
        serviceStatusList: [],
        form: {
          projectType: '',
          serviceType: '',
          serviceTypeName: '',
          title: '',
          content: '',
          needNum: '',
          publicUserName: '',
          effectDate: '',
          serviceStatus: '',
          serviceStatusName: '',
        },
        checked: false,

        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 5, 1),
      }
    },
    onLoad(options) {
      this.options = options
      this.getTypeApi('people_volunteer_project_type', 'projectTypeList');
      this.getTypeApi('people_volunteer_project_serviceStatus', 'serviceStatusList');
    },
    methods: {
      //  获取群众点单字典
      async getTypeApi(dictType, list) {
        const res = await publicApi.getDictDataApi({
          dictType: dictType,
          pageNo: 1,
          pageSize: 100,
        });
        if (res.code === 0) {
          this[list] = res.data.list
        }
      },
      bindPickerChange(e) {
        const {
          name,
          list
        } = e.target.dataset;
        if (name === 'serviceStatus' || name == 'serviceType') {
          this.form[name] = this[list][e.detail.value].value
          this.checked = true
          this.form[`${name}Name`] = this[list][e.detail.value].label
        } else {
          this.form[name] = e.detail.value
        }
      },
      headleInput(event) {
        const {
          name
        } = event.target.dataset;
        this.form[name] = event.detail.value
      },
      async afterRead(event) {
        const {
          file
        } = event;

        const res = await getApp().globalData.upload({
          file
        });
        if (res.code !== 0) {
          uni.showToast({
            title: '上传图片失败',
            icon: 'none'
          });
          return false;
        }
        // this.fileList.push({url:res.data})
        this.appealEnclosure.push(res.data);
      },
      beforeDelete(file, dateil) {
        this.appealEnclosure.splice(dateil.index, 1);
      },
      handSubmit() {
        // 校验必填字段
        const formKey = Object.keys(utils.filterParams(this.form));
        const required = [
          'serviceType',
          'title',
          'content',
          'needNum',
          'publicUserName',
          'effectDate',
          'serviceStatus',
        ];
        const isRequired = required.every((e) => formKey.includes(e));
        if (!isRequired) {
          return wx.showToast({
            title: '星号为必填！',
            icon: 'none',
          });
        }
        this.addSubmit();
      },
      async addSubmit() {
        const res = await peopleApi.getVolunteerProjectCreateApi({
          ...this.form,
          pics: this.appealEnclosure,
          userId: wx.getStorageSync('userInfoData').userId,
        });
        if (res.data) {
          wx.showToast({
            title: '发布成功',
            icon: 'none',
          });

          let time = setTimeout(() => {
            wx.navigateBack({
              delta: 1,
              success: () => {
                const page = getCurrentPages().pop();
                page.onLoad();
              },
            });
            clearTimeout(time);
          }, 1000);
        } else {
          wx.showToast({
            title: res.msg,
            icon: 'none',
          });
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  .form-list {
    width: 100%;
  }

  .form-body {
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    padding: 40rpx 40rpx 38rpx;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 678rpx;
      height: 1px;
      background-color: #EFEFEF;
    }

    .label {
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
    }

    .label-value {
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
      line-height: 32rpx;

      .ic-xia {
        margin-left: 27rpx;
        width: 32rpx;
        height: 32rpx;
      }
    }

    .picker {
      margin-top: 24rpx;
    }

    .picker-text {
      font-size: 32rpx;
      font-weight: 400;
      color: #999999;
    }

    .picker-line {
      flex: 1;
    }

    .textarea-class {
      margin-top: 26rpx;
      width: 100%;
      font-size: 32rpx;
      font-weight: 400;
    }

    .form-msg {
      font-size: 26rpx;
      font-weight: 400;
      color: #999999;
      line-height: 26rpx;
      margin-top: 28rpx;
    }

    .location {
      width: 32rpx;
      height: 32rpx;
    }

    .location-info {
      margin-top: 26rpx;

      input {
        font-size: 32rpx;
        font-weight: 400;
      }
    }
  }

  .form-col {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right;

    .textarea-class {
      margin-top: 0;
    }

    .card-placeholder {
      font-size: 32rpx;
      font-weight: 400;
      color: #000000;
    }
  }

  .form-location {
    padding: 20rpx 35rpx;
    border-radius: 16rpx;
  }

  .form-treaty {
    padding: 83rpx 40rpx 32rpx;

    .ic-check {
      width: 32rpx;
      height: 32rpx;
    }

    .checbox-text {
      font-size: 28rpx;
      font-weight: 400;
      color: #000000;
      line-height: 28rpx;

      .jump-to {
        color: var(--item-dominant-color);
      }
    }
  }

  .form-button {
    padding: 25rpx 36rpx;
  }

  .form-button-body {
    height: 80rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 80rpx;
    text-align: center;
    background: #c1c1c1;
    border-radius: 8rpx;
  }

  .form-button-body-select {
    background: var(--item-dominant-color);
  }

  .form-image {
    margin: 20rpx 0rpx 20rpx 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .form-image>view {
    width: 31.3%;
    position: relative;
    margin-right: 13.5rpx;
  }

  .form-image>view>image:nth-child(1) {
    width: 100%;
    height: 200rpx;
    border-radius: 10rpx;
  }

  .form-image>view>image:nth-child(2) {
    position: absolute;
    top: -0rpx;
    right: 0rpx;
    width: 40rpx;
    height: 40rpx;
  }

  .camera {
    width: 160rpx;
    height: 160rpx;
  }
</style>