<template>
  <div id="growUpRelease" >
    <input class="title" type="text" v-model="title" placeholder="标题">
    <textarea class="content" cols="30" rows="10" v-model="content" placeholder="分享你的游记…"></textarea>
    <div class="upload_box">
      <van-uploader v-model="fileList" multiple :after-read="afterRead" />
    </div>
    <van-cell title="选择出行学生" is-link :value="selectedTrip.travelerName" @click="showTripPicker = true" />
    <div class="release_btn_box">
      <van-button class="release_btn" round color="#3074FF" type="primary" :disabled="content == ''" @click="handleRelease"
        >发布</van-button
      >
    </div>

    <van-popup v-model="showTripPicker" round position="bottom">
      <van-picker :columns="tripArr" value-key="travelerName" show-toolbar @cancel="showTripPicker = false" @confirm="onTripConfirm" />
    </van-popup>
  </div>
</template>
<script>
import Axios from 'axios'
export default {
  data() {
    return {
      userInfo: '',
      title: '', //发布的标题
      content: '', //发布的内容
            tripArr: [], //出行人列表
      selectedTrip: '', //选中的出行人
      showTripPicker: false,

      fileList: [
        // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // // Uploader 根据文件后缀来判断是否为图片文件
        // // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { url: 'https://cloud-image', isImage: true },
      ],
    }
  },
  mounted() {
    let userInfo = sessionStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
      this.tripArr = this.userInfo.subUsers
    }
  },
  methods: {
    // 读取到文件后
    afterRead(file) {
      if (Array.isArray(file)) {
        this.fileUpload(file, 0)
      } else {
        this.fileUpload([file], 0)
      }
    },
    fileUpload(files, index) {
      for (let i = index; i < files.length; i++) {
        files[i].status = 'uploading'
        files[i].message = '上传中...'
      }
      let params = new FormData()
      params.append('file', files[index].file, files[index].file.name)
      let config = {
        headers: {
          //添加请求头
          'Content-Type': 'multipart/form-data',
        },
      }
      Axios.post('https://proxy.shunzhi.net/prod/api/file/fileUpload', params, config).then((res) => {
        if (res?.status == 200 && res.data.code == 200) {
          files[index].status = 'succeed'
          files[index].url = res.data.message
          files[index].message = '上传成功'
        } else {
          files[index].status = 'failed'
          files[index].message = '上传失败'
        }
        if (index + 1 < files.length) {
          this.fileUpload(files, index + 1)
        }
      })
    },
    // 点击选择出行人
    handleTrip() {
      if (this.tripArr.length > 0) {
        this.showTripPicker = true
      } else {
        this.$toast('暂无可选出行学生')
      }
    },
    // 选中出行人
    onTripConfirm(item) {
      this.showTripPicker = false
      this.selectedTrip = item
    },
    // 发布
    handleRelease() {
      if (!this.selectedTrip) {
        this.$toast('请选择出行人')
        return
      }
      // 计算图片
      let photos = []
      for (let i in this.fileList) {
        if (this.fileList[i].url) {
          photos.push({
            imgUrl: this.fileList[i].url,
          })
        }
      }
      if (photos.length==0) {
        this.$toast('请至少上传一张照片')
        return
      }
      this.$toast.loading({
        message: '正在发布...',
        duration: 0,
        forbidClick: true,
      })

      this.yxAxios
        .post(`${this.yanxueUrl}/api/StudiesWap/AddStory`, {
          userNum: this.userInfo.centerNo, //中台编号
          travelerNum:this.selectedTrip.travelerNum,
          title: this.title, //标题
          content: this.content, //发布内容
          imgList: photos,
          state: 1,
        })
        .then((res) => {
          this.$toast.clear()
          console.log('发布:', res.data)
          this.$toast.clear()
          if (res.data.status == 1) {
            this.$router.back()
          } else {
            this.$toast(res.data.message)
          }
        })
    },
  },
}
</script>
<style lang="scss">
#growUpRelease {
  min-height: 100%;
  box-sizing: border-box;
  padding-bottom: 300px;
  .selected_tag_box {
    padding: 24px;
    padding-bottom: 0;
    font-size: 26px;
    color: #5f94ff;
    height: 0;
    transition: 0.3s ease;
    &.open {
      height: 40px;
    }
  }
  .title{
    font-size: 32px;
    width: 100%;
    padding: 0 24px;
    margin: 20px 0;
    margin-top: 50px;
    box-sizing: border-box;
    border: none;
    background: transparent;
  }
  .content {
    font-size: 32px;
    width: 100%;
    height: 280px;
    padding: 0 24px;
    margin: 20px 0;
    box-sizing: border-box;
    border: none;
    background: transparent;
  }
  .upload_box {
    padding: 24px;
    .van-uploader__preview {
      margin: 0 27px 27px 0;
      &:nth-of-type(3n) {
        margin-right: 0;
      }
    }
    .van-uploader__preview-image {
      width: 216px;
      height: 216px;
    }
    .van-uploader__upload {
      width: 216px;
      height: 216px;
      margin: 0 0 27px 0;
    }
  }
  .tag_box {
    padding: 24px;
    .tag_item {
      display: inline-block;
      color: #999;
      padding: 0 26px;
      line-height: 55px;
      border-radius: 33px;
      font-size: 26px;
      margin-right: 12px;
      margin-bottom: 20px;
      &.active {
        background: #5f94ff;
        color: #fff;
      }
    }
  }
  .van-cell {
    font-size: 30px;
  }
  .release_btn_box {
    width: 100%;
    height: 260px;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    .release_btn {
      width: 662px;
      position: absolute;
      bottom: 100px;
      left: 44px;
      font-size: 32px;
    }
  }
}
</style>