<template>
  <div id="FeedbookEdit">
    <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>
    <div class="release_btn_box">
      <van-button class="release_btn" round color="#38dfa2" type="primary" :disabled="content == ''" @click="handleRelease"
        >发布</van-button
      >
    </div>
  </div>
</template>
<script>
import Axios from 'axios'
export default {
  data() {
    return {
      userInfo: '',
      content: '', //发布的内容
      fileList: [
        // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // // Uploader 根据文件后缀来判断是否为图片文件
        // // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { url: 'https://cloud-image', isImage: true },
      ],
    }
  },
  mounted() {
    let userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }
  },
  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://ocp.sxsedu.net/szsh/usercenter/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)
        }
      })
    },

    // 发布
    handleRelease() {
      // 计算图片
      let photos = []
      for (let i in this.fileList) {
        if (this.fileList[i].url) {
          photos.push(this.fileList[i].url)
        }
      }
      this.$toast.loading({
        message: '正在发布...',
        duration: 0,
        forbidClick: true,
      })

      this.yxAxios
        .post(`${this.yanxueUrl}/api/StudiesWap/AddFeedBack`, {
          content: this.content,
          userId: this.userInfo.centerNo,
          imgs: photos.join(','),
        })
        .then((res) => {
          this.$toast.clear()
          console.log('发布:', res.data)
          if (res.data.status == 1) {
            this.$router.back()
          } else {
            this.$toast(res.data.message)
          }
        })
    },
  },
}
</script>
<style lang="scss">
#FeedbookEdit {
  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>