<template>
  <view>
    <custom-nav-bar position="fixed" color="black" :left-text="options.type === 'reply' ? '回复' : '修改'" left-arrow />

    <view class="form-list">
      <view class="form-item form-item-checkbox">
        <view class="label label-must2">
          <text class="label-title">内容</text>
        </view>
        <textarea :value="form.replyContent" @input="headleInput" data-name="replyContent" class="label-textarea"
          placeholder="请输入至少10个字"></textarea>
      </view>
      <view class="form-item form-item-checkbox">
        <view class="label-image">
          <van-uploader :after-read="afterRead" :before-delete="beforeDelete" v-model="fileList" :deletable="true"
          max-count="9">
          <image class="label-image-camera" src="/static/images/icon9.png" ></image>
        </van-uploader>
        </view>
        <view class="label-image-msg">附件不超过9个</view>
      </view>

      <view class="form-button">
        <van-button @click="handSubmit" block color="#FE3B53">提交</van-button>
      </view>
    </view>
  </view>
</template>

<script>
// const app = getApp();
// const { myApi } = app.globalData.api;
import * as myApi from '@/api/myApi';
export default {
  components: {},
  data() {
    return {
      options: {
        type: ''
      },
      form: {
        replyContent: '',
        replyImages: ''
      },
      fileList: [], // 上传的图片
      appealEnclosure:[]
    };
  },
  onLoad(options) {
    this.onLoadClone3389(options);
  },
  methods: {
    onLoadClone3389(options) {
      this.options = options
      if (options.type === 'updata') {
        this.replyCreateGetApi();
      }
    },

    async replyCreateGetApi() {
      const res = await myApi.replyCreateGetApi({
        id: this.options.replyId
      });
      if (res.data) {
        this.form.replyContent = res.data.replyContent
        this.fileList = res.data.replyImages ?
          res.data.replyImages.map((item) => {
            return {
              url: item
            };
          }) :
          []
      }
    },

    async replyCreateApi() {
      let params = {
        ...this.form,
        seekHelpId: this.options.id,
        userId: uni.getStorageSync('userInfoData').userId
      };
      const res = await myApi.replyCreateApi(params);
      if (res.data) {
        //  返回上一页并刷新
        uni.navigateBack({
          delta: 1,
          success: () => {
            // 刷新上一页
            const page = getCurrentPages().pop(); // 获取当前页面栈中的上一个页面
            page.onLoad({
              id: this.options.superId
            }); // 重新加载上一页
          }
        });
      }
    },

    async replyCreatUpdateApi() {
      let params = {
        ...this.form,
        seekHelpId: this.options.id,
        userId: uni.getStorageSync('userInfoData').userId
      };
      const res = await myApi.replyCreatUpdateApi(params);
      if (res.data) {
        //  返回上一页并刷新
        uni.navigateBack({
          delta: 1,
          success: () => {
            //刷新上一页
            const page = getCurrentPages().pop(); // 获取当前页面栈中的上一个页面
            page.onLoad({
              id: this.options.superId
            }); // 重新加载上一页
          }
        });
      }
    },

    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);
      this.fileList.splice(dateil.index, 1)
    },

    headleInput(event) {
      const {
        value
      } = event.detail;
      const {
        name
      } = event.currentTarget.dataset;
      this.form[name] = value;
    },

    handSubmit() {
      this.form.replyImages = this.appealEnclosure

      // 标识哪些数据为必填
      if (!this.form.replyContent) {
        return uni.showToast({
          title: '请输入内容',
          icon: 'none'
        });
      }
      if (!(this.form.replyContent.length >= 10)) {
        return uni.showToast({
          title: '内容不能少于10个字',
          icon: 'none'
        });
      }
      if (this.options.type === 'reply') {
        this.replyCreateApi();
      }
      if (this.options.type === 'updata') {
        this.replyCreatUpdateApi();
      }
    }
  }
};
</script>
<style lang="less">
.form-list {
  .form-item {
    padding: 42rpx 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

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

    .label-must::before {
      content: '*';
      position: absolute;
      right: -16rpx;
      top: 0;
      font-size: 28rpx;
      font-weight: 400;
      color: #fe3b53;
      line-height: 32rpx;
    }
  }

  .form-item-checkbox {
    align-items: flex-start;
    flex-direction: column;

    .label-image-msg {
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
      line-height: 32rpx;
    }

    .label-must2 {
      width: 100%;
      display: flex;
      align-items: center;

      .label-title {
        position: relative;

        &::before {
          content: '*';
          position: absolute;
          right: -16rpx;
          top: 0;
          font-size: 28rpx;
          font-weight: 400;
          color: #fe3b53;
          line-height: 32rpx;
        }
      }

      .label-msg {
        margin-left: 27rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        line-height: 24rpx;
      }
    }
  }
}

.label-textarea {
  width: 100%;
  margin-top: 24rpx;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 32rpx;
  text-align: justify;
  min-height: 550rpx;
  max-height: 100%;
}

.label-image {
  margin: 32rpx 0rpx 28rpx 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .label-image-camera {
    width: 160rpx;
    height: 160rpx;
  }
}

.form-button {
  padding: 25rpx 36rpx;
}
</style>